From 0d601edc02edafdac5a44591a1d520d553afeb91 Mon Sep 17 00:00:00 2001
From: Eoin Groat <eoin.groat@freshrelevance.com>
Date: Thu, 21 Jun 2018 10:28:04 +0100
Subject: [PATCH] Added the ability to optionally wrap with sibling styles
 instead of, or as well as, parent styles

---
 README.md                                   | 15 +++-
 css_wrap.js                                 | 21 +++++-
 package.json                                |  2 +-
 test/css_wrap_test.js                       | 84 ++++++++++++++++++---
 test/expected/styles-neither.css            | 13 ++++
 test/expected/styles-parent-and-sibling.css | 13 ++++
 test/expected/styles-parent.css             | 13 ++++
 test/expected/styles-sibling.css            | 13 ++++
 8 files changed, 159 insertions(+), 15 deletions(-)
 create mode 100644 test/expected/styles-neither.css
 create mode 100644 test/expected/styles-parent-and-sibling.css
 create mode 100644 test/expected/styles-parent.css
 create mode 100644 test/expected/styles-sibling.css

diff --git a/README.md b/README.md
index 1dab9de..dfe0c8b 100644
--- a/README.md
+++ b/README.md
@@ -38,7 +38,20 @@ Default value: `null`
 
 Skip css rules by regular expressions
 
+#### options.parent
+Type: `Boolean`
+Default value: `true`
+
+Causes `options.selector` to be a parent of wrapped selectors
+
+#### options.sibling
+Type: `Boolean`
+Default value: `false`
+
+Causes `options.selector` to be a sibling of wrapped selectors
+
 ## Changelog
 
 v0.0.1 - Initial Release
-v0.0.2 - Added options.skip
\ No newline at end of file
+v0.0.2 - Added options.skip
+v0.1.1 - Added options.sibling and options.parent
diff --git a/css_wrap.js b/css_wrap.js
index c9533d9..6586b60 100644
--- a/css_wrap.js
+++ b/css_wrap.js
@@ -24,7 +24,20 @@ var
       if ( r.selectors ) {
         r.selectors.forEach( function( s, index ) {
           if (options.skip && options.skip.test(s)) return
-          var selector = options.selector ? options.selector + " " + s : s;
+          var selector;
+          if (options.selector) {
+            if (options.sibling && options.parent) {
+              selector = options.selector + " " + s + ", " + options.selector + s;
+            } else if(options.sibling) {
+              selector = options.selector + s;
+            } else if(options.parent) {
+              selector = options.selector + " " + s;
+            } else {
+              selector = s;
+            }
+          } else {
+            selector = s;
+          }
           r.selectors[ index ] = selector;
         });
       }
@@ -38,7 +51,9 @@ var
     options = deepmerge({
       // Defaults
       selector: ".css-wrap",
-      skip: null
+      skip: null,
+      sibling: false,
+      parent: true,
     }, options || {});
     if (fs.existsSync(path.resolve(string))) {
       string = fs.readFileSync(string).toString();
@@ -47,4 +62,4 @@ var
     css.stylesheet.rules = processRules( css.stylesheet.rules, options );
     return css_stringify( css );
   };
-module.exports = css_wrap;
\ No newline at end of file
+module.exports = css_wrap;
diff --git a/package.json b/package.json
index 9b881ff..f37a93a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "css-wrap",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Wrap CSS rules in a namespace",
   "main": "css_wrap.js",
   "homepage": "https://github.com/benignware/css-wrap",
