feat(css): css module stuff
This commit is contained in:
parent
b5d3788bda
commit
120f39f004
|
@ -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
|
||||
```
|
|
@ -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();
|
||||
});
|
||||
|
|
|
@ -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
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -891,7 +891,8 @@
|
|||
"javascript/dynamic",
|
||||
"javascript/esm",
|
||||
"json",
|
||||
"webassembly/experimental"
|
||||
"webassembly/experimental",
|
||||
"css/experimental"
|
||||
]
|
||||
},
|
||||
"resource": {
|
||||
|
|
Loading…
Reference in New Issue