tailwindcss-themer - npm Package Compare versions

Comparing version 3.0.2 to 3.1.0

lib/index.js

@@ -18,3 +18,15 @@ "use strict";
  */
-const addThemeVariants = (themes, { addVariant, e }) => void themes.map(({ name }) => addVariant(name === optionsUtils_1.defaultThemeName ? 'defaultTheme' : name, `.${e(name === optionsUtils_1.defaultThemeName ? 'defaultTheme' : name)} &`));
+const addThemeVariants = (themes, { addVariant, e }) => {
+    for (const { name, selectors: _selectors, mediaQuery } of themes) {
+        const variantName = name === optionsUtils_1.defaultThemeName ? 'defaultTheme' : name;
+        const shouldAddNameBasedVariant = !_selectors && !mediaQuery;
+        const selectors = _selectors !== null && _selectors !== void 0 ? _selectors : (shouldAddNameBasedVariant ? [`.${e(variantName)}`] : []);
+        if (selectors.length > 0) {
+            addVariant(variantName, selectors.map(x => `${x} &`));
+        }
+        if (mediaQuery) {
+            addVariant(variantName, mediaQuery);
+        }
+    }
+};
 /**
@@ -26,7 +38,17 @@ * @param themes the themes to add as variants
     const { addBase, e } = api;
-    themes.forEach(({ name, extend }) => {
-        addBase({
-            [name === optionsUtils_1.defaultThemeName ? ':root' : `.${e(name)}`]: (0, themeUtils_1.resolveThemeExtensionAsCustomProps)(extend, api)
-        });
-    });
+    for (const { name, selectors: _selectors, extend, mediaQuery } of themes) {
+        const selectors = _selectors !== null && _selectors !== void 0 ? _selectors : (name === optionsUtils_1.defaultThemeName ? [':root'] : [`.${e(name)}`]);
+        if (selectors.length > 0) {
+            addBase({
+                [selectors.join(', ')]: (0, themeUtils_1.resolveThemeExtensionAsCustomProps)(extend, api)
+            });
+        }
+        if (mediaQuery) {
+            addBase({
+                [mediaQuery]: {
+                    ':root': (0, themeUtils_1.resolveThemeExtensionAsCustomProps)(extend, api)
+                }
+            });
+        }
+    }
 };
@@ -33,0 +55,0 @@ const multiThemePlugin = plugin_1.default.withOptions((options = defaultOptions) => api => {

lib/utils/optionsUtils.d.ts

 import { TailwindExtension } from '../config';
 export interface ThemeConfig {
     name: string;
+    selectors?: string[];
+    mediaQuery?: string;
     extend: TailwindExtension;
 }
-export type DefaultThemeConfig = Omit<ThemeConfig, 'name'>;
+export type DefaultThemeConfig = Omit<ThemeConfig, 'name' | 'selectors' | 'mediaQuery'>;
 export interface MultiThemePluginOptions {
@@ -16,3 +18,3 @@ defaultTheme?: DefaultThemeConfig;
  */
-export declare const validateOptions: ({ themes }: MultiThemePluginOptions) => void;
+export declare const validateOptions: ({ defaultTheme, themes }: MultiThemePluginOptions) => void;
 /**
@@ -19,0 +21,0 @@ * @param options

lib/utils/optionsUtils.js

@@ -13,3 +13,4 @@ "use strict";
  */
