diff --git a/package.json b/package.json index ecec1f9..64c1f49 100644 --- a/package.json +++ b/package.json @@ -1,31 +1,33 @@ { "name": "css-modules-loader-core", - "version": "0.0.12", + "version": "1.0.0-beta4", "description": "A loader-agnostic CSS Modules implementation, based on PostCSS", "main": "lib/index.js", "directories": { "test": "test" }, "dependencies": { - "postcss": "^4.1.11", - "postcss-modules-extract-imports": "^0.0.5", - "postcss-modules-local-by-default": "^0.0.9", - "postcss-modules-scope": "^0.0.8" + "icss-replace-symbols": "1.0.2", + "postcss": "5.0.10", + "postcss-modules-values": "1.1.0", + "postcss-modules-extract-imports": "1.0.0", + "postcss-modules-local-by-default": "1.0.0", + "postcss-modules-scope": "1.0.0" }, "devDependencies": { - "babel": "^5.5.4", - "babel-eslint": "^3.1.14", - "babelify": "^6.1.2", - "chokidar-cli": "^0.2.1", - "eslint": "^0.22.1", - "mocha": "^2.2.5" + "babel": "5.8.23", + "babel-eslint": "4.1.3", + "babelify": "6.3.0", + "chokidar-cli": "1.1.0", + "eslint": "1.7.2", + "mocha": "2.3.3" }, "scripts": { "lint": "eslint src", "build": "babel --out-dir lib src", "autotest": "chokidar src test -c 'npm test'", "test": "mocha --compilers js:babel/register", - "prepublish": "npm run build" + "prepublish": "rm -rf lib/* && npm run build" }, "repository": { "type": "git", diff --git a/src/index.js b/src/index.js index f5994ef..92795bd 100644 --- a/src/index.js +++ b/src/index.js @@ -2,6 +2,7 @@ import postcss from 'postcss' import localByDefault from 'postcss-modules-local-by-default' import extractImports from 'postcss-modules-extract-imports' import scope from 'postcss-modules-scope' +import values from 'postcss-modules-values' import Parser from './parser' @@ -21,9 +22,10 @@ export default class Core { } } - -// These three plugins are aliased under this package for simplicity. +// These four plugins are aliased under this package for simplicity. +Core.values = values Core.localByDefault = localByDefault Core.extractImports = extractImports Core.scope = scope -Core.defaultPlugins = [localByDefault, extractImports, scope] + +Core.defaultPlugins = [values, localByDefault, extractImports, scope] diff --git a/src/parser.js b/src/parser.js index 536e9cd..8dfb1dc 100644 --- a/src/parser.js +++ b/src/parser.js @@ -1,4 +1,5 @@ const importRegexp = /^:import\((.+)\)$/ +import replaceSymbols from 'icss-replace-symbols' export default class Parser { constructor( pathFetcher, trace ) { @@ -26,11 +27,7 @@ export default class Parser { } linkImportedSymbols( css ) { - css.eachDecl( decl => { - Object.keys(this.translations).forEach( translation => { - decl.value = decl.value.replace(translation, this.translations[translation]) - } ) - }) + replaceSymbols(css, this.translations) } extractExports( css ) { @@ -48,7 +45,7 @@ export default class Parser { this.exportTokens[decl.prop] = decl.value } } ) - exportNode.removeSelf() + exportNode.remove() } fetchImport( importNode, relativeTo, depNr ) { @@ -60,7 +57,7 @@ export default class Parser { this.translations[decl.prop] = exports[decl.value] } } ) - importNode.removeSelf() + importNode.remove() }, err => console.log( err ) ) } } diff --git a/test/test-cases/multiple-dependencies/expected.json b/test/test-cases/multiple-dependencies/expected.json index 047434d..7327ebb 100644 --- a/test/test-cases/multiple-dependencies/expected.json +++ b/test/test-cases/multiple-dependencies/expected.json @@ -1,3 +1,3 @@ { - "a": "_multiple_dependencies_source__a _multiple_dependencies_b__b1 _multiple_dependencies_d__d1 _multiple_dependencies_d__d2 _multiple_dependencies_b__b2 _multiple_dependencies_c__c" + "a": "_multiple_dependencies_source__a _multiple_dependencies_b__b1 _multiple_dependencies_d__d1 _multiple_dependencies_d__d2 _multiple_dependencies_b__b2 _multiple_dependencies_c__c something-global" } diff --git a/test/test-cases/multiple-dependencies/source.css b/test/test-cases/multiple-dependencies/source.css index 46e1595..0824a26 100644 --- a/test/test-cases/multiple-dependencies/source.css +++ b/test/test-cases/multiple-dependencies/source.css @@ -1,6 +1,7 @@ .a { composes: b1 b2 from "./b.css"; composes: c from "./c.css"; + composes: something-global from global; color: #aaa; } diff --git a/test/test-cases/values/borders.css b/test/test-cases/values/borders.css new file mode 100644 index 0000000..f3670f7 --- /dev/null +++ b/test/test-cases/values/borders.css @@ -0,0 +1,3 @@ +.dashed { + border: 4px dashed; +} diff --git a/test/test-cases/values/breakpoints.css b/test/test-cases/values/breakpoints.css new file mode 100644 index 0000000..0b80b8b --- /dev/null +++ b/test/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/test-cases/values/colors.css b/test/test-cases/values/colors.css new file mode 100644 index 0000000..ff83776 --- /dev/null +++ b/test/test-cases/values/colors.css @@ -0,0 +1,16 @@ +@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/test-cases/values/expected.css b/test/test-cases/values/expected.css new file mode 100644 index 0000000..0562fb8 --- /dev/null +++ b/test/test-cases/values/expected.css @@ -0,0 +1,35 @@ +._values_borders__dashed { + border: 4px dashed; +} + +._values_colors__text-primary { + color: #f01; +} +._values_colors__bg-primary { + background-color: #f01; +} + +._values_colors__text-secondary { + color: #2f2; +} +._values_colors__bg-secondary { + background-color: #2f2; +} +/* Imports without a "from" are just passed through */ +@import url('./old-skool.css'); + +._values_source__foo { + box-shadow: 0 0 10px #f01; + border-color: #2f2; +} + +@media (max-width: 599px) { + ._values_source__foo { + background: white; + } +} +@media (min-width: 600px) and (max-width: 959px) { + ._values_source__foo { + background: peru; + } +} diff --git a/test/test-cases/values/expected.json b/test/test-cases/values/expected.json new file mode 100644 index 0000000..ee98683 --- /dev/null +++ b/test/test-cases/values/expected.json @@ -0,0 +1,9 @@ +{ + "borders": "\"./borders.css\"", + "breakpoints": "\"./breakpoints.css\"", + "small": "(max-width: 599px)", + "medium": "(min-width: 600px) and (max-width: 959px)", + "secondary": "#2f2", + "blue": "#f01", + "foo": "_values_source__foo _values_borders__dashed _values_colors__text-secondary" +} diff --git a/test/test-cases/values/source.css b/test/test-cases/values/source.css new file mode 100644 index 0000000..2c63c32 --- /dev/null +++ b/test/test-cases/values/source.css @@ -0,0 +1,24 @@ +@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 { + composes: dashed from borders; + composes: text-secondary from "./colors.css"; + box-shadow: 0 0 10px blue; + border-color: secondary; +} + +@media small { + .foo { + background: white; + } +} +@media medium { + .foo { + background: peru; + } +}