Narcoleptic's Patch Mangler
    Have ideas to improve npm?Join in the discussion! »

    postcss-to-nest

    1.0.0 • Public • Published

    CSS To Nest

    PostCSS Logo

    NPM Version Build Status

    CSS To Nest transforms unnested CSS into nested CSS, following the CSS Nesting Module specification. This might be helpful for updating a project with a single file of legacy CSS.

    /* before */
    .foo .bar {
        color: blue;
    }
     
    .foo .bar .pre.mon {
        color: white;
    }
     
    .foo .bar .pre {
        color: red;
    }
     
    /* after */
    .foo {
        @nest & .bar {
            color: blue;
     
            @nest & .pre {
                color: red;
     
                @nest &.mon {
                    color: white;
                }
            }
        }
    }

    Usage

    Add CSS To Nest to your build tool:

    npm install postcss-to-nest --save-dev

    Node

    require('postcss-to-nest').process(YOUR_CSS, { /* options */ });

    PostCSS

    Add PostCSS to your build tool:

    npm install postcss --save-dev

    Load CSS To Nest as a PostCSS plugin:

    postcss([
        require('postcss-to-nest')({ /* options */ })
    ]).process(YOUR_CSS, /* options */);

    Gulp

    Add Gulp PostCSS to your build tool:

    npm install gulp-postcss --save-dev

    Enable CSS To Nest within your Gulpfile:

    var postcss = require('gulp-postcss');
     
    gulp.task('css', function () {
        return gulp.src('./src/*.css').pipe(
            postcss([
                require('postcss-to-nest')({ /* options */ })
            ])
        ).pipe(
            gulp.dest('.')
        );
    });

    Grunt

    Add Grunt PostCSS to your build tool:

    npm install grunt-postcss --save-dev

    Enable CSS To Nest within your Gruntfile:

    grunt.loadNpmTasks('grunt-postcss');
     
    grunt.initConfig({
        postcss: {
            options: {
                use: [
                    require('postcss-to-nest')({ /* options */ })
                ]
            },
            dist: {
                src: '*.css'
            }
        }
    });

    Install

    npm i postcss-to-nest

    DownloadsWeekly Downloads

    2

    Version

    1.0.0

    License

    CC0-1.0

    Last publish

    Collaborators

    • avatar