Merge pull request webpack-contrib#146 from webpack/values

added CSS Modules values support

Author: sokra

lib/processCss.js

@@ -11,6 +11,7 @@ var getLocalIdent = require("./getLocalIdent");
 var localByDefault = require("postcss-modules-local-by-default");
 var extractImports = require("postcss-modules-extract-imports");
 var modulesScope = require("postcss-modules-scope");
+var modulesValues = require("postcss-modules-values");
 var cssnano = require("cssnano");
 
 var parserPlugin = postcss.plugin("css-loader-parser", function(options) {
@@ -144,6 +145,7 @@ module.exports = function processCss(inputSource, inputMap, options, callback) {
 			}
 		}),
 		extractImports(),
+		modulesValues,
 		modulesScope({
 			generateScopedName: function(exportName) {
 				return getLocalIdent(options.loaderContext, localIdentName, exportName, {

package.json

@@ -11,8 +11,9 @@
     "lodash.camelcase": "^3.0.1",
     "postcss": "^5.0.6",
     "postcss-modules-extract-imports": "1.0.0-beta2",
-    "postcss-modules-local-by-default": "1.0.0-beta1",
+    "postcss-modules-local-by-default": "1.0.0-beta2",
     "postcss-modules-scope": "1.0.0-beta2",
+    "postcss-modules-values": "^1.1.0",
     "source-list-map": "^0.1.4"
   },
   "devDependencies": {

test/moduleTestCases/values/expected.css

@@ -0,0 +1,5 @@
+._a_ {
+	background: red;
+	background: green;
+	background: red;
+}

test/moduleTestCases/values/source.css

@@ -0,0 +1,9 @@
+@value aaa: red;
+@value bbb: green;
+@value ccc: aaa;
+
+.a {
+	background: aaa;
+	background: bbb;
+	background: ccc;
+}

test/valuesTest.js

@@ -0,0 +1,69 @@
+/*globals describe */
+
+var testLocals = require("./helpers").testLocals;
+var test = require("./helpers").test;
+
+function testLocal(name, input, result, localsResult, query, modules) {
+	result.locals = localsResult;
+	test(name, input, result, query, modules);
+}
+
+describe("values", function() {
+	testLocals("should export values",
+		"@value def: red; @value ghi: 1px solid black",
+		{
+			def: "red",
+			ghi: "1px solid black"
+		},
+		""
+	);
+	testLocals("should export values and locals",
+		"@value def: red; .ghi { color: def; }",
+		{
+			def: "red",
+			ghi: "_ghi"
+		},
+		"?modules&localIdentName=_[local]"
+	);
+	testLocal("should import values from other module",
+		"@value def from './file'; .ghi { color: def; }", [
+			[ 2, "", "" ],
+			[ 1, ".ghi { color: red; }", "" ]
+		], {
+			def: "red"
+		}, "", {
+			"./file": (function() {
+				var a =  [[2, "", ""]];
+				a.locals = {
+					def: "red"
+				};
+				return a;
+			})()
+		}
+	);
+	testLocal("should import values with renaming",
+		"@value def as aaa from './file1'; @value def as bbb from './file2'; .ghi { background: aaa, bbb, def; }", [
+			[ 2, "", "" ],
+			[ 3, "", "" ],
+			[ 1, ".ghi { background: red, green, def; }", "" ]
+		], {
+			aaa: "red",
+			bbb: "green"
+		}, "", {
+			"./file1": (function() {
+				var a =  [[2, "", ""]];
+				a.locals = {
+					def: "red"
+				};
+				return a;
+			})(),
+			"./file2": (function() {
+				var a =  [[3, "", ""]];
+				a.locals = {
+					def: "green"
+				};
+				return a;
+			})()
+		}
+	);
+});