@compiled/css - npm Package Compare versions

Comparing version 0.15.0 to 0.16.0

dist/plugins/atomicify-rules.d.ts

@@ -8,2 +8,3 @@ import type { Plugin, Container } from 'postcss';
     parentNode?: Container;
+    classHashPrefix?: string;
 }
@@ -17,2 +18,4 @@ /**
  * 1. No nested rules allowed - normalize them with the `parent-orphaned-pseudos` and `nested` plugins first.
+ *
+ * @throws Throws an error if `opts.classHashPrefix` contains invalid css class/id characters
  */
@@ -19,0 +22,0 @@ export declare const atomicifyRules: (opts?: PluginOpts) => Plugin;

dist/plugins/atomicify-rules.js

@@ -7,2 +7,13 @@ "use strict";
 /**
+ * Returns true if a given string is a valid CSS identifier
+ *
+ * @param value the value to test
+ * @returns `true` if given value is valid, `false` if not
+ *
+ */
+const isCssIdentifierValid = (value) => {
+    const validCssIdentifierRegex = /^[a-zA-Z\-_]+[a-zA-Z\-_0-9]*$/;
+    return validCssIdentifierRegex.test(value);
+};
+/**
  * Returns an atomic rule class name using this form:
@@ -20,4 +31,6 @@ *
 const atomicClassName = (node, opts) => {
+    var _a;
     const selectors = opts.selectors ? opts.selectors.join('') : '';
-    const group = (0, utils_1.hash)(`${opts.atRule}${selectors}${node.prop}`).slice(0, 4);
+    const prefix = (_a = opts.classHashPrefix) !== null && _a !== void 0 ? _a : '';
+    const group = (0, utils_1.hash)(`${prefix}${opts.atRule}${selectors}${node.prop}`).slice(0, 4);
     const value = node.important ? node.value + node.important : node.value;
@@ -219,4 +232,9 @@ const valueHash = (0, utils_1.hash)(value).slice(0, 4);
  * 1. No nested rules allowed - normalize them with the `parent-orphaned-pseudos` and `nested` plugins first.
+ *
+ * @throws Throws an error if `opts.classHashPrefix` contains invalid css class/id characters
  */
 const atomicifyRules = (opts = {}) => {
+    if (opts.classHashPrefix && !isCssIdentifierValid(opts.classHashPrefix)) {
+        throw new Error(`${opts.classHashPrefix} isn't a valid CSS identifier. Accepted characters are ^[a-zA-Z\-_]+[a-zA-Z\-_0-9]*$`);
+    }
     return {
@@ -223,0 +241,0 @@ postcssPlugin: 'atomicify-rules',

dist/transform.d.ts

@@ -7,2 +7,3 @@ export interface TransformOpts {
     sortShorthand?: boolean;
+    classHashPrefix?: string;
 }
@@ -9,0 +10,0 @@ /**

dist/transform.js

@@ -44,2 +44,3 @@ "use strict";
                 callback: (className) => classNames.push(className),
+                classHashPrefix: opts.classHashPrefix,
             }),
@@ -46,0 +47,0 @@ ...(opts.increaseSpecificity ? [(0, increase_specificity_1.increaseSpecificity)()] : []),

package.json

 {
   "name": "@compiled/css",
-  "version": "0.15.0",
+  "version": "0.16.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.12.0",
+    "@compiled/utils": "^0.13.0",
     "autoprefixer": "^10.4.14",
@@ -29,0 +29,0 @@ "cssnano-preset-default": "^5.2.14",

src/plugins/atomicify-rules.ts

@@ -11,5 +11,18 @@ import { hash } from '@compiled/utils';
   parentNode?: Container;
+  classHashPrefix?: string;
 }
 
 /**
+ * Returns true if a given string is a valid CSS identifier
+ *
+ * @param value the value to test
+ * @returns `true` if given value is valid, `false` if not
+ *
+ */
+const isCssIdentifierValid = (value: string): boolean => {
+  const validCssIdentifierRegex = /^[a-zA-Z\-_]+[a-zA-Z\-_0-9]*$/;
+  return validCssIdentifierRegex.test(value);
+};
+
+/**
  * Returns an atomic rule class name using this form:
@@ -28,3 +41,5 @@ *
   const selectors = opts.selectors ? opts.selectors.join('') : '';
-  const group = hash(`${opts.atRule}${selectors}${node.prop}`).slice(0, 4);
+  const prefix = opts.classHashPrefix ?? '';
+  const group = hash(`${prefix}${opts.atRule}${selectors}${node.prop}`).slice(0, 4);
+
   const value = node.important ? node.value + node.important : node.value;
@@ -265,4 +280,12 @@ const valueHash = hash(value).slice(0, 4);
  * 1. No nested rules allowed - normalize them with the `parent-orphaned-pseudos` and `nested` plugins first.
+ *
+ * @throws Throws an error if `opts.classHashPrefix` contains invalid css class/id characters
  */
 export const atomicifyRules = (opts: PluginOpts = {}): Plugin => {
+  if (opts.classHashPrefix && !isCssIdentifierValid(opts.classHashPrefix)) {
+    throw new Error(
+      `${opts.classHashPrefix} isn't a valid CSS identifier. Accepted characters are ^[a-zA-Z\-_]+[a-zA-Z\-_0-9]*$`
+    );
+  }
+
   return {
@@ -269,0 +292,0 @@ postcssPlugin: 'atomicify-rules',

src/transform.ts

@@ -23,2 +23,3 @@ import { createError, unique } from '@compiled/utils';
   sortShorthand?: boolean;
+  classHashPrefix?: string;
 }
@@ -53,2 +54,3 @@
         callback: (className: string) => classNames.push(className),
+        classHashPrefix: opts.classHashPrefix,
       }),
@@ -55,0 +57,0 @@ ...(opts.increaseSpecificity ? [increaseSpecificity()] : []),

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

340033

increased by0.65%

Lines of code

8913

increased by0.51%

Dependency changes

• + Added@compiled/utils@0.13.2(transitive)

• - Removed@compiled/utils@0.12.0(transitive)

• Updated@compiled/utils@^0.13.0