Skip to content

Commit 609cc55

Browse files
TobbeTobbe
authored
fix(tw): settings key should be "tailwindCSS.classAttributes" (redwoodjs#10881)
1 parent ed61922 commit 609cc55

File tree

4 files changed

+83
-97
lines changed

4 files changed

+83
-97
lines changed

‎.changesets/10881.md

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
- fix(tw): settings key should be "tailwindCSS.classAttributes" (#10881) by @Tobbe
2+
3+
Fixes the VSCode settings for our TailwindCSS setup

‎__fixtures__/test-project/.vscode/settings.json

+6-8
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,10 @@
88
"[prisma]": {
99
"editor.formatOnSave": true
1010
},
11-
"tailwindCSS": {
12-
"classAttributes": [
13-
"class",
14-
"className",
15-
"activeClassName",
16-
"errorClassName"
17-
]
18-
}
11+
"tailwindCSS.classAttributes": [
12+
"class",
13+
"className",
14+
"activeClassName",
15+
"errorClassName"
16+
]
1917
}

‎packages/cli/src/commands/setup/ui/__tests__/tailwindcss.test.ts

+50-54
Original file line numberDiff line numberDiff line change
@@ -222,14 +222,14 @@ describe('tailwindcss intellisense settings', () => {
222222
await handler({})
223223

224224
const settingsJson = JSON.parse(readVsCodeSettings())
225-
const tailwindCSS = settingsJson['tailwindCSS']
226-
227-
expect(Array.isArray(tailwindCSS.classAttributes)).toBe(true)
228-
expect(tailwindCSS.classAttributes).toContain('class')
229-
expect(tailwindCSS.classAttributes).toContain('className')
230-
expect(tailwindCSS.classAttributes).toContain('activeClassName')
231-
expect(tailwindCSS.classAttributes).toContain('errorClassName')
232-
expect(tailwindCSS.classAttributes.length).toBe(4)
225+
const twClassAttributes = settingsJson['tailwindCSS.classAttributes']
226+
227+
expect(Array.isArray(twClassAttributes)).toBe(true)
228+
expect(twClassAttributes).toContain('class')
229+
expect(twClassAttributes).toContain('className')
230+
expect(twClassAttributes).toContain('activeClassName')
231+
expect(twClassAttributes).toContain('errorClassName')
232+
expect(twClassAttributes.length).toBe(4)
233233
})
234234

235235
it('adds to existing empty settings file', async () => {
@@ -240,16 +240,15 @@ describe('tailwindcss intellisense settings', () => {
240240
await handler({})
241241

242242
const settingsJson = JSON.parse(readVsCodeSettings())
243-
const tailwindCSS = settingsJson['tailwindCSS']
243+
const twClassAttributes = settingsJson['tailwindCSS.classAttributes']
244244

245245
expect(Object.keys(settingsJson).length).toBe(1)
246-
expect(Object.keys(tailwindCSS).length).toBe(1)
247-
expect(Array.isArray(tailwindCSS.classAttributes)).toBe(true)
248-
expect(tailwindCSS.classAttributes).toContain('class')
249-
expect(tailwindCSS.classAttributes).toContain('className')
250-
expect(tailwindCSS.classAttributes).toContain('activeClassName')
251-
expect(tailwindCSS.classAttributes).toContain('errorClassName')
252-
expect(tailwindCSS.classAttributes.length).toBe(4)
246+
expect(Array.isArray(twClassAttributes)).toBe(true)
247+
expect(twClassAttributes).toContain('class')
248+
expect(twClassAttributes).toContain('className')
249+
expect(twClassAttributes).toContain('activeClassName')
250+
expect(twClassAttributes).toContain('errorClassName')
251+
expect(twClassAttributes.length).toBe(4)
253252
})
254253

255254
it('adds to existing settings file without any tailwindCSS settings', async () => {
@@ -267,16 +266,15 @@ describe('tailwindcss intellisense settings', () => {
267266
await handler({})
268267

269268
const settingsJson = JSON.parse(readVsCodeSettings())
270-
const tailwindCSS = settingsJson['tailwindCSS']
269+
const twClassAttributes = settingsJson['tailwindCSS.classAttributes']
271270

272271
expect(Object.keys(settingsJson).length).toBe(3)
273-
expect(Object.keys(tailwindCSS).length).toBe(1)
274-
expect(Array.isArray(tailwindCSS.classAttributes)).toBe(true)
275-
expect(tailwindCSS.classAttributes).toContain('class')
276-
expect(tailwindCSS.classAttributes).toContain('className')
277-
expect(tailwindCSS.classAttributes).toContain('activeClassName')
278-
expect(tailwindCSS.classAttributes).toContain('errorClassName')
279-
expect(tailwindCSS.classAttributes.length).toBe(4)
272+
expect(Array.isArray(twClassAttributes)).toBe(true)
273+
expect(twClassAttributes).toContain('class')
274+
expect(twClassAttributes).toContain('className')
275+
expect(twClassAttributes).toContain('activeClassName')
276+
expect(twClassAttributes).toContain('errorClassName')
277+
expect(twClassAttributes.length).toBe(4)
280278
})
281279

282280
it('adds to existing settings file with existing tailwindCSS settings', async () => {
@@ -287,27 +285,24 @@ describe('tailwindcss intellisense settings', () => {
287285
' "editor.codeActionsOnSave": {',
288286
' "source.fixAll.eslint": "explicit"',
289287
' },',
290-
' "tailwindCSS": {',
291-
' "emmetCompletions": true',
292-
' }',
288+
' "tailwindCSS.emmetCompletions": true',
293289
'}',
294290
].join('\n'),
295291
})
296292

297293
await handler({})
298294

299295
const settingsJson = JSON.parse(readVsCodeSettings())
300-
const tailwindCSS = settingsJson['tailwindCSS']
301-
302-
expect(Object.keys(settingsJson).length).toBe(3)
303-
expect(Object.keys(tailwindCSS).length).toBe(2)
304-
expect(tailwindCSS.emmetCompletions).toBeTruthy()
305-
expect(Array.isArray(tailwindCSS.classAttributes)).toBe(true)
306-
expect(tailwindCSS.classAttributes).toContain('class')
307-
expect(tailwindCSS.classAttributes).toContain('className')
308-
expect(tailwindCSS.classAttributes).toContain('activeClassName')
309-
expect(tailwindCSS.classAttributes).toContain('errorClassName')
310-
expect(tailwindCSS.classAttributes.length).toBe(4)
296+
const twClassAttributes = settingsJson['tailwindCSS.classAttributes']
297+
298+
expect(Object.keys(settingsJson).length).toBe(4)
299+
expect(settingsJson['tailwindCSS.emmetCompletions']).toBeTruthy()
300+
expect(Array.isArray(twClassAttributes)).toBe(true)
301+
expect(twClassAttributes).toContain('class')
302+
expect(twClassAttributes).toContain('className')
303+
expect(twClassAttributes).toContain('activeClassName')
304+
expect(twClassAttributes).toContain('errorClassName')
305+
expect(twClassAttributes.length).toBe(4)
311306
})
312307

313308
// This is what I decided to do now. If good arguments are made to change
@@ -320,29 +315,30 @@ describe('tailwindcss intellisense settings', () => {
320315
' "editor.codeActionsOnSave": {',
321316
' "source.fixAll.eslint": "explicit"',
322317
' },',
323-
' "tailwindCSS": {',
324-
' "emmetCompletions": true,',
325-
' "classAttributes": ["class", "className", "ngClass"]',
326-
' }',
318+
' "tailwindCSS.emmetCompletions": true,',
319+
' "tailwindCSS.classAttributes": [',
320+
' "class",',
321+
' "className",',
322+
' "ngClass"',
323+
' ]',
327324
'}',
328325
].join('\n'),
329326
})
330327

331328
await handler({})
332329

333330
const settingsJson = JSON.parse(readVsCodeSettings())
334-
const tailwindCSS = settingsJson['tailwindCSS']
335-
336-
expect(Object.keys(settingsJson).length).toBe(3)
337-
expect(Object.keys(tailwindCSS).length).toBe(2)
338-
expect(tailwindCSS.emmetCompletions).toBeTruthy()
339-
expect(Array.isArray(tailwindCSS.classAttributes)).toBe(true)
340-
expect(tailwindCSS.classAttributes).toContain('class')
341-
expect(tailwindCSS.classAttributes).toContain('className')
342-
expect(tailwindCSS.classAttributes).toContain('ngClass')
343-
expect(tailwindCSS.classAttributes).toContain('activeClassName')
344-
expect(tailwindCSS.classAttributes).toContain('errorClassName')
345-
expect(tailwindCSS.classAttributes.length).toBe(5)
331+
const twClassAttributes = settingsJson['tailwindCSS.classAttributes']
332+
333+
expect(Object.keys(settingsJson).length).toBe(4)
334+
expect(settingsJson['tailwindCSS.emmetCompletions']).toBeTruthy()
335+
expect(Array.isArray(twClassAttributes)).toBe(true)
336+
expect(twClassAttributes).toContain('class')
337+
expect(twClassAttributes).toContain('className')
338+
expect(twClassAttributes).toContain('ngClass')
339+
expect(twClassAttributes).toContain('activeClassName')
340+
expect(twClassAttributes).toContain('errorClassName')
341+
expect(twClassAttributes.length).toBe(5)
346342
})
347343
})
348344

