diff --git a/README.md b/README.md index 7aa7877..72b09cb 100644 --- a/README.md +++ b/README.md @@ -12,14 +12,14 @@ npm install postcss-partial-process ```js postcss([ - require('postcss-partial-process')({ - startComment: 'postcss-partial-process start', // default - endComment: 'postcss-partial-process end', // default - removeComments: 'auto', // default, means the comments are removed unless they are important (e.g. /*! like this */); also accepts `true` or `false` - plugins = [ - require('some postcss plugin'), // this plugin will only run between the comments "postcss-partial-process start" and "postcss-partial-process end" - ], - }), + require('postcss-partial-process')({ + startComment: 'postcss-partial-process start', // default + endComment: 'postcss-partial-process end', // default + removeComments: 'auto', // default, means the comments are removed unless they are important (e.g. /*! like this */); also accepts `true` or `false` + plugins = [ + require('some postcss plugin'), // this plugin will only run between the comments "postcss-partial-process start" and "postcss-partial-process end" + ], + }), ]) ``` diff --git a/index.js b/index.js index be4d692..4edf431 100644 --- a/index.js +++ b/index.js @@ -1,69 +1,69 @@ const postcss = require('postcss'); module.exports = postcss.plugin('postcss-partial-process', ({ - startComment = 'postcss-partial-process start', - endComment = 'postcss-partial-process end', - removeComments = 'auto', - plugins = [] + startComment = 'postcss-partial-process start', + endComment = 'postcss-partial-process end', + removeComments = 'auto', + plugins = [] } = {}) => { - return root => { - let processing = false; - let partialRoot = null; - const promises = []; + return root => { + let processing = false; + let partialRoot = null; + const promises = []; - const end = (callback) => { - promises.push( - postcss(plugins).process(partialRoot, { - from: undefined - }).then(callback) - ); - }; - - root.each(node => { - let starting = false; - let ending = false; - let removeComment = false; - - if (node.type === 'comment') { - let comment = node.toString(); - let matches = comment.match(/\/\*!?\s*(.*?)\s*\*\//, ''); - matches = matches || []; - if (matches.length > 1) { - starting = !processing && matches[1] === startComment; - ending = processing && matches[1] === endComment; - removeComment = removeComments === true || (removeComments === 'auto' && !comment.startsWith('/*!')); - } - } - - if (ending) { - end(result => { - node.before(result.root); - if (removeComment) { - node.remove(); - } - }); - processing = false; - } - - if (processing) { - partialRoot.append(node); - } - - if (starting) { - partialRoot = postcss.root(); - if (removeComment) { - node.remove(); - } - processing = true; - } - }); - - if (processing) { - end(result => { - root.append(result.root); - }); - } - - return Promise.all(promises); + const end = (callback) => { + promises.push( + postcss(plugins).process(partialRoot, { + from: undefined + }).then(callback) + ); }; + + root.each(node => { + let starting = false; + let ending = false; + let removeComment = false; + + if (node.type === 'comment') { + let comment = node.toString(); + let matches = comment.match(/\/\*!?\s*(.*?)\s*\*\//, ''); + matches = matches || []; + if (matches.length > 1) { + starting = !processing && matches[1] === startComment; + ending = processing && matches[1] === endComment; + removeComment = removeComments === true || (removeComments === 'auto' && !comment.startsWith('/*!')); + } + } + + if (ending) { + end(result => { + node.before(result.root); + if (removeComment) { + node.remove(); + } + }); + processing = false; + } + + if (processing) { + partialRoot.append(node); + } + + if (starting) { + partialRoot = postcss.root(); + if (removeComment) { + node.remove(); + } + processing = true; + } + }); + + if (processing) { + end(result => { + root.append(result.root); + }); + } + + return Promise.all(promises); + }; }); diff --git a/test.js b/test.js index 52119fe..19a6fc3 100644 --- a/test.js +++ b/test.js @@ -3,120 +3,120 @@ const partialProcess = require('./'); const prependSelector = require('postcss-prepend-selector'); function run(input, output, opts) { - return postcss([ - partialProcess(opts), - ]) - .process(input, { - from: undefined, - }) - .then(result => { - expect(result.css).toEqual(output); - expect(result.warnings().length).toBe(0); - }); + return postcss([ + partialProcess(opts), + ]) + .process(input, { + from: undefined, + }) + .then(result => { + expect(result.css).toEqual(output); + expect(result.warnings().length).toBe(0); + }); } test('it compiles', () => { - return run('a {}', 'a {}', {}); + return run('a {}', 'a {}', {}); }); test('rules inside the comments are processed', () => { - return run(` - /* postcss-partial-process start */ - a {} - b {} - /* postcss-partial-process end */ - `, ` - #a a {} - #a b {} - `, { - plugins: [ - prependSelector({ selector: '#a ' }), - ], - }); + return run(` + /* postcss-partial-process start */ + a {} + b {} + /* postcss-partial-process end */ + `, ` + #a a {} + #a b {} + `, { + plugins: [ + prependSelector({ selector: '#a ' }), + ], + }); }); test('rules outside the comments are not processed', () => { - return run(` - body {} - /* postcss-partial-process start */ - a {} - /* postcss-partial-process end */ - b {} - a {} - `, ` - body {} - #a a {} - b {} - a {} - `, { - plugins: [ - prependSelector({ selector: '#a ' }), - ], - }); + return run(` + body {} + /* postcss-partial-process start */ + a {} + /* postcss-partial-process end */ + b {} + a {} + `, ` + body {} + #a a {} + b {} + a {} + `, { + plugins: [ + prependSelector({ selector: '#a ' }), + ], + }); }); test('start/end comments can be customized', () => { - return run(` - /* yo start */ - .test { hello: world; } - /* yo stop */ - b {} - `, ` - #a .test { hello: world; } - b {} - `, { - startComment: 'yo start', - endComment: 'yo stop', - plugins: [ - prependSelector({ selector: '#a ' }), - ], - }); + return run(` + /* yo start */ + .test { hello: world; } + /* yo stop */ + b {} + `, ` + #a .test { hello: world; } + b {} + `, { + startComment: 'yo start', + endComment: 'yo stop', + plugins: [ + prependSelector({ selector: '#a ' }), + ], + }); }); test('comments are not removed with removeComments: false', () => { - return run(` - /* postcss-partial-process start */ - a {} - /* postcss-partial-process end */ - `, ` - /* postcss-partial-process start */ - #a a {} - /* postcss-partial-process end */ - `, { - removeComments: false, - plugins: [ - prependSelector({ selector: '#a ' }), - ], - }); + return run(` + /* postcss-partial-process start */ + a {} + /* postcss-partial-process end */ + `, ` + /* postcss-partial-process start */ + #a a {} + /* postcss-partial-process end */ + `, { + removeComments: false, + plugins: [ + prependSelector({ selector: '#a ' }), + ], + }); }); test('important comments are not removed by default', () => { - return run(` - /*! postcss-partial-process start */ - a {} - /*! postcss-partial-process end */ - `, ` - /*! postcss-partial-process start */ - #a a {} - /*! postcss-partial-process end */ - `, { - plugins: [ - prependSelector({ selector: '#a ' }), - ], - }); + return run(` + /*! postcss-partial-process start */ + a {} + /*! postcss-partial-process end */ + `, ` + /*! postcss-partial-process start */ + #a a {} + /*! postcss-partial-process end */ + `, { + plugins: [ + prependSelector({ selector: '#a ' }), + ], + }); }); test('important comments are removed with removeComments: true', () => { - return run(` - /*! postcss-partial-process start */ - a {} - /*! postcss-partial-process end */ - `, ` - #a a {} - `, { - removeComments: true, - plugins: [ - prependSelector({ selector: '#a ' }), - ], - }); + return run(` + /*! postcss-partial-process start */ + a {} + /*! postcss-partial-process end */ + `, ` + #a a {} + `, { + removeComments: true, + plugins: [ + prependSelector({ selector: '#a ' }), + ], + }); });