opensourcemirror
/
webpack
mirror of https://github.com/webpack/webpack.git
1
0
Fork 0
Code Issues Releases Wiki Activity

feat(css): css module stuff

This commit is contained in:
Sean Larkin 2017-12-21 15:32:04 -08:00
parent b5d3788bda
commit 120f39f004
4 changed files with 43 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
examples/css-bundle/README.md
View File

@ -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
```

4
lib/CssModulesPlugin.js
View File

@ -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();
});

33
lib/CssParser.js
View File

@ -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
}
}
}

3
schemas/WebpackOptions.json
View File

@ -891,7 +891,8 @@
"javascript/dynamic",
"javascript/esm",
"json",
"webassembly/experimental"
"webassembly/experimental",
"css/experimental"
]
},
"resource": {