grunt-postcss-separator
v1.0.1
Published
Split up your Data-URI (or anything else) into a separate CSS file.
Downloads
29
Maintainers
Readme
grunt-postcss-separator
This is a grunt wrapper for postcss-separator
.
Split up your Data-URI (or anything else) into a separate CSS file.
Written with PostCSS.
Installation
npm install grunt-postcss-separator
Usage
Read source.css
, process its content, and output processed CSS to styles.css
and data.css
.
If source.css
has:
a.top:hover, a.top:focus {
background-image: url("data:image");
}
a.top {
background-image: url("data:image");
}
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle;
}
q, blockquote {
quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
content: "";
}
a img {
border: none;
}
You will get the following output:
a.top:hover, a.top:focus {
background-image: url("data:image");
}
a.top {
background-image: url("data:image");
}
Options
All options of postcss-separator
are available.
Furthermore you can use the option keepOrigin
:
keepOrigin (only available in Grunt)
Type: boolean
Default value: false
Keep the origin file untouched when defined as true
. When defined as false
the origin css file will be cleaned up.
Usage
You can enable this plugin in the Gruntfile.js
of your project like that:
grunt.loadNpmTasks('grunt-postcss-separator');
Example
Here are some grunt examples:
icons
task splits up your dataURIs (data
)prop
task splits up a specific property (background-image
)ie
task splits up all ie classes (.lt-ie9
)mediaQuery
task splits up all media queries which match the RegExpprint
task splits up all @media print
separator: {
options: {
keepOrigin: true,
dataFile: true
},
icons: {
options: {
pattern: {
matchValue: /data/, // The RegExp to match values with
matchParent: true // Rules (eg. in @media blocks) include their parent node.
}
},
files: {
'tmp/icons.css': ['test/fixtures/source.css']
}
},
prop: {
options: {
pattern: {
matchValue: false, // The RegExp to match values with
matchProp: /background-image/, // The RegExp to match values with
matchParent: true // Rules (eg. in @media blocks) include their parent node.
}
},
files: {
'tmp/prop.css': ['test/fixtures/source.css']
}
},
ie: {
options: {
pattern: {
matchRule: /lt-ie9/, // The RegExp to match values with
matchMedia: false, // The RegExp to match media queries with
matchParent: true // Rules (eg. in @media blocks) include their parent node.
}
},
files: {
'tmp/ie.css': ['test/fixtures/source.css']
}
},
mediaQuery: {
options: {
pattern: {
matchValue: false, // The RegExp to match values with
matchRule: false, // The RegExp to match values with
matchMedia: /((min|max)-)?resolution\:\s*(\d+)?\.?(\d+)?dppx/, // The RegExp to match media queries with
matchParent: false // Rules (eg. in @media blocks) include their parent node.
}
},
files: {
'tmp/image.css': ['test/fixtures/source.css']
}
},
print: {
options: {
pattern: {
matchValue: false, // The RegExp to match values with
matchRule: false, // The RegExp to match values with
matchMedia: false, // The RegExp to match media queries with
matchParent: false, // Rules (eg. in @media blocks) include their parent node.
matchAtRuleType: /print/ // Rules (eg. in @media blocks) include their parent node.
}
},
files: {
'tmp/print.css': ['source.css']
}
}
}
License
Copyright (c) 2015 Sebastian Fitzner. Licensed under the MIT license.
ToDos
- Add tests