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?

@Someone21 It was intentional. The purpose of a linter is to detect this kind of error automatically. — tzi, Dec 03 '20 at 17:57

score 1 · Answer 1 · answered Jun 01 '21 at 09:50

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

score 0 · Answer 2 · answered Dec 03 '20 at 17:43

0

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

answered Dec 03 '20 at 17:43

jeddy3

3,451
1
12
21

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. – tzi Dec 03 '20 at 18:15

Running stylelint over custom styled-components template string

2 Answers2