Create custom Stylelint syntax so you can use Stylelint with Emotion

[srmagura]

• Thanks @Alecell for researching this. His conclusions
• Discussed here in Stylelint repo: https://github.com/stylelint/stylelint/issues/5990
• Collaborate with styled-components team on this? Discussion in styled-components repo
• This is a low priority feature for us (the Emotion team) so this would probably need to be contributed by a community member. It would likely be a separate package outside of the Emotion repository anyway.

[leohxj]

how is going?

[Alecell]

@leohxj I believe it wasn't started already 😕

[jacobrienstra]

For what it's worth I was fiddling with this today and https://github.com/jacobrienstra/postcss-lit/commit/bf29170154f66f4466a7590fa8690d3e027a63e6 just adding 'jsx' in the babel parser did a lot of the initial work. It parses and rearranges the template literals. Still can't insert empty lines for some reason, or won't, and it doesn't handle literals within the css literal well.

[KrzysztofZawisla]

Any progress? 👀

[karlhorky]

There are more details over here: https://github.com/styled-components/styled-components/issues/3607#issuecomment-1000937952

---

Our config, which we use for linting CSS in .css files, Emotion in .js and .tsx files:

stylelint.config.cjs

/** @type { import('stylelint').Config } */
const config = {
  extends: [
    'stylelint-config-recommended',
    'stylelint-config-styled-components',
    'stylelint-config-prettier',
  ],
  rules: {
    'no-descending-specificity': null,
  },
  overrides: [
    {
      files: [
        '**/*.js',
        '**/*.cjs',
        '**/*.mjs',
        '**/*.jsx',
        '**/*.ts',
        '**/*.tsx',
      ],
      processors: ['stylelint-processor-styled-components'],
      customSyntax: 'postcss-scss',
    },
  ],
};

module.exports = config;

https://github.com/upleveled/eslint-config-upleveled/blob/main/templates/stylelint.config.cjs

It mostly works - at least better than nothing.

As soon as either Emotion or Styled Components can provide an updated solution (eg. a customSyntax) for Stylelint v14, we will gladly switch to that.

[karlhorky]

@Andarist @emmatown would creating this Stylelint syntax be something that the Stylelint team would take over? Would be great to get first-class support!

Similar issue over in the Styled Components repo over here: https://github.com/styled-components/styled-components/issues/3607#issuecomment-1000937952

[karlhorky]

I've opened the following issue to ask for a customSyntax for Styled Components / Emotion in the Styled Components issues too:

• https://github.com/styled-components/styled-components/issues/3897

[karlhorky]

In the meantime, there have been two custom syntaxes published 🎉🙌

• postcss-styled-syntax by @hudochenkov https://github.com/styled-components/styled-components/issues/3897#issuecomment-1372362580
• postcss-styled-components by @43081j https://github.com/styled-components/styled-components/issues/3897#issuecomment-1365245338

I would suggest that anyone looking to set up Stylelint with Emotion or Styled Components to try these out!

Super big thanks to @43081j and @hudochenkov for putting in the work to get these out the door!

[karlhorky]

So now that there are these two custom syntaxes, maybe this issue can be closed now @srmagura?

[srmagura]

Thanks for implementing this :)

[scottdickerson]

I didn't have any luck getting either to work with emotion. When running postcss-styled-components on this code

const linkStyles = (isDisabled?: boolean, font = '', color: LinkColor = 'turquoise90') => css`
  ${expandFontTheme(theme.font[font])};

I get these kinds of errors

[postcss (styled-components)] Skipping template (file: Link/Link.tsx, line: 35) as it included either invalid syntax or complex expressions the plugin could not interpret. Consider using a "// postcss-styled-components-disable-next-line" comment to disable this message

With postcss-styled-syntax I get

  packages/typography/src/Link/Link.tsx:37:3
  ✖   35:95   Unexpected empty line                                              no-empty-first-line
  ✖   35:95   Unexpected extra semicolon                                         no-extra-semicolons

Is anybody else having any luck?

[hudochenkov]

@scottdickerson could open an issue with full example and info? I can take a look if it's something with syntax, Stylelint, or something else.

Is anybody else having any luck?

postcss-styled-syntax works great for my Styled Components code base.

[karlhorky]

Is anybody else having any luck?

postcss-styled-syntax is also working for our Emotion codebase, details here:

• https://github.com/styled-components/styled-components/issues/3607#issuecomment-1429846700

[bertuz]

I've tried to adopt postcss-styled-syntax unsuccessfully: when I run stylelint it exits with process status 0, without any error I should expect:

◼ bertuz.github.io / $ yarn stylelint pages/index.tsx                                                                                                                                                                                                
yarn run v1.22.19
$ /<path>/node_modules/.bin/stylelint pages/index.tsx
✨  Done in 0.66s.

whereas if I try to run with postcss-css-in-js, although discontinued, I get all the expected emotion's issues I expect:

{  
"extends": ["stylelint-config-standard"],  
"customSyntax": "postcss-styled-components"  
}

any other person still facing this?