styled-components

styled-components copied to clipboard

Hey folks thanks for making Styled Components. Read through the template, checked Stack Overflow, this feels like the most appropriate place to post this issue.

Stylelint 14.0.0 shipped and it appears to have broken or at least set out to deprecate (loudly) the Styled Components tooling linked to from your docs.

The tooling linked to in Styled Components docs lives in an archived repository. Generally, an archived repository indicates EOL for developer tools.

Should we update the docs to no longer link to this tooling if it's not supported and no longer accepts issues?

Are there any plans to restore support for Stylelint with Style Components v6.0 release?

Great tooling is half the user story here.

Would love to know if there is a recommended course of action for today and if there are any exciting plans for the future.

Thanks 💅

Yeah, I also was looking for options to have stylelint for styled-components, it was quite useful.

I got linting for styled-components done this way:

.stylelintrc

{
  "extends": ["stylelint-config-recommended"],
  "overrides": [
    {
      "files": ["**/*.scss"],
      "customSyntax": "postcss-scss",
      "rules": {
        "at-rule-no-unknown": null
      }
    },
    {
      "files": ["**/*.{js,ts}"],
      "customSyntax": "@stylelint/postcss-css-in-js",
      "rules": {
        "at-rule-no-unknown": null
      }
    }
  ],
  "rules": {
    "at-rule-no-unknown": null
  }
}

package.json

{
  "scripts": {
    "lint:style": "./node_modules/.bin/stylelint ./src/**/*.{css,scss,js}",
  },
  "dependencies": {
    "next": "^12.0.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "styled-components": "^5.3.0",
  },
  "devDependencies": {
    "@stylelint/postcss-css-in-js": "^0.37.2",
    "babel-plugin-styled-components": "^1.13.2",
    "postcss": "^8.3.6",
    "postcss-scss": "^4.0.2",
    "postcss-styled": "^0.34.0",
    "postcss-syntax": "^0.36.2",
    "react-test-renderer": "^17.0.2",
    "stylelint": "^14.0.1",
    "stylelint-config-recommended": "^6.0.0"
  }
}

Hey @lauriskuznecovs - I tried your setup with the two files you put above and it runs but doesn't seem to actually fix or change or even output anything. Are you possibly able to setup a small github project or codesandbox with this working so I can have a look, if possible? Seems that stylelint broke everything to do with linting styled-components in 14...

thanks @lauriskuznecovs 🎉 you helped me to realize that I need to remove processor to make it working 👍

but yeah, it would be great to update styled docs regarding stylelint 🙇‍♂️

@lauriskuznecovs - thanks for the config. It really helped me create one for my create-react-app app.

I was able to get styled components and stylelint working with the following config:

module.exports = {
  extends: [
    'stylelint-config-recommended',
    'stylelint-config-styled-components'
  ],
  overrides: [
    {
      files: ['**/*.{js,ts,jsx,tsx}'],
      customSyntax: '@stylelint/postcss-css-in-js'
    }
  ]
};

My package resolutions are as follows:

{
  "scripts": {
    // other scripts omitted for brevity
    "lint:styles": "stylelint",
    "lint:styles:all": "npm run lint:styles ./**/*.{scss,css,jsx,js,tsx,ts}",
  },
  "dependencies": {
    // other deps omitted for brevity
    "styled-components": "^5.3.3",
  },
  "devDependencies": {
    // other deps omitted for brevity
    "@stylelint/postcss-css-in-js": "^0.37.2",
    "stylelint": "^14.1.0",
    "stylelint-config-recommended": "^6.0.0",
    "stylelint-config-styled-components": "^0.1.1",
  },
}

Hi, I've installed the almost the same dependencies as here https://github.com/styled-components/styled-components/issues/3607#issuecomment-964230618, but still get some false errors.

I'm on node v14.18.1

Here is the packages versions (removed irrelevant ones):

 {
    "babel-plugin-styled-components": "1.13.2",
    "postcss": "8.4.4",
    "postcss-scss": "4.0.2",
    "postcss-styled": "0.34.0",
    "postcss-syntax": "0.36.2",
    "prettier": "2.3.1",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "styled-components": "5.3.0",
    "stylelint": "14.1.0",
    "stylelint-config-recommended": "6.0.0",
    "typescript": "4.3.2",
},

