Skip to content

Commit

Permalink
fix(tw): settings key should be "tailwindCSS.classAttributes" (redwoo…
Browse files Browse the repository at this point in the history 
…djs#10881)
  • Loading branch information
@Tobbe
Tobbe authored Jun 26, 2024
1 parent ed61922 commit 609cc55
Show file tree
Hide file tree
Showing 4 changed files with 83 additions and 97 deletions.
3 changes: 3 additions & 0 deletions .changesets/10881.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
- fix(tw): settings key should be "tailwindCSS.classAttributes" (#10881) by @Tobbe

Fixes the VSCode settings for our TailwindCSS setup
14 changes: 6 additions & 8 deletions __fixtures__/test-project/.vscode/settings.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,10 @@
"[prisma]": {
"editor.formatOnSave": true
},
"tailwindCSS": {
"classAttributes": [
"class",
"className",
"activeClassName",
"errorClassName"
]
}
"tailwindCSS.classAttributes": [
"class",
"className",
"activeClassName",
"errorClassName"
]
}
104 changes: 50 additions & 54 deletions packages/cli/src/commands/setup/ui/__tests__/tailwindcss.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -222,14 +222,14 @@ describe('tailwindcss intellisense settings', () => {
await handler({})

const settingsJson = JSON.parse(readVsCodeSettings())
const tailwindCSS = settingsJson['tailwindCSS']

expect(Array.isArray(tailwindCSS.classAttributes)).toBe(true)
expect(tailwindCSS.classAttributes).toContain('class')
expect(tailwindCSS.classAttributes).toContain('className')
expect(tailwindCSS.classAttributes).toContain('activeClassName')
expect(tailwindCSS.classAttributes).toContain('errorClassName')
expect(tailwindCSS.classAttributes.length).toBe(4)
const twClassAttributes = settingsJson['tailwindCSS.classAttributes']

expect(Array.isArray(twClassAttributes)).toBe(true)
expect(twClassAttributes).toContain('class')
expect(twClassAttributes).toContain('className')
expect(twClassAttributes).toContain('activeClassName')
expect(twClassAttributes).toContain('errorClassName')
expect(twClassAttributes.length).toBe(4)
})

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

const settingsJson = JSON.parse(readVsCodeSettings())
const tailwindCSS = settingsJson['tailwindCSS']
const twClassAttributes = settingsJson['tailwindCSS.classAttributes']

expect(Object.keys(settingsJson).length).toBe(1)
expect(Object.keys(tailwindCSS).length).toBe(1)
expect(Array.isArray(tailwindCSS.classAttributes)).toBe(true)
expect(tailwindCSS.classAttributes).toContain('class')
expect(tailwindCSS.classAttributes).toContain('className')
expect(tailwindCSS.classAttributes).toContain('activeClassName')
expect(tailwindCSS.classAttributes).toContain('errorClassName')
expect(tailwindCSS.classAttributes.length).toBe(4)
expect(Array.isArray(twClassAttributes)).toBe(true)
expect(twClassAttributes).toContain('class')
expect(twClassAttributes).toContain('className')
expect(twClassAttributes).toContain('activeClassName')
expect(twClassAttributes).toContain('errorClassName')
expect(twClassAttributes.length).toBe(4)
})

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

const settingsJson = JSON.parse(readVsCodeSettings())
const tailwindCSS = settingsJson['tailwindCSS']
const twClassAttributes = settingsJson['tailwindCSS.classAttributes']

expect(Object.keys(settingsJson).length).toBe(3)
expect(Object.keys(tailwindCSS).length).toBe(1)
expect(Array.isArray(tailwindCSS.classAttributes)).toBe(true)
expect(tailwindCSS.classAttributes).toContain('class')
expect(tailwindCSS.classAttributes).toContain('className')
expect(tailwindCSS.classAttributes).toContain('activeClassName')
expect(tailwindCSS.classAttributes).toContain('errorClassName')
expect(tailwindCSS.classAttributes.length).toBe(4)
expect(Array.isArray(twClassAttributes)).toBe(true)
expect(twClassAttributes).toContain('class')
expect(twClassAttributes).toContain('className')
expect(twClassAttributes).toContain('activeClassName')
expect(twClassAttributes).toContain('errorClassName')
expect(twClassAttributes.length).toBe(4)
})

it('adds to existing settings file with existing tailwindCSS settings', async () => {
Expand All @@ -287,27 +285,24 @@ describe('tailwindcss intellisense settings', () => {
' "editor.codeActionsOnSave": {',
' "source.fixAll.eslint": "explicit"',
' },',
' "tailwindCSS": {',
' "emmetCompletions": true',
' }',
' "tailwindCSS.emmetCompletions": true',
'}',
].join('\n'),
})

await handler({})

const settingsJson = JSON.parse(readVsCodeSettings())
const tailwindCSS = settingsJson['tailwindCSS']

expect(Object.keys(settingsJson).length).toBe(3)
expect(Object.keys(tailwindCSS).length).toBe(2)
expect(tailwindCSS.emmetCompletions).toBeTruthy()
expect(Array.isArray(tailwindCSS.classAttributes)).toBe(true)
expect(tailwindCSS.classAttributes).toContain('class')
expect(tailwindCSS.classAttributes).toContain('className')
expect(tailwindCSS.classAttributes).toContain('activeClassName')
expect(tailwindCSS.classAttributes).toContain('errorClassName')
expect(tailwindCSS.classAttributes.length).toBe(4)
const twClassAttributes = settingsJson['tailwindCSS.classAttributes']

expect(Object.keys(settingsJson).length).toBe(4)
expect(settingsJson['tailwindCSS.emmetCompletions']).toBeTruthy()
expect(Array.isArray(twClassAttributes)).toBe(true)
expect(twClassAttributes).toContain('class')
expect(twClassAttributes).toContain('className')
expect(twClassAttributes).toContain('activeClassName')
expect(twClassAttributes).toContain('errorClassName')
expect(twClassAttributes.length).toBe(4)
})

