feat(css): experimenting with css-modules base

TheLarkInn · TheLarkInn · commit b5d3788bda68 · 2017-12-19T16:51:19.000-08:00
diff --git a/lib/CssModulesPlugin.js b/lib/CssModulesPlugin.js
@@ -0,0 +1,13 @@
+const CssParser = require("./CssParser");
+
+class CssModulesPlugin {
+	apply(compiler) {
+		compiler.hooks.compilation.tap("CssModulesPlugin", (compilation, { normalModuleFactory }) => {
+			normalModuleFactory.hooks.createParser.for("css/experimental").tap("CssModulesPlugin", () => {
+				return new CssParser();
+			});
+		});
+	}
+}
+
+module.exports = CssModulesPlugin;
diff --git a/lib/CssParser.js b/lib/CssParser.js
@@ -0,0 +1,21 @@
+const Tapable = require("tapable").Tapable;
+const { Parser } = require("postcss");
+
+class CssParser extends Tapable {
+	constructor(options) {
+		super();
+		this.hooks = {};
+		this.options = options;
+	}
+
+	parse(source, state, callback) {
+		// TODO parse Css AST, identify/extract dependencies
+		// TODO determine sigil for lazy-loading? @import?
+		// TODO
+
+		const ast = Parser.parse(source);
+		console.log(ast);
+	}
+}
+
+module.exports = CssParser;
diff --git a/lib/WebpackOptionsApply.js b/lib/WebpackOptionsApply.js
@@ -9,6 +9,7 @@ const OptionsApply = require("./OptionsApply");
 const JavascriptModulesPlugin = require("./JavascriptModulesPlugin");
 const JsonModulesPlugin = require("./JsonModulesPlugin");
 const WebAssemblyModulesPlugin = require("./WebAssemblyModulesPlugin");
+const CssModulesPlugin = require("./CssModulesPlugin");
 
 const LoaderTargetPlugin = require("./LoaderTargetPlugin");
 const FunctionModulePlugin = require("./FunctionModulePlugin");
@@ -257,7 +258,8 @@ class WebpackOptionsApply extends OptionsApply {
 		compiler.apply(
 			new JavascriptModulesPlugin(),
 			new JsonModulesPlugin(),
-			new WebAssemblyModulesPlugin()
+			new WebAssemblyModulesPlugin(),
+			new CssModulesPlugin()
 		);
 
 		compiler.apply(new EntryOptionPlugin());
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
     "memory-fs": "~0.4.1",
     "mkdirp": "~0.5.0",
     "node-libs-browser": "^2.0.0",
+    "postcss": "^6.0.14",
     "schema-utils": "^0.4.2",
     "source-map": "^0.5.3",
     "tapable": "^1.0.0-beta.5",
diff --git a/yarn.lock b/yarn.lock
@@ -4363,7 +4363,7 @@ postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0
     source-map "^0.5.6"
     supports-color "^3.2.3"
 
-postcss@^6.0.1:
+postcss@^6.0.1, postcss@^6.0.14:
   version "6.0.14"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.14.tgz#5534c72114739e75d0afcf017db853099f562885"
   dependencies:
