@compiled/css - npm Package Compare versions

Comparing version 0.13.0 to 0.14.0

dist/plugins/sort-atomic-style-sheet.d.ts

 import type { Plugin } from 'postcss';
 /**
- * PostCSS plugin for sorting rules inside AtRules based on lvfha ordering.
+ * PostCSS plugin for sorting pseudo-selectors (inside and outside at-rules)
+ * based on lvfha ordering, and the at-rules themselves as well.
+ *
  * Only top level CSS rules will be sorted.
@@ -8,3 +10,3 @@ *
  */
-export declare const sortAtomicStyleSheet: () => Plugin;
+export declare const sortAtomicStyleSheet: (sortAtRulesEnabled: boolean) => Plugin;
 export declare const postcss = true;

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

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.postcss = exports.sortAtomicStyleSheet = void 0;
-const style_ordering_1 = require("../utils/style-ordering");
+const sort_pseudo_selectors_1 = require("../utils/sort-pseudo-selectors");
+const parse_at_rule_1 = require("./at-rules/parse-at-rule");
+const sort_at_rules_1 = require("./at-rules/sort-at-rules");
+const sortAtRulePseudoSelectors = (atRule) => {
+    const rules = [];
+    atRule.each((childNode) => {
+        switch (childNode.type) {
+            case 'atrule':
+                sortAtRulePseudoSelectors(childNode);
+                break;
+            case 'rule':
+                rules.push(childNode.clone());
+                childNode.remove();
+                break;
+            default:
+                break;
+        }
+    });
+    (0, sort_pseudo_selectors_1.sortPseudoSelectors)(rules);
+    rules.forEach((rule) => {
+        atRule.append(rule);
+    });
+};
 /**
- * Returns where it should be placed.
+ * PostCSS plugin for sorting pseudo-selectors (inside and outside at-rules)
+ * based on lvfha ordering, and the at-rules themselves as well.
  *
- * @param selector
- * @returns
- */
-const pseudoSelectorScore = (selector) => {
-    const index = style_ordering_1.styleOrder.findIndex((pseudoClass) => selector.trim().endsWith(pseudoClass));
-    return index + 1;
-};
-/**
- * PostCSS plugin for sorting rules inside AtRules based on lvfha ordering.
  * Only top level CSS rules will be sorted.
@@ -21,3 +35,3 @@ *
  */
-const sortAtomicStyleSheet = () => {
+const sortAtomicStyleSheet = (sortAtRulesEnabled) => {
     return {
@@ -34,3 +48,8 @@ postcssPlugin: 'sort-atomic-style-sheet',
                         if (((_a = node.first) === null || _a === void 0 ? void 0 : _a.type) === 'atrule') {
-                            atRules.push(node);
+                            atRules.push({
+                                parsed: sortAtRulesEnabled ? (0, parse_at_rule_1.parseAtRule)(node.first.params) : [],
+                                node,
+                                atRuleName: node.first.name,
+                                query: node.first.params,
+                            });
                         }
@@ -43,3 +62,8 @@ else {
                     case 'atrule': {
-                        atRules.push(node);
+                        atRules.push({
+                            parsed: sortAtRulesEnabled ? (0, parse_at_rule_1.parseAtRule)(node.params) : [],
+                            node,
+                            atRuleName: node.name,
+                            query: node.params,
+                        });
                         break;
@@ -52,8 +76,14 @@ }
             });
-            rules.sort((rule1, rule2) => {
-                const selector1 = rule1.selectors.length ? rule1.selectors[0] : rule1.selector;
-                const selector2 = rule2.selectors.length ? rule2.selectors[0] : rule2.selector;
-                return pseudoSelectorScore(selector1) - pseudoSelectorScore(selector2);
-            });
-            root.nodes = [...catchAll, ...rules, ...atRules];
+            (0, sort_pseudo_selectors_1.sortPseudoSelectors)(rules);
+            if (sortAtRulesEnabled) {
+                atRules.sort(sort_at_rules_1.sortAtRules);
+            }
+            for (const atRule of atRules) {
+                const node = atRule.node;
+                if (node.type !== 'atrule') {
+                    continue;
+                }
+                sortAtRulePseudoSelectors(node);
+            }
+            root.nodes = [...catchAll, ...rules, ...atRules.map((atRule) => atRule.node)];
         },
@@ -60,0 +90,0 @@ };

dist/sort.d.ts

@@ -7,2 +7,2 @@ /**
  */
-export declare function sort(stylesheet: string): string;
+export declare function sort(stylesheet: string, sortAtRulesEnabled: boolean | undefined): string;

dist/sort.js

@@ -17,7 +17,7 @@ "use strict";
  */