diff --git a/test/css_wrap_test.js b/test/css_wrap_test.js
index 9da77b1..053f677 100644
--- a/test/css_wrap_test.js
+++ b/test/css_wrap_test.js
@@ -29,25 +29,89 @@ exports.css_wrap = {
     done();
   },
   test: function(test) {
-    test.expect(1);
+    test.expect(5);
 
-    var
-      options = {
+    mkdirp('tmp');
+    var options, result, actual, expected;
+
+    // Standard test
+    options = {
         selector: '.my-app',
         skip: /^\.skip-me/
-      },
-      result = css_wrap(path.join(__dirname, '/fixtures/styles.css'), options),
-      actual,
-      expected;
+    };
+    result = css_wrap(path.join(__dirname, '/fixtures/styles.css'), options);
 
-    mkdirp('tmp');
     fs.writeFileSync('tmp/styles.css', result);
 
     actual = fs.readFileSync('tmp/styles.css').toString();
     expected = fs.readFileSync(path.join(__dirname, '/expected/styles.css')).toString();
 
-    test.strictEqual(actual, expected, 'CSS Files should match');
+    test.strictEqual(actual, expected, 'CSS Files should match (standard)');
+    
+    // Sibling only
+    options = {
+      selector: '.my-app',
+      skip: /^\.skip-me/,
+      sibling: true,
+      parent: false,
+    };
+    result = css_wrap(path.join(__dirname, '/fixtures/styles.css'), options);
+
+    fs.writeFileSync('tmp/styles-sibling.css', result);
+
+    actual = fs.readFileSync('tmp/styles-sibling.css').toString();
+    expected = fs.readFileSync(path.join(__dirname, '/expected/styles-sibling.css')).toString();
+
+    test.strictEqual(actual, expected, 'CSS Files should match (sibling only)');
+
+    // Parent only
+    options = {
+      selector: '.my-app',
+      skip: /^\.skip-me/,
+      sibling: false,
+      parent: true,
+    };
+    result = css_wrap(path.join(__dirname, '/fixtures/styles.css'), options);
+
+    fs.writeFileSync('tmp/styles-parent.css', result);
+
+    actual = fs.readFileSync('tmp/styles-parent.css').toString();
+    expected = fs.readFileSync(path.join(__dirname, '/expected/styles-parent.css')).toString();
+
+    test.strictEqual(actual, expected, 'CSS Files should match (parent only)');
+    
+    // Both parent and sibling
+    options = {
+      selector: '.my-app',
+      skip: /^\.skip-me/,
+      sibling: true,
+      parent: true,
+    };
+    result = css_wrap(path.join(__dirname, '/fixtures/styles.css'), options);
+
+    fs.writeFileSync('tmp/styles-parent-and-sibling.css', result);
+
+    actual = fs.readFileSync('tmp/styles-parent-and-sibling.css').toString();
+    expected = fs.readFileSync(path.join(__dirname, '/expected/styles-parent-and-sibling.css')).toString();
+
+    test.strictEqual(actual, expected, 'CSS Files should match (parent and sibling)');
+    
+    // Neither parent and sibling
+    options = {
+      selector: '.my-app',
+      skip: /^\.skip-me/,
+      sibling: false,
+      parent: false,
+    };
+    result = css_wrap(path.join(__dirname, '/fixtures/styles.css'), options);
+
+    fs.writeFileSync('tmp/styles-neither.css', result);
+
+    actual = fs.readFileSync('tmp/styles-neither.css').toString();
+    expected = fs.readFileSync(path.join(__dirname, '/expected/styles-neither.css')).toString();
 
+    test.strictEqual(actual, expected, 'CSS Files should match (neither)');
+    
     test.done();
   }
-};
\ No newline at end of file
+};
diff --git a/test/expected/styles-neither.css b/test/expected/styles-neither.css
new file mode 100644
index 0000000..ad7de8d
--- /dev/null
+++ b/test/expected/styles-neither.css
@@ -0,0 +1,13 @@
+.some-css-selector {
+  background: green;
+}
+
+.skip-me {
+  background: red;
+}
+
+@media (min-width: 768px) {
+  .some-css-selector {
+    width: 750px;
+  }
+}
\ No newline at end of file
diff --git a/test/expected/styles-parent-and-sibling.css b/test/expected/styles-parent-and-sibling.css
new file mode 100644
index 0000000..dc9b2a9
--- /dev/null
+++ b/test/expected/styles-parent-and-sibling.css
@@ -0,0 +1,13 @@
+.my-app .some-css-selector, .my-app.some-css-selector {
+  background: green;
+}
+
+.skip-me {
+  background: red;
+}
+
+@media (min-width: 768px) {
+  .my-app .some-css-selector, .my-app.some-css-selector {
+    width: 750px;
+  }
+}
\ No newline at end of file
diff --git a/test/expected/styles-parent.css b/test/expected/styles-parent.css
new file mode 100644
index 0000000..452fa2a
--- /dev/null
+++ b/test/expected/styles-parent.css
@@ -0,0 +1,13 @@
+.my-app .some-css-selector {
+  background: green;
+}
+
+.skip-me {
+  background: red;
+}
+
+@media (min-width: 768px) {
+  .my-app .some-css-selector {
+    width: 750px;
+  }
+}
\ No newline at end of file
diff --git a/test/expected/styles-sibling.css b/test/expected/styles-sibling.css
new file mode 100644
index 0000000..8354be0
--- /dev/null
+++ b/test/expected/styles-sibling.css
@@ -0,0 +1,13 @@
+.my-app.some-css-selector {
+  background: green;
+}
+
+.skip-me {
+  background: red;
+}
+
+@media (min-width: 768px) {
+  .my-app.some-css-selector {
+    width: 750px;
+  }
+}
\ No newline at end of file