tailwindcss-theme-variants - npm Package Compare versions

Comparing version 1.3.0 to 1.3.1

dist/src/index.js

@@ -224,24 +224,25 @@ "use strict";
                 // Drop theme variants from these utilities because they won't work
-                const dedupedVariants = allVariants.filter((variant) => !allThemeNames.includes(variant) && variant !== group);
-                const classesToApply = Array.from(sourcePerTheme.entries()).map(([themeName, sourceName]) => `${themeName}${separator}${behavior[utility].className({ name: sourceName })}`);
-                const { className, opacityUtility, opacityVariable, property, selector, } = behavior[utility];
-                const computedClass = `.${e(className({ name: semanticName }))}`;
-                addUtilities({
-                    [computedClass]: {
-                        // Only use @apply
-                        // eslint-disable-next-line no-nested-ternary
-                        ...((noie11 ? (opacityUtility ? isUtilityEnabled(opacityUtility) : true) : true) ? {
+                const dedupedVariants = allVariants.filter((variant) => !allThemeNames.includes(variant) && variant !== group && allThemeNames.every((themeName) => !variant.startsWith(`${themeName}:`)) && !variant.startsWith(`${group}:`));
+                const { opacityUtility, opacityVariable, prefix: classPrefix, css, } = behavior[utility];
+                const classesToApply = Array.from(sourcePerTheme.entries()).map(([themeName, sourceName]) => {
+                    const wholePrefix = `${themeName}${separator}${classPrefix}`;
+                    if (sourceName === "default")
+                        return wholePrefix;
+                    return `${wholePrefix}-${sourceName}`;
+                });
+                const computedClass = semanticName === "default" ? `.${e(classPrefix)}` : `.${e(`${classPrefix}-${semanticName}`)}`;
+                // eslint-disable-next-line no-nested-ternary
+                if (noie11 ? (opacityUtility ? isUtilityEnabled(opacityUtility) : true) : true) {
+                    addUtilities({
+                        [computedClass]: {
+                            // eslint-disable-next-line no-nested-ternary
                             [`@apply ${classesToApply.join(" ")}`]: "",
-                        } : {}),
-                    },
-                }, dedupedVariants);
-                const computedSelector = selector ? selector({ name: semanticName }) : computedClass;
-                const computedValue = opacityVariable ? `rgba(var(--${semanticName}), var(--${opacityVariable}, 1))` : `var(--${semanticName})`;
-                if (!onlyie11) {
-                    addUtilities({
-                        [computedSelector]: {
-                            [property !== null && property !== void 0 ? property : utility]: `${computedValue} !important`,
                         },
                     }, dedupedVariants);
                 }
+                // Use the custom properties extension if allowed
+                const computedValue = opacityVariable ? `rgba(var(--${semanticName}), var(--${opacityVariable}, 1))` : `var(--${semanticName})`;
+                if (!onlyie11) {
+                    addUtilities(css({ computedClass, computedValue: `${computedValue} !important` }), dedupedVariants);
+                }
             });
@@ -248,0 +249,0 @@ });

dist/src/types.d.ts

@@ -11,12 +11,17 @@ import { WrappedPlugin } from "@navith/tailwindcss-plugin-author-types";
 export declare type SemanticUtility = {
-    className: ({ name }: {
-        name: string;
-    }) => string;
     opacityUtility?: string;
     opacityVariable?: string;
-    property?: string;
-    selector?: ({ name }: {
-        name: string;
-    }) => string;
+    prefix: string;
+    css: ({ computedClass, computedValue }: {
+        computedClass: string;
+        computedValue: string;
+    }) => {
+        [selector: string]: {
+            [property: string]: string;
+        };
+    };
 };
+declare type ObjectOfNestedStrings = {
+    [property: string]: string | ObjectOfNestedStrings;
+};
 export declare type SupportedSemanticUtilities = keyof typeof builtinUtilities;
@@ -27,7 +32,3 @@ export declare type SpecialSemantickeys = "colors";
     semantics?: {
-        [utility in ConfigurableSemantics]?: {
-            [name: string]: string | {
-                [valueName: string]: string;
-            };
-        };
+        [utility in ConfigurableSemantics]?: ObjectOfNestedStrings;
     };
@@ -34,0 +35,0 @@ };

dist/src/utilities.d.ts

@@ -9,2 +9,3 @@ import type { SemanticUtility } from "./types";
 export declare const divideOpacity: SemanticUtility;
+export declare const divideStyle: SemanticUtility;
 export declare const fontFamily: SemanticUtility;
@@ -21,1 +22,2 @@ export declare const fontSize: SemanticUtility;
 export declare const transitionProperty: SemanticUtility;
+export declare const transitionTimingFunction: SemanticUtility;

