@compiled/css - npm Package Compare versions

Comparing version 0.11.0 to 0.12.0

dist/plugins/expand-shorthands/index.js

@@ -55,2 +55,10 @@ "use strict";
 };
+const valueIsNotSafeToExpand = (node) => {
+    // This is the case where a CSS variable is given as the value, e.g.
+    // `padding: var(--_fl6vf6)`. Value of _fl6vf6 is unknown, so this
+    // cannot be expanded safely.
+    //
+    // https://github.com/atlassian-labs/compiled/issues/1331
+    return node.type === 'func' && node.isVar;
+};
 /**
@@ -69,2 +77,5 @@ * PostCSS plugin that expands shortform properties to their longform equivalents.
             const valueNode = (0, postcss_values_parser_1.parse)(decl.value);
+            if (valueNode.nodes.some(valueIsNotSafeToExpand)) {
+                return;
+            }
             const longforms = expand(valueNode);
@@ -71,0 +82,0 @@ if (!longforms) {

package.json

 {
   "name": "@compiled/css",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "A familiar and performant compile time CSS-in-JS library for React.",
@@ -5,0 +5,0 @@ "homepage": "https://compiledcssinjs.com/docs/pkg-css",

src/plugins/expand-shorthands/index.ts

 import type { Plugin } from 'postcss';
-import { parse } from 'postcss-values-parser';
+import { parse, type ChildNode } from 'postcss-values-parser';
 
@@ -59,2 +59,11 @@ import { background } from './background';
 
+const valueIsNotSafeToExpand = (node: ChildNode): boolean => {
+  // This is the case where a CSS variable is given as the value, e.g.
+  // `padding: var(--_fl6vf6)`. Value of _fl6vf6 is unknown, so this
+  // cannot be expanded safely.
+  //
+  // https://github.com/atlassian-labs/compiled/issues/1331
+  return node.type === 'func' && node.isVar;
+};
+
 /**
@@ -72,3 +81,7 @@ * PostCSS plugin that expands shortform properties to their longform equivalents.
       }
+
       const valueNode = parse(decl.value);
+      if (valueNode.nodes.some(valueIsNotSafeToExpand)) {
+        return;
+      }
 
@@ -79,2 +92,3 @@ const longforms = expand(valueNode);
       }
+
       /** Return early if not replacing a node */
@@ -81,0 +95,0 @@ if (longforms.length === 1 && longforms[0].prop === undefined) {

No alert changes

Improved metrics

Total package byte prevSize

237032

0.49%

Lines of code

6132

0.36%

No dependency changes