Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

gulp-split-css

1.0.1 • Public • Published

gulp-split-css

Gulp plugin that can split CSS files into multiple files base on conditions and selectors. It can break CSS files for multi-language applications and create different stylesheets for each language.

Installation

npm install gulp-split-css

Example

const  gulp  =  require('gulp');
const  splitCss  =  require('gulp-split-css');
 
const  options  =  {
    mainFileName:  'main',
    extraSheets: [{
        selector:  '.lang-en',
        filename:  'english'
        },
        {
        selector:  '#french',
        filename:  'styles.french.css'
        },
        {
        selector:  '.persian',
        filename:  'persian.css'
        }]
};
 
gulp.task('splitCss',  function  ()  {
    return  gulp.src('./src/app.css')
        .pipe(splitCss(options))
        .pipe(gulp.dest('./dist/'));
});
input  {
    border-radius:  4px;
    background:  black;
    color:  #fff
}
 
.box {
    font-size:  12px;
    line-height:  16px;
    padding:  8px  10px;
    overflow:  hidden
}
 
.lang-en  .box  {
    font-size:  14px;
    line-height:  20px;
    padding:  10px  15px;
    margin-left:  4px
}
 
#french .box {
    font-size:  12px;
    line-height:  16px;
    padding:  8px  10px;
}
 
.persian * {
    direction: rtl;
}

Task splitCss generates following files:

main.css

input  {
    border-radius:  4px;
    background:  black;
    color:  #fff
}
 
.box {
    font-size:  12px;
    line-height:  16px;
    padding:  8px  10px;
    overflow:  hidden
}

english.css

.lang-en  .box  {
    font-size:  14px;
    line-height:  20px;
    padding:  10px  15px;
    margin-left:  4px
}

styles.french.css

#french .box {
    font-size:  12px;
    line-height:  16px;
    padding:  8px  10px;
}

persian.css

.persian * {
    direction: rtl;
}

Install

npm i gulp-split-css

DownloadsWeekly Downloads

1

Version

1.0.1

License

ISC

Unpacked Size

5.01 kB

Total Files

3

Last publish

Collaborators

  • avatar