diff --git a/README.md b/README.md index aa238254..bd6c7def 100644 --- a/README.md +++ b/README.md @@ -87,6 +87,13 @@ Similar to how webpack's [sass-loader](https://github.com/webpack-contrib/sass-l ## Options +### extensions + +Type: `string[]`
+Default: `['.css', '.sss', '.pcss']` + +This plugin will process files ending with these extensions and the extensions supported by [custom loaders](#loaders). + ### plugins Type: `Array` diff --git a/src/index.js b/src/index.js index 6ed09540..6ee9929a 100644 --- a/src/index.js +++ b/src/index.js @@ -62,7 +62,8 @@ export default (options = {}) => { const loaders = new Loaders({ use, - loaders: options.loaders + loaders: options.loaders, + extensions: options.extensions }) const extracted = new Map() diff --git a/src/loaders.js b/src/loaders.js index 15fed865..c19d8eaa 100644 --- a/src/loaders.js +++ b/src/loaders.js @@ -1,9 +1,17 @@ +import path from 'path' import series from 'promise.series' import postcssLoader from './postcss-loader' import sassLoader from './sass-loader' import stylusLoader from './stylus-loader' import lessLoader from './less-loader' +const matchFile = (filepath, condition) => { + if (typeof condition === 'function') { + return condition(filepath) + } + return condition && condition.test(filepath) +} + export default class Loaders { constructor(options = {}) { this.use = options.use.map(rule => { @@ -17,6 +25,9 @@ export default class Loaders { }) this.loaders = [] + const extensions = options.extensions || ['.css', '.sss', '.pcss'] + postcssLoader.test = filepath => + extensions.some(ext => path.extname(filepath) === ext) this.registerLoader(postcssLoader) this.registerLoader(sassLoader) this.registerLoader(stylusLoader) @@ -42,7 +53,7 @@ export default class Loaders { isSupported(filepath) { return this.loaders.some(loader => { - return loader.test && loader.test.test(filepath) + return matchFile(filepath, loader.test) }) } @@ -56,7 +67,7 @@ export default class Loaders { scoped } return v => { - if (loader.alwaysProcess || loader.test.test(id)) { + if (loader.alwaysProcess || matchFile(id, loader.test)) { return loader.process.call(loaderContext, v) } // Otherwise directly return input value diff --git a/src/postcss-loader.js b/src/postcss-loader.js index b2c5960b..960b7d6c 100644 --- a/src/postcss-loader.js +++ b/src/postcss-loader.js @@ -58,7 +58,7 @@ function isModuleFile(file) { export default { name: 'postcss', alwaysProcess: true, - test: /\.(css|sss)$/, + // `test` option is dynamically set in ./loaders async process({ code, map }) { const config = this.options.config ? await loadConfig(this.id, this.options.config) : diff --git a/test/__snapshots__/index.test.js.snap b/test/__snapshots__/index.test.js.snap index 776c9631..c931bd17 100644 --- a/test/__snapshots__/index.test.js.snap +++ b/test/__snapshots__/index.test.js.snap @@ -115,6 +115,9 @@ styleInject(css$3); var css$4 = \\"#header {\\\\n color: #6c94be;\\\\n}\\\\n\\"; styleInject(css$4); +var css$5 = \\".pcss {\\\\n color: red;\\\\n}\\\\n\\"; +styleInject(css$5); + console.log(css, css$1); " `; @@ -176,10 +179,14 @@ body { color: #6c94be; } +.pcss { + color: red; +} + /*# sourceMappingURL=extracted.css.map */" `; -exports[`extract custom-path: css map 1`] = `"{\\"version\\":3,\\"sources\\":[\\"test/fixtures/dist/extract--custom-path/foo.css\\",\\"test/fixtures/dist/extract--custom-path/bar.css\\",\\"test/fixtures/dist/extract--custom-path/test/fixtures/simple/style.styl\\",\\"test/fixtures/dist/extract--custom-path/style.styl\\",\\"test/fixtures/dist/extract--custom-path/style.sass\\",\\"test/fixtures/dist/extract--custom-path/test/fixtures/simple/style.less\\",\\"test/fixtures/dist/extract--custom-path/style.less\\"],\\"names\\":[],\\"mappings\\":\\"AAAA;EACE,WAAW;CACZ;;ACFD;EACE,WAAW;CACZ;;ACFD;EACE,YAAA;EACA,iBAAA;CCCD;AACD,0DAA0D;ACJ1D;EACE,WAAW;EACX,uBAAuB,EAAE;;ACC3B;EACE,eAAA;CCFD\\",\\"file\\":\\"test/fixtures/dist/extract--custom-path/this/is/extracted.css\\",\\"sourcesContent\\":[\\"body {\\\\n color: red;\\\\n}\\\\n\\",\\".bar {\\\\n color: red;\\\\n}\\\\n\\",null,null,\\"#sidebar {\\\\n width: 30%;\\\\n background-color: #faa; }\\\\n\\",null,null]}"`; +exports[`extract custom-path: css map 1`] = `"{\\"version\\":3,\\"sources\\":[\\"test/fixtures/dist/extract--custom-path/foo.css\\",\\"test/fixtures/dist/extract--custom-path/bar.css\\",\\"test/fixtures/dist/extract--custom-path/test/fixtures/simple/style.styl\\",\\"test/fixtures/dist/extract--custom-path/style.styl\\",\\"test/fixtures/dist/extract--custom-path/style.sass\\",\\"test/fixtures/dist/extract--custom-path/test/fixtures/simple/style.less\\",\\"test/fixtures/dist/extract--custom-path/style.less\\",\\"test/fixtures/dist/extract--custom-path/style.pcss\\"],\\"names\\":[],\\"mappings\\":\\"AAAA;EACE,WAAW;CACZ;;ACFD;EACE,WAAW;CACZ;;ACFD;EACE,YAAA;EACA,iBAAA;CCCD;AACD,0DAA0D;ACJ1D;EACE,WAAW;EACX,uBAAuB,EAAE;;ACC3B;EACE,eAAA;CCFD;;ACFD;EACE,WAAW;CACZ\\",\\"file\\":\\"test/fixtures/dist/extract--custom-path/this/is/extracted.css\\",\\"sourcesContent\\":[\\"body {\\\\n color: red;\\\\n}\\\\n\\",\\".bar {\\\\n color: red;\\\\n}\\\\n\\",null,null,\\"#sidebar {\\\\n width: 30%;\\\\n background-color: #faa; }\\\\n\\",null,null,\\".pcss {\\\\n color: red;\\\\n}\\\\n\\"]}"`; exports[`extract custom-path: js code 1`] = ` "'use strict'; @@ -211,7 +218,11 @@ body { color: #6c94be; } -/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlc3QvZml4dHVyZXMvZGlzdC9leHRyYWN0LS1zb3VyY2VtYXAtaW5saW5lL2Zvby5jc3MiLCJ0ZXN0L2ZpeHR1cmVzL2Rpc3QvZXh0cmFjdC0tc291cmNlbWFwLWlubGluZS9iYXIuY3NzIiwidGVzdC9maXh0dXJlcy9kaXN0L2V4dHJhY3QtLXNvdXJjZW1hcC1pbmxpbmUvdGVzdC9maXh0dXJlcy9zaW1wbGUvc3R5bGUuc3R5bCIsInRlc3QvZml4dHVyZXMvZGlzdC9leHRyYWN0LS1zb3VyY2VtYXAtaW5saW5lL3N0eWxlLnN0eWwiLCJ0ZXN0L2ZpeHR1cmVzL2Rpc3QvZXh0cmFjdC0tc291cmNlbWFwLWlubGluZS90ZXN0L2ZpeHR1cmVzL3NpbXBsZS9zdHlsZS5zYXNzIiwidGVzdC9maXh0dXJlcy9kaXN0L2V4dHJhY3QtLXNvdXJjZW1hcC1pbmxpbmUvc3R5bGUuc2FzcyIsInRlc3QvZml4dHVyZXMvZGlzdC9leHRyYWN0LS1zb3VyY2VtYXAtaW5saW5lL3Rlc3QvZml4dHVyZXMvc2ltcGxlL3N0eWxlLmxlc3MiLCJ0ZXN0L2ZpeHR1cmVzL2Rpc3QvZXh0cmFjdC0tc291cmNlbWFwLWlubGluZS9zdHlsZS5sZXNzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UsV0FBVztDQUNaOztBQ0ZEO0VBQ0UsV0FBVztDQUNaOztBQ0ZEO0VBQ0UsWUFBQTtFQUNBLGlCQUFBO0NDQ0Q7QUFDRCwwREFBMEQ7QUNKMUQ7RUFDRSxXQUFVO0VBQ1YsdUJBQXNCLEVBQUk7O0FDRTVCLHVDQUF1QztBQ0R2QztFQUNFLGVBQUE7Q0NGRCIsImZpbGUiOiJ0ZXN0L2ZpeHR1cmVzL2Rpc3QvZXh0cmFjdC0tc291cmNlbWFwLWlubGluZS9idW5kbGUuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiYm9keSB7XG4gIGNvbG9yOiByZWQ7XG59XG4iLCIuYmFyIHtcbiAgY29sb3I6IHJlZDtcbn1cbiIsbnVsbCxudWxsLG51bGwsbnVsbCxudWxsLG51bGxdfQ==*/" +.pcss { + color: red; +} + +/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlc3QvZml4dHVyZXMvZGlzdC9leHRyYWN0LS1zb3VyY2VtYXAtaW5saW5lL2Zvby5jc3MiLCJ0ZXN0L2ZpeHR1cmVzL2Rpc3QvZXh0cmFjdC0tc291cmNlbWFwLWlubGluZS9iYXIuY3NzIiwidGVzdC9maXh0dXJlcy9kaXN0L2V4dHJhY3QtLXNvdXJjZW1hcC1pbmxpbmUvdGVzdC9maXh0dXJlcy9zaW1wbGUvc3R5bGUuc3R5bCIsInRlc3QvZml4dHVyZXMvZGlzdC9leHRyYWN0LS1zb3VyY2VtYXAtaW5saW5lL3N0eWxlLnN0eWwiLCJ0ZXN0L2ZpeHR1cmVzL2Rpc3QvZXh0cmFjdC0tc291cmNlbWFwLWlubGluZS90ZXN0L2ZpeHR1cmVzL3NpbXBsZS9zdHlsZS5zYXNzIiwidGVzdC9maXh0dXJlcy9kaXN0L2V4dHJhY3QtLXNvdXJjZW1hcC1pbmxpbmUvc3R5bGUuc2FzcyIsInRlc3QvZml4dHVyZXMvZGlzdC9leHRyYWN0LS1zb3VyY2VtYXAtaW5saW5lL3Rlc3QvZml4dHVyZXMvc2ltcGxlL3N0eWxlLmxlc3MiLCJ0ZXN0L2ZpeHR1cmVzL2Rpc3QvZXh0cmFjdC0tc291cmNlbWFwLWlubGluZS9zdHlsZS5sZXNzIiwidGVzdC9maXh0dXJlcy9kaXN0L2V4dHJhY3QtLXNvdXJjZW1hcC1pbmxpbmUvc3R5bGUucGNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLFdBQVc7Q0FDWjs7QUNGRDtFQUNFLFdBQVc7Q0FDWjs7QUNGRDtFQUNFLFlBQUE7RUFDQSxpQkFBQTtDQ0NEO0FBQ0QsMERBQTBEO0FDSjFEO0VBQ0UsV0FBVTtFQUNWLHVCQUFzQixFQUFJOztBQ0U1Qix1Q0FBdUM7QUNEdkM7RUFDRSxlQUFBO0NDRkQ7O0FDRkQ7RUFDRSxXQUFXO0NBQ1oiLCJmaWxlIjoidGVzdC9maXh0dXJlcy9kaXN0L2V4dHJhY3QtLXNvdXJjZW1hcC1pbmxpbmUvYnVuZGxlLmNzcyIsInNvdXJjZXNDb250ZW50IjpbImJvZHkge1xuICBjb2xvcjogcmVkO1xufVxuIiwiLmJhciB7XG4gIGNvbG9yOiByZWQ7XG59XG4iLG51bGwsbnVsbCxudWxsLG51bGwsbnVsbCxudWxsLCIucGNzcyB7XG4gIGNvbG9yOiByZWQ7XG59XG4iXX0=*/" `; exports[`extract sourcemap-inline: js code 1`] = ` @@ -243,10 +254,14 @@ body { color: #6c94be; } +.pcss { + color: red; +} + /*# sourceMappingURL=bundle.css.map */" `; -exports[`extract sourcemap-true: css map 1`] = `"{\\"version\\":3,\\"sources\\":[\\"test/fixtures/dist/extract--sourcemap-true/foo.css\\",\\"test/fixtures/dist/extract--sourcemap-true/bar.css\\",\\"test/fixtures/dist/extract--sourcemap-true/test/fixtures/simple/style.styl\\",\\"test/fixtures/dist/extract--sourcemap-true/style.styl\\",\\"test/fixtures/dist/extract--sourcemap-true/style.sass\\",\\"test/fixtures/dist/extract--sourcemap-true/test/fixtures/simple/style.less\\",\\"test/fixtures/dist/extract--sourcemap-true/style.less\\"],\\"names\\":[],\\"mappings\\":\\"AAAA;EACE,WAAW;CACZ;;ACFD;EACE,WAAW;CACZ;;ACFD;EACE,YAAA;EACA,iBAAA;CCCD;AACD,0DAA0D;ACJ1D;EACE,WAAW;EACX,uBAAuB,EAAE;;ACC3B;EACE,eAAA;CCFD\\",\\"file\\":\\"test/fixtures/dist/extract--sourcemap-true/bundle.css\\",\\"sourcesContent\\":[\\"body {\\\\n color: red;\\\\n}\\\\n\\",\\".bar {\\\\n color: red;\\\\n}\\\\n\\",null,null,\\"#sidebar {\\\\n width: 30%;\\\\n background-color: #faa; }\\\\n\\",null,null]}"`; +exports[`extract sourcemap-true: css map 1`] = `"{\\"version\\":3,\\"sources\\":[\\"test/fixtures/dist/extract--sourcemap-true/foo.css\\",\\"test/fixtures/dist/extract--sourcemap-true/bar.css\\",\\"test/fixtures/dist/extract--sourcemap-true/test/fixtures/simple/style.styl\\",\\"test/fixtures/dist/extract--sourcemap-true/style.styl\\",\\"test/fixtures/dist/extract--sourcemap-true/style.sass\\",\\"test/fixtures/dist/extract--sourcemap-true/test/fixtures/simple/style.less\\",\\"test/fixtures/dist/extract--sourcemap-true/style.less\\",\\"test/fixtures/dist/extract--sourcemap-true/style.pcss\\"],\\"names\\":[],\\"mappings\\":\\"AAAA;EACE,WAAW;CACZ;;ACFD;EACE,WAAW;CACZ;;ACFD;EACE,YAAA;EACA,iBAAA;CCCD;AACD,0DAA0D;ACJ1D;EACE,WAAW;EACX,uBAAuB,EAAE;;ACC3B;EACE,eAAA;CCFD;;ACFD;EACE,WAAW;CACZ\\",\\"file\\":\\"test/fixtures/dist/extract--sourcemap-true/bundle.css\\",\\"sourcesContent\\":[\\"body {\\\\n color: red;\\\\n}\\\\n\\",\\".bar {\\\\n color: red;\\\\n}\\\\n\\",null,null,\\"#sidebar {\\\\n width: 30%;\\\\n background-color: #faa; }\\\\n\\",null,null,\\".pcss {\\\\n color: red;\\\\n}\\\\n\\"]}"`; exports[`extract sourcemap-true: js code 1`] = ` "'use strict'; @@ -276,6 +291,10 @@ body { #header { color: #6c94be; } + +.pcss { + color: red; +} " `; @@ -342,6 +361,9 @@ styleInject(css$3,{\\"insertAt\\":\\"top\\"}); var css$4 = \\"#header {\\\\n color: #6c94be;\\\\n}\\\\n\\"; styleInject(css$4,{\\"insertAt\\":\\"top\\"}); +var css$5 = \\".pcss {\\\\n color: red;\\\\n}\\\\n\\"; +styleInject(css$5,{\\"insertAt\\":\\"top\\"}); + console.log(css, css$1); " `; @@ -351,7 +373,8 @@ exports[`minimize extract: css code 1`] = ` .bar{color:red} body{color:red;background:red} #sidebar{width:30%;background-color:#faa} -#header{color:#6c94be}" +#header{color:#6c94be} +.pcss{color:red}" `; exports[`minimize extract: js code 1`] = ` @@ -406,6 +429,9 @@ styleInject(css$3); var css$4 = \\"#header{color:#6c94be}\\"; styleInject(css$4); +var css$5 = \\".pcss{color:red}\\"; +styleInject(css$5); + console.log(css, css$1); " `; @@ -801,6 +827,9 @@ styleInject(css$3); var css$4 = \\"#header {\\\\n color: #6c94be;\\\\n}\\\\n\\\\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlc3QvZml4dHVyZXMvc2ltcGxlL3N0eWxlLmxlc3MiLCJzdHlsZS5sZXNzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUdBO0VBQ0UsZUFBQTtDQ0ZEIiwiZmlsZSI6InN0eWxlLmxlc3MifQ== */\\"; styleInject(css$4); +var css$5 = \\".pcss {\\\\n color: red;\\\\n}\\\\n\\\\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlLnBjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxXQUFXO0NBQ1oiLCJmaWxlIjoic3R5bGUucGNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5wY3NzIHtcbiAgY29sb3I6IHJlZDtcbn1cbiJdfQ== */\\"; +styleInject(css$5); + console.log(css, css$1); " `; @@ -850,6 +879,9 @@ styleInject(css$3); var css$4 = \\"#header {\\\\n color: #6c94be;\\\\n}\\\\n\\\\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlc3QvZml4dHVyZXMvc2ltcGxlL3N0eWxlLmxlc3MiLCJzdHlsZS5sZXNzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUdBO0VBQ0UsZUFBQTtDQ0ZEIiwiZmlsZSI6InN0eWxlLmxlc3MifQ== */\\"; styleInject(css$4); +var css$5 = \\".pcss {\\\\n color: red;\\\\n}\\\\n\\\\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlLnBjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxXQUFXO0NBQ1oiLCJmaWxlIjoic3R5bGUucGNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5wY3NzIHtcbiAgY29sb3I6IHJlZDtcbn1cbiJdfQ== */\\"; +styleInject(css$5); + console.log(css, css$1); " `; diff --git a/test/fixtures/simple/index.js b/test/fixtures/simple/index.js index 4527d4f2..815cc6fa 100644 --- a/test/fixtures/simple/index.js +++ b/test/fixtures/simple/index.js @@ -3,5 +3,6 @@ import bar from './bar.css' import './style.styl' import './style.sass' import './style.less' +import './style.pcss' console.log(foo, bar) diff --git a/test/fixtures/simple/style.pcss b/test/fixtures/simple/style.pcss new file mode 100644 index 00000000..90caa308 --- /dev/null +++ b/test/fixtures/simple/style.pcss @@ -0,0 +1,3 @@ +.pcss { + color: red; +}