Skip to content

Commit d65b080

Browse files
committed
media queries test passing!
1 parent 464b5d8 commit d65b080

File tree

6 files changed

+25
-13
lines changed

6 files changed

+25
-13
lines changed

src/index.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ export default class Core {
2121
}
2222
}
2323

24-
2524
// These three plugins are aliased under this package for simplicity.
2625
Core.localByDefault = localByDefault
2726
Core.extractImports = extractImports

src/parser.js

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ export default class Parser {
5353
Object.keys(this.translations).forEach( translation => {
5454
decl.value = decl.value.replace(translation, this.translations[translation])
5555
} )
56-
this.exportTokens[decl.prop] = decl.value
56+
this.exportTokens[decl.prop] = decl.value.replace(/^['"]|['"]$/g, '')
5757
}
5858
} )
5959
exportNode.removeSelf()
@@ -65,7 +65,12 @@ export default class Parser {
6565
return this.pathFetcher( file, relativeTo, depTrace ).then( exports => {
6666
importNode.each( decl => {
6767
if ( decl.type == 'decl' ) {
68-
this.translations[decl.prop] = exports[decl.value].replace(/^['"]|['"]$/g,'')
68+
let translation = exports[decl.value]
69+
if ( translation ) {
70+
this.translations[decl.prop] = translation.replace(/^['"]|['"]$/g, '')
71+
} else {
72+
console.warn( `Missing ${decl.value} for ${decl.prop}` )
73+
}
6974
}
7075
} )
7176
importNode.removeSelf()
Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,2 @@
11
@custom-media --small (max-width: 30em);
22
@custom-media --medium (max-width: 60em);
3-
@custom-media --large (max-width: 90em);
Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,27 @@
1-
._media-queries_source__red {
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);
6+
7+
._media_queries_source__red {
28
color: red;
39
}
410

5-
@media (max-width: 30em) {
6-
._media-queries_source__red {
11+
@media (--small) {
12+
._media_queries_source__red {
713
color: maroon;
814
}
915
}
1016

11-
@media (max-width: 60em) {
12-
._media-queries_source__red {
17+
@media (--medium) {
18+
._media_queries_source__red {
1319
color: darkmagenta;
1420
}
1521
}
1622

17-
@media (max-width: 90em) {
18-
._media-queries_source__red {
23+
@media (--large) {
24+
._media_queries_source__red {
1925
color: fuchsia;
2026
}
2127
}
Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
11
{
2-
"red": "_media-queries_source__red"
2+
"red": "_media_queries_source__red",
3+
"--small": "(max-width: 30em)",
4+
"--medium": "(max-width: 60em)",
5+
"--large": "(max-width: 90em)"
36
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@custom-media --small from "./breakpoints.css";
22
@custom-media --medium from "./breakpoints.css";
3-
@custom-media --large (min-width: 90em);
3+
@custom-media --large (max-width: 90em);
44

55
.red {
66
color: red;

0 commit comments

Comments
 (0)