Merge pull request #37 from posthtml/milestone-0.3.0

Scrum · web-flow · commit 3b997fd78c37 · 2021-09-09T16:24:58.000+03:00
Milestone 0.3.0
diff --git a/examples/basic.md b/examples/basic.md
@@ -0,0 +1,92 @@
+# Basic simple example
+
+Before:
+```html
+<html>
+  <style>
+    #some-id {
+      text-transform: uppercase;
+    }
+    .header__intro {
+      color: blue;
+    }
+    .card--profile {
+      background: white;
+    }
+    .js-overlay {
+      display: none;
+    }
+    #js-button {
+      color: blue;
+    }
+    @media (min-width: 768px) {
+      .header__intro {
+        color: gray;
+      }
+    }
+  </style>
+  <body>
+    <svg style="display:none">
+      <symbol id="icon-location"><path d=""></path></symbol>
+    </svg>
+    <h1 id="some-id">Title</h1>
+    <p class="header__intro">OMG</p>
+    <div class="js-overlay"></div>
+    <div id="js-button"></div>
+    <div class="card--profile">
+      card content
+    </div>
+    <svg>
+      <use href="#icon-location"></use>
+    </svg>
+    <label for="username">Click me</label>
+    <input type="text" id="username">
+  </body>
+</html>
+```
+
+After:
+
+```html
+<html>
+  <style>
+    #a {
+      text-transform: uppercase;
+    }
+    .a {
+      color: blue;
+    }
+    .b {
+      background: white;
+    }
+    .js-overlay {
+      display: none;
+    }
+    #js-button {
+      color: blue;
+    }
+    @media (min-width: 768px) {
+      .a {
+        color: gray;
+      }
+    }
+  </style>
+  <body>
+    <svg style="display:none">
+      <symbol id="b"><path d=""></path></symbol>
+    </svg>
+    <h1 id="a">Title</h1>
+    <p class="a">OMG</p>
+    <div class="js-overlay"></div>
+    <div id="js-button"></div>
+    <div class="b">
+      card content
+    </div>
+    <svg>
+      <use href="#b"></use>
+    </svg>
+    <label for="c">Click me</label>
+    <input type="text" id="c">
+  </body>
+</html>
+```
diff --git a/examples/genName.md b/examples/genName.md
@@ -0,0 +1,46 @@
+# Gen name simple example
+
+```html
+<html>
+  <style>
+    #🚧🕥🏉 {
+      text-transform: uppercase;
+    }
+    .☘👙📙 {
+      color: blue;
+    }
+    .⏲📂⚗ {
+      background: white;
+    }
+    .js-overlay {
+      display: none;
+    }
+    #js-button {
+      color: blue;
+    }
+    @media (min-width: 768px) {
+      .☘👙📙 {
+        color: gray;
+      }
+    }
+  </style>
+  <body>
+    <svg style="display:none">
+      <symbol id="👂🗨🌹"><path d=""></path></symbol>
+    </svg>
+    <h1 id="🚧🕥🏉">Title</h1>
+    <p class="☘👙📙">OMG</p>
+    <div class="js-overlay"></div>
+    <div id="js-button"></div>
+    <div class="⏲📂⚗">
+      card content
+    </div>
+    <svg>
+      <use href="#👂🗨🌹"></use>
+    </svg>
+    <label for="🏻🔐🙍">Click me</label>
+    <input type="text" id="🏻🔐🙍">
+  </body>
+</html>
+```
+
diff --git a/lib/index.js b/lib/index.js
@@ -5,13 +5,14 @@ const selectorParser = require('postcss-selector-parser');
 const nameGenerators = require('./name-generators');
 
 class MinifyClassnames {
-  constructor({genNameClass, genNameId, filter} = {}) {
+  constructor({genNameClass, genNameId, filter, customAttributes = []} = {}) {
     this.filter = filter || /^.js-/;
     // TODO: Pass a seed for emojinamestring, make this better
     this.genNameClass = this.getNameGenerator(genNameClass, 7);
     this.genNameId = this.getNameGenerator(genNameId, 5);
     this.classMap = {};
     this.idMap = {};
+    this.customAttributes = customAttributes;
   }
 
   getNameGenerator(value, seed) {
@@ -60,6 +61,28 @@ class MinifyClassnames {
 
   minifyElements(tree) {
     return tree.walk(node => {
+      if (node.attrs && this.customAttributes.length > 0) {
+        const attributes = Object.keys(node.attrs);
+
+        this.customAttributes
+          .filter(attribute => attributes.includes(attribute))
+          .forEach(attributes => {
+            node.attrs[attributes] = node.attrs[attributes]
+              .split(/\s+/)
+              .map(value => {
+              // NOTE: This removes classes that don't match any in our CSS
+                if (this.isClassFiltered(value)) {
+                  return value;
+                }
+
+                return this.classMap[value] || '';
+              })
+              .filter(Boolean)
+              .join(' ')
+              .trim();
+          });
+      }
+
       if (node.attrs && node.attrs.class) {
         let classes = node.attrs.class;
         node.attrs.class = classes
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "posthtml-minify-classnames",
-  "version": "0.2.4",
+  "version": "0.3.0",
   "description": "PostHTML plugin for minifying classnames",
   "main": "index.js",
   "author": "Simon Laroche <hi@simon.lc> (https://simon.lc)",
diff --git a/readme.md b/readme.md
diff --git a/test/plugin.js b/test/plugin.js

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "posthtml-minify-classnames",`
`3`		`- "version": "0.2.4",`
	`3`	`+ "version": "0.3.0",`
`4`	`4`	`"description": "PostHTML plugin for minifying classnames",`
`5`	`5`	`"main": "index.js",`
`6`	`6`	`"author": "Simon Laroche <[email protected]> (https://simon.lc)",`