menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

styled-components

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress!

Channels
Team

Hi Folks, I am facing problems with styled component + stylelint

August 19, 2019 at 1:52pm

Hi Folks, I am facing problems with styled component + stylelint

August 19, 2019 at 1:52pm
Do you have any tip on what I am doing wrong here?
const PageSection = styled.div`
@media screen and (min-width: ${screen.sm.min}){ // This one is violating block-opening-brace-space-before
margin: 4% 0;
}
@media screen and (min-width: ${contentMax}){ // This one is violating block-opening-backtick-space-before
margin: 64px 0;
}
`;
const Background = styled.div`
${({ colorOverride }) => colorOverride && css`background-color: ${colorOverride}`}; // This one is violating value-keyword-case (dummyValue should be dummyvalue) and block-closing-backtick-space-before
overflow: hidden;
position: absolute;
`;
My .stylelintrc:
{
"processors": ["stylelint-processor-styled-components"],
"extends": [
"stylelint-config-standard",
"stylelint-config-styled-components"
],
"plugins": ["stylelint-order"],
"rules": {
...
}
}

August 19, 2019 at 9:43pm
Are you saying that the linter is not running correctly on that file? or are you saying you dont know how to fix the issues?
const PageSection = styled.div`
@media screen and (min-width: ${screen.sm.min}) {
margin: 4% 0;
}
@media screen and (min-width: ${contentMax}) {
margin: 64px 0;
}
`;
const Background = styled.div`
background-color: ${({ colorOverride }) => colorOverride ? colorOverride : 'transparent'};
overflow: hidden;
position: absolute;
`;
should fix your issues if its the latter. I would suggest looking at https://stylelint.io/user-guide/rules if you can't tell what the error is trying to say.
like-fill
1