Created
June 26, 2014 14:44
-
-
Save robhrt7/bd857f570adaf2872c37 to your computer and use it in GitHub Desktop.
Custom Grunt script for couting CSS imports count, and seperating files before hitting IE limit of 31 imports
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
Processing CSS @imports file, and counting how much @imports it includes. | |
If import count reaches the limit of 31 files (in IE8-9) and more, script will create additional CSS files: | |
input.css: | |
@import 1; | |
... | |
@import 36; | |
output.css: | |
@import 1; | |
... | |
@import 30; | |
@import output2.css; | |
output2.css: | |
@import 31; | |
... | |
@import 36; | |
Script is based on PostCSS https://github.com/ai/postcss and cuts down other CSS rules during the processing. | |
Maybe this script will be moved to seperate Grunt plugin in future. | |
*/ | |
var path = require('path'), | |
postcss = require('postcss'); | |
var generateImportFiles = function() { | |
var cssBundlesDir = grunt.config.get('cssBundlesDir'), | |
outputDir = grunt.config.get('outputDir'); | |
grunt.file.recurse(cssBundlesDir, function (abspath, rootdir, subdir, filename) { | |
var subDirectory = subdir ? subdir + '/' : ''; | |
var processFile = postcss(function (css) { | |
var importsCount = 0, | |
importsLimit = 31, | |
filesCount = 1, | |
generatedCSSFiles = { | |
file1: [] | |
}; | |
css.eachAtRule(function (atRule) { | |
if (atRule.name = 'import') { | |
importsCount++ | |
} | |
}); | |
// Counting how many additional files we need | |
var addFilesCount = Math.floor(importsCount / importsLimit), | |
firstFileImportLimit = importsLimit - addFilesCount, | |
iteration = 0; | |
// Creating object with seperated CSS files | |
css.eachAtRule(function (atRule) { | |
if (atRule.name = 'import') { | |
if (filesCount === 1 ? iteration < firstFileImportLimit : iteration < importsLimit) { | |
generatedCSSFiles['file' + filesCount].push(atRule); | |
} else { | |
iteration = 0; | |
filesCount++; | |
generatedCSSFiles['file' + filesCount] = []; | |
generatedCSSFiles['file' + filesCount].push(atRule); | |
} | |
} | |
iteration++; | |
}); | |
// Creating and writing processed CSS | |
for (var i = 0; i < filesCount; i++) { | |
var newCSS = postcss.root(), | |
fileNum = i + 1, | |
resultWriteFileName= i === 0 ? filename : filename.split('.css')[0] + fileNum + '.css'; | |
generatedCSSFiles['file'+fileNum].map(function (item) { | |
newCSS.append(item); | |
}); | |
// First file | |
if (i === 0) { | |
// Adding links to created files with @imports | |
for (var ii = 0; ii < addFilesCount; ii++) { | |
var nextFileNum = ii + 2; | |
newCSS.append(postcss.atRule({ | |
before: '\n', | |
semicolon: true, | |
name: 'import', | |
params: '"'+filename.split('.css')[0] + nextFileNum + '.css'+'"' | |
})); | |
} | |
} | |
grunt.file.write(path.normalize(outputDir + '/'+ subDirectory + '/' + resultWriteFileName), newCSS.toResult()); | |
} | |
}); | |
if (path.extname(filename) === '.css') { | |
processFile.process(grunt.file.read(abspath)); | |
} | |
}); | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Useful snippet for getting Grunt config from this kind of functions https://gist.github.com/operatino/d8ec45b39c27ade30757