// This is what I decided to do now. If good arguments are made to change
Expand All @@ -320,29 +315,30 @@ describe('tailwindcss intellisense settings', () => {
' "editor.codeActionsOnSave": {',
' "source.fixAll.eslint": "explicit"',
' },',
' "tailwindCSS": {',
' "emmetCompletions": true,',
' "classAttributes": ["class", "className", "ngClass"]',
' }',
' "tailwindCSS.emmetCompletions": true,',
' "tailwindCSS.classAttributes": [',
' "class",',
' "className",',
' "ngClass"',
' ]',
'}',
].join('\n'),
})

await handler({})

const settingsJson = JSON.parse(readVsCodeSettings())
const tailwindCSS = settingsJson['tailwindCSS']

expect(Object.keys(settingsJson).length).toBe(3)
expect(Object.keys(tailwindCSS).length).toBe(2)
expect(tailwindCSS.emmetCompletions).toBeTruthy()
expect(Array.isArray(tailwindCSS.classAttributes)).toBe(true)
expect(tailwindCSS.classAttributes).toContain('class')
expect(tailwindCSS.classAttributes).toContain('className')
expect(tailwindCSS.classAttributes).toContain('ngClass')
expect(tailwindCSS.classAttributes).toContain('activeClassName')
expect(tailwindCSS.classAttributes).toContain('errorClassName')
expect(tailwindCSS.classAttributes.length).toBe(5)
const twClassAttributes = settingsJson['tailwindCSS.classAttributes']

expect(Object.keys(settingsJson).length).toBe(4)
expect(settingsJson['tailwindCSS.emmetCompletions']).toBeTruthy()
expect(Array.isArray(twClassAttributes)).toBe(true)
expect(twClassAttributes).toContain('class')
expect(twClassAttributes).toContain('className')
expect(twClassAttributes).toContain('ngClass')
expect(twClassAttributes).toContain('activeClassName')
expect(twClassAttributes).toContain('errorClassName')
expect(twClassAttributes.length).toBe(5)
})
})

Expand Down
59 changes: 24 additions & 35 deletions packages/cli/src/commands/setup/ui/libraries/tailwindcss.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -323,9 +323,12 @@ export const handler = async ({ force, install }) => {
skip: () => !usingVSCode() && "Looks like you're not using VS Code",
task: () => {
// Adds support for Redwood specific className props to tailwind intellisense
// "tailwindCSS": {
// "classAttributes": ["class", "className", "activeClassName", "errorClassName"]
// }
// "tailwindCSS.classAttributes": [
// "class",
// "className",
// "activeClassName",
// "errorClassName"
// ]
// The default value for this setting is:
// ["class", "className", "ngClass", "class:list"]

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

const newTwSettingsJson = {
classAttributes: [
'class',
'className',
'activeClassName',
'errorClassName',
],
}
const classAttributes = [
'class',
'className',
'activeClassName',
'errorClassName',
]

let newSettingsJson = { tailwindCSS: { ...newTwSettingsJson } }
let newSettingsJson = {
['tailwindCSS.classAttributes']: classAttributes,
}

if (fs.existsSync(VS_CODE_SETTINGS_PATH)) {
const originalSettingsFile = fs.readFileSync(
Expand All @@ -353,30 +356,16 @@ export const handler = async ({ force, install }) => {
const originalSettingsJson = JSON.parse(
originalSettingsFile || '{}',
)
const originalTwSettingsJson = originalSettingsJson['tailwindCSS']

if (originalTwSettingsJson) {
const mergedClassAttributes = Array.from(
new Set([
...newTwSettingsJson.classAttributes,
...(originalTwSettingsJson.classAttributes || []),
]),
)
const originalTwClassAttributesJson =
originalSettingsJson['tailwindCSS.classAttributes'] || []

newSettingsJson = {
...originalSettingsJson,
tailwindCSS: {
...originalTwSettingsJson,
classAttributes: mergedClassAttributes,
},
}
} else {
newSettingsJson = {
...originalSettingsJson,
tailwindCSS: {
...newTwSettingsJson,
},
}
const mergedClassAttributes = Array.from(
new Set([...classAttributes, ...originalTwClassAttributesJson]),
)

newSettingsJson = {
...originalSettingsJson,
['tailwindCSS.classAttributes']: mergedClassAttributes,
}
}

Expand Down

0 comments on commit 609cc55

Please sign in to comment.