@lesjoursfr/postcss-extract-css-variables 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# Change Log
+
+This project adheres to [Semantic Versioning](http://semver.org/).
+
+## 1.0.0
+
+Initial release

package/LICENSE

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright 2022 Adrien ERAUD <adrien@lebondrive.fr>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,59 @@
+[![npm version](https://badge.fury.io/js/@lesjoursfr%2Fpostcss-extract-css-variables.svg)](https://badge.fury.io/js/@lesjoursfr%2Fpostcss-extract-css-variables)
+
+postcss-extract-css-variables
+================
+[PostCSS] plugin to extract rules with CSS variables.
+
+[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
+}
+
+.selector-1 {
+    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; }
+```
+
+## Usage
+
+**Step 1:** Install plugin:
+
+```sh
+npm install --save-dev postcss postcss-extract-css-variables
+```
+
+**Step 2:** Check you project for existed PostCSS config: `postcss.config.js`
+in the project root, `"postcss"` section in `package.json`
+or `postcss` in bundle config.
+
+If you do not use PostCSS, add it according to [official docs]
+and set this plugin in settings.
+
+**Step 3:** Add the plugin add the end of the plugins list:
+
+```diff
+module.exports = {
+  plugins: [
+    require('autoprefixer'),
++   require('postcss-extract-css-variables')({ output: './output.css' })
+  ]
+}
+```
+
+[official docs]: https://github.com/postcss/postcss#usage

package/index.js

@@ -0,0 +1,88 @@
+const os = require('os');
+const fs = require('fs');
+const CSS_VARIABLE_DECLARATION = /^--/;
+const CSS_VARIABLE_USE = /(var\([a-zA-Z0-9-]+\))/;
+
+class CSSVariable {
+  constructor(name, selector, value) {
+    this.name = name;
+    this.selector = selector;
+    this.value = value;
+  }
+
+  isUsed(value) {
+    return value.includes(`var(${this.name})`);
+  }
+
+  wrapAndReplace(selector, prop, value) {
+    let newSelector = selector.split(',').map((el) => `${this.selector} ${el.trim()}`).join(',');
+    let newValue = value.replaceAll(`var(${this.name})`, this.value);
+
+    return `${newSelector} { ${prop}: ${newValue}; }`;
+  }
+}
+
+/**
+ * @type {import('postcss').PluginCreator}
+ */
+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');
+  }
+
+  // Return the PostCSS plugin
+  return {
+    postcssPlugin: 'postcss-extract-css-variables',
+
+    Root(root) {
+      let cssVariablesHolder = [];
+
+      // Look for CSS variable declaration
+      for (const rule of root.nodes) {
+        // Check the type of node
+        if (rule.type === 'atrule' || rule.type === 'comment') {
+          // Skip this rule
+          continue;
+        }
+
+        // Check nodes
+        for (const declaration of rule.nodes) {
+          if (CSS_VARIABLE_DECLARATION.test(declaration.prop)) {
+            // Add the CSS variable
+            cssVariablesHolder.push(new CSSVariable(declaration.prop, rule.selector, declaration.value));
+          }
+        }
+      }
+
+      // Open a stream for the destination file
+      const generatedRules = [];
+
+      // Look for CSS variable use
+      for (const rule of root.nodes) {
+        // Check the type of node
+        if (rule.type === 'atrule' || rule.type === 'comment') {
+          // Skip this rule
+          continue;
+        }
+
+        // Check nodes
+        for (const declaration of rule.nodes) {
+          if (CSS_VARIABLE_USE.test(declaration.value)) {
+            for (const cssVariable of cssVariablesHolder) {
+              if (cssVariable.isUsed(declaration.value)) {
+                generatedRules.push(cssVariable.wrapAndReplace(rule.selector, declaration.prop, declaration.value));
+              }
+            }
+          }
+        }
+      }
+
+      // Write the generated rules to the output file
+      fs.writeFileSync(opts.output, generatedRules.join(os.EOL), { encoding: 'utf8', mode: 0o666, flag: 'w' });
+    },
+  };
+};
+
+module.exports.postcss = true;

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@lesjoursfr/postcss-extract-css-variables",
+  "version": "1.0.0",
+  "description": "PostCSS plugin to extract rules with CSS variables",
+  "license": "MIT",
+  "repository": "lesjoursfr/postcss-extract-css-variables",
+  "homepage": "https://github.com/lesjoursfr/postcss-extract-css-variables#readme",
+  "bugs": {
+    "url": "https://github.com/lesjoursfr/postcss-extract-css-variables/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "postcss",
+    "css",
+    "postcss-plugin",
+    "postcss-extract-css-variables"
+  ],
+  "scripts": {
+    "test": "jest --coverage && eslint ."
+  },
+  "engines": {
+    "node": ">=16"
+  },
+  "peerDependencies": {
+    "postcss": "^8.4.5"
+  },
+  "devDependencies": {
+    "eslint": "^8.7.0",
+    "eslint-plugin-jest": "^25.7.0",
+    "jest": "^27.4.7",
+    "postcss": "^8.4.5"
+  },
+  "eslintConfig": {
+    "parserOptions": {
+      "ecmaVersion": 2017
+    },
+    "env": {
+      "node": true,
+      "es6": true
+    },
+    "extends": [
+      "eslint:recommended",
+      "plugin:jest/recommended"
+    ],
+    "rules": {
+      "jest/expect-expect": "off",
+      "semi": [
+        "error",
+        "always"
+      ]
+    }
+  },
+  "jest": {
+    "coverageThreshold": {
+      "global": {
+        "statements": 100
+      }
+    }
+  },
+  "packageManager": "yarn@3.1.1"
+}