-
Notifications
You must be signed in to change notification settings - Fork 61
interpolate tagging for media queries? #202
Comments
Ahhh, okay, the thing is what
I'll tag this as an enhancement now, but if you can't be bothered implementing it feel free to close the issue. |
@gex I think
|
@chinesedfan i was under the impression that the css rules inside my @emilgoldsmith i'm gonna try to add a pull request but it would be nice to solve this other issue at once. having this code const Button = styled.button`
width: 100%;
${props =>
props.danger
? css`
background: red;
color: white;
`
: '' /* sc-custom 'zoom: 1' */};
${desktop`
width: auto;
` /* sc-custom '@media (min-width: 75rem) { a { top: 1; } }' */};
` stylelint understands what's inside |
Hmm I'm not sure I understand the details of what you're saying @gex but I'll clarify something I'm not sure whether you understand or not: Our processor doesn't evaluate any Javascript whatsoever, it just reads your file as a static text file and parses the meaning of the Javascript without any evaluation and tries to extract the CSS to give to Stylelint so it can lint it. That means that we don't understand anything whatsoever inside any interpolation, as interpolations are javascript. Our processor just tries to replace interpolations with dummy CSS that won't make any stylelint errors but we will never be able to actually lint the contents of an interpolation. Then we'd need to follow imports and all kinds of crazy things, and it would suddenly possibly become very expensive in terms of RAM and CPU just for a linter, |
@emilgoldsmith linting was always magical for me so thank you for making it more clear! :) let me rephrase my questions. i'd like to solve two problems:
// instead of this
const A = styled.a`
color: blue;
${desktop`
color: lightblue;
` /* sc-custom '@media screen { a { top: 1; } }' */}
`
// i'd prefer this
const A = styled.a`
color: blue;
${/* sc-media */ desktop`
color: lightblue;
`}
`
// this doesn't have stylelint errors at the moment
const A = styled.a`
color: blue;
${desktop`
kolor: lightblue;
text-align: centaur;
`}
`
// this would have
const A = styled.a`
color: blue;
${/* sc-css */ desktop`
kolor: lightblue;
text-align: centaur;
`}
` but since we know what could contain css, and i mean lintable css ( edit: ...aaaand i just found #182 😇 |
I don't think we will ever support extracting anything from an interpolation to be honest, it'll be very hard to generalize it without evaluating CSS. I guess one could make a specific tag for breakpoints since it's a reocmmended SC pattern, and wraps it in a media query. It could then recurse on the TTL inside the interpolation. It would be a pretty custom case though, and not sure if enough users want it to support it? Maybe? I'm completely okay with as I said above allowing a config option that can let you define your own tags as shortcuts, I think that could make some people's life quite a bit easier so you don't have to write the ugly custom tags. Also beware though that processor support may be deprecated stylelint/stylelint#3408 and you might want to consider contributing to https://github.com/gucong3000/postcss-jsx instead |
hello,
i try to lint my styled components with stylelint order plugin and i don't know how to tag my tagged template literals i use for media queries.
my example component:
for this i get an
Expected -styled-mixin0 to come before width
error. as far as i understand i need something like${/* sc-block */ desktop``}
but it didn't help.i can solve this by something like
${/* sc-custom '@media screen{a{top:1}}' */ desktop``}
('@media screen {}'
would be an empty block so i needa
as a short selector andtop
as a short property) but it looks stupid and i'd like to avoid comments like this.is it possible to declare my own tags somehow? or do you know a better solution?
The text was updated successfully, but these errors were encountered: