tailwindcss-theme-variants - npm Package Compare versions

Comparing version 1.9.0 to 1.9.2

dist/src/index.js

@@ -323,5 +323,9 @@ "use strict";
         Object.entries(semantics).forEach(([utility, utilityConfiguration]) => {
-            const { configKey, opacityUtility, opacityVariable, prefix: classPrefix, css, } = behavior[utility];
-            if (!isUtilityEnabled(configKey))
-                return;
+            const { configKey, opacityUtility, isColorUtility, opacityVariable, prefix: classPrefix, css, } = behavior[utility];
+            // If it's a core plugin and it's not enabled, return early (and do nothing)
+            if (!isUtilityEnabled(configKey)) {
+                // But if it's a user-defined utility, stay in
+                if (!utilities[configKey])
+                    return;
+            }
             const allVariants = lookupVariants(configKey, []);
@@ -353,3 +357,14 @@ // Drop theme variants from these utilities because they won't work
                 // Use the custom properties extension if allowed
-                const computedValue = (opacityUtility ? isUtilityEnabled(opacityUtility) : false) ? `rgba(var(--${semanticName}), var(--${opacityVariable}, 1))` : `rgb(var(--${semanticName}))`;
+                let computedValue = `var(--${semanticName})`;
+                if (isColorUtility) {
+                    computedValue = `rgb(var(--${semanticName}))`;
+                    if (opacityUtility) {
+                        if (isUtilityEnabled(opacityUtility)) {
+                            computedValue = `rgba(var(--${semanticName}), var(--${opacityVariable}, 1))`;
+                        }
+                        else {
+                            computedValue = `rgb(var(--${semanticName}))`;
+                        }
+                    }
+                }
                 if (!onlyie11) {
@@ -356,0 +371,0 @@ const withImportant = noie11 ? computedValue : `${computedValue} !important`;

dist/src/types.d.ts

@@ -12,2 +12,3 @@ import { WrappedPlugin } from "@navith/tailwindcss-plugin-author-types";
     configKey: string;
+    isColorUtility: boolean;
     opacityUtility?: string;
@@ -14,0 +15,0 @@ opacityVariable?: string;

dist/src/utilities.js

@@ -11,4 +11,5 @@ "use strict";
 });
-const simpleUtility = (utility, prefix) => ({
+const simpleUtility = (utility, prefix, isColorUtility) => ({
     configKey: utility,
+    isColorUtility: isColorUtility !== null && isColorUtility !== void 0 ? isColorUtility : false,
     prefix: prefix !== null && prefix !== void 0 ? prefix : utility,
@@ -32,2 +33,3 @@ css: simpleCSS(lodash_1.kebabCase(utility)),
     prefix: "bg",
+    isColorUtility: true,
     opacityUtility: "backgroundOpacity",
@@ -40,2 +42,3 @@ opacityVariable: "bg-opacity",
     prefix: "bg-opacity",
+    isColorUtility: false,
     css: simpleCSS("--bg-opacity"),
@@ -46,2 +49,3 @@ };
     prefix: "border",
+    isColorUtility: true,
     opacityUtility: "borderOpacity",
@@ -54,2 +58,3 @@ opacityVariable: "border-opacity",
     prefix: "border-opacity",
+    isColorUtility: false,
     css: simpleCSS("--border-opacity"),
@@ -61,2 +66,3 @@ };
     prefix: "divide",
+    isColorUtility: true,
     opacityUtility: "divideOpacity",
@@ -73,2 +79,3 @@ opacityVariable: "divide-opacity",
     prefix: "divide-opacity",
+    isColorUtility: false,
     css: ({ computedClass, computedValue }) => ({
@@ -83,2 +90,3 @@ [`${computedClass} > :not(template) ~ :not(template)`]: {
     prefix: "divide",
+    isColorUtility: false,
     css: ({ computedClass, computedValue }) => ({
@@ -96,2 +104,3 @@ [`${computedClass} > :not(template) ~ :not(template)`]: {
     prefix: "from",
+    isColorUtility: true,
     css: ({ computedClass, computedValue }) => ({
@@ -107,2 +116,3 @@ [computedClass]: {
     prefix: "via",
+    isColorUtility: true,
     css: ({ computedClass, computedValue }) => ({
@@ -118,2 +128,3 @@ [computedClass]: {
     prefix: "to",
+    isColorUtility: true,
     css: simpleCSS("--gradient-to-color"),
@@ -125,2 +136,3 @@ };
     prefix: "text",
+    isColorUtility: true,
     opacityUtility: "textOpacity",
@@ -133,2 +145,3 @@ opacityVariable: "text-opacity",
     prefix: "text-opacity",
+    isColorUtility: false,
     css: simpleCSS("--text-opacity"),
@@ -135,0 +148,0 @@ };

package.json

 {
 	"name": "tailwindcss-theme-variants",
-	"version": "1.9.0",
+	"version": "1.9.2",
 	"description": "Media-query- or JavaScript-based theme variants with fallback for Tailwind CSS",
@@ -42,10 +42,10 @@ "keywords": [
 		"@types/assert": "^1.5.2",
-		"@types/lodash": "^4.14.162",
+		"@types/lodash": "^4.14.164",
 		"@types/mocha": "^8.0.3",
-		"@types/node": "^14.14.2",
+		"@types/node": "^14.14.6",
 		"@types/sinon": "^9.0.8",
-		"@typescript-eslint/eslint-plugin": "^4.5.0",
-		"@typescript-eslint/parser": "^4.5.0",
+		"@typescript-eslint/eslint-plugin": "^4.6.0",
+		"@typescript-eslint/parser": "^4.6.0",
 		"cross-env": "^7.0.2",
-		"eslint": "^7.12.0",
+		"eslint": "^7.12.1",
 		"eslint-config-airbnb-base": "^14.2.0",
@@ -64,3 +64,3 @@ "eslint-plugin-import": "^2.22.1",
 		"retext-readability": "^6.0.0",
-		"sinon": "^9.2.0",
+		"sinon": "^9.2.1",
 		"source-map": "^0.7.3",
@@ -67,0 +67,0 @@ "to-vfile": "^6.1.0",

No alert changes

Improved metrics

Total package byte prevSize

103073

increased by1.05%

Lines of code

807

increased by3.73%

No dependency changes