-
Notifications
You must be signed in to change notification settings - Fork 51
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Styled Components - Reorder on save #13
Comments
Let me help...
So to be safe, prefer to save first and then run |
Hey @brandonkal, Thanks a lot for the detailed reply. I did whatever you mentioned. Now everytime there is some error in my CSS-in-JS, the vscode-stylelint extension just throws an error like so: If I remove Here is my updated {
"defaultSeverity": "warning",
"extends": [
"stylelint-config-recommended",
"stylelint-order",
"stylelint-config-rational-order"
],
"plugins": [
"stylelint-prettier",
"stylelint-order",
"stylelint-config-rational-order/plugin"
],
"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
}
} |
Yes. I ran into that as well. It is a bug in stylelint-config-rational-order. Removing that and configuring the plugin directly worked for me. Also, the errors reported by rational-order contain an empty line. This is annoying but I have yet to search for a fix. I'd also prefer these as warnings rather than errors because they have no bearing on the validity of the CSS... Hope that helps. |
@brandonkal Thanks a lot for the detailed comment. It is very annoying indeed. Also, can you probably help me out, on how to configure |
@samrith-s there is a vscode plugin may help you https://github.com/stuartZhang/vscode-stylelint |
@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. module.exports = {
extends: ['stylelint-config-standard', 'stylelint-config-prettier'],
plugins: ['stylelint-order', 'stylelint-config-rational-order/plugin'],
rules: {
// Property Order
'order/properties-order': [[], { severity: 'warning' }],
'plugin/rational-order': [
true,
{
'border-in-box-model': false,
'empty-line-between-groups': false,
severity: 'warning',
},
],
},
} |
That's exactly what I needed @brandonkal, huge thanks ! |
Thanks @brandonkal, linting works with your solution. However, I'm still not able to get css files to reorder on save in VSCode. Is this possible? |
@kybradeck Reorder on save is possible with the forked stylelint plugin. I had to switch to it due to some other issues so I would recommend doing that. However, I personally don't run |
Hey,
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
Am I missing something?
Cheers!
The text was updated successfully, but these errors were encountered: