Styled Components - Reorder on save
See original GitHub issueHey,
I’ve been using this awesome plugin to order styles across our entire organization. It works really well, and everyone is acquainted with the setup.
We are moving from Sass to the very amazing Styled Components. Unfortunately, this config doesn’t reorder the styles written in a template literal.
Here is my .stylelintrc
{
"defaultSeverity": "warning",
"extends": [
"stylelint-config-recommended",
"stylelint-config-styled-components",
"stylelint-order",
"stylelint-config-rational-order"
],
"plugins": [
"stylelint-prettier",
"stylelint-order",
"stylelint-config-rational-order/plugin"
],
"syntax": "scss",
"processors": ["stylelint-processor-styled-components"],
"rules": {
"order/properties-order": [],
"plugin/rational-order": true,
"at-rule-empty-line-before": [
"always",
{
"except": ["first-nested"],
"ignoreAtRules": ["import"]
}
],
"block-closing-brace-newline-after": "always",
"block-opening-brace-space-before": "always",
"prettier/prettier": true,
"property-no-vendor-prefix": true,
"rule-empty-line-before": [
"always",
{
"except": "first-nested"
}
],
"selector-no-vendor-prefix": true,
"unit-case": "lower",
"value-no-vendor-prefix": true
}
}
Am I missing something?
Cheers!
Issue Analytics
- State:
- Created 4 years ago
- Comments:9
Top Results From Across the Web
Tooling - styled-components
npm install --save-dev babel-plugin-styled-components. Then add it to your babel configuration like ... The plugin call order in your .babelrc file matters.
Read more >How to keep styled-components styles separate in different ...
I'm using higher order components to reuse React/Next.js components but with different styles. However, this works only for vanilla React ...
Read more >The 3 essentials to get started with styled-components
In order to keep the code well structured, let's create a components/Home ... import styled from "styled-components"; export const Home ...
Read more >Styled components, the styling library for your React apps you ...
There are a ton of ways to style components in React. This is probably my favorite ... yarn add styled-components // OR npm...
Read more >DRY-ing up styled-components - CSS-Tricks
I like working with styled-components. They allow you write CSS in your JavaScript, keeping your CSS in very close proximity to your ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@samrith-s Just in case you are still looking for a solution, here is the relevant config that won’t cause vscode-stylelint to throw. Note I am also setting the severity to warning as the css is still valid when out of order.
Let me help…
stylelint-processor-styled-components
.So to be safe, prefer to save first and then run
stylelint --fix
. It will function if you remove syntax config and the processor.