Templates and indentation false positives

[ntdesmond]

I searched a syntax that would not report arrow functions in interpolation as @stylelint/postcss-css-in-js does.

Tried your package and not only it didn't handle the interpolation properly, but reported even more errors as it didn't like the indentation. I guess it has something to do with indentation rule that I use in my config.

interface ButtonProps {
  color?: 'negative' | 'positive';
  size?: 'small' | 'normal';
}

// Errors in the CSS below:
// * Expected indentation of 0 spaces  indentation
// * Unexpected unknown function "${"  function-no-unknown
const buttonFontSize = css<ButtonProps>`
  font-size: ${({ size }) => (size === 'small') ? '0.8em' : '1em'};
`;

Technical details

package versions from package.json:

    "postcss-styled-syntax": "^0.2.0",
    "stylelint": "^14.16.0",
    "stylelint-config-recommended": "^9.0.0",
    "stylelint-config-styled-components": "^0.1.1",

.stylelintrc:

{
  "extends": [
    "stylelint-config-recommended",
    "stylelint-config-styled-components"
  ],
  "rules": {
    "indentation": 2,
    "declaration-block-semicolon-newline-after": "always",
    "declaration-colon-newline-after": "always-multi-line"
  },
  "overrides": [
    {
      "files": [
        "**/*{.tsx,.ts}"
      ],
      "customSyntax": "postcss-styled-syntax"
    }
  ]
}

---

P.S. I switched to 43081j/postcss-styled-components which does not have these issues.

[hudochenkov]

Thank you for your report!

it didn't handle the interpolation properly

Could you explain what was the problem?

I guess it has something to do with indentation rule that I use in my config.

You're right. There is an issue within indentation rule code. This issue won't be fixed, because indentation rule will be deprecated in upcoming stylelint v15.

Unexpected unknown function "${" function-no-unknown

Again, issue with stylelint rule. This is something I can look into, as it's also in my to-do :)

Funny fact, postcss-styled-components doesn't show an error, because it replace value of font-size and Stylelint see it as font-size: POSTCSS_styled-components_0.

P.S. I switched to 43081j/postcss-styled-components which does not have these issues.

Whatever works for you. Be aware that it currently doesn't support a lot of things related to interpolations and throws parsing errors in many common styled-components use cases. But I know that author of that package works to improve support.

[hudochenkov]

For function-no-unknown for now you could use:

'function-no-unknown': [
    true,
    {
        ignoreFunctions: [/^\${/, /^`/],
    },
],

I used this configuration with @stylelint/postcss-css-in-js and it works with this syntax.

[hudochenkov]

Opened a PR in stylelint https://github.com/stylelint/stylelint/pull/6565

[hudochenkov]

function-no-unknown will be fixed in stylelint v15, when it's released.

[meriouma]

Any chance the indentation bug gets fixed, to be compatible with https://github.com/elirasza/stylelint-stylistic or https://github.com/firefoxic/stylelint-codeguide ?

[hudochenkov]

@meriouma it's up to developers of indentation rule to adjust it to work with this syntax. I'm pretty sure the rule is written for standard CSS and it doesn't expect to have properties outside of rules as we have in CSS-in-JS.