@compiled/css - npm Package Compare versions

Comparing version 0.14.0 to 0.15.0

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

@@ -10,3 +10,6 @@ import type { Plugin } from 'postcss';
  */
-export declare const sortAtomicStyleSheet: (sortAtRulesEnabled: boolean) => Plugin;
+export declare const sortAtomicStyleSheet: (config: {
+    sortAtRulesEnabled: boolean | undefined;
+    sortShorthandEnabled: boolean | undefined;
+}) => Plugin;
 export declare const postcss = true;

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

@@ -7,2 +7,3 @@ "use strict";
 const sort_at_rules_1 = require("./at-rules/sort-at-rules");
+const sort_shorthand_declarations_1 = require("./sort-shorthand-declarations");
 const sortAtRulePseudoSelectors = (atRule) => {
@@ -36,3 +37,6 @@ const rules = [];
  */
-const sortAtomicStyleSheet = (sortAtRulesEnabled) => {
+const sortAtomicStyleSheet = (config) => {
+    var _a, _b;
+    const sortAtRulesEnabled = (_a = config.sortAtRulesEnabled) !== null && _a !== void 0 ? _a : true;
+    const sortShorthandEnabled = (_b = config.sortShorthandEnabled) !== null && _b !== void 0 ? _b : false;
     return {
@@ -87,2 +91,5 @@ postcssPlugin: 'sort-atomic-style-sheet',
             root.nodes = [...catchAll, ...rules, ...atRules.map((atRule) => atRule.node)];
+            if (sortShorthandEnabled) {
+                (0, sort_shorthand_declarations_1.sortShorthandDeclarations)(root.nodes);
+            }
         },
@@ -89,0 +96,0 @@ };

dist/sort.d.ts

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

dist/sort.js

@@ -17,7 +17,7 @@ "use strict";
  */
-function sort(stylesheet, sortAtRulesEnabled) {
+function sort(stylesheet, { sortAtRulesEnabled, sortShorthandEnabled, }) {
     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)(sortAtRulesEnabled !== null && sortAtRulesEnabled !== void 0 ? sortAtRulesEnabled : true),
+        (0, sort_atomic_style_sheet_1.sortAtomicStyleSheet)({ sortAtRulesEnabled, sortShorthandEnabled }),
     ]).process(stylesheet, {
@@ -24,0 +24,0 @@ from: undefined,

dist/transform.d.ts

@@ -6,2 +6,3 @@ export interface TransformOpts {
     sortAtRules?: boolean;
+    sortShorthand?: boolean;
 }
@@ -8,0 +9,0 @@ /**

dist/transform.js

@@ -28,3 +28,2 @@ "use strict";
 const transformCss = (css, opts) => {
-    var _a;
     const sheets = [];
@@ -48,3 +47,6 @@ const classNames = [];
             ...(opts.increaseSpecificity ? [(0, increase_specificity_1.increaseSpecificity)()] : []),
-            (0, sort_atomic_style_sheet_1.sortAtomicStyleSheet)((_a = opts.sortAtRules) !== null && _a !== void 0 ? _a : true),
+            (0, sort_atomic_style_sheet_1.sortAtomicStyleSheet)({
+                sortAtRulesEnabled: opts.sortAtRules,
+                sortShorthandEnabled: opts.sortShorthand,
+            }),
             ...(process.env.AUTOPREFIXER === 'off' ? [] : [(0, autoprefixer_1.default)()]),
@@ -51,0 +53,0 @@ (0, postcss_normalize_whitespace_1.default)(),

package.json

 {
   "name": "@compiled/css",
-  "version": "0.14.0",
+  "version": "0.15.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.1",
+    "@compiled/utils": "^0.12.0",
     "autoprefixer": "^10.4.14",
@@ -39,4 +39,5 @@ "cssnano-preset-default": "^5.2.14",
     "@types/autoprefixer": "^10.2.0",
-    "@types/cssnano": "^5.0.0"
+    "@types/cssnano": "^5.0.0",
+    "outdent": "^0.8.0"
   }
 }

src/plugins/__tests__/sort-at-rules.test.ts

@@ -6,3 +6,5 @@ import postcss from 'postcss';
 const transform = (css: string) => {
-  const result = postcss([sortAtomicStyleSheet(true)]).process(css, {
+  const result = postcss([
+    sortAtomicStyleSheet({ sortAtRulesEnabled: undefined, sortShorthandEnabled: undefined }),
+  ]).process(css, {
     from: undefined,
@@ -9,0 +11,0 @@ });

src/plugins/__tests__/sort-pseudo-selectors.test.ts

@@ -8,3 +8,5 @@ import postcss from 'postcss';
 const transform = (css: TemplateStringsArray) => {
-  const result = postcss([sortAtomicStyleSheet(true)]).process(css[0], {
+  const result = postcss([
+    sortAtomicStyleSheet({ sortAtRulesEnabled: undefined, sortShorthandEnabled: undefined }),
+  ]).process(css[0], {
     from: undefined,
@@ -17,8 +19,9 @@ });
 const transformWithAtomicClasses = (css: TemplateStringsArray) => {
-  const result = postcss([atomicifyRules(), sortAtomicStyleSheet(true), whitespace()]).process(
-    css[0],
-    {
-      from: undefined,
-    }
-  );
+  const result = postcss([
+    atomicifyRules(),
+    sortAtomicStyleSheet({ sortAtRulesEnabled: undefined, sortShorthandEnabled: undefined }),
+    whitespace(),
+  ]).process(css[0], {
+    from: undefined,
+  });
 
@@ -25,0 +28,0 @@ return result.css;

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

@@ -8,2 +8,3 @@ import type { ChildNode, Rule, Plugin, AtRule } from 'postcss';
 import type { AtRuleInfo } from './at-rules/types';
+import { sortShorthandDeclarations } from './sort-shorthand-declarations';
 
@@ -43,3 +44,9 @@ const sortAtRulePseudoSelectors = (atRule: AtRule) => {
  */
-export const sortAtomicStyleSheet = (sortAtRulesEnabled: boolean): Plugin => {
+export const sortAtomicStyleSheet = (config: {
+  sortAtRulesEnabled: boolean | undefined;
+  sortShorthandEnabled: boolean | undefined;
+}): Plugin => {
+  const sortAtRulesEnabled = config.sortAtRulesEnabled ?? true;
+  const sortShorthandEnabled = config.sortShorthandEnabled ?? false;
+
   return {
@@ -99,2 +106,6 @@ postcssPlugin: 'sort-atomic-style-sheet',
       root.nodes = [...catchAll, ...rules, ...atRules.map((atRule) => atRule.node)];
+
+      if (sortShorthandEnabled) {
+        sortShorthandDeclarations(root.nodes);
+      }
     },
@@ -101,0 +112,0 @@ };

src/sort.ts

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

src/transform.ts

@@ -22,2 +22,3 @@ import { createError, unique } from '@compiled/utils';
   sortAtRules?: boolean;
+  sortShorthand?: boolean;
 }
@@ -54,3 +55,6 @@
       ...(opts.increaseSpecificity ? [increaseSpecificity()] : []),
-      sortAtomicStyleSheet(opts.sortAtRules ?? true),
+      sortAtomicStyleSheet({
+        sortAtRulesEnabled: opts.sortAtRules,
+        sortShorthandEnabled: opts.sortShorthand,
+      }),
       ...(process.env.AUTOPREFIXER === 'off' ? [] : [autoprefixer()]),
@@ -57,0 +61,0 @@ whitespace(),

No alert changes

Improved metrics

Total package byte prevSize

337846

6.57%

Number of package files

179

2.87%

Lines of code

8868

8.17%

Worsened metrics

Dev dependency count

3

50%

Dependency changes

• + Added

  @compiled/utils@0.12.0
  (transitive)

• - Removed

  @compiled/utils@0.11.2
  (transitive)

• Updated

  @compiled/utils@^0.12.0