Skip to content

Commit 120f39f

Browse files
TheLarkInnTheLarkInn
committed
feat(css): css module stuff
1 parent b5d3788 commit 120f39f

File tree

4 files changed

+43
-21
lines changed

4 files changed

+43
-21
lines changed

‎examples/css-bundle/README.md‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -162,16 +162,16 @@ body {
162162

163163
```
164164
Hash: 0a1b2c3d4e5f6a7b8c9d
165-
Version: webpack next
165+
Version: webpack 4.0.0-alpha.1
166166
Asset Size Chunks Chunk Names
167167
ce21cbdd9b894e6af794813eb3fdaf60.png 119 bytes [emitted]
168168
output.js 2.97 KiB 0 [emitted] main
169-
style.css 69 bytes 0 [emitted] main
169+
style.css 67 bytes 0 [emitted] main
170170
Entrypoint main = output.js style.css
171171
chunk {0} output.js, style.css (main) 64 bytes [entry] [rendered]
172172
> main [0] ./example.js
173173
[0] ./example.js 23 bytes {0} [built]
174-
single entry .\example.js main
174+
single entry ./example.js main
175175
[1] ./style.css 41 bytes {0} [built]
176176
cjs require ./style.css [0] ./example.js 1:0-22
177177
Child extract-text-webpack-plugin ../../node_modules/extract-text-webpack-plugin/dist ../../node_modules/css-loader/index.js!style.css:
@@ -180,27 +180,27 @@ Child extract-text-webpack-plugin ../../node_modules/extract-text-webpack-plugin
180180
Entrypoint undefined = extract-text-webpack-plugin-output-filename
181181
chunk {0} extract-text-webpack-plugin-output-filename 2.51 KiB [entry] [rendered]
182182
> [0] (webpack)/node_modules/css-loader!./style.css
183-
[0] (webpack)/node_modules/css-loader!./style.css 231 bytes {0} [built]
184-
single entry !!(webpack)\node_modules\css-loader\index.js!.\style.css
183+
[0] (webpack)/node_modules/css-loader!./style.css 227 bytes {0} [built]
184+
single entry !!(webpack)/node_modules/css-loader/index.js!./style.css
185185
[2] ./image.png 82 bytes {0} [built]
186-
cjs require ./image.png [0] (webpack)/node_modules/css-loader!./style.css 6:58-80
186+
cjs require ./image.png [0] (webpack)/node_modules/css-loader!./style.css 6:56-78
187187
+ 1 hidden module
188188
```
189189

190190
## Production mode
191191

192192
```
193193
Hash: 0a1b2c3d4e5f6a7b8c9d
194-
Version: webpack next
194+
Version: webpack 4.0.0-alpha.1
195195
Asset Size Chunks Chunk Names
196196
ce21cbdd9b894e6af794813eb3fdaf60.png 119 bytes [emitted]
197197
output.js 570 bytes 0 [emitted] main
198-
style.css 69 bytes 0 [emitted] main
198+
style.css 67 bytes 0 [emitted] main
199199
Entrypoint main = output.js style.css
200200
chunk {0} output.js, style.css (main) 64 bytes [entry] [rendered]
201201
> main [0] ./example.js
202202
[0] ./example.js 23 bytes {0} [built]
203-
single entry .\example.js main
203+
single entry ./example.js main
204204
[1] ./style.css 41 bytes {0} [built]
205205
cjs require ./style.css [0] ./example.js 1:0-22
206206
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
209209
Entrypoint undefined = extract-text-webpack-plugin-output-filename
210210
chunk {0} extract-text-webpack-plugin-output-filename 2.51 KiB [entry] [rendered]
211211
> [0] (webpack)/node_modules/css-loader!./style.css
212-
[0] (webpack)/node_modules/css-loader!./style.css 231 bytes {0} [built]
213-
single entry !!(webpack)\node_modules\css-loader\index.js!.\style.css
212+
[0] (webpack)/node_modules/css-loader!./style.css 227 bytes {0} [built]
213+
single entry !!(webpack)/node_modules/css-loader/index.js!./style.css
214214
[2] ./image.png 82 bytes {0} [built]
215-
cjs require ./image.png [0] (webpack)/node_modules/css-loader!./style.css 6:58-80
215+
cjs require ./image.png [0] (webpack)/node_modules/css-loader!./style.css 6:56-78
216216
+ 1 hidden module
217217
```

‎lib/CssModulesPlugin.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@ const CssParser = require("./CssParser");
22

33
class CssModulesPlugin {
44
apply(compiler) {
5-
compiler.hooks.compilation.tap("CssModulesPlugin", (compilation, { normalModuleFactory }) => {
5+
compiler.hooks.compilation.tap("CssModulesPlugin", (compilation, {
6+
normalModuleFactory
7+
}) => {
68
normalModuleFactory.hooks.createParser.for("css/experimental").tap("CssModulesPlugin", () => {
79
return new CssParser();
810
});

‎lib/CssParser.js‎

Lines changed: 26 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,39 @@
1-
const Tapable = require("tapable").Tapable;
2-
const { Parser } = require("postcss");
1+
const { SyncBailHook, Tapable } = require("tapable");
2+
const postcss = require("postcss");
3+
4+
35

46
class CssParser extends Tapable {
57
constructor(options) {
68
super();
7-
this.hooks = {};
9+
this.hooks = {
10+
cssProgram: new SyncBailHook(["ast"])
11+
};
812
this.options = options;
913
}
1014

11-
parse(source, state, callback) {
15+
parse(source, initialState, callback) {
1216
// TODO parse Css AST, identify/extract dependencies
1317
// TODO determine sigil for lazy-loading? @import?
14-
// TODO
1518

16-
const ast = Parser.parse(source);
17-
console.log(ast);
19+
/**
20+
* Grab AST
21+
* Throw if doesn't exist
22+
* Track oldScope and oldState
23+
* (assign from this.scope/state)
24+
* Stores comments (do we need this?)
25+
*
26+
* program.call(ast, comments)
27+
* walkAST, trig events
28+
*
29+
*/
30+
31+
const ast = postcss.parse(source, {/*postcss plugin/options*/});
32+
if(this.hooks.cssProgram.call(ast) === undefined) {
33+
// what do I really do here? JS Parser prewalks
34+
// what do I really do here? walkStatements
35+
}
36+
1837
}
1938
}
2039

‎schemas/WebpackOptions.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -891,7 +891,8 @@
891891
"javascript/dynamic",
892892
"javascript/esm",
893893
"json",
894-
"webassembly/experimental"
894+
"webassembly/experimental",
895+
"css/experimental"
895896
]
896897
},
897898
"resource": {

0 commit comments

Comments
 (0)