@compiled/css - npm Package Compare versions

Comparing version 0.8.2 to 0.8.3

dist/plugins/expand-shorthands/flex.d.ts

 import type { ConversionFunction } from './types';
 /**
- * https://developer.mozilla.org/en-US/docs/Web/CSS/flex
+ * https://drafts.csswg.org/css-flexbox-1/#flex-property
  */
 export declare const flex: ConversionFunction;

dist/plugins/expand-shorthands/flex.js

@@ -5,89 +5,76 @@ "use strict";
 var utils_1 = require("./utils");
+var isFlexNumber = function (node) { return node.type === 'numeric' && !node.unit; };
+var isFlexBasis = function (node) {
+    return (node.type === 'word' && node.value === 'content') || (0, utils_1.isWidth)(node);
+};
 /**
- * https://developer.mozilla.org/en-US/docs/Web/CSS/flex
+ * https://drafts.csswg.org/css-flexbox-1/#flex-property
  */
 var flex = function (value) {
     var _a = value.nodes, left = _a[0], middle = _a[1], right = _a[2];
-    var grow = 'auto';
-    var shrink = 'initial';
-    var basis = 'none';
     switch (value.nodes.length) {
         case 1: {
-            if (left.type === 'numeric' && !left.unit) {
-                grow = left.value;
-                shrink = 1;
-                basis = 0;
+            if (left.type === 'word' && left.value == 'none') {
+                // none is equivalent to 0 0 auto
+                return [
+                    { prop: 'flex-grow', value: 0 },
+                    { prop: 'flex-shrink', value: 0 },
+                    { prop: 'flex-basis', value: 'auto' },
+                ];
             }
-            if (left.type === 'word' && left.value !== 'none') {
-                // Invalid
-                return [];
+            else if (isFlexNumber(left)) {
+                // flex grow
+                return [
+                    { prop: 'flex-grow', value: left.value },
+                    { prop: 'flex-shrink', value: 1 },
+                    { prop: 'flex-basis', value: 0 },
+                ];
             }
+            else if (isFlexBasis(left)) {
+                // flex basis
+                return [
+                    { prop: 'flex-grow', value: 1 },
+                    { prop: 'flex-shrink', value: 1 },
+                    { prop: 'flex-basis', value: (0, utils_1.getWidth)(left) },
+                ];
+            }
             break;
         }
         case 2: {
-            if (left.type === 'numeric' && !left.unit) {
-                grow = left.value;
-            }
-            else {
-                return [];
-            }
-            if (middle.type === 'numeric' && !middle.unit) {
-                shrink = middle.value;
-                basis = 0;
-            }
-            else if ((0, utils_1.isWidth)(middle)) {
-                shrink = 1;
-                var value_1 = (0, utils_1.getWidth)(middle);
-                if (value_1) {
-                    basis = value_1;
+            if (isFlexNumber(left)) {
+                if (isFlexNumber(middle)) {
+                    // flex grow and flex shrink
+                    return [
+                        { prop: 'flex-grow', value: left.value },
+                        { prop: 'flex-shrink', value: middle.value },
+                        { prop: 'flex-basis', value: 0 },
+                    ];
                 }
-                else {
-                    // Invalid
-                    return [];
+                else if (isFlexBasis(middle)) {
+                    // flex grow and flex basis
+                    return [
+                        { prop: 'flex-grow', value: left.value },
+                        { prop: 'flex-shrink', value: 1 },
+                        { prop: 'flex-basis', value: (0, utils_1.getWidth)(middle) },
+                    ];
                 }
             }
-            else {
-                // Invalid
-                return [];
-            }
             break;
         }
         case 3: {
-            if (left.type === 'numeric' && !left.unit) {
-                grow = left.value;
+            if (isFlexNumber(left) && isFlexNumber(middle) && isFlexBasis(right)) {
+                // flex grow, flex shrink, and flex basis
+                return [
+                    { prop: 'flex-grow', value: left.value },
+                    { prop: 'flex-shrink', value: middle.value },
+                    { prop: 'flex-basis', value: (0, utils_1.getWidth)(right) },
+                ];
             }
-            else {
-                return [];
-            }
-            if (middle.type === 'numeric' && !middle.unit) {
-                shrink = middle.value;
-                basis = 0;
-            }
-            if ((0, utils_1.isWidth)(right)) {
-                var value_2 = (0, utils_1.getWidth)(right);
-                if (value_2) {
-                    basis = value_2;
-                }
-                else {
-                    // Invalid
-                    return [];
-                }
-            }
-            else {
-                // Invalid
-                return [];
-            }
             break;
         }
-        default:
-            // Invalid
-            return [];
     }
-    return [
-        { prop: 'flex-grow', value: grow },
-        { prop: 'flex-shrink', value: shrink },
-        { prop: 'flex-basis', value: basis },
-    ];
+    // Invalid CSS
+    return [];
 };
 exports.flex = flex;
 //# sourceMappingURL=flex.js.map

dist/plugins/expand-shorthands/utils.d.ts

@@ -1,2 +0,2 @@
-import type { Node } from 'postcss-values-parser';
+import type { Node, Numeric, Word, Func } from 'postcss-values-parser';
 /**
@@ -25,2 +25,2 @@ * Common global values
  */
-export declare const getWidth: (node: Node) => string | undefined;
+export declare const getWidth: (node: Numeric | Word | Func) => string;

dist/plugins/expand-shorthands/utils.js

 "use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -7,3 +16,3 @@ exports.getWidth = exports.isWidth = exports.isColor = exports.globalValues = void 0;
  */
-exports.globalValues = ['inherit', 'initial', 'unset'];
+exports.globalValues = ['inherit', 'initial', 'unset', 'revert', 'revert-layer'];
 /**
@@ -19,2 +28,27 @@ * Returns `true` if the node is a color,
 exports.isColor = isColor;
+var widthUnits = new Set([
+    '%',
+    'cap',
+    'ch',
+    'cm',
+    'em',
+    'ex',
+    'fr',
+    'ic',
+    'in',
+    'lh',
+    'mm',
+    'pc',
+    'pt',
+    'px',
+    'Q',
+    'rem',
+    'rlh',
+    'vb',
+    'vh',
+    'vi',
+    'vmax',
+    'vmin',
+    'vw',
+]);
 /**
@@ -27,26 +61,13 @@ * Returns `true` if the node is a width,
 var isWidth = function (node) {
-    if (node.type === 'numeric') {
-        if ([
-            'px',
-            'rem',
-            'em',
-            '%',
-            'pt',
-            'cm',
-            'mm',
-            'Q',
-            'in',
-            'pc',
-            'ex',
-            'ch',
-            'lh',
-            'vw',
-            'vh',
-            'vmin',
-            'vmax',
-            'fr',
-        ].includes(node.unit)) {
-            return true;
-        }
+    if (node.type === 'numeric' && widthUnits.has(node.unit)) {
+        return true;
     }
+    if (node.type === 'word' &&
+        __spreadArray(__spreadArray([], exports.globalValues, true), ['auto', 'min-content', 'max-content', 'fit-content'], false).includes(node.value)) {
+        return true;
+    }
+    if (node.type === 'func') {
+        // We don't want to be strict about functions, as we don't know the return type
+        return true;
+    }
     return false;
@@ -64,8 +85,8 @@ };
     }
-    if (node.type === 'word') {
-        return node.value;
+    if (node.type === 'func') {
+        return "".concat(node.name).concat(node.params);
     }
-    return undefined;
+    return node.value;
 };
 exports.getWidth = getWidth;
 //# sourceMappingURL=utils.js.map

package.json

 {
   "name": "@compiled/css",
-  "version": "0.8.2",
+  "version": "0.8.3",
   "description": "A familiar and performant compile time CSS-in-JS library for React.",
@@ -23,3 +23,3 @@ "homepage": "https://compiledcssinjs.com/docs/pkg-css",
     "css-what": "^5.1.0",
-    "cssnano-preset-default": "^5.2.0",
+    "cssnano-preset-default": "^5.2.7",
     "nth-check": "^2.0.1"
@@ -29,9 +29,9 @@ },
     "@compiled/utils": "^0.6.16",
-    "autoprefixer": "^10.4.2",
+    "autoprefixer": "^10.4.7",
     "convert-source-map": "^1.8.0",
-    "cssnano-preset-default": "^5.2.0",
-    "postcss": "^8.4.8",
+    "cssnano-preset-default": "^5.2.7",
+    "postcss": "^8.4.13",
     "postcss-nested": "^5.0.6",
-    "postcss-normalize-whitespace": "^5.1.0",
-    "postcss-selector-parser": "^6.0.9",
+    "postcss-normalize-whitespace": "^5.1.1",
+    "postcss-selector-parser": "^6.0.10",
     "postcss-values-parser": "^6.0.2"
@@ -38,0 +38,0 @@ },

src/plugins/__tests__/sort-atomic-style-sheet.test.ts

@@ -16,4 +16,4 @@ import postcss from 'postcss';
     const actual = transform`
-      .media-screen-color-red {
-        @media screen {
+      @media screen {
+        .media-screen-color-red {
           color: red;
@@ -34,4 +34,4 @@ }
             }
-            .media-screen-color-red {
-              @media screen {
+            @media screen {
+              .media-screen-color-red {
                 color: red;
@@ -38,0 +38,0 @@ }

src/plugins/expand-shorthands/__tests__/flex.test.ts

@@ -21,5 +21,5 @@ import postcss from 'postcss';
       "
-            flex-grow: auto;
-            flex-shrink: initial;
-            flex-basis: none;
+            flex-grow: 0;
+            flex-shrink: 0;
+            flex-basis: auto;
           "
@@ -85,2 +85,30 @@ `);
 
+  it('should expand flex auto', () => {
+    const result = transform`
+      flex: 3 2 auto;
+    `;
+
+    expect(result).toMatchInlineSnapshot(`
+      "
+            flex-grow: 3;
+            flex-shrink: 2;
+            flex-basis: auto;
+          "
+    `);
+  });
+
+  it('should expand flex function call', () => {
+    const result = transform`
+      flex: 3 2 calc(50px + 50px);
+    `;
+
+    expect(result).toMatchInlineSnapshot(`
+      "
+            flex-grow: 3;
+            flex-shrink: 2;
+            flex-basis: calc(50px + 50px);
+          "
+    `);
+  });
+
   it('should remove decls for invalid single', () => {
@@ -136,6 +164,6 @@ const result = transform`
     expect(result).toMatchInlineSnapshot(`
-    "
-        "
-  `);
+          "
+              "
+      `);
   });
 });

src/plugins/expand-shorthands/__tests__/utils.test.ts

@@ -51,2 +51,18 @@ import { parse } from 'postcss-values-parser';
 
+  it('should return true for fit-content', () => {
+    const value = parse(`fit-content`);
+
+    const actual = isWidth(value.nodes[0]);
+
+    expect(actual).toBe(true);
+  });
+
+  it('should return true for fit-content(5em)', () => {
+    const value = parse(`fit-content(5em)`);
+
+    const actual = isWidth(value.nodes[0]);
+
+    expect(actual).toBe(true);
+  });
+
   it('should return true for a valid color word', () => {
@@ -99,2 +115,10 @@ const value = parse('red');
   });
+
+  it('should return true for a valid color hsla', () => {
+    const value = parse('hsla(188, 97%, 28%, .3)');
+
+    const actual = isColor(value.nodes[0]);
+
+    expect(actual).toBe(true);
+  });
 });

src/plugins/expand-shorthands/flex.ts

@@ -0,25 +1,40 @@
+import type { ChildNode, Numeric, Word, Func } from 'postcss-values-parser';
+
 import type { ConversionFunction } from './types';
 import { getWidth, isWidth } from './utils';
 
+const isFlexNumber = (node: ChildNode): node is Numeric => node.type === 'numeric' && !node.unit;
+const isFlexBasis = (node: ChildNode): node is Numeric | Word | Func =>
+  (node.type === 'word' && node.value === 'content') || isWidth(node);
+
 /**
- * https://developer.mozilla.org/en-US/docs/Web/CSS/flex
+ * https://drafts.csswg.org/css-flexbox-1/#flex-property
  */
 export const flex: ConversionFunction = (value) => {
   const [left, middle, right] = value.nodes;
-  let grow: number | string = 'auto';
-  let shrink: number | string = 'initial';
-  let basis: number | string = 'none';
 
   switch (value.nodes.length) {
     case 1: {
-      if (left.type === 'numeric' && !left.unit) {
-        grow = left.value;
-        shrink = 1;
-        basis = 0;
+      if (left.type === 'word' && left.value == 'none') {
+        // none is equivalent to 0 0 auto
+        return [
+          { prop: 'flex-grow', value: 0 },
+          { prop: 'flex-shrink', value: 0 },
+          { prop: 'flex-basis', value: 'auto' },
+        ];
+      } else if (isFlexNumber(left)) {
+        // flex grow
+        return [
+          { prop: 'flex-grow', value: left.value },
+          { prop: 'flex-shrink', value: 1 },
+          { prop: 'flex-basis', value: 0 },
+        ];
+      } else if (isFlexBasis(left)) {
+        // flex basis
+        return [
+          { prop: 'flex-grow', value: 1 },
+          { prop: 'flex-shrink', value: 1 },
+          { prop: 'flex-basis', value: getWidth(left) },
+        ];
       }
-      if (left.type === 'word' && left.value !== 'none') {
-        // Invalid
-        return [];
-      }
-
       break;
@@ -29,25 +44,19 @@ }
     case 2: {
-      if (left.type === 'numeric' && !left.unit) {
-        grow = left.value;
-      } else {
-        return [];
-      }
-
-      if (middle.type === 'numeric' && !middle.unit) {
-        shrink = middle.value;
-        basis = 0;
-      } else if (isWidth(middle)) {
-        shrink = 1;
-        const value = getWidth(middle);
-        if (value) {
-          basis = value;
-        } else {
-          // Invalid
-          return [];
+      if (isFlexNumber(left)) {
+        if (isFlexNumber(middle)) {
+          // flex grow and flex shrink
+          return [
+            { prop: 'flex-grow', value: left.value },
+            { prop: 'flex-shrink', value: middle.value },
+            { prop: 'flex-basis', value: 0 },
+          ];
+        } else if (isFlexBasis(middle)) {
+          // flex grow and flex basis
+          return [
+            { prop: 'flex-grow', value: left.value },
+            { prop: 'flex-shrink', value: 1 },
+            { prop: 'flex-basis', value: getWidth(middle) },
+          ];
         }
-      } else {
-        // Invalid
-        return [];
       }
-
       break;
@@ -57,39 +66,16 @@ }
     case 3: {
-      if (left.type === 'numeric' && !left.unit) {
-        grow = left.value;
-      } else {
-        return [];
+      if (isFlexNumber(left) && isFlexNumber(middle) && isFlexBasis(right)) {
+        // flex grow, flex shrink, and flex basis
+        return [
+          { prop: 'flex-grow', value: left.value },
+          { prop: 'flex-shrink', value: middle.value },
+          { prop: 'flex-basis', value: getWidth(right) },
+        ];
       }
-
-      if (middle.type === 'numeric' && !middle.unit) {
-        shrink = middle.value;
-        basis = 0;
-      }
-
-      if (isWidth(right)) {
-        const value = getWidth(right);
-        if (value) {
-          basis = value;
-        } else {
-          // Invalid
-          return [];
-        }
-      } else {
-        // Invalid
-        return [];
-      }
-
       break;
     }
-
-    default:
-      // Invalid
-      return [];
   }
 
-  return [
-    { prop: 'flex-grow', value: grow },
-    { prop: 'flex-shrink', value: shrink },
-    { prop: 'flex-basis', value: basis },
-  ];
+  // Invalid CSS
+  return [];
 };

src/plugins/expand-shorthands/utils.ts

@@ -1,2 +0,2 @@
-import type { Node } from 'postcss-values-parser';
+import type { Node, Numeric, Word, Func } from 'postcss-values-parser';
 
@@ -6,3 +6,3 @@ /**
  */
-export const globalValues = ['inherit', 'initial', 'unset'];
+export const globalValues = ['inherit', 'initial', 'unset', 'revert', 'revert-layer'];
 
@@ -19,2 +19,28 @@ /**
 
+const widthUnits = new Set([
+  '%',
+  'cap',
+  'ch',
+  'cm',
+  'em',
+  'ex',
+  'fr',
+  'ic',
+  'in',
+  'lh',
+  'mm',
+  'pc',
+  'pt',
+  'px',
+  'Q',
+  'rem',
+  'rlh',
+  'vb',
+  'vh',
+  'vi',
+  'vmax',
+  'vmin',
+  'vw',
+]);
+
 /**
@@ -27,29 +53,18 @@ * Returns `true` if the node is a width,
 export const isWidth = (node: Node): boolean => {
-  if (node.type === 'numeric') {
-    if (
-      [
-        'px',
-        'rem',
-        'em',
-        '%',
-        'pt',
-        'cm',
-        'mm',
-        'Q',
-        'in',
-        'pc',
-        'ex',
-        'ch',
-        'lh',
-        'vw',
-        'vh',
-        'vmin',
-        'vmax',
-        'fr',
-      ].includes(node.unit)
-    ) {
-      return true;
-    }
+  if (node.type === 'numeric' && widthUnits.has(node.unit)) {
+    return true;
   }
 
+  if (
+    node.type === 'word' &&
+    [...globalValues, 'auto', 'min-content', 'max-content', 'fit-content'].includes(node.value)
+  ) {
+    return true;
+  }
+
+  if (node.type === 'func') {
+    // We don't want to be strict about functions, as we don't know the return type
+    return true;
+  }
+
   return false;
@@ -63,3 +78,3 @@ };
  */
-export const getWidth = (node: Node): string | undefined => {
+export const getWidth = (node: Numeric | Word | Func): string => {
   if (node.type === 'numeric') {
@@ -69,7 +84,7 @@ return `${node.value}${node.unit}`;
 
-  if (node.type === 'word') {
-    return node.value;
+  if (node.type === 'func') {
+    return `${node.name}${node.params}`;
   }
 
-  return undefined;
+  return node.value;
 };

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

198755

increased by1.91%

Lines of code

5255

increased by0.96%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• Updatedautoprefixer@^10.4.7

• Updatedcssnano-preset-default@^5.2.7

• Updatedpostcss@^8.4.13

• Updatedpostcss-normalize-whitespace@^5.1.1

• Updatedpostcss-selector-parser@^6.0.10