-1

I get an error Unknown word CssSyntaxError for the following line:

animation: ${props => (css${DeterminateFill(props)} 1s ease-in forwards)};

It is within the following styled component

const DeterminateLinearProgressDiv = styled(ProgressDiv)`
  animation: ${props => (css`${DeterminateFill(props)} 1s ease-in forwards`)};
`

The DeterminateFill is as follows:

const DeterminateFill = (props) => {
  const valuePercent = `${props.value}%`
  const startPercent = `${props.start}%`

  return keyframes`
    0% {left: 0%; width:  ${startPercent};}
    100% {left: 0%; width: ${valuePercent};}
  `
}

The code works fine based on my expectation and started to use stylelint today.

    "stylelint": "^13.13.1",
    "stylelint-config-recommended": "^5.0.0",
    "stylelint-config-styled-components": "^0.1.1",
    "stylelint-processor-styled-components": "^1.10.0",

and stylelint.config.js set as

module.exports = {
  processors: ['stylelint-processor-styled-components'],
  extends: [
    'stylelint-config-recommended',
    'stylelint-config-styled-components',
  ]
}
joe
  • 23
  • 6

1 Answers1

1

The solution:

  animation: ${props => (css`${DeterminateFill(props)}`)} 1s ease-in forwards;

move the 1s ease-in forwards

joe
  • 23
  • 6