stylelint-order: Properties-alphabetical-order mixin error within styled-components

I have a dumb hack for this, that doesn’t really fix the problem but at least suppresses the error in many scenarios. This works because the list from css-known-properties out-of-the-box comes alphabetized with vendor prefixes, as you’d expect.

// .stylelintrc.js

const properties = require('known-css-properties').all;

module.exports = {
  processors: ['stylelint-processor-styled-components'],
  plugins: ['stylelint-order'],
  rules: {
    'order/properties-order': [...properties, '-styled-mixin0'], // alphabetize, but put Styled Components last

The real problem is that certain properties used by Styled Components, et al shouldn’t be alphabetized at all—they either need to come first or last depending on the situation. Anyway, what I’d like to see with this plugin would be an ignore option that would let you whitelist things like -styled-mixin0, and in the sorting algorithm would just leave this as-is wherever it’s found.

I could open a PR for this if this is desirable to others.

@hudochenkov I’m sorry—I’ve read this entire thread, and I know you keep saying that, and feel like you’re being ignored. But that doesn’t seem to be the case. As of stylelint 10.1.0 and Styled Components 5.0.0-beta.3 it does not work without the processor. This is what I see:

Expected empty line before declaration (declaration-empty-line-before)stylelint(declaration-empty-line-before)

Not only does that error appear in every Styled Components block, but without the processor, all the other lint rules stop working (such as alphabetization). That’s trying to run it without stylelint-processor-styled-components.

What’s more, the Styled Components documentation still recommends using the processor, and the repo is still actively maintained. It’s hard to see how to use Styled Components in Stylelint without this.

I’m facing the same issue. Would it make sense to add an option to ignore the sorting when ${font('sans-serif', 14, 600, #000)}; is detected? E.g. ignore ${ or something similar?

Imo it would be handy

What confused us was the messaging here. I see issues like this one that are working toward deprecating processors. And I’m all for it! Love the idea of Stylelint supporting CSS-in-JS natively 🎉!

We can (and will) open up tickets, for sure. But when you say “it supports,“ that’s not accurate because for (arguably) the most popular CSS-in-JS library, Styled Components, it is clearly and obviously broken. It is lacking the most basic of support. Let’s just level with the fact that it doesn’t work, and the official Styled Components documentation still recommending you to use the processor agrees with this.

Saying “it works now” isn’t correct. But saying “we’re moving toward deprecating processors, and want to be able to support Styled Components without it” is awesome! 💯 All in favor of working for that solution. Hopefully that clarifies the disconnect here.

While fixing everything in stylelint could take a while, users want to continue using processor in the meanwhile.

Consider contributing a fix to ignore -styled-* things.

I removed "processors": "stylelint-processor-styled-components", and my linter errors are no longer working on Stylelint 9.6.0

I’m getting it. styled-components processor were introduced long before stylelint was supporting CSS-in-JS. Now there are less reasons to use processor. There are some problems which developers of stylelint don’t know about, because users don’t report them.

What I see from this thread, that users facing problems with built-in support, so they choose quick solution — use processor, and users happy unless process backfires sometimes (like this issue). It’s a workaround to a problem and a short term solution. I’m asking to invest a little bit of time to long term solution — report issues you’re encountering to stylelint repository. Help us to help you and make better tool for everyone.

@dangodev why stylelint-processor-styled-components is used? stylelint supports styled components out of the box without the need for processor.

Can we please reopen this issue for a workaround, since stylelint-processor-styled-components can’t be changed to improve this?

I think the best we can do is automatically ignore rules starting with -styled-.