Merge pull request #353 from nado1001/fix/update-tailwind-config-format

Fix/update tailwind config format

Author: nado1001

example/with-css-variables/package.json

@@ -19,7 +19,7 @@
     "@types/react-dom": "18.2.18",
     "autoprefixer": "10.4.16",
     "postcss": "8.4.33",
-    "sd-tailwindcss-transformer": "^1.4.1",
+    "sd-tailwindcss-transformer": "^1.4.2",
     "style-dictionary": "3.9.1",
     "tailwindcss": "3.4.0",
     "typescript": "4.9.5"

example/with-css-variables/sd.config.js

@@ -9,6 +9,7 @@ const sdConfig = makeSdTailwindConfig({
   formatType: 'cjs',
   isVariables: true,
   prefix: PREFIX,
+  extend: true,
   source: [`./style-dictionary/tokens/**/*.json`],
   transforms: ['attribute/cti', 'name/cti/kebab'],
   buildPath: `./`,

example/with-css-variables/styles/tailwind.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 15 Nov 2023 12:36:10 GMT
+ * Generated on Sun, 07 Apr 2024 11:20:44 GMT
  */
 
 :root {

example/with-css-variables/tailwind.config.cjs

@@ -1,5 +1,5 @@
 /** @type {import('tailwindcss').Config} */
- module.exports = {
+module.exports = {
   mode: "jit",
   content: ["./pages/**/*.{js,ts,jsx,tsx}","./components/**/*.{js,ts,jsx,tsx}"],
   darkMode: "class",
@@ -36,5 +36,5 @@
       }
     },
   },
- plugins: [require("@tailwindcss/typography"),require("@tailwindcss/container-queries")]
+  plugins: [require("@tailwindcss/typography"),require("@tailwindcss/container-queries")]
 }

example/with-css-variables/yarn.lock

@@ -1097,10 +1097,10 @@ scheduler@^0.23.0:
   dependencies:
     loose-envify "^1.1.0"
 
-sd-tailwindcss-transformer@^1.4.1:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/sd-tailwindcss-transformer/-/sd-tailwindcss-transformer-1.4.1.tgz#40403243bdaee6b1c78a4d12cc59e2dea3f59075"
-  integrity sha512-g/CbF9vj9zZUGUsj7QrCLckCDLNhG0w+ppssmN+uT/u7FCUV9EPE42uwjVghNBrb0ggqxrZcVoc/4Kl+tqDeSQ==
+sd-tailwindcss-transformer@^1.4.2:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/sd-tailwindcss-transformer/-/sd-tailwindcss-transformer-1.4.2.tgz#e27fe8875a7c4e932a1123235bab9577d0996a14"
+  integrity sha512-vFSahWFeQvxRtjYgcbJMd9s6ILYtAagx6nmFayZymPa7foHmaa8iaJ+63xlplcnI7P17G+9Ji7kofdbFfmDtGA==
 
 sentence-case@^3.0.4:
   version "3.0.4"

src/utils.ts

@@ -35,26 +35,29 @@ export const getConfigValue = <T>(value: T | undefined, defaultValue: T) => {
   return value
 }
 
-const joinSpace = (value: string, type?: string, space = ' '.repeat(4)) => {
+const joinSpace = (value: string, spaceNum: number, type?: string) => {
+  const space = ' '.repeat(spaceNum)
+
   if (type !== 'all') {
     return value
   }
+
   return space + value
 }
 
-export const unquoteFromKeys = (json: string, type?: string) => {
+export const unquoteFromKeys = (json: string, type?: string, spaceNum = 4) => {
   const result = json.replace(/"(\\[^]|[^\\"])*"\s*:?/g, (match) => {
     if (/[0-9]/.test(match) && /[a-zA-Z]/.test(match)) {
       return match
     }
     if (/:$/.test(match)) {
-      return joinSpace(match.replace(/^"|"(?=\s*:$)/g, ''), type)
+      return joinSpace(match.replace(/^"|"(?=\s*:$)/g, ''), spaceNum, type)
     }
 
     return match
   })
 
-  return result.replace(/}/g, (match) => joinSpace(match, type))
+  return result.replace(/}/g, (match) => joinSpace(match, spaceNum, type))
 }
 
 export const getTemplateConfigByType = (
@@ -66,8 +69,10 @@ export const getTemplateConfigByType = (
   plugins: string[]
 ) => {
   const extendTheme = extend
-    ? `theme: { extend: ${unquoteFromKeys(content, type)}, },`
-    : `theme: ${unquoteFromKeys(content, type)},`
+    ? `theme: {
+    extend: ${unquoteFromKeys(content, type, 4)},
+  },`
+    : `theme: ${unquoteFromKeys(content, type, 2)},`
 
   const getTemplateConfig = () => {
     let config = `{
@@ -77,15 +82,15 @@ export const getTemplateConfigByType = (
   ${extendTheme}`
 
     if (plugins.length > 0) {
-      config += `\n plugins: [${plugins}]`
+      config += `\n  plugins: [${plugins}]`
     }
 
     config += '\n}'
 
     return config
   }
 
-  const configs = `/** @type {import('tailwindcss').Config} */\n module.exports = ${getTemplateConfig()}`
+  const configs = `/** @type {import('tailwindcss').Config} */\nmodule.exports = ${getTemplateConfig()}`
 
   return configs
 }