added postcss-custom-media as a postlinker plugin and custom media queries disappear!

Author: geelen

package.json

@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "postcss": "^4.1.11",
+    "postcss-custom-media": "^4.1.0",
     "postcss-modules-extract-imports": "^0.0.5",
     "postcss-modules-local-by-default": "^0.0.9",
     "postcss-modules-scope": "^0.0.8"

src/file-system-loader.js

@@ -20,11 +20,11 @@ const traceKeySorter = ( a, b ) => {
 };
 
 export default class FileSystemLoader {
-  constructor( root, plugins ) {
+  constructor( root, plugins, postLinkers ) {
     this.root = root
     this.sources = {}
     this.importNr = 0
-    this.core = new Core(plugins)
+    this.core = new Core( plugins, postLinkers )
     this.tokensByFile = {};
   }
 

src/index.js

@@ -2,27 +2,34 @@ 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 customMedia from 'postcss-custom-media'
 
 import Parser from './parser'
 
 export default class Core {
-  constructor( plugins ) {
+  constructor( plugins, postLinkers ) {
     this.plugins = plugins || Core.defaultPlugins
+    this.postLinkers = postLinkers || Core.defaultPostLinkers
   }
 
   load( sourceString, sourcePath, trace, pathFetcher ) {
-    let parser = new Parser( pathFetcher, trace )
+    let parser = new Parser( pathFetcher, trace ),
+      pluginChain = this.plugins
+        .concat( [parser.plugin] )
+        .concat( this.postLinkers );
 
-    return postcss( this.plugins.concat( [parser.plugin] ) )
+    return postcss( pluginChain )
       .process( sourceString, { from: "/" + sourcePath } )
       .then( result => {
         return { injectableSource: result.css, exportTokens: parser.exportTokens }
       } )
   }
 }
 
-// These three plugins are aliased under this package for simplicity.
+// These four plugins are aliased under this package for simplicity.
 Core.localByDefault = localByDefault
 Core.extractImports = extractImports
 Core.scope = scope
+Core.customMedia = customMedia
 Core.defaultPlugins = [localByDefault, extractImports, scope]
+Core.defaultPostLinkers = [customMedia]

test/test-cases.js

@@ -21,7 +21,7 @@ Object.keys( pipelines ).forEach( dirname => {
       if ( fs.existsSync( path.join( testDir, testCase, "source.css" ) ) ) {
         it( "should " + testCase.replace( /-/g, " " ), done => {
           let expected = normalize( fs.readFileSync( path.join( testDir, testCase, "expected.css" ), "utf-8" ) )
-          let loader = new FileSystemLoader( testDir, pipelines[dirname] )
+          let loader = new FileSystemLoader( testDir, pipelines[dirname], pipelines[dirname] )
           let expectedTokens = JSON.parse( fs.readFileSync( path.join( testDir, testCase, "expected.json" ), "utf-8" ) )
           loader.fetch( `${testCase}/source.css`, "/" ).then( tokens => {
             assert.equal( loader.finalSource, expected )

test/test-cases/media-queries/expected.css

@@ -1,26 +1,21 @@
-@custom-media --small (max-width: 30em);
-@custom-media --medium (max-width: 60em);
-@custom-media --small (max-width: 30em);
-@custom-media --medium (max-width: 60em);
-@custom-media --large (max-width: 90em);
 
 ._media_queries_source__red {
   color: red;
 }
 
-@media (--small) {
+@media (max-width: 30em) {
   ._media_queries_source__red {
     color: maroon;
   }
 }
 
-@media (--medium) {
+@media (max-width: 60em) {
   ._media_queries_source__red {
     color: darkmagenta;
   }
 }
 
-@media (--large) {
+@media (max-width: 90em) {
   ._media_queries_source__red {
     color: fuchsia;
   }