Refactor: use postcss for selectorLibrary (#31)

lib/replace/regex.js

@@ -1,14 +1,6 @@
 export default {
   selectors: /(#|\.)[^\s:.{)[>+,\s]+/g, // matches all selectors beginning with . or # - e.g. .matching#alsomatch .matchmetoo
-  multiLineComments: /\/\*([\s\S]*?)\*\//g, // match /* */ from files
-  doubleQuotes: /"[^"]*"/g, // match everything within " " (double quotes)
-  singleQuotes: /'[^']*'/g, // match everything within " " (double quotes)
-  sizesWithDots: /\.([0-9]+?)(em|rem|%|vh|vw|s|cm|ex|in|mm|pc|pt|px|vmin)([^a-zA-Z])/g, // match everything which starts with . and has numbers in it and ends with em, rem,... plus no letter comes after - necessary for .9em or .10s
-  onlyNumbers: /\.([0-9]*?)[0-9](\s|;|}|\))/g, // match if there are just numbers between . and \s or ; or } or ) - otherwise it will be regogniced as class
-  urlAttributes: /url\(([\s\S]*?)\)/g, // matches url() attributes from css - it can contain .woff or .html or similiar
-  hexCodes: /#([a-zA-Z0-9]{3,6})(\s|;|}|!|,)/g, // matches hex colors with 3 or 6 values - unfortunately also matches also ids with 3 or 6 digits - e.g. matches #fff #header #0d0d0d
   strings: /"\s*[\S\s]*?\s*"|'\s*[\S\s]*?\s*'/g, // matches strings such as: 'hello' or "hello"
-  attributeContent: /:.+?(;|}|\)| )/g, // matches everything between : and ; - in case everything is in one line, and `;` is missing it will go until `}` - good for: `filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);`
   attributeSelectors: /\[\s*(class|id)\s*([*^$])=\s*("[\s\S]*?"|'[\s\S]*?')[\s\S]*?\]/g, // matches attribute selectors of html just with class or id in it with `$=`, `^=` or `*=`, e.g.: [class*="selector"]. 3 group matches, first `class` or `id`, second regex operator, third the string
   keyframes: /@(-[a-z]*-)*keyframes\s+([a-zA-Z0-9_-]+)/g, // matches keyframes and just the first group the first matched non-whitespace characters - e.g. matches: `@keyframes    my-KeyFra_me`
   animationTrigger: /(animation-name|animation)(:\s*)([\s\S][^;}]+)/g, // matches `animation-name` or `animation`

lib/selectorLibrary.js

@@ -1,3 +1,4 @@
+import { parse } from 'postcss';
 import { merge } from 'lodash';
 import includes from 'array-includes';
 import entries from 'object.entries';
