Merge pull request #28 from css-modules/feature/constants

Values!

Author: geelen

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",

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]

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 ) )
   }
 }

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"
 }

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;
 }
 

test/test-cases/values/borders.css

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

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);

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;
+}

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;
+  }
+}

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"
+}

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;
+  }
+}