values example

index.js

@@ -4,6 +4,7 @@ const plugin = require('postcss').plugin;
 const queue = require('async').queue;
 const promisify = require('promisify-api');
 const readFile = require('fs').readFile;
+const replaceSymbols = require('icss-replace-symbols').default;
 const resolveDeps = require('./lib/resolveDeps');
 const updateExports = require('./lib/updateExports');
 const walkImports = require('./lib/walkImports');
@@ -36,6 +37,7 @@ const postcssResolveDeps = plugin('resolve-dependency-imports', function () {
     });
 
     return Promise.all(pending)
+    .then(() => replaceSymbols(tree, translations))
     .then(() => updateExports(tree, translations));
   };
 });
@@ -85,6 +87,7 @@ module.exports = plugin(nameOfTheCurrentPlugin, function (opts) {
     });
 
     return Promise.all(pending)
+    .then(() => replaceSymbols(tree, translations))
     .then(() => updateExports(tree, translations))
     .then(() => resolveDeps(processFile.traces))
     .then(files => {

package.json

@@ -29,9 +29,11 @@
   "homepage": "https://github.com/sullenor/postcss-modules-resolve-imports#readme",
   "dependencies": {
     "async": "^1.5.2",
+    "icss-replace-symbols": "^1.0.2",
     "lodash": "^4.6.1",
     "postcss": "^5.0.19",
     "postcss-modules-extract-exports": "^1.0.0",
+    "postcss-modules-values": "^1.1.2",
     "promisify-api": "^1.1.0",
     "resolve": "^1.1.7"
   },

test/cases/values/borders.css

@@ -0,0 +1,4 @@
+.dashed
+{
+  border: 4px dashed;
+}

test/cases/values/breakpoints.css

@@ -0,0 +1,3 @@
+@value small (max-width: 599px);
+@value medium (min-width: 600px) and (max-width: 959px);
+@value large (min-width: 960px);

test/cases/values/colors.css

@@ -0,0 +1,20 @@
+@value primary: #f01;
+@value secondary: #2f2;
+
+.text-primary
+{
+  color: primary;
+}
+.bg-primary
+{
+  background-color: primary;
+}
+
+.text-secondary
+{
+  color: secondary;
+}
+.bg-secondary
+{
+  background-color: secondary;
+}

test/cases/values/expected.css

@@ -0,0 +1,43 @@
+._test_cases_values_borders__dashed{
+  border: 4px dashed;
+}
+
+._test_cases_values_colors__text-primary{
+  color: #f01;
+}
+
+._test_cases_values_colors__bg-primary{
+  background-color: #f01;
+}
+
+._test_cases_values_colors__text-secondary{
+  color: #2f2;
+}
+
+._test_cases_values_colors__bg-secondary{
+  background-color: #2f2;
+}
+/* Imports without a "from" are just passed through */
+@import url('./old-skool.css');
+
+._test_cases_values_source__foo
+{
+  border-color: #2f2;
+  box-shadow: 0 0 10px #f01;
+}
+
+@media (max-width: 599px)
+{
+  ._test_cases_values_source__foo
+  {
+    background: white;
+  }
+}
+
+@media (min-width: 600px) and (max-width: 959px)
+{
+  ._test_cases_values_source__foo
+  {
+    background: peru;
+  }
+}

test/cases/values/expected.json

@@ -0,0 +1,9 @@
+{
+  "blue": "#f01",
+  "borders": "'./borders.css'",
+  "breakpoints": "'./breakpoints.css'",
+  "foo": "_test_cases_values_source__foo _test_cases_values_borders__dashed _test_cases_values_colors__text-secondary",
+  "medium": "(min-width: 600px) and (max-width: 959px)",
+  "secondary": "#2f2",
+  "small": "(max-width: 599px)"
+}

test/cases/values/source.css

@@ -0,0 +1,31 @@
+@value borders: './borders.css', breakpoints: './breakpoints.css';
+@value small, medium from breakpoints;
+@value secondary, primary as blue from './colors.css';
+
+/* Imports without a "from" are just passed through */
+@import url('./old-skool.css');
+
+.foo
+{
+  border-color: secondary;
+  box-shadow: 0 0 10px blue;
+
+  composes: dashed from borders;
+  composes: text-secondary from './colors.css';
+}
+
+@media small
+{
+  .foo
+  {
+    background: white;
+  }
+}
+
+@media medium
+{
+  .foo
+  {
+    background: peru;
+  }
+}

test/setup.js

@@ -6,10 +6,12 @@ const ExtractImports = require('postcss-modules-extract-imports');
 const Scope = require('postcss-modules-scope');
 const ResolveImports = require('../index');
 const ExtractExports = require('postcss-modules-extract-exports');
+const Values = require('postcss-modules-values');
 
 global.assert = require('assert');
 global.runner = function () {
   return postcss([
+    Values,
     LocalByDefault,
     ExtractImports,
     new Scope({generateScopedName: (local, filename) =>