Merge pull request webpack#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;
+})()
+}
+);
+});