-const validateOptions = ({ themes = [] }) => {
+const validateOptions = ({ defaultTheme, themes = [] }) => {
+    var _a;
     if (themes.some(x => !x.name)) {
@@ -25,2 +26,15 @@ throw new Error('Every theme in the themes array in the multiThemePlugin options must have a name property set to a unique string');
     }
+    if (defaultTheme === null || defaultTheme === void 0 ? void 0 : defaultTheme.selectors) {
+        throw new Error('The default theme cannot have any selectors');
+    }
+    if (defaultTheme === null || defaultTheme === void 0 ? void 0 : defaultTheme.mediaQuery) {
+        throw new Error('The default theme cannot have a media query');
+    }
+    const darkTheme = themes.find(x => x.name === 'dark');
+    if (darkTheme === null || darkTheme === void 0 ? void 0 : darkTheme.selectors) {
+        throw new Error('Tailwind configures "dark" theme automatically which prevents any attempt to use custom selectors. This is a limitation of tailwind, not tailwindcss-themer. Please rename your "dark" theme to something else or remove the "selectors" field from your "dark" theme.');
+    }
+    if ((darkTheme === null || darkTheme === void 0 ? void 0 : darkTheme.mediaQuery) || ((_a = darkTheme === null || darkTheme === void 0 ? void 0 : darkTheme.mediaQuery) === null || _a === void 0 ? void 0 : _a.length) === 0) {
+        throw new Error('Tailwind configures "dark" theme automatically which prevents any attempt to use a custom media query. This is a limitation of tailwind, not tailwindcss-themer. Please rename your "dark" theme to something else or remove the "mediaQuery" field from your "dark" theme.');
+    }
 };
@@ -27,0 +41,0 @@ exports.validateOptions = validateOptions;

package.json

 {
   "name": "tailwindcss-themer",
-  "version": "3.0.2",
+  "version": "3.1.0",
   "author": "ryanclementshax",
@@ -5,0 +5,0 @@ "license": "MIT",

README.md

@@ -19,3 +19,3 @@ # Tailwindcss Themer <!-- omit in toc -->
 
-**🌑 Trivial dark theme**: Because dark theme is _just another theme_ implementing dark theme is as easy as naming the theme you create as "dark" (or whatever you want), no special config
+**🌑 Trivial dark theme**: Because dark theme is _just another theme_ implementing dark theme is as easy, no special config
 
@@ -51,2 +51,5 @@ **🤖 Automatically handles colors and opacity**: Using [tailwind with css variables](https://tailwindcss.com/docs/customizing-colors#using-css-variables) can get [tricky with colors](https://www.youtube.com/watch?v=MAtaT8BZEAo), but this plugin handles all of that for you!
 - [Enabling your theme](#enabling-your-theme)
+  - [Selectors](#selectors)
+  - [Media query](#media-query)
+  - [Fallback class of theme's name](#fallback-class-of-themes-name)
   - [SSR](#ssr)
@@ -123,3 +126,3 @@ - [Simultaneous themes](#simultaneous-themes)
         {
-          // name your theme anything that could be a valid css selector
+          // name your theme anything that could be a valid css class name
           // remember what you named your theme because you will use it as a class to enable the theme
@@ -179,2 +182,4 @@ name: 'my-theme',
 
+> There are lots of other ways to enable the theme. To see all options see [Enabling Your Theme](#enabling-your-theme).
+
 ### Apply variants if you want
@@ -399,3 +404,6 @@
 
-Do note that because tailwind automatically adds the `dark` variant, if you name one of your themes `dark`, the variant this plugin creates for it will conflict with what tailwind automatically creates for you. It is recommended that you name your dark theme something else like `darkTheme` to avoid the conflict or you could set [darkMode: 'class'](https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually) in your `tailwind.config.js`
+> Do note that because tailwind automatically adds the `dark` variant, if you name one of your themes `dark`, the variant this plugin creates for it will conflict with what tailwind automatically creates for you. It is recommended that you name your dark theme something else like `darkTheme` to avoid the conflict. Not all config options work for themes named `dark`.
+> \
+> \
+> See [Themes named dark](docs/config.md#themes-named-dark) for additional details.
 
@@ -549,4 +557,12 @@ The theme variant generated for the default theme is `defaultTheme` (e.g. `defaultTheme:rounded-sm`), but this now requires that instead of omitting any theme class to enable the default theme, you explicitly declare you are using the default theme by adding the class of `defaultTheme` to the place you want themed (no other feature is affected by this, using the default theme variant is the only feature that requires you to add the `defaultTheme` class to use). This is because I haven't been able to create a css selector that excludes all parents with any of the other theme classes. If you can make one, feel free to [open up an issue](https://github.com/RyanClementsHax/tailwindcss-themer/issues).
 
-Right now, the only way to enable a named theme is to apply a class of the name of the theme you want to enable. I'm open to configuring a theme to activate on other conditions like media queries. If you want this, feel free to [open up an issue](https://github.com/RyanClementsHax/tailwindcss-themer/issues).
+There are three ways to enable your theme.
 
+1. Configure your theme with selectors
+2. Configure your theme with a media query
+3. If neither selectors nor a media query is given, you can enable your theme by applying a class of the name of the theme you want to enable.
+
+### Selectors
+
+You can provide a `selectors` array on your theme. The theme will be enabled within any element that matches any of those selectors.
+
 ```js
@@ -563,3 +579,4 @@ require('tailwindcss-themer')({
     {
-      name: 'dark',
+      name: 'darkTheme',
+      selectors: ['.dark-mode', '[data-theme="dark"]']
       extend: {
@@ -594,4 +611,4 @@ colors: {
   </head>
-  <body class="dark">
-    <!-- The "dark" config would apply here -->
+  <body class="dark-mode">
+    <!-- The "darkTheme" config would apply here -->
     <h1 class="text-primary">Hello world!</h1>
@@ -602,2 +619,122 @@ </body>
 
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <!-- ... -->
+  </head>
+  <body data-theme="dark">
+    <!-- The "darkTheme" config would apply here -->
+    <h1 class="text-primary">Hello world!</h1>
+  </body>
+</html>
+```
+
+### Media query
+
+You can specify a media query within the `mediaQuery` field on the theme. The theme will be enabled when the given media query evaluates to true.
+
+```js
+require('tailwindcss-themer')({
+  defaultTheme: {
+    extend: {
+      colors: {
+        primary: 'red'
+      }
+    }
+  },
+  themes: [
+    {
+      name: 'darkTheme',
+      mediaQuery: '@media (prefers-color-scheme: dark)',
+      extend: {
+        colors: {
+          primary: 'blue'
+        }
+      }
+    }
+  ]
+})
+```
+
+If both `selectors` and `mediaQuery` is specified at the same time, the `selectors` will take precedence.
+
+### Fallback class of theme's name
+
+If neither a `selectors` array nor a `mediaQuery` given, a default `selectors` array will be added with one value as a class selector of the theme's name.
+
+```js
+require('tailwindcss-themer')({
+  defaultTheme: {
+    extend: {
+      colors: {
+        primary: 'red'
+      }
+    }
+  },
+  themes: [
+    {
+      name: 'darkTheme',
+      // selectors: ['.darkTheme'] // this is implicit given no selectors or mediaQuery given
+      extend: {
+        colors: {
+          primary: 'blue'
+        }
+      }
+    }
+  ]
+})
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <!-- ... -->
+  </head>
+  <body>
+    <!-- The default theme config would apply here -->
+    <h1 class="text-primary">Hello world!</h1>
+  </body>
+</html>
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <!-- ... -->
+  </head>
+  <body class="darkTheme">
+    <!-- The "darkTheme" config would apply here -->
+    <h1 class="text-primary">Hello world!</h1>
+  </body>
+</html>
+```
+
+If you don't want this fallback to be generated, set `selectors` to an empty array `[]`.
+
+```js
+require('tailwindcss-themer')({
+  defaultTheme: {
+    extend: {
+      colors: {
+        primary: 'red'
+      }
+    }
+  },
+  themes: [
+    {
+      name: 'darkTheme',
+      selectors: [] // turns off fallback selector
+      extend: {
+        colors: {
+          primary: 'blue'
+        }
+      }
+    }
+  ]
+})
+```
+
 ### SSR
@@ -666,6 +803,4 @@
 
-This plugin comes with types. In order to take advantage of them, make sure the files that use this plugin are type checked. For most use cases, this means making sure your `tailwind.config.js` file is type checked. The easiest way to do this is by adding `//@ts-check` at the top of the file. See the [typescript example](examples/create-react-app-typescript/README.md) for a reference implementation.
+This plugin comes with types. In order to take advantage of them, make sure the files that use this plugin are type checked. For most use cases, this means making sure your `tailwind.config.js` file is type checked. The easiest way to do this is by adding `//@ts-check` at the top of the file. See the [typescript example](examples/create-react-app-typescript/README.md) for a reference implementation. You can also write your config as a `tailwind.config.ts` file to achieve type checking.
 
-You may need to bring in types for anything else you import though. e.g. if you import anything from tailwind, you should install `@types/tailwindcss` (e.g. `yarn add -D @types/tailwindcss`). Another option is to create a declaration file that contains module definitions for anything you import. The [typescript docs](https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html) go further into this.
-
 ## Common problems
@@ -672,0 +807,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

49251

increased by10.13%

Lines of code

454

increased by9.13%

Number of lines in readme file

817

increased by19.79%

No dependency changes