first commit

Author: navanshu

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

.gitattributes

@@ -0,0 +1 @@
+* text eol=lf 

.github/workflows/test.yml

@@ -0,0 +1,41 @@
+name: Test
+on:
+  push:
+  pull_request:
+env:
+  FORCE_COLOR: 2
+jobs:
+  full:
+    name: Node.js 15 Full
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout the repository
+        uses: actions/checkout@v2
+      - name: Install Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: 15
+      - name: Install dependencies
+        uses: bahmutov/npm-install@v1
+      - name: Run tests
+        run: yarn test
+  short:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version:
+          - 14
+          - 12
+          - 10
+    name: Node.js ${{ matrix.node-version }} Quick
+    steps:
+      - name: Checkout the repository
+        uses: actions/checkout@v2
+      - name: Install Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: Install dependencies
+        uses: bahmutov/npm-install@v1
+      - name: Run unit tests
+        run: npx jest

.gitignore

@@ -0,0 +1,10 @@
+node_modules/
+npm-debug.log
+yarn-error.log
+npm-debug.log*
+
+coverage/
+*.log
+.npm
+
+.DS_Store

.npmignore

@@ -0,0 +1,12 @@
+yarn-error.log
+npm-debug.log
+package-lock.json
+yarn.lock
+
+*.test.js
+.travis.yml
+.editorconfig
+coverage/
+.gitignore
+
+node_modules/

CHANGELOG.md

@@ -0,0 +1 @@
+# Change Log

LICENSE

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright 2021 Navanshu Rastogi <navanshu.rastogi@gmail.com>
+
+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.

README.md

@@ -0,0 +1,87 @@
+# 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.
+
+[PostCSS]: https://github.com/postcss/postcss
+[postcss-variable-compress]: https://github.com/navanshu/postcss-variable-compress
+
+```css
+:root {
+--first-color: #16f;
+--second-color: #ff7;
+}
+
+#firstParagraph {
+  background-color: var(--first-color);
+  color: var(--second-color);
+}
+
+#secondParagraph {
+  background-color: var(--second-color);
+  color: var(--first-color);
+}
+
+#container {
+  --first-color: #290;
+}
+
+.thirdParagraph {
+  background-color: var(--first-color);
+  color: var(--second-color);
+}
+```
+
+```css
+:root {
+--0: #16f;
+--1: #ff7;
+--2: #000;
+}
+
+#firstParagraph {
+  background-color: var(--0);
+  color: var(--1);
+}
+
+#secondParagraph {
+  background-color: var(--1);
+  color: var(--0);
+}
+
+#container {
+  --0: #290;
+}
+
+.thirdParagraph {
+  background-color: var(--0);
+  color: var(--1);
+}
+```
+
+## Usage
+
+**Step 1:** Install plugin:
+
+```sh
+npm install --save-dev postcss postcss-variable-compress
+```
+
+**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 at the end of the plugins list:
+
+```diff
+module.exports = {
+  plugins: [
+    require('cssnano'),
++   require('postcss-variable-compress')
+  ]
+}
+```
+
+[official docs]: https://github.com/postcss/postcss#usage

index.js

@@ -0,0 +1,88 @@
+const VariablesMap = new Map();
+const History = [];
+let Variables = -1;
+let Skips = [];
+/**
+ * @param {string} val
+ */
+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;
+    }
+  });
+}
+
+/**
+ * @param {string} match
+ */
+function replacer (match) {
+
+  if (!shouldRun(match)) return match;
+  let exist = VariablesMap.get(match);
+
+  if (!exist) {
+    exist = '--' + (Variables).toString(36);
+    increase();
+    VariablesMap.set(match, exist);
+    History.push(exist);
+  }
+
+  return exist;
+}
+
+/**
+ * @param {import('postcss').Declaration} j
+ */
+function looker (j) {
+
+  let prop = j.prop;
+
+  if (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;
+  }
+
+  let value = j.value.replace(/--[\w-_]{1,1000}/g, replacer);
+
+  if (prop) j.prop = prop;
+  if (value) j.value = value;
+
+}
+
+/**
+ * @param {string[]} opts
+ */
+module.exports = (opts = []) => {
+
+  opts.forEach(E => VariablesMap.set(E, E));
+  opts.forEach(E => Skips.push(E.replace('--', '')));
+
+  increase();
+
+  return {
+    postcssPlugin: 'postcss-variable-compress',
+    Declaration: {
+      '*': looker
+    }
+  };
+};
+
+module.exports.postcss = true;

index.test.js

@@ -0,0 +1,75 @@
+const postcss = require('postcss');
+
+const plugin = require('./index');
+
+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);
+}
+
+
+it('Shorten css variables', async () => {
+  await run(
+    `:root {
+--first-color: #16f;
+--second-color: #ff7;
+--2: #000;
+}
+
+#firstParagraph {
+  background-color: var(--first-color);
+  color: var(--second-color);
+}
+
+#secondParagraph {
+  background-color: var(--second-color);
+  color: var(--first-color);
+}
+
+#container {
+  --first-color: #290;
+}
+
+#thirdParagraph {
+  background-color: var(--first-color);
+  color: var(--second-color);
+}
+
+.section-title {
+  color: var(--primary-color, var(--black, #222));
+}`,
+    `:root {
+--0: #16f;
+--1: #ff7;
+--2: #000;
+}
+
+#firstParagraph {
+  background-color: var(--0);
+  color: var(--1);
+}
+
+#secondParagraph {
+  background-color: var(--1);
+  color: var(--0);
+}
+
+#container {
+  --0: #290;
+}
+
+#thirdParagraph {
+  background-color: var(--0);
+  color: var(--1);
+}
+
+.section-title {
+  color: var(--primary-color, var(--3, #222));
+}`,
+    [
+      '--primary-color',
+      '--2'
+    ]
+  );
+});