Possible to lint styles outside styled component definition?

[cpmotion]

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?

[Nick Ribal]

How would it work? How can the processor discern a template literal which is used for styling from any other?

[cpmotion]

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.

[Nick Ribal]

Yeah, I totally forgot about the css helper cause I don't use it. I believe that's the way to go.
This is how it looks like for me in vscode:

You can ignore the blue squiggly underline - that's the spell checker.

[cpmotion]

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.