Added the ability to optionally wrap with sibling styles instead of, …

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
+v0.0.2 - Added options.skip
+v0.1.1 - Added options.sibling and options.parent

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;
+module.exports = css_wrap;

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",

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();
   }
-};
+};

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;
+  }
+}

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;
+  }
+}

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;
+  }
+}

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;
+  }
+}