Running stylelint over custom styled-components template string

Question

On a project we have custom templates string to abstract styled-components functions. For example, we have templates string for the media-queries that look like this one:

// Definition
const for1080p = (...args) => css`
  @media (min-height: 1080px) {
    ${css(...args)}
  }
`;

// Usage
const Logo = styled.div`
  width: 200px;

  ${for1080p`
    width: 300px;
  `}
`;

We made this choice because it keeps the original styled syntax. It is also nicely formated by prettier.

Our main problem today is that we don't know how to analyse with stylelint our CSS that are inside a custom template string.

For example:

const Logo = styled.div`
  widht: 200px; /* <--- Unexpected unknown property "widht" */

  ${for1080p`
    widht: 300px; /* <--- No error detected :( */
  `}
`;

Do you know how to do this?

user_6368363 · Answer

The CSS-in-JS parser built into stylelint doesn't yet support interpolation tagging, and therefore can't know that the second widht: 300px; is a declaration.

Until that support is added, you can either:

see how much mileage you get from the styled-components stylelint processor and its support for interpolation tagging
use standard CSS constructs, rather than custom templates string, for things like @media

user_2204146 · Answer

I think there is a way to do it now with https://github.com/styled-components/stylelint-processor-styled-components and as documentation states -

Combining with moduleName, importName and strict, you can tell the processor what kinds of tagged template literals to lint.

{
  "processors": [["stylelint-processor-styled-components", {
    "moduleName": "styled-components",
    "importName": ["default", "for1080p"], <---- here 
}

That stuff wasn’t tested by me, but I think it suppose to do the trick

Running stylelint over custom styled-components template string

2 Answers