fix(default key): fix generation of css vars that had DEFAULT names i…

…n their path - Don't remove the "DEFAULT" key names on the css var path if it is not a leaf as tailwind doesn't remove these - Update docs to reflect this reality
RyanClementsHax · Nov 18, 2023 · 1d2f2b6 · 1d2f2b6
1 parent 7776a58
commit 1d2f2b6
Show file tree

Hide file tree

Showing 30 changed files with 91 additions and 146 deletions.
diff --git a/README.md b/README.md
@@ -720,7 +720,7 @@ require('tailwindcss-themer')({
 
 The above config would generate a css variable of the name `--colors-myBrand-primary-500`. If for some reason, [camelCasing](https://en.wikipedia.org/wiki/Camel_case) is converted to [kebab-casing](https://www.theserverside.com/definition/Kebab-case), make sure you have tailwind `v3.0.12` or later installed as that version fixed that bug.
 
-If you use `DEFAULT` anywhere on a path to a variable, it is dropped off of the generated css variable name.
+If you use `DEFAULT` as a leaf value, it is dropped off of the generated css variable name.
 
 ```js
 require('tailwindcss-themer')({
@@ -741,31 +741,7 @@ require('tailwindcss-themer')({
 })
 ```
 
-The above config would generate a css variable of the name `--colors-brand1-primary`.
-
-Because of the way `DEFAULT` works, it is possible to have naming collisions. It is on the user of this plugin to ensure that none happen.
-
-```js
-require('tailwindcss-themer')({
-  defaultTheme: {
-    extend: {
-      colors: {
-        brand1: {
-          DEFAULT: {
-            primary: {
-              DEFAULT: 'red'
-            }
-          },
-          primary: 'blue'
-        }
-      }
-    }
-  }
-  // ...
-})
-```
-
-`colors.brand1.DEFAULT.primary.DEFAULT` and `colors.brand1.primary` both would generate a css variable named `--colors-brand1-primary`. See [Default key](docs/config.md#default-key) for more details.
+The above config would generate a css variable of the name `--colors-brand1-DEFAULT-primary`. See [Default key](docs/config.md#default-key) for more details.
 
 If anywhere in the path, an array is encountered, the index is used in the generated css variable name.
 

diff --git a/docs/config.md b/docs/config.md
@@ -6,7 +6,6 @@
   - [Valid primitives](#valid-primitives)
   - [DEFAULT key](#default-key)
     - [Shorthand](#shorthand)
-    - [Gotcha's](#gotchas)
   - [Callbacks](#callbacks)
   - [Config mismatches](#config-mismatches)
   - [Referencing tailwind's default theme](#referencing-tailwinds-default-theme)
@@ -169,7 +168,7 @@ require('tailwindcss-themer')({
 ```
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <!-- ... -->
@@ -184,7 +183,7 @@ require('tailwindcss-themer')({
 ```
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <!-- ... -->
@@ -199,7 +198,7 @@ require('tailwindcss-themer')({
 ```
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <!-- ... -->
@@ -260,40 +259,40 @@ require('tailwindcss-themer')({
 You would then use the tailwind classes as normal
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <!-- ... -->
   </head>
   <body>
     <!-- this has a border radius of .25rem since that is the default -->
-    <input aria-label="my input" class="border rounded-woahh" />
+    <input aria-label="my input" class="rounded-woahh border" />
   </body>
 </html>
 ```
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <!-- ... -->
   </head>
   <body class="special-border-radius">
     <!-- this has a border radius of .5rem as specified in the special-border-radius config -->
-    <input aria-label="my input" class="border rounded-woahh" />
+    <input aria-label="my input" class="rounded-woahh border" />
   </body>
 </html>
 ```
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <!-- ... -->
   </head>
   <body class="double-border-radius">
     <!-- this has a border radius of 1rem as specified in the double-border-radius config -->
-    <input aria-label="my input" class="border rounded-woahh" />
+    <input aria-label="my input" class="rounded-woahh border" />
   </body>
 </html>
 ```
@@ -377,7 +376,7 @@ Anything that can be parsed as a color is handled in a special way. See [Theming
 
 ### DEFAULT key
 
-Tailwind lets you specify default values for certain configuration.
+Tailwind lets you specify [default values for certain configuration](https://tailwindcss.com/docs/theme#core-plugins).
 
 For example, if you had a palette, but wanted to specify a default value for that palette, you could use the `DEFAULT` key.
 
@@ -443,63 +442,6 @@ require('tailwindcss-themer')({
 
 Styles like `text-primary` will now be themed.
 
-`DEFAULT` doesn't have to be set to a string. It could also be set to other values like objects.
-
-```js
-require('tailwindcss-themer')({
-  // ...
-  themes: [
-    {
-      name: 'my-theme',
-      extend: {
-        colors: {
-          primary: {
-            DEFAULT: {
-              100: '#000111'
-              //...
-            },
-            brand1: {
-              // ...
-            },
-            brand2: {
-              // ...
-            }
-          }
-        }
-      }
-    }
-  ]
-})
-```
-
-This generates classes like `text-primary-100`, `text-primary-brand1-200`, etc.
-
-You can even nest them.
-
-```js
-require('tailwindcss-themer')({
-  // ...
-  themes: [
-    {
-      name: 'my-theme',
-      extend: {
-        colors: {
-          brand1: {
-            DEFAULT: {
-              primary: {
-                DEFAULT: 'red'
-              }
-            }
-          }
-        }
-      }
-    }
-  ]
-})
-```
-
-This will generate classess like `text-brand1-primary`.
-
 #### Shorthand
 
 Because of how `DEFAULT` works, you can specify single default values as strings if that is the only value in the object.
@@ -542,38 +484,6 @@ require('tailwindcss-themer')({
 })
 ```
 
-#### Gotcha's
-
-Because of how `DEFAULT` works, it is possible to have naming collisions.
-
-Take the following for an example.
-
-```js
-require('tailwindcss-themer')({
-  // ...
-  themes: [
-    {
-      name: 'my-theme',
-      extend: {
-        colors: {
-          primary: {
-            DEFAULT: {
-              fontColor: 'red'
-            },
-            fontColor: {
-              DEFAULT: 'red'
-            }
-          }
-        }
-      }
-    }
-    // ...
-  ]
-})
-```
-
-`colors.primary.DEFAULT.fontColor` and `colors.primary.fontColor.DEFAULT` both create classes like `text-primary-fontColor`. It is on the consumer of this plugin to make sure these naming collisions don't happen.
-
 ### Callbacks
 
 Tailwind [supports top level callbacks](https://tailwindcss.com/docs/theme#referencing-other-values) for referrencing other values in your config. This plugin supports that too.

diff --git a/docs/themingColors.md b/docs/themingColors.md
@@ -16,9 +16,7 @@ require('tailwindcss-themer')({
       },
       foo: {
         bar: {
-          DEFAULT: {
-            bazz: 'rgb(35, 0, 75)' // also parsed as a color
-          }
+          bazz: 'rgb(35, 0, 75)' // also parsed as a color
         }
       }
     }

diff --git a/e2e/test_repos/drivers/index.ts b/e2e/test_repos/drivers/index.ts
@@ -250,4 +250,4 @@ export function parseClasses(config: MultiThemePluginOptions): string[] {
 // Preventing purging of these styles makes writing tests with arbitrary classes
 // easier since otherwise they'd have to define the styles they use when opening
 // the repo instance
-const stylesToKeep = ['bg-primary', 'font-title']
+const stylesToKeep = ['bg-primary', 'bg-primary-DEFAULT-500', 'font-title']
diff --git a/e2e/tests/configValues.spec.ts b/e2e/tests/configValues.spec.ts
@@ -2,7 +2,7 @@ import { expect } from '@playwright/test'
 import { test } from '../test_repos/test'
 
 test.describe('DEFAULT key', () => {
-  test('handles the DEFAULT key by removing it from the generated class name', async ({
+  test('removes the DEFAULT field name when it is a leaf', async ({
     page,
     testRepos
   }) => {
@@ -40,8 +40,51 @@ test.describe('DEFAULT key', () => {
     await expect(page).toHaveScreenshot()
   })
 
-  // TODO: fix this test's snapshots
-  test('handles the DEFAULT key even when nested', async ({
+  test('doesnt remove the DEFAULT field name when not a leaf', async ({
+    page,
+    testRepos
+  }) => {
+    const { root } = await testRepos
+      .builder()
+      .withThemerConfig({
+        defaultTheme: {
+          extend: {
+            colors: {
+              primary: {
+                DEFAULT: {
+                  500: 'blue'
+                }
+              }
+            }
+          }
+        },
+        themes: [
+          {
+            name: 'darkTheme',
+            extend: {
+              colors: {
+                primary: {
+                  DEFAULT: {
+                    500: 'red'
+                  }
+                }
+              }
+            }
+          }
+        ]
+      })
+      .open()
+
+    await root.item.overwriteClassTo('bg-primary-DEFAULT-500')
+
+    await expect(page).toHaveScreenshot()
+
+    await root.addClass('darkTheme')
+
+    await expect(page).toHaveScreenshot()
+  })
+
+  test('doesnt remove the DEFAULT field name when not a leaf even if one of its leaves has a DEFAULT field name', async ({
     page,
     testRepos
   }) => {
@@ -80,7 +123,7 @@ test.describe('DEFAULT key', () => {
       })
       .open()
 
-    await root.item.overwriteClassTo('bg-primary-500')
+    await root.item.overwriteClassTo('bg-primary-DEFAULT-500')
 
     await expect(page).toHaveScreenshot()
 

diff --git a/...eld-na-1e506-if-one-of-its-leaves-has-a-DEFAULT-field-name-1-chromium-linux.png b/...eld-na-1e506-if-one-of-its-leaves-has-a-DEFAULT-field-name-1-chromium-linux.png
diff --git a/...ield-na-1e506-if-one-of-its-leaves-has-a-DEFAULT-field-name-1-firefox-linux.png b/...ield-na-1e506-if-one-of-its-leaves-has-a-DEFAULT-field-name-1-firefox-linux.png
diff --git a/...T-key-even-when-nested-1-webkit-linux.png → ...s-a-DEFAULT-field-name-1-webkit-linux.png b/...T-key-even-when-nested-1-webkit-linux.png → ...s-a-DEFAULT-field-name-1-webkit-linux.png
diff --git a/...key-even-when-nested-2-chromium-linux.png → ...a-DEFAULT-field-name-2-chromium-linux.png b/...key-even-when-nested-2-chromium-linux.png → ...a-DEFAULT-field-name-2-chromium-linux.png
diff --git a/...ield-na-9a9a2-if-one-of-its-leaves-has-a-DEFAULT-field-name-2-firefox-linux.png b/...ield-na-9a9a2-if-one-of-its-leaves-has-a-DEFAULT-field-name-2-firefox-linux.png
diff --git a/...T-key-even-when-nested-2-webkit-linux.png → ...s-a-DEFAULT-field-name-2-webkit-linux.png b/...T-key-even-when-nested-2-webkit-linux.png → ...s-a-DEFAULT-field-name-2-webkit-linux.png
diff --git a/...T-key-doesnt-remove-the-DEFAULT-field-name-when-not-a-leaf-1-chromium-linux.png b/...T-key-doesnt-remove-the-DEFAULT-field-name-when-not-a-leaf-1-chromium-linux.png
diff --git a/...LT-key-doesnt-remove-the-DEFAULT-field-name-when-not-a-leaf-1-firefox-linux.png b/...LT-key-doesnt-remove-the-DEFAULT-field-name-when-not-a-leaf-1-firefox-linux.png
diff --git a/...ULT-key-doesnt-remove-the-DEFAULT-field-name-when-not-a-leaf-1-webkit-linux.png b/...ULT-key-doesnt-remove-the-DEFAULT-field-name-when-not-a-leaf-1-webkit-linux.png
diff --git a/...T-key-doesnt-remove-the-DEFAULT-field-name-when-not-a-leaf-2-chromium-linux.png b/...T-key-doesnt-remove-the-DEFAULT-field-name-when-not-a-leaf-2-chromium-linux.png
diff --git a/...LT-key-doesnt-remove-the-DEFAULT-field-name-when-not-a-leaf-2-firefox-linux.png b/...LT-key-doesnt-remove-the-DEFAULT-field-name-when-not-a-leaf-2-firefox-linux.png
diff --git a/...ULT-key-doesnt-remove-the-DEFAULT-field-name-when-not-a-leaf-2-webkit-linux.png b/...ULT-key-doesnt-remove-the-DEFAULT-field-name-when-not-a-leaf-2-webkit-linux.png
diff --git a/...shots/DEFAULT-key-handles-the-DEFAULT-key-even-when-nested-1-chromium-linux.png b/...shots/DEFAULT-key-handles-the-DEFAULT-key-even-when-nested-1-chromium-linux.png
diff --git a/...pshots/DEFAULT-key-handles-the-DEFAULT-key-even-when-nested-1-firefox-linux.png b/...pshots/DEFAULT-key-handles-the-DEFAULT-key-even-when-nested-1-firefox-linux.png
diff --git a/...pshots/DEFAULT-key-handles-the-DEFAULT-key-even-when-nested-2-firefox-linux.png b/...pshots/DEFAULT-key-handles-the-DEFAULT-key-even-when-nested-2-firefox-linux.png
diff --git a/...generated-class-name-1-chromium-linux.png → ...me-when-it-is-a-leaf-1-chromium-linux.png b/...generated-class-name-1-chromium-linux.png → ...me-when-it-is-a-leaf-1-chromium-linux.png
diff --git a/...-generated-class-name-1-firefox-linux.png → ...ame-when-it-is-a-leaf-1-firefox-linux.png b/...-generated-class-name-1-firefox-linux.png → ...ame-when-it-is-a-leaf-1-firefox-linux.png
diff --git a/...e-generated-class-name-1-webkit-linux.png → ...name-when-it-is-a-leaf-1-webkit-linux.png b/...e-generated-class-name-1-webkit-linux.png → ...name-when-it-is-a-leaf-1-webkit-linux.png
diff --git a/...generated-class-name-2-chromium-linux.png → ...me-when-it-is-a-leaf-2-chromium-linux.png b/...generated-class-name-2-chromium-linux.png → ...me-when-it-is-a-leaf-2-chromium-linux.png
diff --git a/...-generated-class-name-2-firefox-linux.png → ...ame-when-it-is-a-leaf-2-firefox-linux.png b/...-generated-class-name-2-firefox-linux.png → ...ame-when-it-is-a-leaf-2-firefox-linux.png
diff --git a/...e-generated-class-name-2-webkit-linux.png → ...name-when-it-is-a-leaf-2-webkit-linux.png b/...e-generated-class-name-2-webkit-linux.png → ...name-when-it-is-a-leaf-2-webkit-linux.png
diff --git a/e2e/tests/mediaQuery.spec.ts b/e2e/tests/mediaQuery.spec.ts
@@ -31,7 +31,6 @@ test('can enable a theme using a media query', async ({ page, testRepos }) => {
   await expect(page).toHaveScreenshot()
 })
 
-// TODO fix this test's snapshots
 test('cant enable a theme using the theme name as a class if a media query provided', async ({
   page,
   testRepos

diff --git a/src/index.ts b/src/index.ts
@@ -1,5 +1,5 @@
 import plugin from 'tailwindcss/plugin'
-import { Config, PluginAPI } from 'tailwindcss/types/config'
+import { PluginAPI } from 'tailwindcss/types/config'
 
 import {
   getThemesFromOptions,
@@ -82,14 +82,16 @@ const multiThemePlugin = plugin.withOptions<MultiThemePluginOptions>(
       addThemeVariants(themes, api)
       addThemeStyles(themes, api)
     },
-  (options = defaultOptions) =>
-    ({
+  (options = defaultOptions) => {
+    const extension = resolveThemeExtensionsAsTailwindExtension(
+      getThemesFromOptions(options)
+    )
+    return {
       theme: {
-        extend: resolveThemeExtensionsAsTailwindExtension(
-          getThemesFromOptions(options)
-        )
+        extend: extension
       }
-    }) as Config
+    }
+  }
 )
 
 export = multiThemePlugin
diff --git a/src/utils/customPropUtils.spec.ts b/src/utils/customPropUtils.spec.ts
@@ -26,10 +26,25 @@ describe('customPropUtils', () => {
       )
     })
 
-    it('removes default path steps case insensitvely', () => {
+    it('removes default leaf path step case sensitively', () => {
       expect(
-        toCustomPropName(['default', 'that', 'DEFAULT', 'someOtherThing'])
-      ).toBe('--that-someOtherThing')
+        toCustomPropName([
+          'default',
+          'that',
+          'DEFAULT',
+          'someOtherThing',
+          'DEFAULT'
+        ])
+      ).toBe('--default-that-DEFAULT-someOtherThing')
+      expect(
+        toCustomPropName([
+          'default',
+          'that',
+          'DEFAULT',
+          'someOtherThing',
+          'default'
+        ])
+      ).toBe('--default-that-DEFAULT-someOtherThing-default')
     })
 
     it('throws when whitespace is encountered', () => {