Styled Components - Reorder on save

[samrith-s]

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

{
    "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!

[brandonkal]

Let me help...

1. First, you must abandon stylelint-processor-styled-components.
2. Autofix is new but that won't work with a processor. The Stylelint team intends to eventually deprecate the processor API now that the (built in) postcss-syntax is the preferred way to go. You can find the discussion on their repo.
3. Stylelint now has "css-in-js" syntax, so setting the syntax to "scss" is incorrect. In fact, you shouldn't explicitly set it in your config file... Stylelint will detect the syntax for you.
4. Autofix is still experimental. It is not something you can safely do on save. If you are using VSCode, the vscode-stylelint extension does not support this due to a list of issues with stylelint core.

So to be safe, prefer to save first and then run stylelint --fix. It will function if you remove syntax config and the processor.

[samrith-s]

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 stylelint-config-rational-order, this error goes away.

Here is my updated .stylelintrc

{
    "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
    }
}

[brandonkal]

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.

[samrith-s]

@brandonkal Thanks a lot for the detailed comment. It is very annoying indeed.

Also, can you probably help me out, on how to configure stylelint-order without using stylelint-config-rational-order?

[LeeRayno]

@samrith-s there is a vscode plugin may help you https://github.com/stuartZhang/vscode-stylelint

[brandonkal]

@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',
      },
    ],
  },
}

[UnbearableBear]

That's exactly what I needed @brandonkal, huge thanks !

[evadecker]

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?

[brandonkal]

@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 stylelint --fix on save and prefer to run it manually after staging changes in git.