Comments (16)
Simple workaround:
In node_modules\reduce-css-calc\dist\index.js file
Change:
// skip anything which isn't a calc() function
if (node.type !== 'function' || !MATCH_CALC.test(node.value)) return;
// stringify calc expression and produce an AST
var contents = _postcssValueParser2.default.stringify(node.nodes);
var ast = _parser.parser.parse(contents);
To:
// skip anything which isn't a calc() function
if (node.type !== 'function' || !MATCH_CALC.test(node.value)) return;
// stringify calc expression and produce an AST
var contents = _postcssValueParser2.default.stringify(node.nodes);
if (contents.indexOf('constant') >= 0 || contents.indexOf('env') >= 0) return;
var ast = _parser.parser.parse(contents);
from reduce-css-calc.
Having the same problem with this:
@value large from './mediaqueries.css';
@value spacing-large from './spacings.css';
.someSpacing {
@media large {
margin-bottom: calc(spacing-large * 3)
}
}
resulting in:
ERROR in ./node_modules/css-loader??ref--6-1!./node_modules/postcss-loader/lib??postcss!../src/Heading/style.css
Module build failed: Error: Parse error on line 1:
i__const_spacing_lar
^
Expecting 'SUB', 'LPAREN', 'NESTED_CALC', 'NUMBER', 'CSS_VAR', 'LENGTH', 'ANGLE', 'TIME', 'FREQ', 'RES', 'EMS', 'EXS', 'CHS', 'REMS', 'VHS', 'VWS', 'VMINS', 'VMAXS', 'PERCENTAGE', got 'PREFIX'
at Parser.parseError (/project/node_modules/postcss-calc/node_modules/reduce-css-calc/dist/parser.js:160:21)
Using postcss-modules-values
and postcss-calc
(seems to be a regression, since it used to work in postcss-calc
v5, and stops working in v6 (which changes reduce-css-calc
dependency version from 1.2.6 to 2.0.0.
from reduce-css-calc.
Using Framework7 in Vuejs affected. See framework7io/framework7#2539
To reproduce use https://github.com/zoosky/framework7-template-split-vue-webpack.git
framework7-template-split-vue-webpack git:(master) ✗ yarn build
yarn run v1.7.0
$ vue-cli-service build
ERROR Error: CSS minification error: Parse error on line 1:
8px + constant(safe-area-i
------^
Expecting 'SUB', 'LPAREN', 'NESTED_CALC', 'NUMBER', 'CSS_VAR', 'LENGTH', 'ANGLE', 'TIME', 'FREQ', 'RES', 'EMS', 'EXS', 'CHS', 'REMS', 'VHS', 'VWS', 'VMINS', 'VMAXS', 'PERCENTAGE', got 'PREFIX'. File: css/chunk-vendors.cd97c7e3.css
Error: CSS minification error: Parse error on line 1:
8px + constant(safe-area-i
------^
Expecting 'SUB', 'LPAREN', 'NESTED_CALC', 'NUMBER', 'CSS_VAR', 'LENGTH', 'ANGLE', 'TIME', 'FREQ', 'RES', 'EMS', 'EXS', 'CHS', 'REMS', 'VHS', 'VWS', 'VMINS', 'VMAXS', 'PERCENTAGE', got 'PREFIX'. File: css/chunk-vendors.cd97c7e3.css
at /Users/andreas/dev/examples/framework7/framework7-template-split-vue-webpack/node_modules/@intervolga/optimize-cssnano-plugin/index.js:106:21
error Command failed with exit code 1.
Background, see:
- https://webkit.org/blog/7929/designing-websites-for-iphone-x/
- https://medium.com/@draganeror/iphone-x-layout-features-with-css-environment-variables-d57423433dec
from reduce-css-calc.
@darrellhanley could you provide your input?
from reduce-css-calc.
Hello there
I have the same issue. Here is what my css files looks like. I hope this will help
/* Vars */
@value size: 20px;
.icons {
& svg:nth-child(1) {
left: calc(size * 0);
}
}
from reduce-css-calc.
This function take a css value as an input, so it just cannot work with that atm.
from reduce-css-calc.
@Semigradsky
The original author opened the issue because of the new constant
and env
keywords of Safari mobile.
The syntax is like this:
header {
/* ... */
/* Status bar height on iOS 10 */
padding-top: 20px;
/* Status bar height on iOS 11.0 */
padding-top: constant(safe-area-inset-top);
/* Status bar height on iOS 11+ */
padding-top: env(safe-area-inset-top);
}
Those should be passed through as-is.
http://ayogo.com/blog/ios11-viewport/
from reduce-css-calc.
So that's probably a postcss issue. cssnext does nothing about this constant (now env) function
from reduce-css-calc.
It's clearly a parsing issue. So please reopen over there (if not already opened or fixed).
from reduce-css-calc.
Looks like constant
/env
are not yet in the spec https://drafts.csswg.org/css-variables/.
from reduce-css-calc.
probably, but since iPhone X is out an everyone is going to adjust their website, it should be supported by postcss anyway, (which support non valid syntax like sass etc)
from reduce-css-calc.
I see that PostCSS is parsing previous code well. Not problems in postcss-value-parser
too.
from reduce-css-calc.
Oh, I have reproduced this.
from reduce-css-calc.
What's the status on getting this into a release?
from reduce-css-calc.
@guylando Thanks, this works! 👍🏻 You should do a pull request with this change. :)
from reduce-css-calc.
.video { width: 100%; height: calc(width*56.25); }
this produces same error. seems it doesn't know what to do with width. browser works ok here, but css reducer don't. can we skip "width/height" as well?
from reduce-css-calc.
Related Issues (20)
- Strange unit math in 2.x HOT 2
- A percent is a not a unit of measure HOT 1
- -calc(...) gives calc() result HOT 9
- Negating values broken in 2.X HOT 6
- Error when building
- Standards or not? HOT 1
- Incorrect reduction of nested expression
- `NaN` value when reducing division with custom property
- Incorrect result for a specific case HOT 1
- constant + calc
- Complex calc function simplifying incorrectly HOT 1
- calc(...)rem adds space between number and unit HOT 1
- Plugin is removing comments and it shouldn't do it HOT 2
- Cannot handle nested calc()? HOT 3
- Parse error on custom property fallback HOT 1
- Precision for nested calc is not accurate
- Incorrect calculation when subtracting HOT 2
- Evaluation of mis-matching units HOT 1
- error PX
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from reduce-css-calc.