-function sort(stylesheet) {
+function sort(stylesheet, sortAtRulesEnabled) {
     const result = (0, postcss_1.default)([
         (0, postcss_discard_duplicates_1.default)(),
         (0, merge_duplicate_at_rules_1.mergeDuplicateAtRules)(),
-        (0, sort_atomic_style_sheet_1.sortAtomicStyleSheet)(),
+        (0, sort_atomic_style_sheet_1.sortAtomicStyleSheet)(sortAtRulesEnabled !== null && sortAtRulesEnabled !== void 0 ? sortAtRulesEnabled : true),
     ]).process(stylesheet, {
@@ -24,0 +24,0 @@ from: undefined,

dist/transform.d.ts

@@ -5,2 +5,3 @@ export interface TransformOpts {
     increaseSpecificity?: boolean;
+    sortAtRules?: boolean;
 }
@@ -7,0 +8,0 @@ /**

dist/transform.js

@@ -20,3 +20,3 @@ "use strict";
 const parent_orphaned_pseudos_1 = require("./plugins/parent-orphaned-pseudos");
-const sort_at_rule_pseudos_1 = require("./plugins/sort-at-rule-pseudos");
+const sort_atomic_style_sheet_1 = require("./plugins/sort-atomic-style-sheet");
 /**
@@ -29,2 +29,3 @@ * Will transform CSS into multiple CSS sheets.
 const transformCss = (css, opts) => {
+    var _a;
     const sheets = [];
@@ -48,3 +49,3 @@ const classNames = [];
             ...(opts.increaseSpecificity ? [(0, increase_specificity_1.increaseSpecificity)()] : []),
-            (0, sort_at_rule_pseudos_1.sortAtRulePseudos)(),
+            (0, sort_atomic_style_sheet_1.sortAtomicStyleSheet)((_a = opts.sortAtRules) !== null && _a !== void 0 ? _a : true),
             ...(process.env.AUTOPREFIXER === 'off' ? [] : [(0, autoprefixer_1.default)()]),
@@ -51,0 +52,0 @@ (0, postcss_normalize_whitespace_1.default)(),

dist/utils/style-ordering.d.ts

 /**
- * Ordered style buckets using the long psuedo selector.
- * If changes make sure that it aligns with the definition in `packages/react/src/runtime/sheet.tsx`.
+ * Ordered style buckets using the long pseudo-selector.
+ *
+ * If changed, make sure that it aligns with the definition in `packages/react/src/runtime/sheet.ts`.
  */
-export declare const styleOrder: string[];
+export declare const styleOrder: readonly string[];

dist/utils/style-ordering.js

@@ -5,4 +5,5 @@ "use strict";
 /**
- * Ordered style buckets using the long psuedo selector.
- * If changes make sure that it aligns with the definition in `packages/react/src/runtime/sheet.tsx`.
+ * Ordered style buckets using the long pseudo-selector.
+ *
+ * If changed, make sure that it aligns with the definition in `packages/react/src/runtime/sheet.ts`.
  */
@@ -9,0 +10,0 @@ exports.styleOrder = [

package.json

 {
   "name": "@compiled/css",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "A familiar and performant compile time CSS-in-JS library for React.",
@@ -26,3 +26,3 @@ "homepage": "https://compiledcssinjs.com/docs/pkg-css",
   "dependencies": {
-    "@compiled/utils": "^0.11.0",
+    "@compiled/utils": "^0.11.1",
     "autoprefixer": "^10.4.14",
@@ -29,0 +29,0 @@ "cssnano-preset-default": "^5.2.14",

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

@@ -1,18 +0,38 @@
-import type { ChildNode, Node, Rule, Plugin } from 'postcss';
+import type { ChildNode, Rule, Plugin, AtRule } from 'postcss';
 
-import { styleOrder } from '../utils/style-ordering';
+import { sortPseudoSelectors } from '../utils/sort-pseudo-selectors';
 
-/**
- * Returns where it should be placed.
- *
- * @param selector
- * @returns
- */
-const pseudoSelectorScore = (selector: string) => {
-  const index = styleOrder.findIndex((pseudoClass) => selector.trim().endsWith(pseudoClass));
-  return index + 1;
+import { parseAtRule } from './at-rules/parse-at-rule';
+import { sortAtRules } from './at-rules/sort-at-rules';
+import type { AtRuleInfo } from './at-rules/types';
+
+const sortAtRulePseudoSelectors = (atRule: AtRule) => {
+  const rules: Rule[] = [];
+
+  atRule.each((childNode) => {
+    switch (childNode.type) {
+      case 'atrule':
+        sortAtRulePseudoSelectors(childNode);
+        break;
+
+      case 'rule':
+        rules.push(childNode.clone());
+        childNode.remove();
+        break;
+
+      default:
+        break;
+    }
+  });
+
+  sortPseudoSelectors(rules);
+  rules.forEach((rule) => {
+    atRule.append(rule);
+  });
 };
 
 /**
- * PostCSS plugin for sorting rules inside AtRules based on lvfha ordering.
+ * PostCSS plugin for sorting pseudo-selectors (inside and outside at-rules)
+ * based on lvfha ordering, and the at-rules themselves as well.
+ *
  * Only top level CSS rules will be sorted.
@@ -22,9 +42,9 @@ *
  */
-export const sortAtomicStyleSheet = (): Plugin => {
+export const sortAtomicStyleSheet = (sortAtRulesEnabled: boolean): Plugin => {
   return {
     postcssPlugin: 'sort-atomic-style-sheet',
     Once(root) {
-      const catchAll: Node[] = [];
+      const catchAll: ChildNode[] = [];
       const rules: Rule[] = [];
-      const atRules: Node[] = [];
+      const atRules: AtRuleInfo[] = [];
 
@@ -35,3 +55,8 @@ root.each((node) => {
             if (node.first?.type === 'atrule') {
-              atRules.push(node);
+              atRules.push({
+                parsed: sortAtRulesEnabled ? parseAtRule(node.first.params) : [],
+                node,
+                atRuleName: node.first.name,
+                query: node.first.params,
+              });
             } else {
@@ -45,3 +70,8 @@ rules.push(node);
           case 'atrule': {
-            atRules.push(node);
+            atRules.push({
+              parsed: sortAtRulesEnabled ? parseAtRule(node.params) : [],
+              node,
+              atRuleName: node.name,
+              query: node.params,
+            });
             break;
@@ -56,9 +86,16 @@ }
 
-      rules.sort((rule1, rule2) => {
-        const selector1 = rule1.selectors.length ? rule1.selectors[0] : rule1.selector;
-        const selector2 = rule2.selectors.length ? rule2.selectors[0] : rule2.selector;
-        return pseudoSelectorScore(selector1) - pseudoSelectorScore(selector2);
-      });
+      sortPseudoSelectors(rules);
+      if (sortAtRulesEnabled) {
+        atRules.sort(sortAtRules);
+      }
 
-      root.nodes = [...catchAll, ...rules, ...atRules] as ChildNode[];
+      for (const atRule of atRules) {
+        const node = atRule.node;
+        if (node.type !== 'atrule') {
+          continue;
+        }
+        sortAtRulePseudoSelectors(node);
+      }
+
+      root.nodes = [...catchAll, ...rules, ...atRules.map((atRule) => atRule.node)];
     },
@@ -65,0 +102,0 @@ };

src/sort.ts

@@ -13,7 +13,7 @@ import postcss from 'postcss';
  */
-export function sort(stylesheet: string): string {
+export function sort(stylesheet: string, sortAtRulesEnabled: boolean | undefined): string {
   const result = postcss([
     discardDuplicates(),
     mergeDuplicateAtRules(),
-    sortAtomicStyleSheet(),
+    sortAtomicStyleSheet(sortAtRulesEnabled ?? true),
   ]).process(stylesheet, {
@@ -20,0 +20,0 @@ from: undefined,

src/transform.ts

@@ -15,3 +15,3 @@ import { createError, unique } from '@compiled/utils';
 import { parentOrphanedPseudos } from './plugins/parent-orphaned-pseudos';
-import { sortAtRulePseudos } from './plugins/sort-at-rule-pseudos';
+import { sortAtomicStyleSheet } from './plugins/sort-atomic-style-sheet';
 
@@ -22,2 +22,3 @@ export interface TransformOpts {
   increaseSpecificity?: boolean;
+  sortAtRules?: boolean;
 }
@@ -54,3 +55,3 @@
       ...(opts.increaseSpecificity ? [increaseSpecificity()] : []),
-      sortAtRulePseudos(),
+      sortAtomicStyleSheet(opts.sortAtRules ?? true),
       ...(process.env.AUTOPREFIXER === 'off' ? [] : [autoprefixer()]),
@@ -57,0 +58,0 @@ whitespace(),

src/utils/style-ordering.ts

 /**
- * Ordered style buckets using the long psuedo selector.
- * If changes make sure that it aligns with the definition in `packages/react/src/runtime/sheet.tsx`.
+ * Ordered style buckets using the long pseudo-selector.
+ *
+ * If changed, make sure that it aligns with the definition in `packages/react/src/runtime/sheet.ts`.
  */
-export const styleOrder = [
+export const styleOrder: readonly string[] = [
   ':link',
@@ -7,0 +8,0 @@ ':visited',

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

317018

increased by28.05%

Number of package files

174

increased by10.13%

Lines of code

8198

increased by28.46%

Dependency changes

• Updated@compiled/utils@^0.11.1