@compiled/css - npm Package Compare versions

Comparing version 0.12.1 to 0.12.2

dist/plugins/atomicify-rules.d.ts

@@ -1,2 +0,9 @@
-import type { Plugin } from 'postcss';
+import type { Plugin, Container } from 'postcss';
+interface PluginOpts {
+    classNameCompressionMap?: Record<string, string>;
+    callback?: (className: string) => void;
+    selectors?: string[];
+    atRule?: string;
+    parentNode?: Container;
+}
 /**
@@ -10,3 +17,4 @@ * Transforms a style sheet into atomic rules.
  */
-export declare const atomicifyRules: (opts?: {}) => Plugin;
+export declare const atomicifyRules: (opts?: PluginOpts) => Plugin;
 export declare const postcss = true;
+export {};

dist/transform.d.ts

@@ -1,4 +0,5 @@
-interface TransformOpts {
+export interface TransformOpts {
     optimizeCss?: boolean;
-    classNameCompressionMap?: object;
+    classNameCompressionMap?: Record<string, string>;
+    increaseSpecificity?: boolean;
 }
@@ -15,2 +16,1 @@ /**
 };
-export {};

dist/transform.js

@@ -17,2 +17,3 @@ "use strict";
 const extract_stylesheets_1 = require("./plugins/extract-stylesheets");
+const increase_specificity_1 = require("./plugins/increase-specificity");
 const normalize_css_1 = require("./plugins/normalize-css");
@@ -45,2 +46,3 @@ const parent_orphaned_pseudos_1 = require("./plugins/parent-orphaned-pseudos");
             }),
+            ...(opts.increaseSpecificity ? [(0, increase_specificity_1.increaseSpecificity)()] : []),
             (0, sort_at_rule_pseudos_1.sortAtRulePseudos)(),
@@ -47,0 +49,0 @@ ...(process.env.AUTOPREFIXER === 'off' ? [] : [(0, autoprefixer_1.default)()]),

package.json

 {
   "name": "@compiled/css",
-  "version": "0.12.1",
+  "version": "0.12.2",
   "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/__tests__/transform.test.ts

@@ -1,7 +0,3 @@
-import { transformCss as transform } from '../transform';
+import { transformCss as transform, type TransformOpts } from '../transform';
 
-interface TransformOpts {
-  optimizeCss?: boolean;
-}
-
 const transformCss = (code: string, opts: TransformOpts = { optimizeCss: false }) =>
@@ -442,2 +438,63 @@ transform(code, opts);
   });
+
+  it('should add extra specificity after atomicizing without affecting class names', () => {
+    const styles = `
+      padding: 8px;
+      color: red;
+      :before {
+        content: var(--hello-world);
+        margin-right: 8px;
+        color: pink;
+      }
+    `;
+    const actual = transformCss(styles, { increaseSpecificity: true });
+    const expected = transformCss(styles, { increaseSpecificity: false });
+
+    expect(actual.classNames).toEqual(expected.classNames);
+  });
+
+  describe('increased specificity', () => {
+    it('should add extra specificity to declarations', () => {
+      const styles = `
+        padding: 8px;
+        color: red;
+        :before {
+          content: var(--hello-world);
+          margin-right: 8px;
+          color: pink;
+        }
+        ::after {
+          color: red;
+        }
+      `;
+      const { sheets: actual } = transformCss(styles, { increaseSpecificity: true });
+
+      expect(actual.join('\n')).toMatchInlineSnapshot(`
+        "._ca0qftgi:not(#\\9){padding-top:8px}
+        ._u5f3ftgi:not(#\\9){padding-right:8px}
+        ._n3tdftgi:not(#\\9){padding-bottom:8px}
+        ._19bvftgi:not(#\\9){padding-left:8px}
+        ._syaz5scu:not(#\\9){color:red}
+        ._1kt9o5oc:not(#\\9):before{content:var(--hello-world)}
+        ._eid3ftgi:not(#\\9):before{margin-right:8px}
+        ._is0632ev:not(#\\9):before{color:pink}
+        ._14rn5scu:not(#\\9):after{color:red}"
+      `);
+    });
+
+    it('should increase & selector specificity', () => {
+      const styles = `
+        div & { color: red; }
+        div:hover & { color: red; }
+        div &:hover { color: red; }
+      `;
+      const { sheets: actual } = transformCss(styles, { increaseSpecificity: true });
+
+      expect(actual.join('\n')).toMatchInlineSnapshot(`
+        "div ._kqan5scu:not(#\\9){color:red}
+        div:hover ._12hc5scu:not(#\\9){color:red}
+        div ._wntz5scu:not(#\\9):hover{color:red}"
+      `);
+    });
+  });
 });

src/plugins/atomicify-rules.ts

@@ -6,7 +6,4 @@ import { hash } from '@compiled/utils';
 interface PluginOpts {
-  classNameCompressionMap?: { [index: string]: string };
+  classNameCompressionMap?: Record<string, string>;
   callback?: (className: string) => void;
-}
-
-interface AtomicifyOpts extends PluginOpts {
   selectors?: string[];
@@ -29,3 +26,3 @@ atRule?: string;
  */
-const atomicClassName = (node: Declaration, opts: AtomicifyOpts) => {
+const atomicClassName = (node: Declaration, opts: PluginOpts) => {
   const selectors = opts.selectors ? opts.selectors.join('') : '';
@@ -81,3 +78,3 @@ const group = hash(`${opts.atRule}${selectors}${node.prop}`).slice(0, 4);
  */
-const buildAtomicSelector = (node: Declaration, opts: AtomicifyOpts) => {
+const buildAtomicSelector = (node: Declaration, opts: PluginOpts) => {
   const { classNameCompressionMap } = opts;
@@ -117,3 +114,3 @@ const selectors: string[] = [];
  */
-const atomicifyDecl = (node: Declaration, opts: AtomicifyOpts) => {
+const atomicifyDecl = (node: Declaration, opts: PluginOpts) => {
   const selector = buildAtomicSelector(node, opts);
@@ -142,3 +139,3 @@ const newDecl = node.clone({
  */
-const atomicifyRule = (node: Rule, opts: AtomicifyOpts): Rule[] => {
+const atomicifyRule = (node: Rule, opts: PluginOpts): Rule[] => {
   if (!node.nodes) {
@@ -215,3 +212,3 @@ return [];
  */
-const atomicifyAtRule = (node: AtRule, opts: AtomicifyOpts): AtRule => {
+const atomicifyAtRule = (node: AtRule, opts: PluginOpts): AtRule => {
   const children: ChildNode[] = [];
@@ -273,3 +270,3 @@ const newNode = node.clone({
  */
-export const atomicifyRules = (opts = {}): Plugin => {
+export const atomicifyRules = (opts: PluginOpts = {}): Plugin => {
   return {
@@ -276,0 +273,0 @@ postcssPlugin: 'atomicify-rules',

src/transform.ts

@@ -12,2 +12,3 @@ import { createError, unique } from '@compiled/utils';
 import { extractStyleSheets } from './plugins/extract-stylesheets';
+import { increaseSpecificity } from './plugins/increase-specificity';
 import { normalizeCSS } from './plugins/normalize-css';
@@ -17,5 +18,6 @@ import { parentOrphanedPseudos } from './plugins/parent-orphaned-pseudos';
 
-interface TransformOpts {
+export interface TransformOpts {
   optimizeCss?: boolean;
-  classNameCompressionMap?: object;
+  classNameCompressionMap?: Record<string, string>;
+  increaseSpecificity?: boolean;
 }
@@ -51,2 +53,3 @@
       }),
+      ...(opts.increaseSpecificity ? [increaseSpecificity()] : []),
       sortAtRulePseudos(),
@@ -53,0 +56,0 @@ ...(process.env.AUTOPREFIXER === 'off' ? [] : [autoprefixer()]),

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

247574

increased by4.29%

Number of package files

158

increased by3.27%

Lines of code

6382

increased by3.91%

No dependency changes