Comments (7)
jrschumacher
commented on August 18, 2024
Further investigation shows that when it detects the /var it is expecting to prepend the previous token (i.e. 10/var(--x)), but with the bracket it is prepending an empty string.
other [ 'word', 'var', 1, 1, 1, 3 ]
tokens [
[ 'word', 'var', 1, 1, 1, 3 ],
[ 'brackets', '(--font-size)', 1, 4, 1, 16 ],
[ 'word', '/var', 1, 17, 1, 20 ],
[ 'brackets', '(--line-height)', 1, 21, 1, 35 ]
]
other [ 'word', '--font-size', 1, 1, 1, 11 ]
tokens [ [ 'word', '--font-size', 1, 1, 1, 11 ] ]
other [ 'word', '/var', 1, 17, 1, 20 ]
tokens [
[ 'word', '/var', 1, 17, 1, 20 ],
[ 'brackets', '(--line-height)', 1, 21, 1, 35 ]
]
other [ 'word', '', 1, 1, 1, 4 ]
tokens [
[ 'word', '', 1, 1, 1, 4 ], <---- prepends empty string
[ 'operator', '/', 1, 1, 1, 4 ],
[ 'word', 'var', 1, 2, 1, 4 ],
[ 'brackets', '(--line-height)', 1, 21, 1, 35 ]
While xx/var(--line-height)
other [ 'word', 'xx/var', 1, 1, 1, 6 ]
tokens [
[ 'word', 'xx/var', 1, 1, 1, 6 ],
[ 'brackets', '(--line-height)', 1, 7, 1, 21 ]
]
other [ 'word', 'xx', 1, 1, 1, 6 ]
tokens [
[ 'word', 'xx', 1, 1, 1, 6 ],
[ 'operator', '/', 1, 3, 1, 6 ],
[ 'word', 'var', 1, 4, 1, 6 ],
[ 'brackets', '(--line-height)', 1, 7, 1, 21 ]
]
other [ 'operator', '/', 1, 3, 1, 6 ]
tokens [
[ 'operator', '/', 1, 3, 1, 6 ],
[ 'word', 'var', 1, 4, 1, 6 ],
[ 'brackets', '(--line-height)', 1, 7, 1, 21 ]
]
other [ 'word', 'var', 1, 4, 1, 6 ]
tokens [
[ 'word', 'var', 1, 4, 1, 6 ],
[ 'brackets', '(--line-height)', 1, 7, 1, 21 ]
]
other [ 'word', '--line-height', 1, 1, 1, 13 ]
tokens [ [ 'word', '--line-height', 1, 1, 1, 13 ] ]
from postcss-values-parser.
jrschumacher
commented on August 18, 2024
Workaround
Add spaces around the / separating the font-size and line-height:
font: var(--font-size) / var(--line-height) var(--font-family);
from postcss-values-parser.
shellscape
commented on August 18, 2024
Yeah how to deal with operators is an impossible battle. Fix it for one scenario, breaks it for another.
from postcss-values-parser.
jrschumacher
commented on August 18, 2024
@shellscape I'm not very familiar with the postcss parser. Is there anyway we can get the parser to look back? If the last token is a bracket and the extracted last token (I.e. empty string before /var) is an empty string then it shouldn't replace the last token.
If you could give me a pointer on understanding how the parser is working I'd be happy to explore this. Unfortunately with my limited experience I got lost.
from postcss-values-parser.
shellscape
commented on August 18, 2024
Thanks for the issue. PRs are welcome
from postcss-values-parser.
cherepanov
commented on August 18, 2024
Faced this issue with external library. What is the simplest way to fix these expressions before processing?
from postcss-values-parser.
shellscape
commented on August 18, 2024
This is resolved in the major/css-tree branch, which will be released as v7
from postcss-values-parser.
Related Issues (20)
- Exception thrown on float angle values HOT 4
- Options for initial line/column values HOT 1
- Sass forward prefixes parsing as a word and operator instead of just a word HOT 8
- postcss-values-parser hangs indefinitely HOT 5
- License Change: from MPL-2.0 to MIT to be aligned with postcss pkgs HOT 1
- Can't parse `++(1)` HOT 2
- URL parameters are being parsed into functional groups, when they should be ignored. HOT 2
- Replace url-regex and is-url-superb with custom implementation HOT 6
- cannot parse grid values 1/-1 HOT 5
- Postcss 8 support HOT 1
- Depends on package `url-regex` with high severity vulnerability HOT 3
- No comment in property value HOT 2
- Cannot parse proprietary IE functions HOT 3
- css clamp() syntax error HOT 4
- Cannot parse calculations without spaces around the * operator HOT 5
- Cannot parse `url()` with unquoted data url HOT 1
- Unable to clone value with quotes characters
- Multiple versions of this library can't coexist HOT 2
- v7 Information HOT 3
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 postcss-values-parser.