diff --git a/examples/css-bundle/README.md b/examples/css-bundle/README.md index 7fd9c87f5..a40fd494b 100644 --- a/examples/css-bundle/README.md +++ b/examples/css-bundle/README.md @@ -162,16 +162,16 @@ body { ``` Hash: 0a1b2c3d4e5f6a7b8c9d -Version: webpack next +Version: webpack 4.0.0-alpha.1 Asset Size Chunks Chunk Names ce21cbdd9b894e6af794813eb3fdaf60.png 119 bytes [emitted] output.js 2.97 KiB 0 [emitted] main - style.css 69 bytes 0 [emitted] main + style.css 67 bytes 0 [emitted] main Entrypoint main = output.js style.css chunk {0} output.js, style.css (main) 64 bytes [entry] [rendered] > main [0] ./example.js [0] ./example.js 23 bytes {0} [built] - single entry .\example.js main + single entry ./example.js main [1] ./style.css 41 bytes {0} [built] cjs require ./style.css [0] ./example.js 1:0-22 Child extract-text-webpack-plugin ../../node_modules/extract-text-webpack-plugin/dist ../../node_modules/css-loader/index.js!style.css: @@ -180,10 +180,10 @@ Child extract-text-webpack-plugin ../../node_modules/extract-text-webpack-plugin Entrypoint undefined = extract-text-webpack-plugin-output-filename chunk {0} extract-text-webpack-plugin-output-filename 2.51 KiB [entry] [rendered] > [0] (webpack)/node_modules/css-loader!./style.css - [0] (webpack)/node_modules/css-loader!./style.css 231 bytes {0} [built] - single entry !!(webpack)\node_modules\css-loader\index.js!.\style.css + [0] (webpack)/node_modules/css-loader!./style.css 227 bytes {0} [built] + single entry !!(webpack)/node_modules/css-loader/index.js!./style.css [2] ./image.png 82 bytes {0} [built] - cjs require ./image.png [0] (webpack)/node_modules/css-loader!./style.css 6:58-80 + cjs require ./image.png [0] (webpack)/node_modules/css-loader!./style.css 6:56-78 + 1 hidden module ``` @@ -191,16 +191,16 @@ Child extract-text-webpack-plugin ../../node_modules/extract-text-webpack-plugin ``` Hash: 0a1b2c3d4e5f6a7b8c9d -Version: webpack next +Version: webpack 4.0.0-alpha.1 Asset Size Chunks Chunk Names ce21cbdd9b894e6af794813eb3fdaf60.png 119 bytes [emitted] output.js 570 bytes 0 [emitted] main - style.css 69 bytes 0 [emitted] main + style.css 67 bytes 0 [emitted] main Entrypoint main = output.js style.css chunk {0} output.js, style.css (main) 64 bytes [entry] [rendered] > main [0] ./example.js [0] ./example.js 23 bytes {0} [built] - single entry .\example.js main + single entry ./example.js main [1] ./style.css 41 bytes {0} [built] cjs require ./style.css [0] ./example.js 1:0-22 Child extract-text-webpack-plugin ../../node_modules/extract-text-webpack-plugin/dist ../../node_modules/css-loader/index.js!style.css: @@ -209,9 +209,9 @@ Child extract-text-webpack-plugin ../../node_modules/extract-text-webpack-plugin Entrypoint undefined = extract-text-webpack-plugin-output-filename chunk {0} extract-text-webpack-plugin-output-filename 2.51 KiB [entry] [rendered] > [0] (webpack)/node_modules/css-loader!./style.css - [0] (webpack)/node_modules/css-loader!./style.css 231 bytes {0} [built] - single entry !!(webpack)\node_modules\css-loader\index.js!.\style.css + [0] (webpack)/node_modules/css-loader!./style.css 227 bytes {0} [built] + single entry !!(webpack)/node_modules/css-loader/index.js!./style.css [2] ./image.png 82 bytes {0} [built] - cjs require ./image.png [0] (webpack)/node_modules/css-loader!./style.css 6:58-80 + cjs require ./image.png [0] (webpack)/node_modules/css-loader!./style.css 6:56-78 + 1 hidden module ``` \ No newline at end of file diff --git a/lib/CssModulesPlugin.js b/lib/CssModulesPlugin.js index bf1abfc2c..a6181d003 100644 --- a/lib/CssModulesPlugin.js +++ b/lib/CssModulesPlugin.js @@ -2,7 +2,9 @@ const CssParser = require("./CssParser"); class CssModulesPlugin { apply(compiler) { - compiler.hooks.compilation.tap("CssModulesPlugin", (compilation, { normalModuleFactory }) => { + compiler.hooks.compilation.tap("CssModulesPlugin", (compilation, { + normalModuleFactory + }) => { normalModuleFactory.hooks.createParser.for("css/experimental").tap("CssModulesPlugin", () => { return new CssParser(); }); diff --git a/lib/CssParser.js b/lib/CssParser.js index 1634f6db8..653eba7f3 100644 --- a/lib/CssParser.js +++ b/lib/CssParser.js @@ -1,20 +1,39 @@ -const Tapable = require("tapable").Tapable; -const { Parser } = require("postcss"); +const { SyncBailHook, Tapable } = require("tapable"); +const postcss = require("postcss"); + + class CssParser extends Tapable { constructor(options) { super(); - this.hooks = {}; + this.hooks = { + cssProgram: new SyncBailHook(["ast"]) + }; this.options = options; } - parse(source, state, callback) { + parse(source, initialState, callback) { // TODO parse Css AST, identify/extract dependencies // TODO determine sigil for lazy-loading? @import? - // TODO - const ast = Parser.parse(source); - console.log(ast); + /** + * Grab AST + * Throw if doesn't exist + * Track oldScope and oldState + * (assign from this.scope/state) + * Stores comments (do we need this?) + * + * program.call(ast, comments) + * walkAST, trig events + * + */ + + const ast = postcss.parse(source, {/*postcss plugin/options*/}); + if(this.hooks.cssProgram.call(ast) === undefined) { + // what do I really do here? JS Parser prewalks + // what do I really do here? walkStatements + } + } } diff --git a/schemas/WebpackOptions.json b/schemas/WebpackOptions.json index e5b3891d1..a0c1e00b3 100644 --- a/schemas/WebpackOptions.json +++ b/schemas/WebpackOptions.json @@ -891,7 +891,8 @@ "javascript/dynamic", "javascript/esm", "json", - "webassembly/experimental" + "webassembly/experimental", + "css/experimental" ] }, "resource": {