diff --git a/packages/cli/package.json b/packages/cli/package.json index 0bc0e2192..6539ed726 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -49,6 +49,7 @@ "@babel/core": "^7.22.17", "@babel/parser": "^7.22.16", "@babel/plugin-transform-typescript": "^7.22.15", + "@vue/compiler-sfc": "^3.3.6", "chalk": "5.3.0", "commander": "^11.0.0", "cosmiconfig": "^8.3.6", diff --git a/packages/cli/src/utils/transformers/transform-css-vars.ts b/packages/cli/src/utils/transformers/transform-css-vars.ts index f99da6b84..97e2b6a88 100644 --- a/packages/cli/src/utils/transformers/transform-css-vars.ts +++ b/packages/cli/src/utils/transformers/transform-css-vars.ts @@ -1,5 +1,7 @@ -import { SyntaxKind } from 'ts-morph' import type * as z from 'zod' +import MagicString from 'magic-string' +import { parse, walk } from '@vue/compiler-sfc' +import { SyntaxKind } from 'ts-morph' import type { registryBaseColorSchema } from '@/src/utils/registry/schema' import type { Transformer } from '@/src/utils/transformers' @@ -9,22 +11,32 @@ export const transformCssVars: Transformer = async ({ baseColor, }) => { // No transform if using css variables. - if (config.tailwind?.cssVariables || !baseColor?.inlineColors) + if (config.tailwind?.cssVariables || !baseColor?.inlineColors || sourceFile.getFilePath().endsWith('ts')) + return sourceFile + + const parsed = parse(sourceFile.getText()) + const template = parsed.descriptor.template + + if (!template) return sourceFile sourceFile.getDescendantsOfKind(SyntaxKind.StringLiteral).forEach((node) => { + if (template.loc.start.offset >= node.getPos()) + return sourceFile + const value = node.getText() - if (value.includes('cn(')) { - const splitted = value.split('\'').map(i => applyColorMapping(i, baseColor.inlineColors)) - node.replaceWithText(`${splitted.join('\'')}`) + const hasClosingDoubleQuote = value.match(/"/g)?.length === 2 + if (value.search('\'') === -1 && hasClosingDoubleQuote) { + const mapped = applyColorMapping(value.replace(/"/g, ''), baseColor.inlineColors) + node.replaceWithText(`"${mapped}"`) } - else if (value) { - const valueWithColorMapping = applyColorMapping( - value.replace(/"/g, ''), - baseColor.inlineColors, - ) - node.replaceWithText(`"${valueWithColorMapping.trim()}"`) + else { + const s = new MagicString(value) + s.replace(/'(.*?)'/g, (substring) => { + return `'${applyColorMapping(substring.replace(/\'/g, ''), baseColor.inlineColors)}'` + }) + node.replaceWithText(s.toString()) } }) @@ -103,6 +115,6 @@ export function applyColorMapping( if (!lightMode.includes(className)) lightMode.push(className) } - - return `${lightMode.join(' ')} ${darkMode.join(' ').trim()}` + const combined = `${lightMode.join(' ').replace(/\'/g, '')} ${darkMode.join(' ').trim()}`.trim() + return `${combined}` } diff --git a/packages/cli/test/utils/__snapshots__/transform-cjs-to-esm.test.ts.snap b/packages/cli/test/utils/__snapshots__/transform-cjs-to-esm.test.ts.snap index 0e927a781..68143755f 100644 --- a/packages/cli/test/utils/__snapshots__/transform-cjs-to-esm.test.ts.snap +++ b/packages/cli/test/utils/__snapshots__/transform-cjs-to-esm.test.ts.snap @@ -1,8 +1,7 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html exports[`handle tailwind config template correctly 1`] = ` -" -import animate from \\"tailwindcss-animate\\" +"import animate from \\"tailwindcss-animate\\" /** @type {import('tailwindcss').Config} */ export default { @@ -43,9 +42,7 @@ export default { `; exports[`handle tailwind config template correctly 2`] = ` -" - -import animate from \\"tailwindcss-animate\\" +"import animate from \\"tailwindcss-animate\\" /** @type {import('tailwindcss').Config} */ export default { diff --git a/packages/cli/test/utils/__snapshots__/transform-css-vars.test.ts.snap b/packages/cli/test/utils/__snapshots__/transform-css-vars.test.ts.snap index 9a57aa199..964b9aad6 100644 --- a/packages/cli/test/utils/__snapshots__/transform-css-vars.test.ts.snap +++ b/packages/cli/test/utils/__snapshots__/transform-css-vars.test.ts.snap @@ -17,6 +17,6 @@ exports[`transform css vars 2`] = ` exports[`transform css vars 3`] = ` " \\"" `; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4c387551e..d8b07ed79 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -137,7 +137,7 @@ importers: version: 3.3.4 autoprefixer: specifier: ^10.4.16 - version: 10.4.16(postcss@8.4.30) + version: 10.4.16(postcss@8.4.31) lodash.template: specifier: ^4.5.0 version: 4.5.0 @@ -167,7 +167,7 @@ importers: version: 4.4.11(@types/node@20.7.0) vitepress: specifier: ^1.0.0-rc.20 - version: 1.0.0-rc.20(@algolia/client-search@4.20.0)(@types/node@20.7.0)(postcss@8.4.30)(search-insights@2.8.3) + version: 1.0.0-rc.20(@algolia/client-search@4.20.0)(@types/node@20.7.0)(postcss@8.4.31)(search-insights@2.8.3) vue-tsc: specifier: ^1.8.15 version: 1.8.15(typescript@5.2.2) @@ -186,6 +186,9 @@ importers: '@babel/plugin-transform-typescript': specifier: ^7.22.15 version: 7.22.15(@babel/core@7.23.0) + '@vue/compiler-sfc': + specifier: ^3.3.6 + version: 3.3.6 chalk: specifier: 5.3.0 version: 5.3.0 @@ -2709,12 +2712,28 @@ packages: estree-walker: 2.0.2 source-map-js: 1.0.2 + /@vue/compiler-core@3.3.6: + resolution: {integrity: sha512-2JNjemwaNwf+MkkatATVZi7oAH1Hx0B04DdPH3ZoZ8vKC1xZVP7nl4HIsk8XYd3r+/52sqqoz9TWzYc3yE9dqA==} + dependencies: + '@babel/parser': 7.23.0 + '@vue/shared': 3.3.6 + estree-walker: 2.0.2 + source-map-js: 1.0.2 + dev: false + /@vue/compiler-dom@3.3.4: resolution: {integrity: sha512-wyM+OjOVpuUukIq6p5+nwHYtj9cFroz9cwkfmP9O1nzH68BenTTv0u7/ndggT8cIQlnBeOo6sUT/gvHcIkLA5w==} dependencies: '@vue/compiler-core': 3.3.4 '@vue/shared': 3.3.4 + /@vue/compiler-dom@3.3.6: + resolution: {integrity: sha512-1MxXcJYMHiTPexjLAJUkNs/Tw2eDf2tY3a0rL+LfuWyiKN2s6jvSwywH3PWD8bKICjfebX3GWx2Os8jkRDq3Ng==} + dependencies: + '@vue/compiler-core': 3.3.6 + '@vue/shared': 3.3.6 + dev: false + /@vue/compiler-sfc@3.3.4: resolution: {integrity: sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==} dependencies: @@ -2729,12 +2748,34 @@ packages: postcss: 8.4.30 source-map-js: 1.0.2 + /@vue/compiler-sfc@3.3.6: + resolution: {integrity: sha512-/Kms6du2h1VrXFreuZmlvQej8B1zenBqIohP0690IUBkJjsFvJxY0crcvVRJ0UhMgSR9dewB+khdR1DfbpArJA==} + dependencies: + '@babel/parser': 7.23.0 + '@vue/compiler-core': 3.3.6 + '@vue/compiler-dom': 3.3.6 + '@vue/compiler-ssr': 3.3.6 + '@vue/reactivity-transform': 3.3.6 + '@vue/shared': 3.3.6 + estree-walker: 2.0.2 + magic-string: 0.30.5 + postcss: 8.4.31 + source-map-js: 1.0.2 + dev: false + /@vue/compiler-ssr@3.3.4: resolution: {integrity: sha512-m0v6oKpup2nMSehwA6Uuu+j+wEwcy7QmwMkVNVfrV9P2qE5KshC6RwOCq8fjGS/Eak/uNb8AaWekfiXxbBB6gQ==} dependencies: '@vue/compiler-dom': 3.3.4 '@vue/shared': 3.3.4 + /@vue/compiler-ssr@3.3.6: + resolution: {integrity: sha512-QTIHAfDCHhjXlYGkUg5KH7YwYtdUM1vcFl/FxFDlD6d0nXAmnjizka3HITp8DGudzHndv2PjKVS44vqqy0vP4w==} + dependencies: + '@vue/compiler-dom': 3.3.6 + '@vue/shared': 3.3.6 + dev: false + /@vue/devtools-api@6.5.0: resolution: {integrity: sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==} @@ -2766,6 +2807,16 @@ packages: estree-walker: 2.0.2 magic-string: 0.30.3 + /@vue/reactivity-transform@3.3.6: + resolution: {integrity: sha512-RlJl4dHfeO7EuzU1iJOsrlqWyJfHTkJbvYz/IOJWqu8dlCNWtxWX377WI0VsbAgBizjwD+3ZjdnvSyyFW1YVng==} + dependencies: + '@babel/parser': 7.23.0 + '@vue/compiler-core': 3.3.6 + '@vue/shared': 3.3.6 + estree-walker: 2.0.2 + magic-string: 0.30.5 + dev: false + /@vue/reactivity@3.3.4: resolution: {integrity: sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==} dependencies: @@ -2796,6 +2847,10 @@ packages: /@vue/shared@3.3.4: resolution: {integrity: sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==} + /@vue/shared@3.3.6: + resolution: {integrity: sha512-Xno5pEqg8SVhomD0kTSmfh30ZEmV/+jZtyh39q6QflrjdJCXah5lrnOLi9KB6a5k5aAHXMXjoMnxlzUkCNfWLQ==} + dev: false + /@vue/typescript@1.8.15(typescript@5.2.2): resolution: {integrity: sha512-qWyanQKXOsK84S8rP7QBrqsvUdQ0nZABZmTjXMpb3ox4Bp5IbkscREA3OPUrkgl64mAxwwCzIWcOc3BPTCPjQw==} dependencies: @@ -3124,7 +3179,7 @@ packages: tslib: 2.6.2 dev: false - /autoprefixer@10.4.16(postcss@8.4.30): + /autoprefixer@10.4.16(postcss@8.4.31): resolution: {integrity: sha512-7vd3UC6xKp0HLfua5IjZlcXvGAGy7cBAXTg2lyQ/8WpNhd6SiZ8Be+xm3FyBSYJx5GKcpRCzBh7RH4/0dnY+uQ==} engines: {node: ^10 || ^12 || >=14} hasBin: true @@ -3136,7 +3191,7 @@ packages: fraction.js: 4.3.6 normalize-range: 0.1.2 picocolors: 1.0.0 - postcss: 8.4.30 + postcss: 8.4.31 postcss-value-parser: 4.2.0 dev: true @@ -5974,6 +6029,13 @@ packages: dependencies: '@jridgewell/sourcemap-codec': 1.4.15 + /magic-string@0.30.5: + resolution: {integrity: sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==} + engines: {node: '>=12'} + dependencies: + '@jridgewell/sourcemap-codec': 1.4.15 + dev: false + /make-error@1.3.6: resolution: {integrity: sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==} @@ -6842,6 +6904,14 @@ packages: picocolors: 1.0.0 source-map-js: 1.0.2 + /postcss@8.4.31: + resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==} + engines: {node: ^10 || ^12 || >=14} + dependencies: + nanoid: 3.3.6 + picocolors: 1.0.0 + source-map-js: 1.0.2 + /potpack@1.0.2: resolution: {integrity: sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ==} dev: false @@ -8311,7 +8381,7 @@ packages: fsevents: 2.3.3 dev: true - /vitepress@1.0.0-rc.20(@algolia/client-search@4.20.0)(@types/node@20.7.0)(postcss@8.4.30)(search-insights@2.8.3): + /vitepress@1.0.0-rc.20(@algolia/client-search@4.20.0)(@types/node@20.7.0)(postcss@8.4.31)(search-insights@2.8.3): resolution: {integrity: sha512-CykMUJ8JLxLcGWek0ew3wln4RYbsOd1+0YzXITTpajggpynm2S331TNkJVOkHrMRc6GYe3y4pS40GfgcW0ZwAw==} hasBin: true peerDependencies: @@ -8332,7 +8402,7 @@ packages: focus-trap: 7.5.3 mark.js: 8.11.1 minisearch: 6.1.0 - postcss: 8.4.30 + postcss: 8.4.31 shiki: 0.14.4 vite: 4.4.11(@types/node@20.7.0) vue: 3.3.4