Feat: add fillLibraries and remove fillLibraries in replace.css

BREAKING CHANGE: replace.css does not fill up any libraries.
rcs.fillLibraries must be called before

docs/api/filllibraries.md

@@ -0,0 +1,23 @@
+# rcs.fillLibraries
+
+> This fills `selectorLibrary` and `keyframesLibrary` with all necessary information. Just put in your CSS code.
+
+> **Note:** Put your stylesheets in here before you call any [rcs.replace](replace.md) method.
+
+## Usage
+
+**rcs.fillLibraries(code[, options])**
+
+Parameters:
+- code `<String>`. The CSS with all selectors
+- options `<Object>`:
+  - ignoreAttributeSelector `<Boolean>`: If `true` it does ignore all setted attribute selectors such as `[class*=my]` so `.my_class` will be renamed.  Default: `false`
+  - replaceKeyframes `<Boolean>`: Renames the names in `animation-name` or `animation` if a specific `@keyframes` was triggered **before**. Default: `false`
+
+  *plus options of `selectorLibrary.set()`*
+
+  - ignoreAttributeSelector (boolean): If `true` it does ignore all setted attribute selectors such as `[class*=my]` so `.my_class` will be renamed.  Default: `false`
+  - preventRandomName `<Boolean>`. Does not rename the given selector. Good for just pre- or suffix the selectors. Default: `false`
+  - prefix `<String>`. Prefix the compressed selector
+  - suffix `<String>`. Suffix the compressed selector
+

docs/api/replace.md

@@ -47,8 +47,8 @@ const replacedCode = rcs.replace.any('document.getElementById("my-id")');
 Parameters:
 - code `<String>`
 - options `<Object>`:
-  - ignoreAttributeSelector `<Boolean>`: If `true` it does ignore all setted attribute selectors such as `[class*=my]` so `.my_class` will be renamed.  Default: `false`
-  - replaceKeyframes `<Boolean>`: Renames the names in `animation-name` or `animation` if a specific `@keyframes` was triggered **before**. Default: `false`
+  - prefix `<String>`. Prefix the compressed selector
+  - suffix `<String>`. Suffix the compressed selector
 
 Example:
 

lib/fillLibraries.js

@@ -0,0 +1,23 @@
+import keyframesLibrary from './keyframesLibrary';
+import selectorLibrary from './selectorLibrary';
+import replace from './replace';
+
+export default (code, opts = {}) => {
+  const defaultOptions = {
+    ignoreAttributeSelector: false,
+    replaceKeyframes: false,
+  };
+
+  const options = Object.assign({}, defaultOptions, opts);
+  const data = code.toString();
+
+  if (!options.ignoreAttributeSelector) {
+    selectorLibrary.setAttributeSelector(data.match(replace.regex.attributeSelectors));
+  }
+
+  if (options.replaceKeyframes) {
+    keyframesLibrary.fillLibrary(data);
+  }
+
+  selectorLibrary.fillLibrary(data, options);
+};

lib/index.js

@@ -1,12 +1,14 @@
 import helper from './helper';
 import replace from './replace';
