Skip to content

Commit 40d5c2a

Browse files
committed
added postcss-custom-media as a postlinker plugin and custom media queries disappear!
1 parent d65b080 commit 40d5c2a

File tree

5 files changed

+18
-15
lines changed

5 files changed

+18
-15
lines changed

package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
},
99
"dependencies": {
1010
"postcss": "^4.1.11",
11+
"postcss-custom-media": "^4.1.0",
1112
"postcss-modules-extract-imports": "^0.0.5",
1213
"postcss-modules-local-by-default": "^0.0.9",
1314
"postcss-modules-scope": "^0.0.8"

src/file-system-loader.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,11 @@ const traceKeySorter = ( a, b ) => {
2020
};
2121

2222
export default class FileSystemLoader {
23-
constructor( root, plugins ) {
23+
constructor( root, plugins, postLinkers ) {
2424
this.root = root
2525
this.sources = {}
2626
this.importNr = 0
27-
this.core = new Core(plugins)
27+
this.core = new Core( plugins, postLinkers )
2828
this.tokensByFile = {};
2929
}
3030

src/index.js

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,27 +2,34 @@ import postcss from 'postcss'
22
import localByDefault from 'postcss-modules-local-by-default'
33
import extractImports from 'postcss-modules-extract-imports'
44
import scope from 'postcss-modules-scope'
5+
import customMedia from 'postcss-custom-media'
56

67
import Parser from './parser'
78

89
export default class Core {
9-
constructor( plugins ) {
10+
constructor( plugins, postLinkers ) {
1011
this.plugins = plugins || Core.defaultPlugins
12+
this.postLinkers = postLinkers || Core.defaultPostLinkers
1113
}
1214

1315
load( sourceString, sourcePath, trace, pathFetcher ) {
14-
let parser = new Parser( pathFetcher, trace )
16+
let parser = new Parser( pathFetcher, trace ),
17+
pluginChain = this.plugins
18+
.concat( [parser.plugin] )
19+
.concat( this.postLinkers );
1520

16-
return postcss( this.plugins.concat( [parser.plugin] ) )
21+
return postcss( pluginChain )
1722
.process( sourceString, { from: "/" + sourcePath } )
1823
.then( result => {
1924
return { injectableSource: result.css, exportTokens: parser.exportTokens }
2025
} )
2126
}
2227
}
2328

24-
// These three plugins are aliased under this package for simplicity.
29+
// These four plugins are aliased under this package for simplicity.
2530
Core.localByDefault = localByDefault
2631
Core.extractImports = extractImports
2732
Core.scope = scope
33+
Core.customMedia = customMedia
2834
Core.defaultPlugins = [localByDefault, extractImports, scope]
35+
Core.defaultPostLinkers = [customMedia]

test/test-cases.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ Object.keys( pipelines ).forEach( dirname => {
2121
if ( fs.existsSync( path.join( testDir, testCase, "source.css" ) ) ) {
2222
it( "should " + testCase.replace( /-/g, " " ), done => {
2323
let expected = normalize( fs.readFileSync( path.join( testDir, testCase, "expected.css" ), "utf-8" ) )
24-
let loader = new FileSystemLoader( testDir, pipelines[dirname] )
24+
let loader = new FileSystemLoader( testDir, pipelines[dirname], pipelines[dirname] )
2525
let expectedTokens = JSON.parse( fs.readFileSync( path.join( testDir, testCase, "expected.json" ), "utf-8" ) )
2626
loader.fetch( `${testCase}/source.css`, "/" ).then( tokens => {
2727
assert.equal( loader.finalSource, expected )

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

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,21 @@
1-
@custom-media --small (max-width: 30em);
2-
@custom-media --medium (max-width: 60em);
3-
@custom-media --small (max-width: 30em);
4-
@custom-media --medium (max-width: 60em);
5-
@custom-media --large (max-width: 90em);
61

72
._media_queries_source__red {
83
color: red;
94
}
105

11-
@media (--small) {
6+
@media (max-width: 30em) {
127
._media_queries_source__red {
138
color: maroon;
149
}
1510
}
1611

17-
@media (--medium) {
12+
@media (max-width: 60em) {
1813
._media_queries_source__red {
1914
color: darkmagenta;
2015
}
2116
}
2217

23-
@media (--large) {
18+
@media (max-width: 90em) {
2419
._media_queries_source__red {
2520
color: fuchsia;
2621
}

0 commit comments

Comments
 (0)