fix: add extend flag to opionally generate config within extend key or not

Author: pivotpointux

README.md

@@ -1,3 +1,4 @@
+//README
 # Style Dictionary Tailwind CSS Transformer
 
 [![Release](https://badgen.net/github/release/nado1001/sd-tailwindcss-transformer)](https://badgen.net/github/release/nado1001/sd-tailwindcss-transformer)
@@ -191,6 +192,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                                                                                  |

src/index.ts

@@ -1,3 +1,4 @@
+// index.ts 
 import type { Dictionary, Config } from 'style-dictionary/types'
 import type { SdTailwindConfigType, TailwindFormatObjType } from './types'
 import {
@@ -46,6 +47,7 @@ export const getTailwindFormat = ({
   type,
   isVariables,
   prefix,
+  extend,
   tailwind
 }: TailwindFormatObjType) => {
   const content = formatTokens(allTokens, type, isVariables, prefix)
@@ -72,6 +74,7 @@ export const getTailwindFormat = ({
       content,
       darkMode,
       tailwindContent,
+      extend,
       plugins
     )
 
@@ -85,6 +88,7 @@ export const makeSdTailwindConfig = ({
   type,
   formatType = 'js',
   isVariables = false,
+  extend = true,
   source,
   transforms,
   buildPath,
@@ -107,6 +111,7 @@ export const makeSdTailwindConfig = ({
           dictionary,
           formatType,
           isVariables,
+          extend,
           prefix,
           type,
           tailwind
@@ -132,4 +137,4 @@ export const makeSdTailwindConfig = ({
       }
     }
   }
-}
+}

src/types.ts

@@ -1,3 +1,4 @@
+//types.ts
 import type { Dictionary } from 'style-dictionary/types/Dictionary'
 import type { Platform } from 'style-dictionary/types/Platform'
 import type { Config } from 'style-dictionary/types/Config'
@@ -23,12 +24,13 @@ 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
-}
+}

src/utils.ts

@@ -1,3 +1,4 @@
+//utils.ts
 import { camelCase } from 'change-case'
 import type { SdObjType, SdTailwindConfigType, TailwindOptions } from './types'
 
@@ -62,16 +63,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}]`
@@ -85,4 +89,4 @@ export const getTemplateConfigByType = (
   const configs = `/** @type {import('tailwindcss').Config} */\n module.exports = ${getTemplateConfig()}`
 
   return configs
-}
+}