+import fillLibraries from './fillLibraries';
 import nameGenerator from './nameGenerator';
 import selectorLibrary from './selectorLibrary';
 import keyframesLibrary from './keyframesLibrary';
 
 export default {
   helper,
   replace,
+  fillLibraries,
   nameGenerator,
   selectorLibrary,
   keyframesLibrary,

lib/replace/css.js

@@ -62,33 +62,19 @@ const replaceCss = (code, options = {}) => {
 
   let data = code.toString();
 
-  if (!options.ignoreAttributeSelector) {
-    selectorLibrary.setAttributeSelector(data.match(replaceRegex.attributeSelectors));
-  }
-
-  if (options.replaceKeyframes) {
-    keyframesLibrary.fillLibrary(data);
-  }
-
-  selectorLibrary.fillLibrary(data, options);
-
   const regex = selectorLibrary.getAll({
     origValues: true,
     regexCss: true,
     isSelectors: true,
   });
 
-  if (options.replaceKeyframes) {
-    // replace the keyframes here
-    data = data.replace(replaceRegex.keyframes, replaceKeyframes);
-    data = data.replace(replaceRegex.animationTrigger, replaceAnimations);
-  }
+  // replace the keyframes here
+  data = data.replace(replaceRegex.keyframes, replaceKeyframes);
+  data = data.replace(replaceRegex.animationTrigger, replaceAnimations);
 
   data = data.replace(regex, getCssSelector);
 
-  if (!options.ignoreAttributeSelector) {
-    data = data.replace(replaceRegex.attributeSelectors, getAttributeSelector);
-  }
+  data = data.replace(replaceRegex.attributeSelectors, getAttributeSelector);
 
   return data;
 };

lib/selectorLibrary.js

@@ -338,6 +338,8 @@ class SelectorLibrary {
   isInAttributeSelector(selector) {
     let result = false;
 
+    const slicedSelector = selector.replace(/^[.#]/, '');
+
     Object.keys(this.attributeSelectors).forEach((attributeSelector) => {
       const attributeString = attributeSelector.slice(2, attributeSelector.length);
 
@@ -346,19 +348,19 @@ class SelectorLibrary {
       }
 
       if (attributeSelector.charAt(1) === '*') {
-        if (selector.match(attributeString)) {
+        if (slicedSelector.match(attributeString)) {
           result = true;
         }
       }
 
       if (attributeSelector.charAt(1) === '^') {
-        if (selector.match(`^${attributeString}`)) {
+        if (slicedSelector.match(`^${attributeString}`)) {
           result = true;
         }
       }
 
       if (attributeSelector.charAt(1) === '$') {
-        if (selector.match(`${attributeString}$`)) {
+        if (slicedSelector.match(`${attributeString}$`)) {
           result = true;
         }
       }

test/replace.css.js

@@ -8,16 +8,20 @@ const fixturesCwd = 'test/files/fixtures';
 const resultsCwd = 'test/files/results';
 
 function replaceCssMacro(t, input, expected, options = {}) {
-  t.is(rcs.replace.css(input, options), expected);
-  t.is(rcs.replace.css(new Buffer(input), options), expected);
+  rcs.fillLibraries(input, options);
+
+  t.is(rcs.replace.css(input), expected);
+  t.is(rcs.replace.css(new Buffer(input)), expected);
 }
 
 function replaceMultipleCssMacro(t, inputs, expects, options = {}) {
   t.plan(inputs.length * 2);
 
   inputs.forEach((input, i) => {
-    t.is(rcs.replace.css(input, options), expects[i]);
-    t.is(rcs.replace.css(new Buffer(input), options), expects[i]);
+    rcs.fillLibraries(input, options);
+
+    t.is(rcs.replace.css(input), expects[i]);
+    t.is(rcs.replace.css(new Buffer(input)), expects[i]);
   });
 }
 
@@ -36,6 +40,13 @@ test.beforeEach(() => {
   rcs.nameGenerator.reset();
 });
 
+test('should not replace anything', (t) => {
+  const input = fs.readFileSync(path.join(fixturesCwd, '/css/style.css'), 'utf8');
+
+  t.is(rcs.replace.css(input), input);
+  t.is(rcs.replace.css(new Buffer(input)), input);
+});
+
 test('should return the modified css buffer',
   replaceCssMacro,
   fs.readFileSync(path.join(fixturesCwd, '/css/style.css'), 'utf8'),
@@ -72,6 +83,7 @@ test('should modify the code properly | hex oneline',
   '.a{background:#616060}.b{display:flex}',
 );
 
+
 test('should modify the code properly | number oneline',
   replaceCssMacro,
   '.somediv{translation:.30}.anotherdiv{display:flex}',
@@ -84,6 +96,31 @@ test('should modify the code properly | filter oneline',
   '.a{filter: progid:DXImageTransform.Microsoft.gradient(enabled = false)}.b{display:flex}',
 );
 
+test('attribute selectors not renamed',
+  replaceCssMacro,
+  '.somediv{}.anotherdiv[class^="some"]{}',
+  '.a{}.b[class^="some"]{}',
+  { ignoreAttributeSelector: true },
+);
+
+test('attribute selectors ^',
+  replaceCssMacro,
+  '.somediv{}.anotherdiv[class^="some"]{}',
+  '.somediv{}.a[class^="some"]{}',
+);
+
+test('attribute selectors *',
+  replaceCssMacro,
+  '.somediv{}.anotherdiv[class*="omed"]{}',
+  '.somediv{}.a[class*="omed"]{}',
+);
+
+test('attribute selectors $',
+  replaceCssMacro,
+  '.somediv{}.anotherdiv[class$="iv"]{}',
+  '.somediv{}.anotherdiv[class$="iv"]{}',
+);
+
 test('should replace keyframes properly',
   replaceCssMacro,
   `
@@ -207,6 +244,35 @@ test('should replace keyframes properly in a oneliner',
   { 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 }',
+  {
+    replaceKeyframes: true,
+    suffix: '-suf',
+  },
+);
+
+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 }',
+  {
+    replaceKeyframes: true,
+    prefix: 'pre-',
+  },
+);
+
+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 }',
+  {
+    prefix: 'pre-',
+  },
+);
+
 test('should replace media queries properly in a oneliner',
   replaceCssMacro,
   '@media(max-width:480px){.one{display:block}.two{display:table}}',