Re loading fix

Now the plugin should work properly when PostCSS detects configuration change

Author: navanshu

README.md

@@ -1,8 +1,10 @@
 # PostCSS Variable Compress
 
-[postcss-variable-compress] is a [PostCSS] plugin minifies variable names and saves space. It can safely convert for css variable fallback cases as well. It replaces css variables via a counter and converts that counter into base 36 string as javascript inherent implementation is limited to this but beyond such no one would notice a difference as right now even if you have 1295 css variables they will not exceed two characters. It will transform any css variable it encounters without breaking your stylesheet. If you want it doesn't modify some css variables pass them as an array
+[postcss-variable-compress] is a [PostCSS] plugin minifies variable names and saves space. Even if you have 1295 css variables still they will not exceed by two characters. It will transform css variable without breaking your stylesheet.
 
-[PostCSS]: https://github.com/postcss/postcss
+If you want it not modify some css variables, then pass them `--{variable-name}` as an array to the plugin.
+
+[postcss]: https://github.com/postcss/postcss
 [postcss-variable-compress]: https://github.com/navanshu/postcss-variable-compress
 
 ```css
@@ -63,7 +65,7 @@ module.exports = {
 }
 ```
 
-**Step 4:** Pass configuration to the plugin. It takes an array of css variables that you don't need to transform:
+**Step 4:** Pass configuration to the plugin. It takes an array of css variables that you don't need to transform.
 
 ```diff
 module.export = {
@@ -78,7 +80,7 @@ module.export = {
 +       '--vh',
 +       '--r'
 +   ])
-  ]  
+  ]
 }
 ```
 

index.js

@@ -1,76 +1,81 @@
-const VariablesMap = new Map();
-const History = [];
-let Variables = -1;
-let Skips = [];
 /**
- * @param {string} val
+ * @param {string[]} opts prefix your input with -- like any css variable
  */
-function shouldRun (val) {
-  if (History.indexOf(val) > -1) {
-    return 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;
+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;
     }
-  });
-}
-
-/**
- * @param {string} match
- */
-function replacer (match) {
-
-  if (!shouldRun(match)) return match;
-  let exist = VariablesMap.get(match);
+    return true;
+  }
 
-  if (!exist) {
-    exist = '--' + (Variables).toString(36);
-    increase();
-    VariablesMap.set(match, exist);
-    History.push(exist);
+  function increase () {
+    Variables = Variables + 1;
+    let temp = Variables.toString(36);
+    Skips.forEach(E => {
+      if (E === temp) {
+        temp = Variables.toString(36);
+        Variables = Variables + 1;
+      }
+    });
   }
 
-  return exist;
-}
+  /**
+   * @param {string} match
+   */
+  function replacer (match) {
 
-/**
- * @param {import('postcss').Declaration} j
- */
-function looker (j) {
+    if (!shouldRun(match)) return match;
+    let exist = VariablesMap.get(match);
 
-  let prop = j.prop;
-
-  if (j.variable && shouldRun(prop)) {
-    let old = prop;
-    let exist = VariablesMap.get(old);
     if (!exist) {
-      exist = '--' + Variables.toString(36);
+      exist = '--' + (Variables).toString(36);
       increase();
-      VariablesMap.set(old, exist);
+      VariablesMap.set(match, exist);
       History.push(exist);
     }
-    prop = exist;
+
+    return exist;
   }
 
-  let value = j.value.replace(/--[\w-_]{1,1000}/g, replacer);
+  /**
+   * @param {import('postcss').Declaration} 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;
+    }
 
-  if (prop) j.prop = prop;
-  if (value) j.value = value;
+    let value = j.value;
+    if (value && value.includes('var(--') && value.length <= 1000) {
+      value = value.replace(/--[\w-_]{1,1000}/g, replacer);
+      j.value = value;
+    }
 
-}
+    j[processed] = true;
 
-/**
- * @param {string[]} opts
- */
-module.exports = (opts = []) => {
+  }
 
   opts.forEach(E => VariablesMap.set(E, E));
   opts.forEach(E => Skips.push(E.replace('--', '')));
@@ -80,7 +85,7 @@ module.exports = (opts = []) => {
   return {
     postcssPlugin: 'postcss-variable-compress',
     Declaration: {
-      '*': looker
+      '*': map
     }
   };
 };

index.test.js

@@ -2,7 +2,7 @@ const postcss = require('postcss');
 
 const plugin = require('./index');
 
-async function run (input, output, opts = {}) {
+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);
@@ -72,4 +72,9 @@ it('Shorten css variables', async () => {
       '--2'
     ]
   );
+});
+
+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;}`, []);
 });