Styled Components - Reorder on save

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]

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

[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.