@compiled/css - npm Package Compare versions

Comparing version 0.16.0 to 0.17.0

dist/plugins/sort-atomic-style-sheet.js

@@ -77,2 +77,9 @@ "use strict";
             });
+            if (sortShorthandEnabled) {
+                (0, sort_shorthand_declarations_1.sortShorthandDeclarations)(catchAll);
+                (0, sort_shorthand_declarations_1.sortShorthandDeclarations)(rules);
+                (0, sort_shorthand_declarations_1.sortShorthandDeclarations)(atRules.map((atRule) => atRule.node));
+            }
+            // Pseudo-selector and at-rule sorting takes priority over shorthand
+            // property sorting.
             (0, sort_pseudo_selectors_1.sortPseudoSelectors)(rules);
@@ -90,5 +97,2 @@ if (sortAtRulesEnabled) {
             root.nodes = [...catchAll, ...rules, ...atRules.map((atRule) => atRule.node)];
-            if (sortShorthandEnabled) {
-                (0, sort_shorthand_declarations_1.sortShorthandDeclarations)(root.nodes);
-            }
         },
@@ -95,0 +99,0 @@ };

dist/plugins/sort-shorthand-declarations.js

@@ -14,7 +14,2 @@ "use strict";
         }
-        const declarations = node.nodes.map(findDeclaration).filter(Boolean);
-        if (declarations.length === 1) {
-            return declarations[0];
-        }
-        return declarations;
     }
@@ -24,22 +19,15 @@ return undefined;
 const sortNodes = (a, b) => {
+    var _a, _b;
     const aDecl = findDeclaration(a);
     const bDecl = findDeclaration(b);
-    // Don't worry about any array of declarations, this would be something like a group of
-    // AtRule versus a regular Rule.
-    //
-    // Those are sorted elsewhere…
-    if (Array.isArray(aDecl) || Array.isArray(bDecl))
-        return 0;
+    // This will probably happen because we have an AtRule being compared to a regular
+    // Rule. Don't try to sort this - the *contents* of the AtRule will be traversed and
+    // sorted by sortShorthandDeclarations, and the sort-at-rules plugin will sort AtRules
+    // so they come after regular rules.
     if (!(aDecl === null || aDecl === void 0 ? void 0 : aDecl.prop) || !(bDecl === null || bDecl === void 0 ? void 0 : bDecl.prop))
         return 0;
-    const aShorthand = utils_1.shorthandFor[aDecl.prop];
-    if (aShorthand === true || (aShorthand === null || aShorthand === void 0 ? void 0 : aShorthand.includes(bDecl.prop))) {
-        return -1;
-    }
-    const bShorthand = utils_1.shorthandFor[bDecl.prop];
-    if (bShorthand === true || (bShorthand === null || bShorthand === void 0 ? void 0 : bShorthand.includes(aDecl.prop))) {
-        return 1;
-    }
-    const aShorthandBucket = utils_1.shorthandBuckets[aDecl.prop];
-    const bShorthandBucket = utils_1.shorthandBuckets[bDecl.prop];
+    // Why default to Infinity? Because if the property is not a shorthand property,
+    // we want it to come after all of the other shorthand properties.
+    const aShorthandBucket = (_a = utils_1.shorthandBuckets[aDecl.prop]) !== null && _a !== void 0 ? _a : Infinity;
+    const bShorthandBucket = (_b = utils_1.shorthandBuckets[bDecl.prop]) !== null && _b !== void 0 ? _b : Infinity;
     // Ensures a deterministic sorting of shorthand properties in the case where those
@@ -50,8 +38,5 @@ // shorthand properties overlap.
     // each other, BUT both properties are shorthand versions of `border-top-color`.
-    // If `border-top` is in bucket 12 and `border-color` is in bucket 6, we can ensure
+    // If `border-top` is in bucket 4 and `border-color` is in bucket 2, we can ensure
     // that `border-color` always comes before `border-top`.
-    if (aShorthandBucket && bShorthandBucket) {
-        return aShorthandBucket - bShorthandBucket;
-    }
-    return 0;
+    return aShorthandBucket - bShorthandBucket;
 };
