Merge pull request #109 from RyanClementsHax/fix-bugs

Fix bugs
RyanClementsHax · Nov 18, 2023 · ae1db1a · ae1db1a
2 parents 5594272 + 10fb07f
commit ae1db1a
Show file tree

Hide file tree

Showing 48 changed files with 1,163 additions and 162 deletions.
diff --git a/README.md b/README.md
@@ -504,8 +504,6 @@ module.exports = {
 ```
 
 > Notice how we needed to set `color.primary` to a callback function. This is to properly handle opacity. See [Opacity](docs/themingColors.md#opacity) for more details.
-> \
-> Because it creates a theme extension for you, this is why it overwrites whatever is in the normal theme extension upon collision. See [This plugin's config overwrites what is in the normal tailwind config n collision](docs/config.md#this-plugins-config-overwrites-what-is-in-the-normal-tailwind-config-n-collision) for more details.
 
 It also injects css variables with proper scoping into tailwind's [base layer](https://tailwindcss.com/docs/adding-custom-styles#using-css-and-layer).
 
@@ -720,7 +718,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 +739,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
@@ -1,12 +1,13 @@
 # Config <!-- omit in toc -->
 
 - [Themes named `"dark"`](#themes-named-dark)
-- [This plugin's config overwrites what is in the normal tailwind config on collision](#this-plugins-config-overwrites-what-is-in-the-normal-tailwind-config-on-collision)
+- [Collisions with the normal tailwind config](#collisions-with-the-normal-tailwind-config)
+  - [This plugin's config overwrites what is in the normal tailwind config on collision](#this-plugins-config-overwrites-what-is-in-the-normal-tailwind-config-on-collision)
+  - [This plugin's config is overwritten by what is in the normal tailwind extension config on collison](#this-plugins-config-is-overwritten-by-what-is-in-the-normal-tailwind-extension-config-on-collison)
 - [Extend](#extend)
   - [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)
@@ -77,21 +78,21 @@ Because tailwind automatically adds the `dark` variant for users, defining a the
 
 Therefore, attempting to use `selectors` or `mediaQuery` for a theme named `dark` won't work at all. To prevent users of this plugin from encountering these silent bugs, this plugin crashes when that happens.
 
-## This plugin's config overwrites what is in the normal tailwind config on collision
+## Collisions with the normal tailwind config
+
+### This plugin's config overwrites what is in the normal tailwind config on collision
 
 Any config specified in this plugin's config, overwrites what is in the normal tailwind config if there is a collision.
 
 ```js
 // tailwind.config.js
 module.exports = {
   theme: {
-    extend: {
-      colors: {
-        // clobbered
-        primary: 'blue',
-        // not clobbered
-        secondary: 'green'
-      }
+    colors: {
+      // clobbered
+      primary: 'blue',
+      // not clobbered
+      secondary: 'green'
     }
   },
   plugins: [
@@ -114,6 +115,53 @@ module.exports = {
 
 If you want to use the default tailwind config in your theme configuration, see [Overwriting tailwind defaults](#overwriting-tailwind-defaults) and [Referencing tailwind's default theme](#referencing-tailwinds-default-theme).
 
+### This plugin's config is overwritten by what is in the normal tailwind extension config on collison
+
+In contrast to the normal tailwind config values as specified above, anything in the `theme.extend` value takes precendence over anything this plugin outputs.
+
+```js
+// tailwind.config.js
+module.exports = {
+  theme: {
+    extend: {
+      // nothing in here is clobbered
+      colors: {
+        primary: 'blue',
+        secondary: 'green'
+      }
+    }
+  },
+  plugins: [
+    require('tailwindcss-themer')({
+      defaultTheme: {
+        extend: {
+          colors: {
+            // clobbered
+            primary: 'red',
+            // clobbered
+            secondary: 'yellow'
+          }
+        }
+      },
+      themes: [
+        {
+          name: 'my-theme',
+          extend: {
+            colors: {
+              // clobbered
+              primary: 'brown',
+              // clobbered
+              secondary: 'orange'
+            }
+          }
+        }
+      ]
+    })
+    // ...
+  ]
+}
+```
+
 ## Extend
 
 - This takes an object representing a [tailwind extension](https://tailwindcss.com/docs/theme#extending-the-default-theme)
@@ -169,7 +217,7 @@ require('tailwindcss-themer')({
 ```
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <!-- ... -->
@@ -184,7 +232,7 @@ require('tailwindcss-themer')({
 ```
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <!-- ... -->
@@ -199,7 +247,7 @@ require('tailwindcss-themer')({
 ```
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <!-- ... -->
@@ -260,40 +308,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 +425,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 +491,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 +533,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
         }
       }
     }
-Original file line number
+Diff line change
@@ Expand Up / @@ -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
             }
           }
         }
@@ Expand Down @@