Add new options includeFiles (#87)

* minor refactor
add option.includeFiles
add option.bethSymbol
add tests to cover new features
update Readme

* remove unnecessary things

* fix include bug
rem unused test
add include tests

* Delete between-symbol-plus-selector.css

* Delete between-symbol-plus-selector.expected.css

Co-authored-by: Valentin Radulescu <radulescu.valentin@gmail.com>

Author: MaximusFT

README.md

@@ -98,7 +98,13 @@ module: {
           postcssOptions: {
             plugins: {
               "postcss-prefix-selector": {
-                prefix: '.my-prefix'
+                prefix: '.my-prefix',
+                transform(prefix, selector, prefixedSelector) {
+                  if (selector.match(/^(html|body)/)) {
+                    return selector.replace(/^([^\s]*)/, `$1 ${prefix}`);
+                  }
+                  return prefixedSelector;
+                },
               },
               autoprefixer: {
                 browsers: ['last 4 versions']
@@ -118,6 +124,7 @@ module: {
 - `exclude` - It's possible to avoid prefixing some selectors by passing an array of selectors (strings or regular expressions).
 - `transform` - In cases where you may want to use the prefix differently for different selectors, it is possible to pass in a custom transform method.
 - `ignoreFiles` - List of ignored files for processing.
+- `includeFiles` - List of included files for processing.
 
 ## Maintainer
 

index.js

@@ -2,14 +2,25 @@ module.exports = function postcssPrefixSelector(options) {
   const prefix = options.prefix;
   const prefixWithSpace = /\s+$/.test(prefix) ? prefix : `${prefix} `;
   const ignoreFiles = options.ignoreFiles ? [].concat(options.ignoreFiles) : [];
+  const includeFiles = options.includeFiles
+    ? [].concat(options.includeFiles)
+    : [];
 
   return function (root) {
     if (
+      ignoreFiles.length &&
       root.source.input.file &&
       ignoreFiles.some((file) => root.source.input.file.includes(file))
     ) {
       return;
     }
+    if (
+      includeFiles.length &&
+      root.source.input.file &&
+      !includeFiles.find((file) => root.source.input.file.includes(file))
+    ) {
+      return;
+    }
 
     root.walkRules((rule) => {
       const keyframeRules = [

test/fixtures/between-symbol-selector.css

@@ -0,0 +1,7 @@
+.a {
+  color: coral;
+}
+
+.b {
+  color: deepskyblue;
+}

test/fixtures/between-symbol-selector.expected.css

@@ -0,0 +1,7 @@
+.hello.a {
+  color: coral;
+}
+
+.hello.b {
+  color: deepskyblue;
+}

test/fixtures/include-files.css

@@ -0,0 +1,7 @@
+.a {
+  color: coral;
+}
+
+.b {
+  color: deepskyblue;
+}

test/fixtures/include-files.expected.css

@@ -0,0 +1,7 @@
+.hello .a {
+  color: coral;
+}
+
+.hello .b {
+  color: deepskyblue;
+}

test/fixtures/single-long-selector.css

@@ -0,0 +1,7 @@
+.a {
+  color: coral;
+}
+
+.b {
+  color: deepskyblue;
+}

test/fixtures/single-long-selector.expected.css

@@ -0,0 +1,7 @@
+.hello .world .a {
+  color: coral;
+}
+
+.hello .world .b {
+  color: deepskyblue;
+}

test/test.js

@@ -115,6 +115,109 @@ it('should prefix selectors in unignored files', () => {
   assert.equal(out, expected);
 });
 
+it('should prefix selectors in included file', () => {
+  const out = postcss()
+    .use(
+      prefixer({
+        prefix: '.hello ',
+        includeFiles: ['include-files.css'],
+      })
+    )
+    .process(getFixtureContents('include-files.css'), {
+      from: 'include-files.css',
+    }).css;
+
+  const expected = getFixtureContents('include-files.expected.css');
+
+  assert.equal(out, expected);
+});
+
+it('should work as expected when included array is empty', () => {
+  const out = postcss()
+    .use(
+      prefixer({
+        prefix: '.hello ',
+        includeFiles: [],
+      })
+    )
+    .process(getFixtureContents('include-files.css'), {
+      from: 'include-files.css',
+    }).css;
+
+  const expected = getFixtureContents('include-files.expected.css');
+
+  assert.equal(out, expected);
+});
+
+it('should work as expected when included two items and mmore in array', () => {
+  const out = postcss()
+    .use(
+      prefixer({
+        prefix: '.hello ',
+        includeFiles: [
+          'include-files.css',
+          'single-selector.css',
+          'undefined.css',
+        ],
+      })
+    )
+    .process(getFixtureContents('include-files.css'), {
+      from: 'include-files.css',
+    }).css;
+
+  const expected = getFixtureContents('include-files.expected.css');
+
+  assert.equal(out, expected);
+});
+
+it('should not prefix selectors in unincluded files', () => {
+  const out = postcss()
+    .use(
+      prefixer({
+        prefix: '.hello ',
+        includeFiles: ['include-files.css'],
+      })
+    )
+    .process(getFixtureContents('single-selector.css'), {
+      from: 'single-selector.css',
+    }).css;
+
+  const expected = getFixtureContents('single-selector.css');
+
+  assert.equal(out, expected);
+});
+
+it('should use custom symbol between prefix and selector. Use empty to glue', () => {
+  const out = postcss()
+    .use(
+      prefixer({
+        prefix: '.hello',
+        transform(prefix, selector) {
+          return prefix + selector;
+        },
+      })
+    )
+    .process(getFixtureContents('between-symbol-selector.css')).css;
+
+  const expected = getFixtureContents('between-symbol-selector.expected.css');
+
+  assert.equal(out, expected);
+});
+
+it('should prefix a selector. Use ".hello .world"', () => {
+  const out = postcss()
+    .use(
+      prefixer({
+        prefix: '.hello .world',
+      })
+    )
+    .process(getFixtureContents('single-long-selector.css')).css;
+
+  const expected = getFixtureContents('single-long-selector.expected.css');
+
+  assert.equal(out, expected);
+});
+
 function getFixtureContents(name) {
   return fs.readFileSync(`test/fixtures/${name}`, 'utf8').trim();
 }