dist/src/utilities.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.transitionProperty = exports.transitionDuration = exports.textOpacity = exports.textColor = exports.opacity = exports.gradientToColor = exports.gradientViaColor = exports.gradientFromColor = exports.fontWeight = exports.fontSize = exports.fontFamily = exports.divideOpacity = exports.divideColor = exports.boxShadow = exports.borderOpacity = exports.borderColor = exports.backgroundOpacity = exports.backgroundColor = void 0;
+exports.transitionTimingFunction = exports.transitionProperty = exports.transitionDuration = exports.textOpacity = exports.textColor = exports.opacity = exports.gradientToColor = exports.gradientViaColor = exports.gradientFromColor = exports.fontWeight = exports.fontSize = exports.fontFamily = exports.divideStyle = exports.divideOpacity = exports.divideColor = exports.boxShadow = exports.borderOpacity = exports.borderColor = exports.backgroundOpacity = exports.backgroundColor = void 0;
+const lodash_1 = require("lodash");
+const simpleCSS = (property) => ({ computedClass, computedValue }) => ({
+    [computedClass]: {
+        [property]: computedValue,
+    },
+});
+const simpleUtility = (utility, prefix) => ({
+    prefix: prefix !== null && prefix !== void 0 ? prefix : utility,
+    css: simpleCSS(lodash_1.kebabCase(utility)),
+});
+// TODO: "#ff0" -> "rgba(255, 255, 0, 0)"
+const sameColorFullyTransparent = (color) => "rgba(0, 0, 0, 0)";
 exports.backgroundColor = {
-    className: ({ name }) => `bg-${name}`,
+    prefix: "bg",
     opacityUtility: "backgroundOpacity",
     opacityVariable: "bg-opacity",
+    css: simpleCSS("background-color"),
 };
 exports.backgroundOpacity = {
-    className: ({ name }) => `bg-opacity-${name}`,
-    property: "--bg-opacity",
+    prefix: "bg-opacity",
+    css: simpleCSS("--bg-opacity"),
 };
 exports.borderColor = {
-    className: ({ name }) => `border-${name}`,
+    prefix: "border",
     opacityUtility: "borderOpacity",
     opacityVariable: "border-opacity",
+    css: simpleCSS("border-color"),
 };
 exports.borderOpacity = {
-    className: ({ name }) => `border-opacity-${name}`,
-    property: "--border-opacity",
+    prefix: "border-opacity",
+    css: simpleCSS("--border-opacity"),
 };
-exports.boxShadow = {
-    className: ({ name }) => `shadow-${name}`,
-};
+exports.boxShadow = simpleUtility("boxShadow", "shadow");
 exports.divideColor = {
-    className: ({ name }) => `divide-${name}`,
+    prefix: "divide",
     opacityUtility: "divideOpacity",
     opacityVariable: "divide-opacity",
-    property: "border-color",
-    selector: ({ name }) => `.divide-${name} > :not(template) ~ :not(template)`,
+    css: ({ computedClass, computedValue }) => ({
+        [`${computedClass} > :not(template) ~ :not(template)`]: {
+            "border-color": computedValue,
+        },
+    }),
 };
 exports.divideOpacity = {
-    className: ({ name }) => `divide-opacity-${name}`,
-    property: "--divide-opacity",
+    prefix: "divide-opacity",
+    css: ({ computedClass, computedValue }) => ({
+        [`${computedClass} > :not(template) ~ :not(template)`]: {
+            "--divide-opacity": computedValue,
+        },
+    }),
 };
-exports.fontFamily = {
-    className: ({ name }) => `font-${name}`,
+exports.divideStyle = {
+    prefix: "divide",
+    css: ({ computedClass, computedValue }) => ({
+        [`${computedClass} > :not(template) ~ :not(template)`]: {
+            "border-style": computedValue,
+        },
+    }),
 };
-exports.fontSize = {
-    className: ({ name }) => `text-${name}`,
-};
-exports.fontWeight = {
-    className: ({ name }) => `shadow-${name}`,
-};
+exports.fontFamily = simpleUtility("fontFamily", "font");
+exports.fontSize = simpleUtility("fontSize", "text");
+exports.fontWeight = simpleUtility("fontWeight", "font");
 exports.gradientFromColor = {
-    className: ({ name }) => `from-${name}`,
-    property: "--gradient-from-color",
+    prefix: "from",
+    css: ({ computedClass, computedValue }) => ({
+        [computedClass]: {
+            "--gradient-from-color": computedValue,
+            "--gradient-color-stops": `var(--gradient-from-color), var(--gradient-to-color, ${sameColorFullyTransparent(computedValue)})`,
+        },
+    }),
 };
 exports.gradientViaColor = {
-    className: ({ name }) => `via-${name}`,
-    property: "--gradient-via-color",
+    prefix: "via",
+    css: ({ computedClass, computedValue }) => ({
+        [computedClass]: {
+            "--gradient-via-color": computedValue,
+            "--gradient-color-stops": `var(--gradient-from-color), var(--gradient-via-color), var(--gradient-to-color, ${sameColorFullyTransparent(computedValue)})`,
+        },
+    }),
 };
 exports.gradientToColor = {
-    className: ({ name }) => `to-${name}`,
-    property: "--gradient-to-color",
+    prefix: "to",
+    css: simpleCSS("--gradient-to-color"),
 };
-exports.opacity = {
-    className: ({ name }) => `opacity-${name}`,
-};
+exports.opacity = simpleUtility("opacity");
 exports.textColor = {
-    className: ({ name }) => `text-${name}`,
+    prefix: "text",
     opacityUtility: "textOpacity",
     opacityVariable: "text-opacity",
-    property: "color",
+    css: simpleCSS("color"),
 };
 exports.textOpacity = {
-    className: ({ name }) => `text-opacity-${name}`,
-    property: "--text-opacity",
+    prefix: "text-opacity",
+    css: simpleCSS("--text-opacity"),
 };
-exports.transitionDuration = {
-    className: ({ name }) => `duration-${name}`,
-};
-exports.transitionProperty = {
-    className: ({ name }) => `transition-${name}`,
-};
+exports.transitionDuration = simpleUtility("transitionDuration", "duration");
+exports.transitionProperty = simpleUtility("transitionProperty", "transition");
+exports.transitionTimingFunction = simpleUtility("transitionTimingFunction", "ease");

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

87675

increased by1.92%

Lines of code

635

increased by4.96%

No dependency changes