First error is Unknown word CssSyntaxError. It shows the first comment (// JS type comment) inside a styled definition (styled.button``) as error. The second comment is not shown as an error. If I remove the first comment, the second comment becomes an error. Changing to CSS type comment removes the error.

Second error is Unclosed string CssSyntaxError. padding: ${({ focused }) => (focused ? '0 12px' : '1px 13px')}; '1px 13px' is targetted as an error. The previous line which is almost the same doesn't trigger any error border-width: ${({ focused }) => (focused ? '2px' : '1px')};

Does this ring a bell to anyone?

Solved

I've tried each of the above, but unfortunately none of them worked for me. I did end up configuring stylelint so that it meets my needs with styled-components & typescript so I thought I would share to help others who are also struggling with the migration over to the new version.

My solution

Based on the migration guide

If you use Stylelint to lint anything other than CSS files, you will need to install and configure these syntaxes.

Update Modules

I will only show relevant parts:

// package.json
...
"dependencies": {
  ...
},
"devDependencies": {
...
+  "postcss-scss": "^4.0.2",
-   "stylelint": "^13.13.1",
+  "stylelint": "^14.2.0",
-   "stylelint-config-standard": "^22.0.0",
+  "stylelint-config-standard-scss": "^3.0.0",
},
...

Summarized:

• Replace stylelint-config-standard with stylelint-config-standard-scss → Otherwise you will see a lot of function-calc-no-invalid errors even though everything is valid (see for more information).
• npm i -D postcss-scss → due to styled-components using scss syntax
• npm i -D stylelint@latest → want latest version (14.x.x) as it is the whole purpose of the migration from v13.x.x

npm uninstall stylelint-config-standard && npm i -D stylelint@latest stylelint-config-standard-css postcss-scss

Now Update Stylelint Config

// .stylelintrc.json
{
   "processors": ["stylelint-processor-styled-components"],
-  "extends": ["stylelint-config-standard", "stylelint-config-styled-components"],
+ "extends": ["stylelint-config-standard-scss", "stylelint-config-styled-components"],
+ "customSyntax": "postcss-scss",
   ...
}

New config:

{
  "processors": ["stylelint-processor-styled-components"],
  "extends": ["stylelint-config-standard-scss", "stylelint-config-styled-components"],
  "customSyntax": "postcss-scss",
  "rules": {
    "selector-type-case": ["lower", { "ignoreTypes": ["/^\\$\\w+/"] }],
    "selector-type-no-unknown": [true, { "ignoreTypes": ["/-styled-mixin/", "/^\\$\\w+/"] }],
    "value-keyword-case": ["lower", { "ignoreKeywords": ["dummyValue"] }],
    "declaration-colon-newline-after": null
  }
}

Lastly, I updated the validated languages in VS Code preferences (based on step 3 of this)

I've checked this with multiple scenarios and it seems like style errors are caught when needed. For example, 0px as a unit gives:

✖ Unexpected unit length-zero-no-unit

while 0 as a unit passes 🎉

PS

@emilie-t-ledn I am pretty confident that you see CssSyntaxError messages since you removed the styled-components processor. Give my solution a try, I think your issue will be fixed as well.

I can confirm @lbragile solution worked for me, but just a bit more info is needed. In package.json, I have:

"postcss": "8.4.4",
"postcss-scss": "4.0.2",
"postcss-styled": "0.34.0",
"postcss-syntax": "0.36.2",
...
"stylelint": "^14.2.0",
"stylelint-config-recommended": "6.0.0",
"stylelint-config-standard-scss": "^3.0.0",
"stylelint-config-styled-components": "^0.1.1",
"stylelint-processor-styled-components": "^1.10.0",

I needed to add all non-tsx files to my ignoreFiles (if someone has a better way to do this please say) else stylelint will try to lint .md files, .svg files, etc.

I needed to add this config to my vscode settings:

"editor.codeActionsOnSave": {
...
  "source.fixAll.stylelint": false
}

otherwise when you add 'typescriptreact' to validate files, and lint on save, it will just autoremove all your react code!

I hope this helps!

@james-reed-toshi Glad my solution was helpful to you.

I needed to add all non-tsx files to my ignoreFiles (if someone has a better way to do this please say) else stylelint will try to lint .md files, .svg files, etc.

I typically use the following script to lint:

"scripts": {
  "lint:code": "eslint src tests -c config/.eslintrc.js --max-warnings=0",
  "lint:style": "stylelint src --config config/.stylelintrc.json --max-warnings=0",
  "lint": "pnpm lint:code && pnpm lint:style",
  ...
}

However, if you only want to lint typescript files (using styled components), you could specify the path to be a glob: src/**/*.{ts,tsx} and that would ignore any other files you have in the src folder

I needed to add this config to my vscode settings:

"editor.codeActionsOnSave": {
...
  "source.fixAll.stylelint": false
}

otherwise when you add 'typescriptreact' to validate files, and lint on save, it will just autoremove all your react code!

Not sure about this, as I lint with scripts as mentioned above (this way you can add them to your CI pipeline).

Hope this helps 🙂

I needed to add this config to my vscode settings:

"editor.codeActionsOnSave": {
...
  "source.fixAll.stylelint": false
}

otherwise when you add 'typescriptreact' to validate files, and lint on save, it will just autoremove all your react code!

Thanks @james-reed-toshi! This part helped me a lot. It was driving me crazy for the last couple days.

@lbragile

Not sure about this, as I lint with scripts as mentioned above

This is just for vscode specific - I have auto-lint all files on save, and stylelint counts as a linter, and stylelint v14+ doesnt do autofix properly, so this just disables vscode from trying to apply autofix when I save files.

@lbragile For security reasons, I don't wan't to / can't use stylelint-processor-styled-components since this is not maintained anymore and haven't been updated since 2 years.

So your solution doesn't work for me, but thanks anyway.

stylelint.config.js

module.exports = {
    extends: [
        'stylelint-config-recommended',
        'stylelint-config-styled-components',
    ],
    overrides: [
        {
            files: ['**/*.tsx'],
            customSyntax: '@stylelint/postcss-css-in-js',
        },
    ],
};

package.json

{
  "dependencies": {
      "react": "^17.0.2",
      "react-dom": "^17.0.2",
      "styled-components": "^5.3.3"
  },
  "devDependencies": {
      "@stylelint/postcss-css-in-js": "^0.37.2",
      "@types/styled-components": "^5.1.19",
      "postcss-syntax": "^0.36.2",
      "stylelint": "^14.2.0",
      "stylelint-config-recommended": "^6.0.0",
      "stylelint-config-styled-components": "^0.1.1"
  },
  "scripts": {
      "lint:css": "stylelint --config ./stylelint.config.js './src/**/*.tsx'"
  }
}

The above executes, appears to lint, and even reported some issues. It seems to work.

Unclear what this is doing, why it's doing it, or how well it's doing it.

Hoping maintainers of styled-components have a little perspective to add.

👀 @probablyup

Thank you, @lbragile @james-reed-toshi @Lornz- combining your three solutions produced the results. Wow, what a ride.

Specifically, these three answers were key:

1. https://github.com/styled-components/styled-components/issues/3607#issuecomment-1000937952
2. https://github.com/styled-components/styled-components/issues/3607#issuecomment-1002538757
3. https://github.com/styled-components/styled-components/issues/3607#issuecomment-1003629265

With that setup + adding @shopify.stylelint-plugin's extends, these valid styled-component css blocks are all failing:

@media (min-width: ${({ theme }) => theme.breakpoints.md}) {

And this fails

 z-index: ${({ theme }) => theme.zIndex.above};

Still looking for a stylelint 14 + styled-components config that doesn't use deprecated packages + actually lints more complex js in scss like this 😢 disappointed at how poorly this is documented/tested.

After following these steps: https://github.com/styled-components/styled-components/issues/3607#issuecomment-1019256148 I'm still experiencing strange failures with stylelint 14 and styled-components for seemingly basic stuff:

e.g.

import { keyframes } from 'styled-components'

export const FadeIn = keyframes`
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
`

Stylelint: Expected keyframe name to be kebab-case

Happy I found this post. Thanks to @lbragile it also started working for me. Here is my setup:

package.json

  "scripts": {
    "lint:css": "npx stylelint 'src/**/*.ts'",
  }
  "devDependencies": {
    "postcss-scss": "4.0.3",
    "postcss-syntax": "0.36.2",
    "stylelint": "14.5.0",
    "stylelint-config-standard-scss": "3.0.0",
    "stylelint-config-styled-components": "0.1.1",
    "stylelint-processor-styled-components": "1.10.0"
  },

.stylelintrc (only relevant parts)

 "processors": ["stylelint-processor-styled-components"],
  "extends": [
    "stylelint-config-standard-scss",
    "stylelint-config-styled-components"
  ],
  "customSyntax": "postcss-scss",
  "rules": {
    "alpha-value-notation": "number",
    "color-function-notation": "legacy",
    "declaration-colon-newline-after": null,
    "string-quotes": null,
    "selector-class-pattern": null,
    "selector-type-case": ["lower", {
      "ignoreTypes": ["/^\\$\\w+/"]
    }],
    "value-keyword-case": ["lower", {
      "ignoreKeywords": ["dummyValue"]
    }],
}

Thanks, @lauriskuznecovs. It worked for me.

https://github.com/styled-components/styled-components/issues/3607#issuecomment-1000937952 Works for me! However, I am getting some issue on Windows in vscode extension :( . I created a defect here. I hope it gets resolved soon.

#3607 (comment) Works for me! However, I am getting some issue on Windows in vscode extension :( . I created a defect here. I hope it gets resolved soon.

@psychobolt For windows we figured that you just need to remove the single quotation marks in the script:

  "scripts": {
    "lint:css": "npx stylelint src/**/*.ts",
  },

#3607 (comment) Works for me! However, I am getting some issue on Windows in vscode extension :( . I created a defect here. I hope it gets resolved soon.

@psychobolt For windows we figured that you just need to remove the single quotation marks in the script:

  "scripts": {

    "lint:css": "npx stylelint src/**/*.ts",

  },

I have no issue with the CLI. Just running into a issue with the VSCode stylelint runner. Quotes works for me as long as I escape them e.g. \"src/**/*.js\" .

Update: I have a solution that works, for windows. See https://github.com/stylelint/vscode-stylelint/issues/380#issuecomment-1048509213

After following these steps: #3607 (comment) I'm still experiencing strange failures with stylelint 14 and styled-components for seemingly basic stuff:

e.g.

import { keyframes } from 'styled-components'

export const FadeIn = keyframes`
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
`

Stylelint: Expected keyframe name to be kebab-case

I fixed that issue in the processor: https://github.com/psychobolt/stylelint-processor-styled-components/blob/a8f7cb15b42925a961ffd8af7c6e2ce13ffb3cd5/src/utils/general.js#L91

const wrapKeyframes = content => `@keyframes key-frames {${content}}\n`

You can use my fork instead:

  "devDependencies": {
    "stylelint-processor-styled-components": "https://github.com/psychobolt/stylelint-processor-styled-components"
  }

Optionally, you may create a rule to allow the "key-frames":

  "rules": {
    "keyframes-name-pattern": "^((key-frame)|([a-z][a-z0-9]*)(-[a-z0-9]+)*)$"
  },

Second regex clause is redundant but it allows kebab cases for your non styled-components. You can also supply other patterns if you don't want kebab cases. Enjoy!

Any official update on this?

Has anyone noticed linting styled-components / js has drastically slowed down after making this change? For me, stylelint is x3 slower 😬.

It's entirely possible that I've messed something up, but I haven't been able to find where .

Yes, noticeably slower for me too.

I finally made styled-components linting work again thanks to @lbragile solution, thanks for that.

But I quickly faced an issue which is the unavailability of stylelint --fix when using a processor :|

Did anyone find a durable solution for stylelint usage on styled-components in 2022? And/or gave postcss-lit a try (not clear if it could do the job, or just process literals)?

{
  "processors": ["stylelint-processor-styled-components"],
  "extends": [
    "stylelint-config-recommended",
    "stylelint-config-styled-components"
  ],
  "rules": {
    "property-no-vendor-prefix": null,
    "no-invalid-double-slash-comments": null
  }
}`

{
  "scripts": {
    "dev": "npx kill-port 3000 && next dev -p 3000",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "lint:css": "stylelint './src/**/*.ts'",
  },
  "devDependencies": {
    "stylelint": "^14.9.1",
    "stylelint-config-recommended": "^8.0.0",
    "stylelint-config-standard": "^26.0.0",
    "stylelint-config-styled-components": "^0.1.1",
    "stylelint-processor-styled-components": "^1.10.0"
  }
}

Currently it gives me the following error in terminal. So question from my side is how can I get rid of this messages?

When linting something other than CSS, you should install an appropriate syntax, e.g. "@stylelint/postcss-css-in-js", and use the "customSyntax" option

Seems weird since the linter should only be working with styled-components and not with postcss-css-in-js or am I missing something?

@chiholiu10 @stylelint/postcss-css-in-js seems to have been deprecated.

One of the biggest changes we've made is removing the syntax option (context here) and no longer bundling syntaxes (this one included) in Stylelint itself. Users will need to extend stylelint (via shared-configs, plugins and custom syntaxes) to lint something other than vanilla CSS.

The trick seems to replace @stylelint/postcss-css-in-js by both:

• stylelint-processor-styled-components as a processor, to handle styled components
• postcss-scss as a customSyntax, to handle SCSS additions (which are used in CSS-in-JS)

Stylelint new config:

    {
    "processors": ["stylelint-processor-styled-components"],
    "extends": [
      "stylelint-config-standard-scss",
      "stylelint-config-styled-components"
    ],
    "customSyntax": "postcss-scss",
    // ...
  }

The bad new is that stylelint --fix option does not work when using a processor.

So yeah... Mixed feelings :| The current state of stylelint + styled-components is a bit fuzzy.

Our config, which we use for linting both Emotion / Styled Components in .js and .tsx files and also CSS in .css 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;

package.json

    "postcss": "8.4.19",
    "postcss-scss": "4.0.5",
    "stylelint": "14.15.0",
    "stylelint-config-prettier": "9.0.4",
    "stylelint-config-recommended": "9.0.0",
    "stylelint-config-styled-components": "0.1.1",
    "stylelint-processor-styled-components": "1.10.0",

• templates/stylelint.config.cjs in main branch

It mostly works - at least better than nothing.

Thanks to:

• @monsieurnebo for posting the configuration above
• @lbragile for posting this config

Another justification for this can be found here:

• https://github.com/intimitrons4604/website/commit/ded0a2233d7a098dc512debf49c437884ff3ec8c

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.

I ran into this today with a fresh project after following the instructions at https://styled-components.com/docs/tooling#stylelint. After looking at the discussion above, and at https://github.com/styled-components/styled-components-website/issues/671, I realized that the more up-to-date stylelint config is:

{
  "extends": [
    "stylelint-config-recommended",
    "stylelint-config-styled-components"
  ],
  "customSyntax": "@stylelint/postcss-css-in-js"
}

Which works great! The relevant dependencies are:

"@stylelint/postcss-css-in-js": "^0.38.0",
"stylelint": "^14.16.0",
"stylelint-config-recommended": "^9.0.0",
"stylelint-config-styled-components": "^0.1.1",

Would the maintainers welcome a PR against https://github.com/styled-components/styled-components-website to update the docs accordingly?

Thanks a lot @TrevorBurnham! I tried your setup and it indeed works, but with a couple extra dependencies:

"@stylelint/postcss-css-in-js": "^0.38.0",
"postcss": "8.4.20",
"postcss-syntax": "0.36.2",
"stylelint": "^14.16.0",
"stylelint-config-recommended": "^9.0.0",
"stylelint-config-styled-components": "^0.1.1",

I still fail to make the VSCode stylelint extension work though :(. Has anyone succeeded with that?