Not recognising infinity as valid keyword

[ZaynJarvis]

Environment

npx envinfo --system --binaries --npmPackages stylelint,styled-components,stylelint-processor-styled-components,stylelint-config-styled-components,stylelint-config-recommended --markdown --clipboard

System:

• OS: macOS 10.14.2
• CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
• Memory: 227.27 MB / 8.00 GB
• Shell: 3.2.57 - /bin/bash

Binaries:

• Node: 10.15.0 - /usr/local/opt/node@10/bin/node
• Yarn: 1.9.4 - /usr/local/bin/yarn
• npm: 6.4.1 - /usr/local/opt/node@10/bin/npm

npmPackages:

• styled-components: 4.0.2 => 4.0.2
• stylelint: ^9.6.0 => 9.6.0
• stylelint-config-recommended: ^2.1.0 => 2.1.0
• stylelint-config-styled-components: ^0.1.1 => 0.1.1
• stylelint-processor-styled-components: ^1.5.2 => 1.5.2

.stylelintrc

{
  "processors": ["stylelint-processor-styled-components"],
  "extends": [
    "stylelint-config-recommended",
    "stylelint-config-styled-components"
  ]
}

Reproduction

const circleFadeDelayRule = css`
  ${circleFadeDelay} 1.2s infinite ease-in-out both;
`;

https://www.webpackbin.com/bins/-KeeZCr0xKfutOfOujxN
https://codesandbox.io/s/rkmNRByE4

Steps to reproduce

Expected Behavior

lint success

Actual Behavior

app/components/LoadingIndicator/Circle.js
 18:31  ✖  Unknown word   CssSyntaxError

[chinesedfan]

Hi, can you provide more codes about circleFadeDelayRule? According to docs,

If you're interpolating a string you do not need to use this, only if you're interpolating a function.

[ZaynJarvis]

const circleFadeDelay = keyframes`
  0%,
  39%,
  100% {
    opacity: 0;
  }

  40% {
    opacity: 1;
  }
`;

const circleFadeDelayRule = css`
  ${circleFadeDelay} 1.2s infinite ease-in-out both;
`;

const Circle = props => {
  const CirclePrimitive = styled.div`
      ${ ... }
      animation: ${circleFadeDelayRule};
      ${ ... }
  `;
  return <CirclePrimitive />;
};

The issue here is that stylelint cannot recognize infinite in css template string.

I try with another setup in which

const circleFadeDelayRule = css`
  animation: ${circleFadeDelay} 1.2s infinite ease-in-out both;
`;
const Circle = props => {
  const CirclePrimitive = styled.div`
      ${ ... }
      ${circleFadeDelayRule};
      ${ ... }
  `;
  return <CirclePrimitive />;
};

which works fine.

Does this mean that styled component / (stylelint loader) cannot recognize css template string without style attribute?

[ZaynJarvis]

Is there a way for style lint to know that this is an interpolation?
like

const something = 'background'

const Button = styled.div`
  // Tell the processor that "something" is a property
  ${/* sc-prop */ something}: papayawhip;
`

suggested in the doc

The code is from react-boilerplate.
From the doc, it doesn't show this type of interpolation. Just wanna to make sure

• if this is against the rule of using styled component or
• it's not a recommended way or maybe
• it's a feature need to be implemented in stylelint processor.

[ZaynJarvis]

I tried /* stylelint-disable */ for this issue as well. It doesn't seem to work.

[chinesedfan]

Does this mean that styled component / (stylelint loader) cannot recognize css template string without style attribute?

I think yes. This processor will extract css from source files and send to postcss to parse. Without style attribute, it will throw an error because the extracted content is not completed css rule. Similar issues are #221, #222.

Personally, I have a tendency to treat it as a feature need to be implemented in stylelint processor. But it is not easy.

I tried /* stylelint-disable */ for this issue as well. It doesn't seem to work.

It is due to stylelint uses /* stylelint-disable */ to filter errors. But the parsing is failed at the beginning.

[ZaynJarvis]

Thank you.

[chinesedfan]

@emilgoldsmith @mxstbr Because the processor will extract everything from css helper and try to parse. The current website doc gives a not very good sample. Any ideas about the tradeoff between highlighting css helper and linting?

[chinesedfan]

With #258, we can skip parsing css helper. But if users want to only ignore part of them, let's track in #262.

[dbchristopher]

Running into the same issue due to keyframe animation changes in Styled Components 4.0. My workaround is to convert the tagged template literal to the tag function equivalent. Much less readable, but at least it gets stylelint to stop complaining:

const fadeIn = keyframes`...`

// EQUIVALENT TO: css`${fadeIn} 0.2s linear;`
const animationRule = css(
  (['', ' 0.2s linear;'] as any) as TemplateStringsArray,
  fadeIn
)

const StyledDiv = styled.div`
  animation: ${animationRule}
`