‎packages/cli/src/commands/setup/ui/libraries/tailwindcss.js

+24-35
Original file line numberDiff line numberDiff line change
@@ -323,9 +323,12 @@ export const handler = async ({ force, install }) => {
323323
skip: () => !usingVSCode() && "Looks like you're not using VS Code",
324324
task: () => {
325325
// Adds support for Redwood specific className props to tailwind intellisense
326-
// "tailwindCSS": {
327-
// "classAttributes": ["class", "className", "activeClassName", "errorClassName"]
328-
// }
326+
// "tailwindCSS.classAttributes": [
327+
// "class",
328+
// "className",
329+
// "activeClassName",
330+
// "errorClassName"
331+
// ]
329332
// The default value for this setting is:
330333
// ["class", "className", "ngClass", "class:list"]
331334

@@ -334,16 +337,16 @@ export const handler = async ({ force, install }) => {
334337
'.vscode/settings.json',
335338
)
336339

337-
const newTwSettingsJson = {
338-
classAttributes: [
339-
'class',
340-
'className',
341-
'activeClassName',
342-
'errorClassName',
343-
],
344-
}
340+
const classAttributes = [
341+
'class',
342+
'className',
343+
'activeClassName',
344+
'errorClassName',
345+
]
345346

346-
let newSettingsJson = { tailwindCSS: { ...newTwSettingsJson } }
347+
let newSettingsJson = {
348+
['tailwindCSS.classAttributes']: classAttributes,
349+
}
347350

348351
if (fs.existsSync(VS_CODE_SETTINGS_PATH)) {
349352
const originalSettingsFile = fs.readFileSync(
@@ -353,30 +356,16 @@ export const handler = async ({ force, install }) => {
353356
const originalSettingsJson = JSON.parse(
354357
originalSettingsFile || '{}',
355358
)
356-
const originalTwSettingsJson = originalSettingsJson['tailwindCSS']
357-
358-
if (originalTwSettingsJson) {
359-
const mergedClassAttributes = Array.from(
360-
new Set([
361-
...newTwSettingsJson.classAttributes,
362-
...(originalTwSettingsJson.classAttributes || []),
363-
]),
364-
)
359+
const originalTwClassAttributesJson =
360+
originalSettingsJson['tailwindCSS.classAttributes'] || []
365361

366-
newSettingsJson = {
367-
...originalSettingsJson,
368-
tailwindCSS: {
369-
...originalTwSettingsJson,
370-
classAttributes: mergedClassAttributes,
371-
},
372-
}
373-
} else {
374-
newSettingsJson = {
375-
...originalSettingsJson,
376-
tailwindCSS: {
377-
...newTwSettingsJson,
378-
},
379-
}
362+
const mergedClassAttributes = Array.from(
363+
new Set([...classAttributes, ...originalTwClassAttributesJson]),
364+
)
365+
366+
newSettingsJson = {
367+
...originalSettingsJson,
368+
['tailwindCSS.classAttributes']: mergedClassAttributes,
380369
}
381370
}
382371

0 commit comments

Comments
 (0)