@cobalt-ui/plugin-css - npm Package Compare versions

Comparing version 0.4.0 to 0.4.1

CHANGELOG.md

 # @cobalt-ui/plugin-css
 
+## 0.4.1
+
+### Patch Changes
+
+- f8f0e20: Fix unnecessary token duplication inside P3 query
+
 ## 0.4.0
@@ -4,0 +10,0 @@

dist/index.js

@@ -51,12 +51,18 @@ import color from 'better-color-tools';
     function makeP3(input) {
-        return input.map((value) => {
-            const matches = value.match(HEX_RE);
+        const output = [];
+        for (const line of input) {
+            if (line.includes('{') || line.includes('}')) {
+                output.push(line);
+                continue;
+            }
+            const matches = line.match(HEX_RE);
             if (!matches || !matches.length)
-                return value;
-            let newVal = value;
+                continue;
+            let newVal = line;
             for (const c of matches) {
                 newVal = newVal.replace(c, color.from(c).p3);
             }
-            return newVal;
-        });
+            output.push(newVal);
+        }
+        return output;
     }
@@ -130,20 +136,22 @@ return {
             }
+            code.push('');
             // P3
-            code.push('');
-            code.push(i.indent(`@media (color-gamut: p3) {`, 0));
-            code.push(...makeP3(makeVars(tokenVals, ':root', 1)));
-            code.push('');
-            for (const selector of selectors) {
-                const wrapper = selector.trim().replace(SELECTOR_BRACKET_RE, '');
-                if (selector.startsWith('@')) {
-                    code.push(i.indent(`${wrapper} {`, 1));
-                    code.push(...makeP3(makeVars(modeVals[selector], ':root', 2)));
-                    code.push(i.indent('}', 1));
+            if (tokens.some((t) => t.type === 'color' || t.type === 'gradient' || t.type === 'shadow')) {
+                code.push(i.indent(`@media (color-gamut: p3) {`, 0));
+                code.push(...makeP3(makeVars(tokenVals, ':root', 1)));
+                code.push('');
+                for (const selector of selectors) {
+                    const wrapper = selector.trim().replace(SELECTOR_BRACKET_RE, '');
+                    if (selector.startsWith('@')) {
+                        code.push(i.indent(`${wrapper} {`, 1));
+                        code.push(...makeP3(makeVars(modeVals[selector], ':root', 2)));
+                        code.push(i.indent('}', 1));
+                    }
+                    else {
+                        code.push(...makeP3(makeVars(modeVals[selector], wrapper, 1)));
+                    }
                 }
-                else {
-                    code.push(...makeP3(makeVars(modeVals[selector], wrapper, 1)));
-                }
+                code.push(i.indent('}', 0));
+                code.push('');
             }
-            code.push(i.indent('}', 0));
-            code.push('');
             return [
@@ -192,3 +200,3 @@ {
 function transformGradient(value) {
-    return value.map(({ color, position }) => `${color}${position ? ` ${position * 100}%` : ''}`).join(', ');
+    return value.map((g) => `${color} ${g.position * 100}`).join(', ');
 }
@@ -195,0 +203,0 @@ /** transform typography */

package.json

 {
   "name": "@cobalt-ui/plugin-css",
   "description": "Generate CSS from your design tokens schema (requires @cobalt-ui/cli)",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "author": {
@@ -6,0 +6,0 @@ "name": "Drew Powers",

src/index.ts

@@ -90,11 +90,17 @@ import type {
   function makeP3(input: string[]): string[] {
-    return input.map((value) => {
-      const matches = value.match(HEX_RE);
-      if (!matches || !matches.length) return value;
-      let newVal = value;
+    const output: string[] = [];
+    for (const line of input) {
+      if (line.includes('{') || line.includes('}')) {
+        output.push(line);
+        continue;
+      }
+      const matches = line.match(HEX_RE);
+      if (!matches || !matches.length) continue;
+      let newVal = line;
       for (const c of matches) {
         newVal = newVal.replace(c, color.from(c).p3);
       }
-      return newVal;
-    });
+      output.push(newVal);
+    }
+    return output;
   }
@@ -166,20 +172,22 @@
       }
+      code.push('');
 
       // P3
-      code.push('');
-      code.push(i.indent(`@media (color-gamut: p3) {`, 0));
-      code.push(...makeP3(makeVars(tokenVals, ':root', 1)));
-      code.push('');
-      for (const selector of selectors) {
-        const wrapper = selector.trim().replace(SELECTOR_BRACKET_RE, '');
-        if (selector.startsWith('@')) {
-          code.push(i.indent(`${wrapper} {`, 1));
-          code.push(...makeP3(makeVars(modeVals[selector], ':root', 2)));
-          code.push(i.indent('}', 1));
-        } else {
-          code.push(...makeP3(makeVars(modeVals[selector], wrapper, 1)));
+      if (tokens.some((t) => t.type === 'color' || t.type === 'gradient' || t.type === 'shadow')) {
+        code.push(i.indent(`@media (color-gamut: p3) {`, 0));
+        code.push(...makeP3(makeVars(tokenVals, ':root', 1)));
+        code.push('');
+        for (const selector of selectors) {
+          const wrapper = selector.trim().replace(SELECTOR_BRACKET_RE, '');
+          if (selector.startsWith('@')) {
+            code.push(i.indent(`${wrapper} {`, 1));
+            code.push(...makeP3(makeVars(modeVals[selector], ':root', 2)));
+            code.push(i.indent('}', 1));
+          } else {
+            code.push(...makeP3(makeVars(modeVals[selector], wrapper, 1)));
+          }
         }
+        code.push(i.indent('}', 0));
+        code.push('');
       }
-      code.push(i.indent('}', 0));
-      code.push('');
 
@@ -230,3 +238,3 @@ return [
 function transformGradient(value: ParsedGradientToken['value']): string {
-  return value.map(({ color, position }: GradientStop) => `${color}${position ? ` ${position * 100}%` : ''}`).join(', ');
+  return value.map((g: GradientStop) => `${color} ${g.position * 100}`).join(', ');
 }
@@ -233,0 +241,0 @@ /** transform typography */

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

54532

increased by1.77%

Lines of code

738

increased by2.22%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes