grunt-split-styles - npm Package Compare versions

Comparing version 0.1.2 to 0.2.0

Gruntfile.js

@@ -33,18 +33,91 @@ /*
     split_styles: {
-      default_options: {
+      ie8_styles: {
         options: {
+          pattern: /\.ie8/,
+          output: 'tmp/ie8_styles/extracted.css',
         },
         files: {
-          'tmp/default_options': ['test/fixtures/testing', 'test/fixtures/123'],
+          'tmp/ie8_styles/remaining.css': 'test/fixtures/with-ie8-styles.css'
+        }
+      },
+      ie8_styles_pattern_object: {
+        options: {
+          pattern: {
+            match: /\.ie8/
+          },
+          output: 'tmp/ie8_styles_pattern_object/extracted.css',
         },
+        files: {
+          'tmp/ie8_styles_pattern_object/remaining.css': 'test/fixtures/with-ie8-styles.css'
+        }
       },
-      custom_options: {
+      ie8_styles_dont_remove: {
         options: {
-          separator: ': ',
-          punctuation: ' !!!',
+          pattern: /\.ie8/,
+          output: 'tmp/ie8_styles_dont_remove/extracted.css',
+          remove: false
         },
         files: {
-          'tmp/custom_options': ['test/fixtures/testing', 'test/fixtures/123'],
+          'tmp/ie8_styles_dont_remove/remaining.css': 'test/fixtures/with-ie8-styles.css'
+        }
+      },
+      media_queries_all: {
+        options: {
+          output: 'tmp/media_queries_all/extracted.css',
+          mediaPattern: /./,
         },
+        files: {
+          'tmp/media_queries_all/remaining.css': 'test/fixtures/media-queries.css'
+        }
       },
+      media_queries_em: {
+        options: {
+          output: 'tmp/media_queries_em/extracted.css',
+          mediaPattern: /min-width: (\d+)em/,
+        },
+        files: {
+          'tmp/media_queries_em/remaining.css': 'test/fixtures/media-queries.css'
+        }
+      },
+      media_queries_px: {
+        options: {
+          output: 'tmp/media_queries_px/extracted.css',
+          mediaPattern: /min-width: (\d+)px/,
+        },
+        files: {
+          'tmp/media_queries_px/remaining.css': 'test/fixtures/media-queries.css'
+        }
+      },
+      media_queries_em_unwrap: {
+        options: {
+          output: 'tmp/media_queries_em_unwrap/extracted.css',
+          mediaPattern: /min-width: (\d+)em/,
+          mediaPatternUnwrap: true,
+          remove: false
+        },
+        files: {
+          'tmp/media_queries_em_unwrap/remaining.css': 'test/fixtures/media-queries.css'
+        }
+      },
+      with_media_parent: {
+        options: {
+          output: 'tmp/with_media_parent/extracted.css',
+          pattern: {
+            match: /\.a-class/,
+            matchParent: true
+          }
+        },
+        files: {
+          'tmp/with_media_parent/remaining.css': 'test/fixtures/media-queries.css'
+        }
+      },
+      without_media_parent: {
+        options: {
+          output: 'tmp/without_media_parent/extracted.css',
+          pattern: /\.a-class/
+        },
+        files: {
+          'tmp/without_media_parent/remaining.css': 'test/fixtures/media-queries.css'
+        }
+      },
     },
@@ -51,0 +124,0 @@

package.json

 {
   "name": "grunt-split-styles",
   "description": "Split a CSS file based on selectors. Useful for old IE stylesheets",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "homepage": "https://github.com/dbisso/grunt-split-style",
@@ -6,0 +6,0 @@ "author": {

README.md

 # grunt-split-styles
 
-> Split a CSS file based on selectors. Useful for old IE stylesheets.
+> Split a CSS file based on selectors. Useful for building old IE stylesheets for example.
 
@@ -32,6 +32,50 @@ ## Credit
 #### options.pattern
+Type: `RegExp|Object`
+
+If a RegExp is specified then selectors matching this regular expression will be added to the output file.
+
+Alternatively you can specify an object:
+
+```js
+pattern: {
+  match: /\.ie8/, // Required. See option.pattern.match below.
+  matchParent: false // Optional. See options.pattern.matchParent below.
+}
+```
+
+#### options.pattern.match
 Type: `RegExp`
 
-Selectors matching this regular expression will be added to the output file.
+If a RegExp then selectors matching this regular expression will be added to the output file.
 
+#### options.pattern.matchParent
+Type: `Boolean`  
+Default: `false`
+
+If `true` then a declaration's parent media node will be matched along with the declaration itself.
+
+For example when matching a pattern such as `/^\.rtl/` against the following:
+
+```css
+@media screen and (min-width: 50em) {
+    .rtl .thing {
+        color: red;
+    }
+
+   .another .thing {
+        color: blue;
+    }
+}
+```
+
+Yields:
+
+```css
+@media screen and (min-width: 50em) {
+    .rtl .thing {
+        color: red;
+    }
+}
+```
+
 #### options.output
@@ -43,3 +87,3 @@ Type: `String`
 #### options.remove
-Type: `Boolean`
+Type: `Boolean`  
 Default value: `true`
@@ -54,3 +98,44 @@
 
+#### options.mediaPatternUnwrap
+Type: `Boolean`  
+Default value: `false`
 
+If `true`, only the child declarations of a matched `@media` rule will be extracted.
+
+For example if your options are:
+
+```js
+options: {
+  output: 'media-children.css',
+  mediaPattern: /min-width: (\d+)em/,
+  mediaPatternUnwrap: true
+}
+```
+
+And you apply it to the following:
+
+```css
+@media screen and (min-width: 50em) {
+    .rtl .thing {
+        color: red;
+    }
+
+   .another .thing {
+        color: blue;
+    }
+}
+```
+
+will extract:
+
+```css
+.rtl .thing {
+    color: red;
+}
+
+.another .thing {
+    color: blue;
+}
+```
+
 ### Usage Examples
@@ -85,2 +170,8 @@
 ## Release History
-_(Nothing yet)_
+
+* 2014-02-25 v0.2.0
+    * Add option to match parent nodes of declarations.
+    * Add option to unwrap declarations of matched @media nodes.
+    * Add some basic tests.
+
+* 2014-02-16 v0.1.0 Initial Release.

tasks/split_styles.js

@@ -12,25 +12,49 @@ /*
 module.exports = function(grunt) {
-	grunt.registerMultiTask('split_styles', 'Split a CSS file based on selectors. Useful of old IE stylesheets', function() {
+	grunt.registerMultiTask('split_styles', 'Split a CSS file based on selectors.', function() {
 		// Merge task-specific and/or target-specific options with these defaults.
 		var options = this.options({
-			separator: '', // do we need this?
-			pattern: false, // The RegExp to match selectors with
+			pattern: {
+				match: false, // The RegExp to match selectors with
+				matchParent: false // Should child declarations (eg. in @media blocks) include their parent node.
+			},
 			remove: true, // Should we strip the matched rules from the src style sheet?
 			mediaPattern: false, // RegExp to match @media rules with
-			unwrapMedia: false // Extract the rules from a matched @media block
+			mediaPatternUnwrap: false, // Extract the rules from a matched @media block
 		});
 
+		var pattern = {};
 		var newCSS = postcss.root();
-		// Please see the Grunt documentation for more information regarding task
-		// creation: http://gruntjs.com/creating-tasks
 
+		if ( options.pattern instanceof RegExp ) {
+			pattern.match = options.pattern;
+			pattern.matchParent = false;
+		} else {
+			pattern = options.pattern;
+		}
+
 		// Our postCSS processor
 		var processor = postcss(function (css) {
-			if ( options.pattern ) {
+			if ( pattern.match ) {
 				css.eachRule(function (rule) {
-						if ( rule.selector.match(options.pattern) ) {
+						var parent;
+
+						if ( rule.selector.match(pattern.match) ) {
 								if ( options.remove ) {
 									rule.removeSelf();
 								}
-								newCSS.append(rule);
+
+								if ( pattern.matchParent ) {
+									parent = rule.parent.clone();
+
+									if ( 'media' === parent.name ) {
+										parent.eachRule(function (childRule) {
+											childRule.removeSelf();
+										});
+
+										parent.append(rule);
+										newCSS.append(parent);
+									}
+								} else {
+									newCSS.append(rule);
+								}
 						}
@@ -48,3 +72,3 @@ });
 
-						if ( options.unwrapMedia ) {
+						if ( options.mediaPatternUnwrap ) {
 							atRule.eachRule(function (rule) {
@@ -63,3 +87,2 @@ newCSS.append(rule);
 		this.files.forEach(function(f) {
-			// Concat specified files.
 			var src = f.src.filter(function(filepath) {
@@ -85,3 +108,3 @@ // Warn on and remove invalid source files (if nonull was set).
 
-				if ( output.map.length > 0 ) {
+				if ( output.map && output.map.length > 0 ) {
 					grunt.log.writeln('Sourcemap "' + options.output + '" created.');
@@ -92,3 +115,3 @@ grunt.file.write( f.dest + '.map' , output.map);
 				return output.css;
-			}).join(grunt.util.normalizelf(options.separator));
+			});
 
@@ -95,0 +118,0 @@ // Write the newly split file.

test/split_styles_test.js

@@ -30,20 +30,119 @@ 'use strict';
   },
-  default_options: function(test) {
+  ie8_styles: function(test) {
+    test.expect(2);
+
+    var actualExtracted = grunt.file.read('tmp/ie8_styles/extracted.css').trim();
+    var actualRemaining = grunt.file.read('tmp/ie8_styles/remaining.css').trim();
+
+    var expectedExtracted = grunt.file.read('test/expected/ie8-styles.css').trim();
+    var expectedRemaining = grunt.file.read('test/expected/without-ie8-styles.css').trim();
+
+    test.equal(actualExtracted, expectedExtracted, 'should create a file with only styles starting with .ie8.');
+    test.equal(actualRemaining, expectedRemaining, 'should remove styles starting with .ie8.');
+
+
+    test.done();
+  },
+  ie8_styles_pattern_object: function(test) {
+    test.expect(2);
+
+    var actualExtracted = grunt.file.read('tmp/ie8_styles_pattern_object/extracted.css').trim();
+    var actualRemaining = grunt.file.read('tmp/ie8_styles_pattern_object/remaining.css').trim();
+
+    var expectedExtracted = grunt.file.read('test/expected/ie8-styles.css').trim();
+    var expectedRemaining = grunt.file.read('test/expected/without-ie8-styles.css').trim();
+
+    test.equal(actualExtracted, expectedExtracted, 'should create a file with only styles starting with .ie8.');
+    test.equal(actualRemaining, expectedRemaining, 'should remove styles starting with .ie8.');
+
+
+    test.done();
+  },
+  ie8_styles_dont_remove: function(test) {
+    test.expect(2);
+
+    var actualExtracted = grunt.file.read('tmp/ie8_styles_dont_remove/extracted.css').trim();
+    var actualRemaining = grunt.file.read('tmp/ie8_styles_dont_remove/remaining.css').trim();
+
+    var expectedExtracted = grunt.file.read('test/expected/ie8-styles.css').trim();
+    var expectedRemaining = grunt.file.read('test/expected/with-ie8-styles.css').trim();
+
+    test.equal(actualExtracted, expectedExtracted, 'should create a file with only styles starting with .ie8.');
+    test.equal(actualRemaining, expectedRemaining, 'should keep styles starting with .ie8.');
+
+
+    test.done();
+  },
+  media_queries_all: function(test) {
+    test.expect(2);
+
+    var actualExtracted = grunt.file.read('tmp/media_queries_all/extracted.css').trim();
+    var actualRemaining = grunt.file.read('tmp/media_queries_all/remaining.css').trim();
+
+    var expectedExtracted = grunt.file.read('test/expected/all-media-queries.css');
+    var expectedRemaining = grunt.file.read('test/expected/empty.css');
+
+    test.equal(actualExtracted, expectedExtracted, 'should create a file with all the media queries.');
+    test.equal(actualRemaining, expectedRemaining, 'should remove all media queries.');
+
+    test.done();
+  },
+  media_queries_em: function(test) {
+    test.expect(2);
+
+    var actualExtracted = grunt.file.read('tmp/media_queries_em/extracted.css').trim();
+    var actualRemaining = grunt.file.read('tmp/media_queries_em/remaining.css').trim();
+
+    var expectedExtracted = grunt.file.read('test/expected/only-em-media-queries.css').trim();
+    var expectedRemaining = grunt.file.read('test/expected/only-px-media-queries.css').trim();
+
+    test.equal(actualExtracted, expectedExtracted, 'should create a file only em-based min-width media queries.');
+    test.equal(actualRemaining, expectedRemaining, 'should remove all em-based min-width media queries.');
+
+    test.done();
+  },
+  media_queries_px: function(test) {
+    test.expect(2);
+
+    var actualExtracted = grunt.file.read('tmp/media_queries_px/extracted.css').trim();
+    var actualRemaining = grunt.file.read('tmp/media_queries_px/remaining.css').trim();
+
+    var expectedExtracted = grunt.file.read('test/expected/only-px-media-queries.css').trim();
+    var expectedRemaining = grunt.file.read('test/expected/only-em-media-queries.css').trim();
+
+    test.equal(actualExtracted, expectedExtracted, 'should create a file only pixel-based min-width media queries.');
+    test.equal(actualRemaining, expectedRemaining, 'should remove all pixel-based min-width media queries.');
+
+    test.done();
+  },
+  media_queries_em_unwrap: function(test) {
     test.expect(1);
 
-    var actual = grunt.file.read('tmp/default_options');
-    var expected = grunt.file.read('test/expected/default_options');
-    test.equal(actual, expected, 'should describe what the default behavior is.');
+    var actualExtracted = grunt.file.read('tmp/media_queries_em_unwrap/extracted.css').trim();
+    var expectedExtracted = grunt.file.read('test/expected/only-em-media-queries-unwrapped.css').trim();
 
+    test.equal(actualExtracted, expectedExtracted, 'should create a file with only child declarations of em-based min-width media queries.');
+
     test.done();
   },
-  custom_options: function(test) {
+  with_media_parent: function(test) {
     test.expect(1);
 
-    var actual = grunt.file.read('tmp/custom_options');
-    var expected = grunt.file.read('test/expected/custom_options');
-    test.equal(actual, expected, 'should describe what the custom option(s) behavior is.');
+    var actualExtracted = grunt.file.read('tmp/with_media_parent/extracted.css').trim();
+    var expectedExtracted = grunt.file.read('test/expected/class-with-media-parent.css').trim();
 
+    test.equal(actualExtracted, expectedExtracted, 'should extract the class and its parent media node.');
+
     test.done();
   },
+  without_media_parent: function(test) {
+    test.expect(1);
+
+    var actualExtracted = grunt.file.read('tmp/without_media_parent/extracted.css').trim();
+    var expectedExtracted = grunt.file.read('test/expected/class-without-media-parent.css').trim();
+
+    test.equal(actualExtracted, expectedExtracted, 'should extract the class and its parent media node.');
+
+    test.done();
+  }
 };

No alert changes

Improved metrics

Total package byte prevSize

20194

increased by93.93%

Number of package files

20

increased by66.67%

Lines of code

412

increased by120.32%

Number of lines in readme file

174

increased by109.64%

No dependency changes