tailwindcss-theme-variants - npm Package Compare versions

Comparing version 0.4.0 to 0.5.0

dist/src/index.d.ts

@@ -1,6 +0,6 @@
-import { ThisPlugin } from "./types";
-declare const thisPlugin: ThisPlugin;
-export declare const tailwindcssThemeVariants: ThisPlugin;
+import { Themes, ThisPluginOptions } from "./types";
+declare const thisPlugin: <GivenThemes extends Themes>(options: ThisPluginOptions<GivenThemes>) => import("@navith/tailwindcss-plugin-author-types").WrappedPlugin;
+export declare const tailwindcssThemeVariants: <GivenThemes extends Themes>(options: ThisPluginOptions<GivenThemes>) => import("@navith/tailwindcss-plugin-author-types").WrappedPlugin;
 export default thisPlugin;
 export * from "./media-queries";
 export * from "./variants";

dist/src/index.js

@@ -25,3 +25,3 @@ "use strict";
 };
-const thisPlugin = plugin_1.default.withOptions(({ themes, baseSelector, fallback = false, rename = (themeName) => themeName, variants = {}, }) => ({ addVariant, e, postcss, }) => {
+const thisPlugin = plugin_1.default.withOptions(({ themes, baseSelector, fallback = false, rename = (themeName) => themeName.toString(), variants = {}, }) => ({ addVariant, e, postcss }) => {
     const allThemes = Object.entries(themes);
@@ -28,0 +28,0 @@ if (allThemes.length === 0) {

dist/src/types.d.ts

@@ -10,9 +10,10 @@ import { WrappedPlugin } from "@navith/tailwindcss-plugin-author-types";
 export declare type ThisPluginTheme = RequireAtLeastOne<ThisPluginThemeSelectorAndMediaQuery>;
-export interface ThisPluginOptions {
-    themes: {
-        [name: string]: ThisPluginTheme;
-    };
+export declare type Themes = {
+    [name: string]: ThisPluginTheme;
+};
+export interface ThisPluginOptions<GivenThemes extends Themes> {
+    themes: GivenThemes;
     baseSelector?: string;
-    fallback?: string | boolean;
-    rename?: (themeName: string) => string;
+    fallback?: (keyof GivenThemes) | boolean;
+    rename?: (themeName: keyof GivenThemes) => string;
     variants?: {
@@ -22,3 +23,3 @@ [name: string]: (selector: string) => string;
 }
-export declare type ThisPlugin = (options: ThisPluginOptions) => WrappedPlugin;
+export declare type ThisPlugin<GivenThemes extends Themes> = (options: ThisPluginOptions<GivenThemes>) => WrappedPlugin;
 export {};

package.json

 {
 	"name": "tailwindcss-theme-variants",
-	"version": "0.4.0",
+	"version": "0.5.0",
 	"description": "JavaScript- or media-query-based theme variants with fallback for Tailwind CSS",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -115,3 +115,3 @@ This Tailwind CSS plugin registers variants for theming without needing custom properties. It has support for responsive variants, extra stacked variants, media queries, and falling back to a particular theme when none matches.
 
-💡 Keep the `variants` listed in the same order as in `themes` in this plugin's configuration for consistency and the most expected behavior. As you see above, `light` came first, then `dark` in `backgroundColor`'s `variants`, so we also list `light` before `dark` in `tailwindcssThemeVariants`'s `themes` option.
+💡 Keep the `variants` listed in the same order as in `themes` in this plugin's configuration for consistency and the most expected behavior. In `backgroundColor`'s `variants`, `light` came first, then `dark`, so we also list `light` before `dark` in `tailwindcssThemeVariants`'s `themes` option.
 
@@ -171,7 +171,150 @@
 ### Fallback
-TODO
+#### Media queries
+With the same media-query-activated themes above,
+```js
+themes: {
+    light: {
+        mediaQuery: prefersLight /* "@media (prefers-color-scheme: light)" */,
+    },
+    dark: {
+        mediaQuery: prefersDark /* "@media (prefers-color-scheme: dark)" */,
+    },
+},
+```
+we can create a table to show what the active theme will be under all possible conditions:
 
+<table>
+<tr align="center">
+<th align="left">Matching media query</th>
+<th>Neither</th>
+<th><code>prefers-color-scheme: light</code></th>
+<th><code>prefers-color-scheme: dark</code></th>
+</tr>
+
+<tr align="center">
+<th align="left">Active theme</th>
+<td>None</td>
+<td><code>light</code></td>
+<td><code>dark</code></td>
+</tr>
+</table>
+
+**The whole point of the fallback feature is to address that *None* case.** It could mean that the visitor is using a browser that doesn't [support `prefers-color-scheme`](https://caniuse.com/#search=prefers-color-scheme), such as IE11. Instead of leaving them on an unthemed site, we can "push" them into a particular theme by specifying `fallback`.
+
+```js
+themes: {
+    light: {
+        mediaQuery: prefersLight /* "@media (prefers-color-scheme: light)" */,
+    },
+    dark: {
+        mediaQuery: prefersDark /* "@media (prefers-color-scheme: dark)" */,
+    },
+},
+// New addition
+fallback: "light",
+```
+
+Which will change the generated CSS to activate `light` earlier than any media queries, so they can still override that declaration by being later in the file. **You could think of `light` as the *default theme*** in this case.
+```css
+.bg-teal-500 {
+    background-color: #38B2AC;
+}
+
+/* New addition */
+.light\\:bg-teal-500 {
+    background-color: #38B2AC;
+}
+/* End new addition */
+
+@media (prefers-color-scheme: light) {
+    .light\\:bg-teal-500 {
+        background-color: #38B2AC;
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    .dark\\:bg-teal-500 {
+        background-color: #38B2AC;
+    }
+}
+```
+
+Which, in turn, changes the active theme table to:
+<table>
+<tr align="center">
+<th align="left">Matching media query</th>
+<th>Neither</th>
+<th><code>prefers-color-scheme: light</code></th>
+<th><code>prefers-color-scheme: dark</code></th>
+</tr>
+
+<tr align="center">
+<th align="left">Active theme</th>
+<td><code>light</code></td>
+<td><code>light</code></td>
+<td><code>dark</code></td>
+</tr>
+</table>
+
+#### Selectors
+💡 `fallback` also works for selector-activated themes, which would be useful for visitors without JavaScript enabled (if that's how you've chosen to set the theme).
+
+```js
+themes: {
+    light: {
+        selector: ".light-theme",
+    },
+    dark: {
+        selector: ".dark-theme",
+    },
+},
+fallback: "dark",
+```
+
+This generates:
+```css
+.bg-gray-900 {
+    background-color: #1A202C;
+}
+
+:root.light-theme .light\\:bg-gray-900 {
+    background-color: #1A202C;
+}
+
+:root:not(.light-theme) .dark\\:bg-gray-900 {
+    background-color: #1A202C;
+}
+
+:root.dark-theme .dark\\:bg-gray-900 {
+    background-color: #1A202C;
+}
+```
+
+Which has the active theme table:
+<table>
+<tr>
+<th align="left">Matching selector</th>
+<th align="left">Active theme</th>
+</tr>
+
+<tr>
+<th align="left">Neither</th>
+<td align="center"><code>dark</code></td>
+</tr>
+
+<tr>
+<th align="left"><code>:root.light-theme</code></th>
+<td align="center"><code>light</code></td>
+</tr>
+
+<tr>
+<th align="left"><code>:root.dark-theme</code></th>
+<td align="center"><code>dark</code></td>
+</tr>
+</table>
+
+
 ### Stacked variants
 
-💡 All of Tailwind CSS's core variants are bundled for use with the plugin. You can see the full list in [`src/variants.ts`](https://github.com/SirNavith/tailwindcss-theme-variants/blob/master/src/variants.ts).
+All of Tailwind CSS's core variants are bundled for use with the plugin. You can see the full list in [`src/variants.ts`](https://github.com/SirNavith/tailwindcss-theme-variants/blob/master/src/variants.ts).
 
@@ -178,0 +321,0 @@ TODO

No alert changes

Improved metrics

Total package byte prevSize

32523

increased by13.12%

Lines of code

282

increased by0.36%

Number of lines in readme file

420

increased by51.62%

No dependency changes