feat(css): css module stuff

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]
+        [0] (webpack)/node_modules/css-loader!./style.css 227 bytes {0} [built]
-            single entry !!(webpack)\node_modules\css-loader\index.js!.\style.css 
+            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]
+        [0] (webpack)/node_modules/css-loader!./style.css 227 bytes {0} [built]
-            single entry !!(webpack)\node_modules\css-loader\index.js!.\style.css 
+            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
 ```

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

lib/CssParser.js

@@ -1,20 +1,39 @@
-const Tapable = require("tapable").Tapable;
+const { SyncBailHook, Tapable } = require("tapable");
-const { Parser } = require("postcss");
+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
+		}
+
 	}
 }
 

schemas/WebpackOptions.json

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