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?

Old

You mispelled width and wrote widht – Vaunt

@Vaunt It was intentional. The purpose of a linter is to detect this kind of error automatically. – Old

Oh ok thanks I dindnt know – Vaunt

Answer 1

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

Beaudette

Answer 2

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

Chaff

I do not think that "interpolation tagging" is the feature I'm looking for. Interpolation tagging allows you to construct CSS declarations from dynamic and non-autonomous parts. For example, you can construct a property name. The CSS I write contain complete declarations, but I do not use the styled.something token that trigger the stylelint. – Old