@lesjoursfr/postcss-extract-css-variables 1.0.3 → 1.0.4

package/.eslintrc.js

@@ -0,0 +1,15 @@
+/* eslint-disable no-undef */
+module.exports = {
+  parserOptions: {
+    ecmaVersion: 2017,
+  },
+  env: {
+    node: true,
+    es6: true,
+  },
+  extends: ["eslint:recommended", "plugin:jest/recommended"],
+  rules: {
+    "jest/expect-expect": "off",
+    semi: ["error", "always"],
+  },
+};

package/.prettierignore

@@ -0,0 +1,9 @@
+# Tests files
+test/
+coverage/
+
+# Yarn & node.js dependencies
+package.json
+node_modules/
+.pnp.*
+.yarn/*

package/.prettierrc.js

@@ -0,0 +1,12 @@
+module.exports = {
+  printWidth: 120,
+  trailingComma: "es5",
+  overrides: [
+    {
+      files: [".eslintrc.cjs", ".prettierrc.cjs", "*.json"],
+      options: {
+        printWidth: 80,
+      },
+    },
+  ],
+};

package/README.md

@@ -1,33 +1,36 @@
 [![npm version](https://badge.fury.io/js/@lesjoursfr%2Fpostcss-extract-css-variables.svg)](https://badge.fury.io/js/@lesjoursfr%2Fpostcss-extract-css-variables)
+[![QC Checks](https://github.com/lesjoursfr/postcss-extract-css-variables/actions/workflows/quality-control.yml/badge.svg)](https://github.com/lesjoursfr/postcss-extract-css-variables/actions/workflows/quality-control.yml)
+
+# postcss-extract-css-variables
 
-postcss-extract-css-variables
-================
 [PostCSS] plugin to extract rules with CSS variables.
 
-[PostCSS]: https://github.com/postcss/postcss
+[postcss]: https://github.com/postcss/postcss
 
 ```css
 /* Input example */
 .lj-color-35 {
-  --lj-color-main: #fda92a;
-  --lj-color-alpha: rgba(253,169,42,.75);
-  --lj-color-light: #fdde2a;
-  --lj-color-mixed: #fdc42a
+	--lj-color-main: #fda92a;
+	--lj-color-alpha: rgba(253, 169, 42, 0.75);
+	--lj-color-light: #fdde2a;
+	--lj-color-mixed: #fdc42a;
 }
 
 .selector-1 {
-    background-color: var(--lj-color-main);
-    content: "";
-    display: inline-block;
-    height: 5px;
-    margin-right: 10px;
-    width: 18px
+	background-color: var(--lj-color-main);
+	content: "";
+	display: inline-block;
+	height: 5px;
+	margin-right: 10px;
+	width: 18px;
 }
 ```
 
 ```css
 /* Output example */
