Comments (2)
I think this might be similar to #64 and linked issues, but, not exactly the same, so still nowt implemented.
I also wonder if it's possible to get this done locally by editing Language Injections.
from webstorm-styled-components.
I managed to use language injections to solve the problem 80% of the way.
I created these two injections:
<LanguageInjectionConfiguration>
<injection language="CSS" injector-id="js">
<display-name>custom injection - css var literals, except in markup</display-name>
<prefix>div { color:</prefix>
<suffix>}</suffix>
<value-pattern>^(var\(.+?\)?)$</value-pattern>
<single-file value="false" />
<place><![CDATA[jsExpression()]]></place>
</injection>
</LanguageInjectionConfiguration>
<LanguageInjectionConfiguration>
<injection language="CSS" injector-id="xml">
<display-name>custom injection - css vars in jsx/tsx markup</display-name>
<prefix>div { color:</prefix>
<suffix>}</suffix>
<value-pattern>^(var\(.+?\)?)$</value-pattern>
<single-file value="false" />
<place><![CDATA[xmlAttribute().withLocalName(string().matches(".*"))]]></place>
</injection>
</LanguageInjectionConfiguration>
By adding them, I got the code to highlight and colorize all "var(--some-var-here)"
strings. This solves my use case, although I admit it doesn't fully solve the entire problem I described. Also, it still doesn't give me autocomplete (which I really wanted to have); but, since I chose CSS
instead of LESS
, it will show error underlines for any nonexistent variable names, which is close to an autocomplete.
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
- Selector is never used HOT 5
- \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.