diff --git a/.gitignore b/.gitignore index 153216e..fa52758 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ +.idea .DS_Store node_modules/ npm-debug.log diff --git a/README.md b/README.md index 82e51a6..48069c4 100644 --- a/README.md +++ b/README.md @@ -184,6 +184,7 @@ The plugin takes a single object as its only parameter. The following properties | Arg | Type | Description | Default | | ------------ | --------- | ------------------------------------------- | ------------------------- | | `outputPath` | `string` | Path to which critical CSS should be output | Current working directory | +| `outputDest` | `string` | Default critical CSS file name | `"critical.css"` | | `preserve` | `boolean` | Whether or not to remove selectors from primary CSS document once they've been marked as critical. This should prevent duplication of selectors across critical and non-critical CSS. | `true` | | `minify` | `boolean` | Minify output CSS? | `true` | diff --git a/lib/getCriticalDestination.js b/lib/getCriticalDestination.js index 01159c6..b311634 100644 --- a/lib/getCriticalDestination.js +++ b/lib/getCriticalDestination.js @@ -10,10 +10,10 @@ exports.getCriticalDestination = getCriticalDestination; * Identify critical CSS destinations. * * @param {object} rule PostCSS rule. + * @param {string} Default output CSS file name. * @return {string} String corresponding to output destination. */ -function getCriticalDestination(rule) { - var dest = 'critical.css'; +function getCriticalDestination(rule, dest) { rule.walkDecls('critical-filename', function (decl) { dest = decl.value.replace(/['"]*/g, ''); decl.remove(); diff --git a/lib/getCriticalRules.js b/lib/getCriticalRules.js index 95d5058..f837f03 100644 --- a/lib/getCriticalRules.js +++ b/lib/getCriticalRules.js @@ -15,12 +15,14 @@ var _getCriticalDestination = require('./getCriticalDestination'); * Identify critical CSS selectors * * @param {object} PostCSS CSS object. + * @param {boolean} Whether or not to remove selectors from primary CSS document. + * @param {string} Default output CSS file name. * @return {object} Object containing critical rules, organized by output destination */ -function getCriticalRules(css, shouldPreserve) { +function getCriticalRules(css, shouldPreserve, defaultDest) { var critical = (0, _atRule.getCriticalFromAtRule)({ css: css }); css.walkDecls('critical-selector', function (decl) { - var dest = (0, _getCriticalDestination.getCriticalDestination)(decl.parent); + var dest = (0, _getCriticalDestination.getCriticalDestination)(decl.parent, defaultDest); var container = decl.parent.parent.type === 'atrule' ? decl.parent.parent : decl.parent; var childRules = decl.value === 'scope' ? (0, _getChildRules.getChildRules)(css, decl.parent, shouldPreserve) : []; if (typeof critical[dest] === 'undefined') { diff --git a/lib/index.js b/lib/index.js index ed5af24..ff81dbe 100644 --- a/lib/index.js +++ b/lib/index.js @@ -35,12 +35,13 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de function buildCritical(options) { var args = _extends({ outputPath: process.cwd(), + outputDest: 'critical.css', preserve: true, minify: true, dryRun: false }, options); return function (css) { - var criticalOutput = (0, _getCriticalRules.getCriticalRules)(css, args.preserve); + var criticalOutput = (0, _getCriticalRules.getCriticalRules)(css, args.preserve, args.outputDest); return Object.keys(criticalOutput).reduce(function (init, cur) { var criticalCSS = _postcss2.default.root(); criticalCSS.append(criticalOutput[cur]); diff --git a/src/getCriticalDestination.js b/src/getCriticalDestination.js index 2c873ce..504894b 100644 --- a/src/getCriticalDestination.js +++ b/src/getCriticalDestination.js @@ -4,10 +4,10 @@ * Identify critical CSS destinations. * * @param {object} rule PostCSS rule. + * @param {string} Default output CSS file name. * @return {string} String corresponding to output destination. */ -export function getCriticalDestination (rule: Object): string { - let dest: string = 'critical.css' +export function getCriticalDestination (rule: Object, dest: String): string { rule.walkDecls('critical-filename', (decl: Object) => { dest = decl.value.replace(/['"]*/g, '') decl.remove() diff --git a/src/getCriticalRules.js b/src/getCriticalRules.js index 178d12f..2711eaf 100644 --- a/src/getCriticalRules.js +++ b/src/getCriticalRules.js @@ -8,12 +8,14 @@ import { getCriticalDestination } from './getCriticalDestination' * Identify critical CSS selectors * * @param {object} PostCSS CSS object. + * @param {boolean} Whether or not to remove selectors from primary CSS document. + * @param {string} Default output CSS file name. * @return {object} Object containing critical rules, organized by output destination */ -export function getCriticalRules (css: Object, shouldPreserve: boolean): Object { +export function getCriticalRules (css: Object, shouldPreserve: boolean, defaultDest: String): Object { const critical = getCriticalFromAtRule({ css }) css.walkDecls('critical-selector', (decl: Object) => { - const dest = getCriticalDestination(decl.parent) + const dest = getCriticalDestination(decl.parent, defaultDest) const container = decl.parent.parent.type === 'atrule' ? decl.parent.parent : decl.parent diff --git a/src/index.js b/src/index.js index b5c18cb..edf4a03 100644 --- a/src/index.js +++ b/src/index.js @@ -23,13 +23,14 @@ type ArgsType = { function buildCritical (options: ArgsType): Function { const args = { outputPath: process.cwd(), + outputDest: 'critical.css', preserve: true, minify: true, dryRun: false, ...options } return (css: Object): Object => { - let criticalOutput = getCriticalRules(css, args.preserve) + let criticalOutput = getCriticalRules(css, args.preserve, args.outputDest) return Object.keys(criticalOutput).reduce((init: Object, cur: string): Object => { const criticalCSS = postcss.root() criticalCSS.append(criticalOutput[cur])