typescript based code

Author: navanshu

.gitignore

@@ -7,4 +7,4 @@ coverage/
 *.log
 .npm
 
-.DS_Store
+.DS_Store

README.md

@@ -65,23 +65,29 @@ module.exports = {
 }
 ```
 
-**Step 4:** Pass configuration to the plugin. It takes an array of css variables that you don't need to transform.
+## Api
 
-```diff
-module.export = {
+```javascript
+
+module.exports = {
   plugins: [
     require('cssnano'),
-+   require('postcss-variable-compress')([
-+       '--colorPrimary',
-+       '--colorPrimaryAlpha',
-+       '--light',
-+       '--dark',
-+       '--font',
-+       '--vh',
-+       '--r'
-+   ])
+    require('postcss-variable-compress')(
+      // pass in css variables to avoid
+      'colorPrimary', 'colorPrimaryAlpha', 'light', 'dark', 'font', 'vh', 'r'
+      // or pass in as many function as your want
+      // they take single param which is a the name of css variable
+      // you can do checks on it and
+      // return true if you want it to be skipped
+      // for example
+      (name) => name.includes('skip')
+      // avoid regex if you can they are bad
+    )
   ]
 }
+
 ```
 
+
+
 [official docs]: https://github.com/postcss/postcss#usage

index.d.ts

@@ -0,0 +1,4 @@
+export declare namespace variableCompress {
+    type skip = (variableName: string) => boolean | undefined;
+    type parameters = skip | string;
+}

index.js

@@ -1,93 +1,91 @@
-/**
- * @param {string[]} opts prefix your input with -- like any css variable
- */
-module.exports = (opts = []) => {
-  const VariablesMap = new Map();
-
-  const processed = Symbol('processed');
-
-  const History = [];
-  let Variables = -1;
-  let Skips = [];
-  /**
-   * @param {string} val
-   */
-  function shouldRun (val) {
-    if (History.indexOf(val) > -1) {
-      return false;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const postcssPlugin = 'postcss-variable-compress';
+let processed = Symbol('processed');
+let renamedVariables = [];
+let cssVariables = -1;
+let pureSkips = [];
+let scriptBasedSkips = [];
+let cssVariablesMap = new Map();
+function scriptCheck(val) {
+    const should = scriptBasedSkips.findIndex(E => E(val));
+    return (should > -1);
+}
+function shouldRun(val) {
+    let should = true;
+    if (renamedVariables.indexOf(val) > -1) {
+        should = false;
     }
-    return true;
-  }
-
-  function increase () {
-    Variables = Variables + 1;
-    let temp = Variables.toString(36);
-    Skips.forEach(E => {
-      if (E === temp) {
-        temp = Variables.toString(36);
-        Variables = Variables + 1;
-      }
+    if (should && scriptCheck(val)) {
+        should = false;
+    }
+    return should;
+}
+function increase() {
+    cssVariables = cssVariables + 1;
+    let temp = cssVariables.toString(36);
+    pureSkips.forEach(E => {
+        if (E === temp) {
+            temp = cssVariables.toString(36);
+            cssVariables = cssVariables + 1;
+        }
     });
-  }
-
-  /**
-   * @param {string} match
-   */
-  function replacer (match) {
-
-    if (!shouldRun(match)) return match;
-    let exist = VariablesMap.get(match);
-
+}
+function replacer(match) {
+    if (!shouldRun(match))
+        return match;
+    let exist = cssVariablesMap.get(match);
     if (!exist) {
-      exist = '--' + (Variables).toString(36);
-      increase();
-      VariablesMap.set(match, exist);
-      History.push(exist);
+        exist = '--' + (cssVariables).toString(36);
+        increase();
+        cssVariablesMap.set(match, exist);
+        renamedVariables.push(exist);
     }
-
     return exist;
-  }
-
-  /**
-   * @param {import('postcss').Declaration} j
-   */
-  function map (j) {
-
+}
+function map(j) {
     let prop = j.prop;
     if (prop && j.variable && shouldRun(prop)) {
-      let old = prop;
-      let exist = VariablesMap.get(old);
-      if (!exist) {
-        exist = '--' + Variables.toString(36);
-        increase();
-        VariablesMap.set(old, exist);
-        History.push(exist);
-      }
-      prop = exist;
-      j.prop = prop;
+        let old = prop;
+        let exist = cssVariablesMap.get(old);
+        if (!exist) {
+            exist = '--' + cssVariables.toString(36);
+            increase();
+            cssVariablesMap.set(old, exist);
+            renamedVariables.push(exist);
+        }
+        prop = exist;
+        j.prop = prop;
     }
-
     let value = j.value;
     if (value && value.includes('var(--') && value.length <= 1000) {
-      value = value.replace(/--[\w-_]{1,1000}/g, replacer);
-      j.value = value;
+        value = value.replace(/--[\w-_]{1,1000}/g, replacer);
+        j.value = value;
     }
-
+    // @ts-ignore
     j[processed] = true;
-
-  }
-
-  opts.forEach(E => VariablesMap.set(E, E));
-  opts.forEach(E => Skips.push(E.replace('--', '')));
-
-  increase();
-
-  return {
-    postcssPlugin: 'postcss-variable-compress',
-    Declaration: {
-      '*': map
-    }
-  };
+}
+module.exports = function variableCompress(opts) {
+    processed = Symbol('processed');
+    renamedVariables = [];
+    cssVariables = -1;
+    pureSkips = [];
+    scriptBasedSkips = [];
+    cssVariablesMap = new Map();
+    opts.forEach(E => {
+        if (typeof E === 'string') {
+            pureSkips.push(E.replace('--', ''));
+            cssVariablesMap.set(E, E);
+        }
+        else
+            scriptBasedSkips.push(E);
+    });
+    increase();
+    return {
+        postcssPlugin,
+        Declaration: {
+            '*': map
+        }
+    };
 };
-
 module.exports.postcss = true;

index.test.js

@@ -1,11 +1,15 @@
 const postcss = require('postcss');
 
-const plugin = require('./index');
+const variableCompress = require('./index');
+
+async function run (input, output, opts) {
+  let result = await postcss(
+    [variableCompress(opts)]
+  ).process(input, { from: undefined });
 
-async function run (input, output, opts = []) {
-  let result = await postcss([plugin(opts)]).process(input, { from: undefined });
   expect(result.css).toEqual(output);
   expect(result.warnings()).toHaveLength(0);
+
 }
 
 
@@ -38,6 +42,10 @@ it('Shorten css variables', async () => {
 
 .section-title {
   color: var(--primary-color, var(--black, #222));
+}
+
+code {
+  --5: #555;
 }`,
     `:root {
 --0: #16f;
@@ -66,15 +74,21 @@ it('Shorten css variables', async () => {
 
 .section-title {
   color: var(--primary-color, var(--3, #222));
+}
+
+code {
+  --5: #555;
 }`,
     [
       '--primary-color',
-      '--2'
+      '--2',
+      (e) => e.includes('special'),
+      (e) => e === '--5'
     ]
   );
 });
 
 it('Support reloading. Now the plugin will reset mapped variables', async () => {
   await run(`:root{--first-color: #16f;--second-color: #ff7;}`, `:root{--0: #16f;--1: #ff7;}`, []);
   await run(`:root{--second-color: #ff7;--first-color: #16f;}`, `:root{--0: #ff7;--1: #16f;}`, []);
-});
+});