Merge pull request #350 from pivotpointux/addExtendFlag

fix: add extend flag to opionally generate config within extend key o…
nado1001 · Apr 7, 2024 · 9f44ce0 · 9f44ce0
2 parents 4a48e5e + 28499af
commit 9f44ce0
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -191,6 +191,7 @@ Optional except for `type`.
 | type              | Set the name of each theme (colors, fontSize, etc.) for `'all'` or tailwind.                                                                                                           | `'all'` or string                                                                       |
 | formatType        | Set the format of the Tailwind CSS configuration file. <br>Default value: `js`                                                                                                         | `'js'` `'cjs'`                                                                          |
 | isVariables       | Set when using CSS custom variables. <br>Default value: `false`                                                                                                                        | boolean                                                                                 |
+| extend            | Set to add transformed styles to the `'extend'` key within the `'theme'` key or not. <br>Default value: `true`                                                                         | boolean                                                                                 |
 | source            | [`source`](https://github.com/amzn/style-dictionary/blob/main/README.md#configjson) attribute of style-dictionary.<br>Default value: ` ['tokens/**/*.json']`                           | Array of strings                                                                        |
 | transforms        | [`platform.transforms`](https://github.com/amzn/style-dictionary/blob/main/README.md#configjson) attribute of style-dictionary.<br>Default value: `['attribute/cti','name/cti/kebab']` | Array of strings                                                                        |
 | buildPath         | [`platform.buildPath`](https://github.com/amzn/style-dictionary/blob/main/README.md#configjson) attribute of style-dictionary.<br>Default value: `'build/web/'`                        | string                                                                                  |

diff --git a/src/index.ts b/src/index.ts
@@ -46,6 +46,7 @@ export const getTailwindFormat = ({
   type,
   isVariables,
   prefix,
+  extend,
   tailwind
 }: TailwindFormatObjType) => {
   const content = formatTokens(allTokens, type, isVariables, prefix)
@@ -72,6 +73,7 @@ export const getTailwindFormat = ({
       content,
       darkMode,
       tailwindContent,
+      extend,
       plugins
     )
 
@@ -85,6 +87,7 @@ export const makeSdTailwindConfig = ({
   type,
   formatType = 'js',
   isVariables = false,
+  extend = true,
   source,
   transforms,
   buildPath,
@@ -107,6 +110,7 @@ export const makeSdTailwindConfig = ({
           dictionary,
           formatType,
           isVariables,
+          extend,
           prefix,
           type,
           tailwind

diff --git a/src/types.ts b/src/types.ts
@@ -23,11 +23,12 @@ export type SdTailwindConfigType = {
   buildPath?: Platform['buildPath']
   prefix?: Platform['prefix']
   tailwind?: Partial<TailwindOptions>
+  extend?: boolean
 }
 
 export type TailwindFormatObjType = Pick<
   SdTailwindConfigType,
-  'type' | 'isVariables' | 'prefix' | 'tailwind'
+  'type' | 'isVariables' | 'prefix' | 'tailwind' | 'extend'
 > & {
   dictionary: Dictionary
   formatType: TailwindFormatType

diff --git a/src/utils.ts b/src/utils.ts
@@ -62,16 +62,19 @@ export const getTemplateConfigByType = (
   content: string,
   darkMode: TailwindOptions['darkMode'],
   tailwindContent: TailwindOptions['content'],
+  extend: SdTailwindConfigType['extend'],
   plugins: string[]
 ) => {
+  const extendTheme = extend
+    ? `theme: { extend: ${unquoteFromKeys(content, type)}, },`
+    : `theme: ${unquoteFromKeys(content, type)},`
+
   const getTemplateConfig = () => {
     let config = `{
   mode: "jit",
   content: [${tailwindContent}],
   darkMode: "${darkMode}",
-  theme: {
-    extend: ${unquoteFromKeys(content, type)},
-  },`
+  ${extendTheme}`
 
     if (plugins.length > 0) {
       config += `\n plugins: [${plugins}]`