css-separation v0.1.0-pre.4
CSS-SEPARATION
Inspiration
Please check READING.md.
Primer
Separate content like conditional stylesheets(and so on...) from ".css" file, and generate individual files for them according to certain rules!
The stylesheets for IE8 shouldn't be download in IE7... The stylesheets for IE shouldn't be downloaded in Google Chrome(Or Google Chrome Canary, Google Chrome Chromium, Safari, Opera, Opera Dev, Firefox, Firefox Dev and so on...)... The stylesheets used hacks for specify browser shouldn't be downloaded in other browsers... The stylesheets for modile shouldn't be downloaded when someone use desktop computer to visit the site...
Maybe requirements described above can be done manually. But... This kind of jobs are very complicated... If file and folder structure of project consider these requirements when the project is in progress, it will make efficiency of the actual development be extremely low; maintenance work will be very hard; developers will have strong emotional resistance...
But the content talked above can indeed help to optimize web sites(any form of using WEB technology)...
Because... Who knows how much your project will be... Who knows how many developers are there in your project... Who knows what would you use between BROWSERHACKS and MODERNIZR to make your WEB application user interface under different rendering engine, adaptation model to get closer to the perfect show...
So... I want to write CSS-SEPARATION to implement the requirements described above. For helping web developers who use the practice from 《Conditional Stylesheets vs CSS Hacks? Answer: Neither!》.
Usage
Install
Just use npm install css-separation command. Of course you can use --save-dev param after the command above to save css-separation to package.json of your project.
Folder structure for reference,
root/
├── [.git]
├── [doc]
├── [node_modules]
├── [dev]
│ ├── [code]
│ │ ├── [splited_tasks_for_gulp]
│ │ ├── [scripts]
│ │ ├── [stylesheets]
│ ├── [image]
│ ├── [font]
├── [dest]
│ ├── [bower_components]
│ ├── [resources]
│ │ ├── [css]
│ │ ├── [js]
│ │ ├── [img]
│ │ ├── [font]
├── [gulp]
├── [test]
├── [tool]Create a new instance,
...
var cssSeparation, separatorOpts, separator;
cssSeparation = require('css-separation');
separatorOpts = {
mute: true,
conditionalClass: ['.ie6', '.ie7', '.ie8', '.ie9', '.ie10', '.ie11'],
beautify: true,
category: ['common', 'condition', 'media']
};
separator = new cssSeparation(separatorOpts);
...Deal single *.css file,
...
separator.deal('dev/dest/stylesheets/example.css');
...Use with Glob Module to deal multiple *.css files,
...
var glob;
glob = require('glob');
glob('test/!(*.+(ie7|ie8|ie9|ie10|ie11|media|common).css|*.js)', function (err, files) {
separator.deal(files);
});
...May be you want to use specify configuration to generate specify kind of stylesheets for specify *.css file,
...
var glob;
glob = require('glob');
separator.gen('dev/dest/stylesheets/example.css', {
conditionalClass: ['.ie6', '.ie7', '.ie8', '.ie9', '.ie10', '.ie11'],
beautify: true,
category: ['common']
});
// OR
glob('test/!(*.+(ie7|ie8|ie9|ie10|ie11|media|common).css|*.js)', function (err, files) {
separator.gen(files, {
conditionalClass: ['.ie6', '.ie7', '.ie8', '.ie9', '.ie10', '.ie11']
beautify: false
category: ['common']
});
});
...Or... Maybe you just want to use specify configuration to get specify kind of stylesheets of specify *.css file(s),
...
var glob, stSingle, stMultiple;
glob = require('glob');
stSingle = separator.get('dev/dest/stylesheets/example.css', {
conditionalClass: ['.ie6', '.ie7', '.ie8', '.ie9', '.ie10', '.ie11'],
beautify: false,
category: ['common', 'condition']
});
// Then, you can do anything with "stSingle".
// OR
glob('test/!(*.+(ie7|ie8|ie9|ie10|ie11|media|common).css|*.js)', function (err, files) {
stMultiple = separator.get(files, {
conditionalClass: ['.ie6', '.ie7', '.ie8', '.ie9', '.ie10', '.ie11'],
beautify: false,
category: ['condition']
});
// Then, you can do anything with "stMultiple".
});
...Ofcourse you can do somethings that include somethings which both of "gen()" and "get()" can do,
...
var glob, stSingle, stMultiple;
glob = require('glob');
stSingle = separator.on('dev/dest/stylesheets/example.css', 'get', {
conditionalClass: ['.ie6', '.ie7', '.ie8', '.ie9', '.ie10', '.ie11'],
beautify: false,
category: ['condition']
});
// Then, you can do anything with "stSingle".
// OR
glob('test/!(*.+(ie7|ie8|ie9|ie10|ie11|media|common).css|*.js)', function (err, files) {
separator.on(files, 'gen', {
conditionalClass: ['.ie6', '.ie7', '.ie8', '.ie9', '.ie10', '.ie11'],
beautify: true,
category: ['common']
});
});
...If you want more usages, Please check RECIPES.md.
For now, "CSS-SEPARATION" will put generated file(s) in the same directory of the source file(s) automatically.
API
new cssSeparation(options)
options, optional
+ mute, **`boolean` type; default value is `true`**; if allow some codes to log messages. + dest, **`string` type; default value is an empty string**; Generate file to specified folder. + conditionalClass, **`array` type; default value is an empty array**; if need to filter conditional stylesheets, `css-separation` will use the conditional classes defined here to filter the given '*.css' file(s). + beautify, **`boolean` type; default value is `true`**; if `true`; the output has a beautiful format, otherwise, the output will be the compressed format. + category, **`array` type; default value is an empty array**; for now, you can put **'common', 'condition' and 'media'** in this option.
Create an instance of css-separation.
.deal(src)
- src,
stringorarraytype; the*.csssource(s) need to be separated.
Deal the given *.css file(s).
.on(src, ctrlType, options)
src,
stringorarraytype; specify*.cssfilectrlType,
stringtype; specify type of control, it could begetorgenoptions, optional, same as options for
new cssSeparation(options)
Use specify configuration to get or generate specify kind of stylesheets for specify *.css file. Then you can do anything with the result.
.gen(src, options)
src,
stringorarraytype; specify*.cssfileoptions, optional, same as options for
new cssSeparation(options)
Use specify configuration to generate specify kind of stylesheets for specify *.css file.
.get(src, options)
src,
stringorarraytype; specify*.cssfileoptions, optional, same as options for
new cssSeparation(options)
Use specify configuration to get specify kind of stylesheets for specify *.css file. Then you can do anything with the result.
Helping CSS-SEPARATION
You may not find something make you surprised, here... But CSS-SEPARATION NEEDS YOUR PASSION! d=(´▽｀)=b
What's CSS-SEPARATION working on next?
You can check the plan of development in my related Trello board! I use Trello to manage the plan of this project. And we can discuss a lot through the related board! Of course we can use Gitter to discuss, too! You can choose your favorite kind of communication form!
My requirement is not met!
A person's strength is limited, I will ignore something... Or, I just did not get the idea what you think... If you'd like to help to improve the project, whelcome you to present your ideas on Gitter or Trello. I will be very gratefull!
I found a bug!
If you found a repeatable bug, and tips from Usage( '点击 · Click') section didn't help, then be sure to search existing issues first. If there's no content is similar with the problem you found, welcome you to create a new issue you found!
I want to help with the code!
Awesome! I use Github to managed code. So there are lots of ways you can help. First read CONTRIBUTION.EN.md, then learn be social with Github and how to pull the repo on css-separation.
Contact info
Twitter: @iTonyYo
More? Check here: http://www.evernote.com/l/AIdKUowUzdNLbK_gDY54E0gAqdcNuAol59E/
LICENSE
See also LICENSE .
