Comments (2)
Thanks for the issue!
Sorry for abandoning this project for a bit.
A simpler reproduction would be:
const Title = styled(Title)`
position: relative;
overflow: hidden;
@supports (-webkit-line-clamp: 4) {
-webkit-line-clamp: 1; //parse errors here
text-overflow: ellipsis;
}
The cause is: the plugin currently assumes syntax within styled-components string to be LESS but styled-components allows more syntax. We should definitely bring this in line with what's acceptable at runtime.
As a workaround, if I understand correctly, one could surround the properties inside @supports
with a rule-set with a '&' selector, it would be processed to the equivalent CSS :
const Title = styled(Title)`
position: relative;
overflow: hidden;
@supports (-webkit-line-clamp: 4) {
& {
-webkit-line-clamp: 1;
text-overflow: ellipsis;
}
}
`
from webstorm-styled-components.
I'd like bring the plugin closer to parsing the same set of syntex that styled-components actually accepts. @mxstbr, can you help figure out what other syntax styled-components supports that's not present in CSS/Less?
Semicolons seem to be optional, as one example.
It seems to me like styled-components uses stylis.js to parse styles internally, but then there is also the PostCSS parser used in one place.
If stylis is what's used, should I assume the stylis tests are a good reference of what's supported and what's not?
from webstorm-styled-components.
Related Issues (20)
- Is there no highlight and prompt when used with tailwind?
- Is there no highlight and prompt when used with tailwind?
- [Feature Request] Show which HTML tag is used
- Problem with media queries HOT 1
- Wrong hex-color format and No auto line-break with Emmet HOT 1
- Indent size is ignored and only works on first line
- Support for xstyled/styled-components
- plugin doesn't work in intellij 2022.3.2 HOT 1
- Feature request: support vars as "value" strings, not just key-value css strings HOT 2
- Selector is never used HOT 1
- \t chapter in copy-pasted code HOT 4
- styled-components-breakpoints support
- [Bug][Typescript] Very slow props suggestions and no value suggestions when when using styled.div syntax
- Pls Fix Webstorm 2020.2 compatibility issue HOT 1
- Re-configure branch protection policy for this repo HOT 2
- String interpolation not being autocompleted
- Issues with parsing & signs HOT 3
- [Feature Request] Refactor to styled component HOT 2
- Webstorm 2020.3 - not working HOT 7
- Highlight var in template string
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 webstorm-styled-components.