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;
}