8000 Add support for media queries. Resolves #21 · postcss/postcss-calc@3c477ab · GitHub
Skip to content

Commit 3c477ab

Browse files
jamiebuildsjamiebuilds
committed
Add support for media queries. Resolves #21 
1 parent 4f03255 commit 3c477ab

File tree

7 files changed

+55
-12
lines changed

7 files changed

+55
-12
lines changed

‎CHANGELOG.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
- Added: support for `@media` queries
2+
13
# 5.1.0 - 2016-01-07
24

35
- Added: "warnWhenCannotResolve" option to warn when calc() are not reduced to a single value

‎index.js

Lines changed: 21 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -17,31 +17,40 @@ module.exports = postcss.plugin("postcss-calc", function(options) {
1717
var warnWhenCannotResolve = options.warnWhenCannotResolve
1818

1919
return function(style, result) {
20+
function transformValue(node, property) {
21+
var value = node[property]
2022

21-
style.walkDecls(function transformDecl(decl) {
22-
if (!decl.value || decl.value.indexOf("calc(") === -1) {
23+
if (!value || !CONTAINS_CALC.test(value)) {
2324
return
2425
}
2526

2627
helpers.try(function transformCSSCalc() {
27-
var value = reduceCSSCalc(decl.value, precision)
28+
var reducedValue = reduceCSSCalc(value, precision)
2829

29-
if (warnWhenCannotResolve && CONTAINS_CALC.test(value)) {
30-
result.warn("Could not reduce expression: " + decl.value,
31-
{plugin: "postcss-calc", node: decl})
30+
if (warnWhenCannotResolve && CONTAINS_CALC.test(reducedValue)) {
31+
result.warn("Could not reduce expression: " + value,
32+
{plugin: "postcss-calc", node: node})
3233
}
3334

3435
if (!preserve) {
35-
decl.value = value
36+
node[property] = reducedValue
3637
return
3738
}
3839

39-
if (value != decl.value) {
40-
var clone = decl.clone()
41-
clone.value = value
42-
decl.parent.insertBefore(decl, clone)
40+
if (reducedValue != value) {
41+
var clone = node.clone()
42+
clone[property] = reducedValue
43+
node.parent.insertBefore(node, clone)
4344
}
44-
}, decl.source)
45+
}, node.source)
46+
}
47+
48+
style.walkAtRules(function transformAtRule(atRule) {
49+
transformValue(atRule, 'params')
50+
})
51+
52+
style.walkDecls(function transformDecl(decl) {
53+
transformValue(decl, 'value')
4554
})
4655
}
4756
})

‎test/fixtures/media.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@media (min-width: calc(10px + 10px)) {}

‎test/fixtures/media.expected.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@media (min-width: 20px) {}

‎test/fixtures/preserve-media.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@media (min-width: calc(10px + 10px)) {
2+
.test {
3+
display: block;
4+
}
5+
}

‎test/fixtures/preserve-media.expected.css

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
@media (min-width: 20px) {
2+
.test {
3+
display: block;
4+
}
5+
}
6+
@media (min-width: calc(10px + 10px)) {
7+
.test {
8+
display: block;
9+
}
10+
}

‎test/index.js

Lines changed: 15 ad 12AE ditions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,13 @@ test("calc", function(t) {
4242
"should resolve what is possible in complex calc"
4343
)
4444

45+
compareFixtures(
46+
t,
47+
"media",
48+
{},
49+
"should resolve media queries"
50+
)
51+
4552
compareFixtures(
4653
t,
4754
"precision",
@@ -57,6 +64,14 @@ test("calc", function(t) {
5764
"should have a preserve option that allow to keep original calc() usage"
5865
)
5966

67+
compareFixtures(
68+
t,
69+
"preserve-media",
70+
{preserve: true},
71+
"should have a preserve option that allow to keep original calc() usage" +
72+
"with media"
73+
)
74+
6075
var result = compareFixtures(
6176
t,
6277
"warnWhenCannotResolve",

0 commit comments

Comments
 (0)