Nonvoluntary Professional Mangling

    css-separation

    0.1.0-pre.4 • Public • Published

    CSS-SEPARATION

    Gitter Build status Travis CI Project Dependencies Project devDependencies Issue Stats Issue Stats NPM · downloads, rank and stars

    CSS-SEPARATION WIKI

    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

    how to 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, string or array type; the *.css source(s) need to be separated.

    Deal the given *.css file(s).

    .on(src, ctrlType, options)

    • src, string or array type; specify *.css file

    • ctrlType, string type; specify type of control, it could be get or gen

    • options, 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, string or array type; specify *.css file

    • options, 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, string or array type; specify *.css file

    • options, 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

    LICENSE

    See also LICENSE .

    Bitdeli Badge

    Install

    npm i css-separation

    DownloadsWeekly Downloads

    5

    Version

    0.1.0-pre.4

    License

    none

    Last publish

    Collaborators

    • avatar