-.lj-color-35 .selector-1 { background-color: #fda92a; }
+.lj-color-35 .selector-1 {
+	background-color: #fda92a;
+}
 ```
 
 ## Usage

package/index.js

@@ -1,5 +1,5 @@
-const os = require('os');
-const fs = require('fs');
+const os = require("os");
+const fs = require("fs");
 const CSS_VARIABLE_DECLARATION = /^--/;
 const CSS_VARIABLE_USE = /(var\([a-zA-Z0-9-]+\))/;
 const HTML_NODE = /^html([#.:[][#.:_[\]\-a-zA-Z0-9]+)?(?:\s|$)/;
@@ -17,11 +17,11 @@ class CSSVariable {
 
   wrapAndReplace(selector, prop, value, important) {
     // Get new selector & value
-    const newSelector = this._mixSelectors(this.selector, selector.split(',')).join(',');
+    const newSelector = this._mixSelectors(this.selector, selector.split(",")).join(",");
     const newValue = value.replaceAll(`var(${this.name})`, this.value);
 
     // Return the rule
-    return (important === true)
+    return important === true
       ? `${newSelector} { ${prop}: ${newValue}!important; }`
       : `${newSelector} { ${prop}: ${newValue}; }`;
   }
@@ -32,9 +32,9 @@ class CSSVariable {
         const varHtmlMatch = HTML_NODE.exec(varSelector);
         const ruleHtmlMatch = HTML_NODE.exec(ruleSelector);
         if (varHtmlMatch !== null) {
-          return `html${varHtmlMatch[1] || ''}${ruleHtmlMatch[1] || ''} ${ruleSelector.replace(HTML_NODE, '').trim()}`;
+          return `html${varHtmlMatch[1] || ""}${ruleHtmlMatch[1] || ""} ${ruleSelector.replace(HTML_NODE, "").trim()}`;
         } else {
-          return ruleSelector.replace(`html${ruleHtmlMatch[1] || ''}`, `html${ruleHtmlMatch[1] || ''} ${varSelector}`);
+          return ruleSelector.replace(`html${ruleHtmlMatch[1] || ""}`, `html${ruleHtmlMatch[1] || ""} ${varSelector}`);
         }
       } else {
         return `${varSelector} ${ruleSelector.trim()}`;
@@ -50,12 +50,12 @@ module.exports = (opts = {}) => {
   // Check if we have an output path
   if (opts.output === undefined) {
     // Throw an error if we haven't an output parameter
-    throw new Error('Missing output parameter');
+    throw new Error("Missing output parameter");
   }
 
   // Return the PostCSS plugin
   return {
-    postcssPlugin: 'postcss-extract-css-variables',
+    postcssPlugin: "postcss-extract-css-variables",
 
     Root(root) {
       let cssVariablesHolder = [];
@@ -63,7 +63,7 @@ module.exports = (opts = {}) => {
       // Look for CSS variable declaration
       for (const rule of root.nodes) {
         // Check the type of node
-        if (rule.type === 'atrule' || rule.type === 'comment') {
+        if (rule.type === "atrule" || rule.type === "comment") {
           // Skip this rule
           continue;
         }
@@ -83,7 +83,7 @@ module.exports = (opts = {}) => {
       // Look for CSS variable use
       for (const rule of root.nodes) {
         // Check the type of node
-        if (rule.type === 'atrule' || rule.type === 'comment') {
+        if (rule.type === "atrule" || rule.type === "comment") {
           // Skip this rule
           continue;
         }
@@ -94,12 +94,7 @@ module.exports = (opts = {}) => {
             for (const cssVariable of cssVariablesHolder) {
               if (cssVariable.isUsed(declaration.value)) {
                 generatedRules.push(
-                  cssVariable.wrapAndReplace(
-                    rule.selector,
-                    declaration.prop,
-                    declaration.value,
-                    declaration.important
-                  )
+                  cssVariable.wrapAndReplace(rule.selector, declaration.prop, declaration.value, declaration.important)
                 );
               }
             }
@@ -108,7 +103,7 @@ module.exports = (opts = {}) => {
       }
 
       // Write the generated rules to the output file
-      fs.writeFileSync(opts.output, generatedRules.join(os.EOL), { encoding: 'utf8', mode: 0o666, flag: 'w' });
+      fs.writeFileSync(opts.output, generatedRules.join(os.EOL), { encoding: "utf8", mode: 0o666, flag: "w" });
     },
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lesjoursfr/postcss-extract-css-variables",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "PostCSS plugin to extract rules with CSS variables",
   "license": "MIT",
   "repository": "lesjoursfr/postcss-extract-css-variables",
@@ -18,39 +18,26 @@
     "postcss-extract-css-variables"
   ],
   "scripts": {
-    "test": "jest --coverage && eslint ."
+    "freshlock": "rm -rf node_modules/ && rm .yarn/install-state.gz && rm -r .yarn/cache/ && rm yarn.lock && yarn",
+    "check-lint": "eslint . --ext .js,.jsx,.ts,.tsx",
+    "check-format": "prettier --check .",
+    "lint": "eslint . --fix --ext .js,.jsx,.ts,.tsx",
+    "format": "prettier --write .",
+    "test": "jest --coverage"
   },
   "engines": {
-    "node": ">=v16.15.0"
+    "node": ">=16.15.1 || >=18.4.0"
   },
   "peerDependencies": {
     "postcss": "^8.4.14"
   },
   "devDependencies": {
-    "eslint": "^8.16.0",
-    "eslint-plugin-jest": "^26.4.6",
-    "jest": "^28.1.0",
-    "postcss": "^8.4.14"
-  },
-  "eslintConfig": {
-    "parserOptions": {
-      "ecmaVersion": 2017
-    },
-    "env": {
-      "node": true,
-      "es6": true
-    },
-    "extends": [
-      "eslint:recommended",
-      "plugin:jest/recommended"
-    ],
-    "rules": {
-      "jest/expect-expect": "off",
-      "semi": [
-        "error",
-        "always"
-      ]
-    }
+    "eslint": "^8.21.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-jest": "^26.7.0",
+    "jest": "^28.1.3",
+    "postcss": "^8.4.14",
+    "prettier": "^2.7.1"
   },
   "jest": {
     "coverageThreshold": {
@@ -59,5 +46,5 @@
       }
     }
   },
-  "packageManager": "yarn@3.2.1"
+  "packageManager": "yarn@3.2.2"
 }