grunt-csstojs
v0.2.0grunt-CSStoJS
A grunt task that transforms your CSS into a JavaScript string
Example
Input:
.test {
background-image: url("test.jpg");
background-repeat: no-repeat;
overflow: hidden;
}
#test2 {
background: url('hello.jpg');
}
Output
var CSSString = ".test{background-image: url('test.jpg');background-repeat:no-repeat;overflow:hidden;}#test2{background:url('hello.jpg');}"
Why?
Useful for 3:rd party JavaScript deployments where you want to avoid serving multiple requests to seperate CSS files. You can easily just create the Stylesheet dynamically with JavaScript on the fly instead:
var style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet) {
style.styleSheet.cssText = KVFeedCSS;
} else {
style.appendChild(document.createTextNode(CSSString));
}
document.body.appendChild(style);
Getting Started
This plugin requires Grunt ~0.4.2
If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:
npm install grunt-CSStoJS --save-dev
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-CSStoJS');
The "CSStoJS" task
Overview
In your project's Gruntfile, add a section named CSStoJS
to the data object passed into grunt.initConfig()
.
grunt.initConfig({
CSStoJS: {
options: {},
files: {
'style.css.js': ['src/1.css', 'src/2.css'],
},
},
});
Options
options.varName
Type: String
Default value: 'CSSString'
A string value that is used as the variable name where the CSS string is stored.
Usage Examples
Default Options
grunt.initConfig({
CSStoJS: {
options: {},
files: {
'style.css.js': ['src/1.css', 'src/2.css'],
},
},
});
Custom Options
grunt.initConfig({
CSStoJS: {
options: {
varName: 'myCSSString',
},
files: {
'style.css.js': ['src/1.css', 'src/2.css'],
},
},
});
Contributing
In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.
Release History
(Nothing yet)
Metadata
- Unknown
- >= 0.8.0
- Daniel Stocks
- released 1/30/2014