From 583d84fe587c3b69a828b2011fe78eb5ccf0ddd2 Mon Sep 17 00:00:00 2001 From: sullenor Date: Sun, 27 Mar 2016 19:09:08 +0300 Subject: [PATCH] values example --- index.js | 3 +++ package.json | 2 ++ test/cases/values/borders.css | 4 +++ test/cases/values/breakpoints.css | 3 +++ test/cases/values/colors.css | 20 ++++++++++++++ test/cases/values/expected.css | 43 +++++++++++++++++++++++++++++++ test/cases/values/expected.json | 9 +++++++ test/cases/values/source.css | 31 ++++++++++++++++++++++ test/setup.js | 2 ++ 9 files changed, 117 insertions(+) create mode 100644 test/cases/values/borders.css create mode 100644 test/cases/values/breakpoints.css create mode 100644 test/cases/values/colors.css create mode 100644 test/cases/values/expected.css create mode 100644 test/cases/values/expected.json create mode 100644 test/cases/values/source.css diff --git a/index.js b/index.js index a7a8693..669a2eb 100644 --- a/index.js +++ b/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 => { diff --git a/package.json b/package.json index 5b69e6f..304ec6f 100644 --- a/package.json +++ b/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" }, diff --git a/test/cases/values/borders.css b/test/cases/values/borders.css new file mode 100644 index 0000000..52aea39 --- /dev/null +++ b/test/cases/values/borders.css @@ -0,0 +1,4 @@ +.dashed +{ + border: 4px dashed; +} diff --git a/test/cases/values/breakpoints.css b/test/cases/values/breakpoints.css new file mode 100644 index 0000000..0b80b8b --- /dev/null +++ b/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); diff --git a/test/cases/values/colors.css b/test/cases/values/colors.css new file mode 100644 index 0000000..1241229 --- /dev/null +++ b/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; +} diff --git a/test/cases/values/expected.css b/test/cases/values/expected.css new file mode 100644 index 0000000..2ae6e77 --- /dev/null +++ b/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; + } +} diff --git a/test/cases/values/expected.json b/test/cases/values/expected.json new file mode 100644 index 0000000..39516c6 --- /dev/null +++ b/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)" +} diff --git a/test/cases/values/source.css b/test/cases/values/source.css new file mode 100644 index 0000000..b981589 --- /dev/null +++ b/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; + } +} diff --git a/test/setup.js b/test/setup.js index fb8dbd0..ce3c663 100644 --- a/test/setup.js +++ b/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) =>