@@ -25,23 +26,15 @@ class SelectorLibrary {
   } // /reset
 
   fillLibrary(data, options = {}) {
+    const { regex } = replace;
     const code = data.toString();
-    const regex = replace.regex;
-
-    // set the selectors
-    // first removing everything which can match with 'regex.selectors'
-    this.set(
-      code
-        .replace(regex.multiLineComments, ' ')
-        .replace(regex.urlAttributes, ' ')
-        .replace(regex.hexCodes, ' $2 ')
-        .replace(regex.doubleQuotes, ' ')
-        .replace(regex.singleQuotes, ' ')
-        .replace(regex.sizesWithDots, ' $3 ')
-        .replace(regex.onlyNumbers, ' $2 ')
-        .replace(regex.attributeContent, ' $1 ')
-        .match(regex.selectors),
-      options);
+    const result = parse(code);
+
+    result.walk((root) => {
+      if (root.selector) {
+        this.set(root.selector.match(regex.selectors), options);
+      }
+    });
   } // /fillLibrary
 
   get(selector, opts = {}) {

package.json

@@ -44,6 +44,7 @@
     "json-extra": "^0.5.0",
     "lodash": "^4.17.4",
     "object.entries": "^1.0.4",
+    "postcss": "^6.0.17",
     "recast": "^0.12.5"
   },
   "devDependencies": {

test/replace.any.js

@@ -31,7 +31,7 @@ test('should stay empty',
 test(replaceAnyMacro,
   'const a = \'jp-selector\';\n\tdocument.getElementById(\'nothing-to-see\');',
   'const a = \'a\';\n\tdocument.getElementById(\'nothing-to-see\');',
-  '.jp-selector',
+  '.jp-selector {}',
 );
 
 test(replaceAnyMacro,

test/replace.css.js

@@ -237,15 +237,15 @@ test('should not replace keyframes properly',
 
 test('should replace keyframes properly in a oneliner',
   replaceCssMacro,
-  '@keyframes  move {from {} to {}}.selector {animation: move 4s, move 4s infinite, do-not-trigger: 10s infinite}.another-selector {animation:     move     4s    }',
-  '@keyframes  a {from {} to {}}.b {animation: a 4s, a 4s infinite, do-not-trigger: 10s infinite}.c {animation:     a     4s    }',
+  '@keyframes  move {from {} to {}}.selector {animation: move 4s, move 4s infinite, do-not-trigger 10s infinite}.another-selector {animation:     move     4s    }',
+  '@keyframes  a {from {} to {}}.b {animation: a 4s, a 4s infinite, do-not-trigger 10s infinite}.c {animation:     a     4s    }',
   { replaceKeyframes: true },
 );
 
 test('should replace keyframes with suffixes',
   replaceCssMacro,
-  '@keyframes move {from {} to {}}.selector {animation: move 4s, move 4s infinite, do-not-trigger: 10s infinite}.another-selector {animation: move 4s }',
-  '@keyframes a {from {} to {}}.b-suf {animation: a 4s, a 4s infinite, do-not-trigger: 10s infinite}.c-suf {animation: a 4s }',
+  '@keyframes move {from {} to {}}.selector {animation: move 4s, move 4s infinite, do-not-trigger 10s infinite}.another-selector {animation: move 4s }',
+  '@keyframes a {from {} to {}}.b-suf {animation: a 4s, a 4s infinite, do-not-trigger 10s infinite}.c-suf {animation: a 4s }',
   {
     replaceKeyframes: true,
     suffix: '-suf',
@@ -254,8 +254,8 @@ test('should replace keyframes with suffixes',
 
 test('should replace keyframes with prefixes',
   replaceCssMacro,
-  '@keyframes move {from {} to {}}.selector {animation: move 4s, move 4s infinite, do-not-trigger: 10s infinite}.another-selector {animation: move 4s }',
-  '@keyframes a {from {} to {}}.pre-b {animation: a 4s, a 4s infinite, do-not-trigger: 10s infinite}.pre-c {animation: a 4s }',
+  '@keyframes move {from {} to {}}.selector {animation: move 4s, move 4s infinite, do-not-trigger 10s infinite}.another-selector {animation: move 4s }',
+  '@keyframes a {from {} to {}}.pre-b {animation: a 4s, a 4s infinite, do-not-trigger 10s infinite}.pre-c {animation: a 4s }',
   {
     replaceKeyframes: true,
     prefix: 'pre-',
@@ -264,8 +264,8 @@ test('should replace keyframes with prefixes',
 
 test('should not replace keyframes with prefixes',
   replaceCssMacro,
-  '@keyframes move {from {} to {}}.selector {animation: move 4s, move 4s infinite, do-not-trigger: 10s infinite}.another-selector {animation: move 4s }',
-  '@keyframes move {from {} to {}}.pre-a {animation: move 4s, move 4s infinite, do-not-trigger: 10s infinite}.pre-b {animation: move 4s }',
+  '@keyframes move {from {} to {}}.selector {animation: move 4s, move 4s infinite, do-not-trigger 10s infinite}.another-selector {animation: move 4s }',
+  '@keyframes move {from {} to {}}.pre-a {animation: move 4s, move 4s infinite, do-not-trigger 10s infinite}.pre-b {animation: move 4s }',
   {
     prefix: 'pre-',
   },

yarn.lock

@@ -102,6 +102,12 @@ ansi-styles@^3.0.0:
   dependencies:
     color-convert "^1.0.0"
 
+ansi-styles@^3.1.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.0.tgz#c159b8d5be0f9e5a6f346dab94f16ce022161b88"
+  dependencies:
+    color-convert "^1.9.0"
+
 ansi-styles@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-1.0.0.tgz#cb102df1c56f5123eab8b67cd7b98027a0279178"
@@ -1009,6 +1015,14 @@ chalk@^1.0.0, chalk@^1.1.0, chalk@^1.1.1, chalk@^1.1.3:
     strip-ansi "^3.0.0"
     supports-color "^2.0.0"
 
+chalk@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.3.0.tgz#b5ea48efc9c1793dccc9b4767c93914d3f2d52ba"
+  dependencies:
+    ansi-styles "^3.1.0"
+    escape-string-regexp "^1.0.5"
+    supports-color "^4.0.0"
+
 chokidar@^1.4.2, chokidar@^1.6.1:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.7.0.tgz#798e689778151c8076b4b360e5edd28cda2bb468"
@@ -1113,6 +1127,12 @@ color-convert@^1.0.0:
   dependencies:
     color-name "^1.1.1"
 
+color-convert@^1.9.0:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.1.tgz#c1261107aeb2f294ebffec9ed9ecad529a6097ed"
+  dependencies:
+    color-name "^1.1.1"
+
 color-name@^1.1.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.2.tgz#5c8ab72b64bd2215d617ae9559ebb148475cf98d"
@@ -3241,6 +3261,14 @@ pluralize@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-1.2.1.tgz#d1a21483fd22bb41e58a12fa3421823140897c45"
 
+postcss@^6.0.17:
+  version "6.0.17"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.17.tgz#e259a051ca513f81e9afd0c21f7f82eda50c65c5"
+  dependencies:
+    chalk "^2.3.0"
+    source-map "^0.6.1"
+    supports-color "^5.1.0"
+
 prelude-ls@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
@@ -3680,6 +3708,10 @@ source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@~0.5.0, sour
   version "0.5.6"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
 
+source-map@^0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+
 spawn-wrap@^1.3.6:
   version "1.3.6"
   resolved "https://registry.yarnpkg.com/spawn-wrap/-/spawn-wrap-1.3.6.tgz#ccec4a949d8ce7e2b1a35cf4671d683d2e76a1d1"
@@ -3803,6 +3835,18 @@ supports-color@^3.1.2, supports-color@^3.2.3:
   dependencies:
     has-flag "^1.0.0"
 
+supports-color@^4.0.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-4.5.0.tgz#be7a0de484dec5c5cddf8b3d59125044912f635b"
+  dependencies:
+    has-flag "^2.0.0"
+
+supports-color@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.1.0.tgz#058a021d1b619f7ddf3980d712ea3590ce7de3d5"
+  dependencies:
+    has-flag "^2.0.0"
+
 symbol-observable@^0.2.2:
   version "0.2.4"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-0.2.4.tgz#95a83db26186d6af7e7a18dbd9760a2f86d08f40"