@@ -58,0 +43,0 @@ const sortShorthandDeclarations = (nodes) => {

dist/sort.d.ts

@@ -5,7 +5,7 @@ /**
  * @param stylesheet
- * @returns
+ * @returns the sorted stylesheet
  */
-export declare function sort(stylesheet: string, { sortAtRulesEnabled, sortShorthandEnabled, }: {
+export declare function sort(stylesheet: string, { sortAtRulesEnabled, sortShorthandEnabled, }?: {
     sortAtRulesEnabled: boolean | undefined;
     sortShorthandEnabled: boolean | undefined;
 }): string;

dist/sort.js

@@ -15,5 +15,13 @@ "use strict";
  * @param stylesheet
- * @returns
+ * @returns the sorted stylesheet
  */
-function sort(stylesheet, { sortAtRulesEnabled, sortShorthandEnabled, }) {
+function sort(stylesheet, { sortAtRulesEnabled, sortShorthandEnabled, } = {
+    // These default values should remain undefined so we don't override the default
+    // values set in packages/css/src/plugins/sort-atomic-style-sheet.ts
+    //
+    // Modify packages/css/src/plugins/sort-atomic-style-sheet.ts if you want to
+    // update the actual default values for sortAtRulesEnabled and sortShortEnabled.
+    sortAtRulesEnabled: undefined,
+    sortShorthandEnabled: undefined,
+}) {
     const result = (0, postcss_1.default)([
@@ -20,0 +28,0 @@ (0, postcss_discard_duplicates_1.default)(),

package.json

 {
   "name": "@compiled/css",
-  "version": "0.16.0",
+  "version": "0.17.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/__tests__/sort-shorthand-declarations.test.ts

@@ -39,4 +39,4 @@ import { outdent } from 'outdent';
       ".a {
+        font: 16px;
         outline-width: 1px;
-        font: 16px;
       }
@@ -73,4 +73,4 @@ .b {
         outline: none;
+        font: 16px normal;
         outline-width: 1px;
-        font: 16px normal;
         font-weight: bold;
@@ -152,4 +152,4 @@ }
         outline: none;
+        font: 16px normal;
         outline-width: 1px;
-        font: 16px normal;
         font-weight: bold;
@@ -168,4 +168,4 @@ }
         outline: none;
+        font: 16px normal;
         outline-width: 1px;
-        font: 16px normal;
         font-weight: bold;
@@ -175,4 +175,4 @@ }@media all {
           outline: none;
+          font: 16px normal;
           outline-width: 1px;
-          font: 16px normal;
           font-weight: bold;
@@ -218,2 +218,3 @@ }
     const actual = transform(outdent`
+
       @media all {
@@ -293,6 +294,6 @@ .f {
       "
-      .a {
+      .a > .external {
         all: unset;
       }
-      .a > .external {
+      .a {
         all: unset;
@@ -318,2 +319,8 @@ }
       }
+      .d {
+        border-top: none;
+      }
+      .c {
+        border-block-start: none;
+      }
 
@@ -326,8 +333,2 @@ .j {
       }
-      .d {
-        border-top: none;
-      }
-      .c {
-        border-block-start: none;
-      }
       .e {
@@ -340,14 +341,12 @@ border-block-start-color: transparent;
       }
+      .e:hover {
+        border-block-start-color: transparent;
+      }
       .d:active {
         border-block-start: none;
       }
-      .e:hover {
-        border-block-start-color: transparent;
-      }@media all {
+      @media all {
         .a {
           all: unset;
         }
-        .f {
-          display: block;
-        }
         .b {
@@ -362,2 +361,5 @@ border: none;
         }
+        .f {
+          display: block;
+        }
         .e {
@@ -400,4 +402,4 @@ border-block-start-color: transparent;
       }
+      .c { all: unset; }
       .b { all: unset; }
-      .c { all: unset; }
       .d { border: none; }
@@ -408,2 +410,104 @@ .f { border-block-start-color: transparent; }"
 
+  it('sorts a stylesheet that is mainly longhand properties', () => {
+    const actual = transform(outdent`
+      ._oqicidpf{padding-top:0}
+      ._1rmjidpf{padding-right:0}
+      ._cjbtidpf{padding-bottom:0}
+      ._pnmbidpf{padding-left:0}
+      ._glte7vkz{width:1pc}
+      ._165t7vkz{height:1pc}
+      ._ue5g1408{margin:0 var(--ds-space-800,4pc)}
+      ._1yag1dzv{padding:var(--ds-space-100) var(--ds-space-150)}
+      ._dbjg12x7{margin-top:var(--ds-space-075,6px)}
+
+      @media (min-width:1200px){
+        ._jvpg11p5{display:grid}
+        ._szna1wug{margin-top:auto}
+        ._13on1wug{margin-right:auto}
+        ._1f3k1wug{margin-bottom:auto}
+        ._inid1wug{margin-left:auto}
+        ._1oqj1epz{padding:var(--ds-space-1000,5pc)}
+        ._12wp9ac1{max-width:1400px}
+        ._jvpgglyw{display:none}
+      }
+    `);
+
+    expect(actual).toMatchInlineSnapshot(`
+      "
+      ._ue5g1408{margin:0 var(--ds-space-800,4pc)}
+      ._1yag1dzv{padding:var(--ds-space-100) var(--ds-space-150)}._oqicidpf{padding-top:0}
+      ._1rmjidpf{padding-right:0}
+      ._cjbtidpf{padding-bottom:0}
+      ._pnmbidpf{padding-left:0}
+      ._glte7vkz{width:1pc}
+      ._165t7vkz{height:1pc}
+      ._dbjg12x7{margin-top:var(--ds-space-075,6px)}
+
+      @media (min-width:1200px){
+        ._1oqj1epz{padding:var(--ds-space-1000,5pc)}
+        ._jvpg11p5{display:grid}
+        ._szna1wug{margin-top:auto}
+        ._13on1wug{margin-right:auto}
+        ._1f3k1wug{margin-bottom:auto}
+        ._inid1wug{margin-left:auto}
+        ._12wp9ac1{max-width:1400px}
+        ._jvpgglyw{display:none}
+      }"
+    `);
+  });
+
+  it('sorts border, border-top, border-top-color', () => {
+    const actual = transform(outdent`
+
+      ._abcd1234 { border-top-color: red }
+      ._abcd1234 { border-top: 1px solid }
+      ._abcd1234 { border: none }
+      ._abcd1234:hover { border-top-color: red }
+      ._abcd1234:hover { border-top: 1px solid }
+      ._abcd1234:hover { border: none }
+      ._abcd1234:active { border-top-color: red }
+      ._abcd1234:active { border-top: 1px solid }
+      ._abcd1234:active { border: none }
+      @supports (border: none) {
+        ._abcd1234 { border-top-color: red }
+        ._abcd1234 { border-top: 1px solid }
+        ._abcd1234 { border: none }
+      }
+      @media (max-width: 50px) { ._abcd1234 { border-top-color: red } }
+      @media (max-width: 100px) { ._abcd1234 { border-top: 1px solid } }
+      @media (max-width: 120px) {
+        ._abcd1234 { border-top-color: red }
+        ._abcd1234 { border-top: 1px solid }
+        ._abcd1234 { border: none }
+      }
+      @media (max-width: 150px) { ._abcd1234 { border: none } }
+    `);
+
+    expect(actual).toMatchInlineSnapshot(`
+      "
+      ._abcd1234 { border: none }
+      ._abcd1234 { border-top: 1px solid }
+      ._abcd1234 { border-top-color: red }
+      ._abcd1234:hover { border: none }
+      ._abcd1234:hover { border-top: 1px solid }
+      ._abcd1234:hover { border-top-color: red }
+      ._abcd1234:active { border: none }
+      ._abcd1234:active { border-top: 1px solid }
+      ._abcd1234:active { border-top-color: red }
+      @media (max-width: 150px) { ._abcd1234 { border: none } }
+      @media (max-width: 120px) {
+        ._abcd1234 { border: none }
+        ._abcd1234 { border-top: 1px solid }
+        ._abcd1234 { border-top-color: red }
+      }
+      @media (max-width: 100px) { ._abcd1234 { border-top: 1px solid } }
+      @media (max-width: 50px) { ._abcd1234 { border-top-color: red } }
+      @supports (border: none) {
+        ._abcd1234 { border: none }
+        ._abcd1234 { border-top: 1px solid }
+        ._abcd1234 { border-top-color: red }
+      }"
+    `);
+  });
+
   describe('when disabled', () => {
@@ -410,0 +514,0 @@ it('does nothing when crossover detected', () => {

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

@@ -90,2 +90,10 @@ import type { ChildNode, Rule, Plugin, AtRule } from 'postcss';
 
+      if (sortShorthandEnabled) {
+        sortShorthandDeclarations(catchAll);
+        sortShorthandDeclarations(rules);
+        sortShorthandDeclarations(atRules.map((atRule) => atRule.node));
+      }
+
+      // Pseudo-selector and at-rule sorting takes priority over shorthand
+      // property sorting.
       sortPseudoSelectors(rules);
@@ -105,6 +113,2 @@ if (sortAtRulesEnabled) {
       root.nodes = [...catchAll, ...rules, ...atRules.map((atRule) => atRule.node)];
-
-      if (sortShorthandEnabled) {
-        sortShorthandDeclarations(root.nodes);
-      }
     },
@@ -111,0 +115,0 @@ };

src/plugins/sort-shorthand-declarations.ts

@@ -1,2 +0,2 @@
-import { shorthandBuckets, shorthandFor, type ShorthandProperties } from '@compiled/utils';
+import { shorthandBuckets, type ShorthandProperties } from '@compiled/utils';
 import type { ChildNode, Declaration } from 'postcss';
@@ -6,3 +6,3 @@
 
-const findDeclaration = (node: ChildNode): Declaration | Declaration[] | undefined => {
+const findDeclaration = (node: ChildNode): Declaration | undefined => {
   if (nodeIsDeclaration(node)) {
@@ -16,10 +16,2 @@ return node;
     }
-
-    const declarations = node.nodes.map(findDeclaration).filter(Boolean) as Declaration[];
-
-    if (declarations.length === 1) {
-      return declarations[0];
-    }
-
-    return declarations;
   }
@@ -34,23 +26,13 @@
 
-  // Don't worry about any array of declarations, this would be something like a group of
-  // AtRule versus a regular Rule.
-  //
-  // Those are sorted elsewhere…
-  if (Array.isArray(aDecl) || Array.isArray(bDecl)) return 0;
-
+  // This will probably happen because we have an AtRule being compared to a regular
+  // Rule. Don't try to sort this - the *contents* of the AtRule will be traversed and
+  // sorted by sortShorthandDeclarations, and the sort-at-rules plugin will sort AtRules
+  // so they come after regular rules.
   if (!aDecl?.prop || !bDecl?.prop) return 0;
 
-  const aShorthand = shorthandFor[aDecl.prop as ShorthandProperties];
-  if (aShorthand === true || aShorthand?.includes(bDecl.prop)) {
-    return -1;
-  }
+  // Why default to Infinity? Because if the property is not a shorthand property,
+  // we want it to come after all of the other shorthand properties.
+  const aShorthandBucket = shorthandBuckets[aDecl.prop as ShorthandProperties] ?? Infinity;
+  const bShorthandBucket = shorthandBuckets[bDecl.prop as ShorthandProperties] ?? Infinity;
 
-  const bShorthand = shorthandFor[bDecl.prop as ShorthandProperties];
-  if (bShorthand === true || bShorthand?.includes(aDecl.prop)) {
-    return 1;
-  }
-
-  const aShorthandBucket = shorthandBuckets[aDecl.prop as ShorthandProperties];
-  const bShorthandBucket = shorthandBuckets[bDecl.prop as ShorthandProperties];
-
   // Ensures a deterministic sorting of shorthand properties in the case where those
@@ -61,9 +43,5 @@ // shorthand properties overlap.
   // each other, BUT both properties are shorthand versions of `border-top-color`.
-  // If `border-top` is in bucket 12 and `border-color` is in bucket 6, we can ensure
+  // If `border-top` is in bucket 4 and `border-color` is in bucket 2, we can ensure
   // that `border-color` always comes before `border-top`.
-  if (aShorthandBucket && bShorthandBucket) {
-    return aShorthandBucket - bShorthandBucket;
-  }
-
-  return 0;
+  return aShorthandBucket - bShorthandBucket;
 };
@@ -70,0 +48,0 @@

src/sort.ts

@@ -11,3 +11,3 @@ import postcss from 'postcss';
  * @param stylesheet
- * @returns
+ * @returns the sorted stylesheet
  */
@@ -19,3 +19,11 @@ export function sort(
     sortShorthandEnabled,
-  }: { sortAtRulesEnabled: boolean | undefined; sortShorthandEnabled: boolean | undefined }
+  }: { sortAtRulesEnabled: boolean | undefined; sortShorthandEnabled: boolean | undefined } = {
+    // These default values should remain undefined so we don't override the default
+    // values set in packages/css/src/plugins/sort-atomic-style-sheet.ts
+    //
+    // Modify packages/css/src/plugins/sort-atomic-style-sheet.ts if you want to
+    // update the actual default values for sortAtRulesEnabled and sortShortEnabled.
+    sortAtRulesEnabled: undefined,
+    sortShorthandEnabled: undefined,
+  }
 ): string {
@@ -22,0 +30,0 @@ const result = postcss([

No alert changes

Improved metrics

Total package byte prevSize

344020

increased by1.17%

Lines of code

9003

increased by1.01%

No dependency changes