Possible to lint styles outside styled component definition?
cpmotion opened this issue · 4 comments
Say I want to generate common styles from a function or include from a variable:
// Stylelint will NOT touch these...
const commonStyles = `
display: flex;
margin: 100px;
`;
// Stylelint will touch these...
const Comp1 = styled.div`
${commonStyles}
background: red;
`;
const Comp2 = styled.div`
${commonStyles}
background: blue;
`;
Is there anyway to get linting on styles outside an actual component definition?
How would it work? How can the processor discern a template literal which is used for styling from any other?
Not sure. Did just realize that, I think, replacing what I have above with the Styled css helper may solve for same result.
const commonStyles = css`
display: flex;
margin: 100px;
`;
Haven't tested against cli yet but vscode seems to yell at me with a mistyped property. To @elektronik2k5 question about mine, one clunky way could have been some sort of comment annotation?? But, not ideal and the css helper fn may work just fine if it's doing exactly same thing.
Cool thanks for the confirm! I'll see how it goes when we automate lint via script and if there's any issues I'll reopen to discuss options.