Add limited sorting support for CSS-in-JS with interpolation

[wdfinch]

Hi so after reading the docs I understand that CSS-in-JS will not be sorted on the root level due to property interpolation. I was wondering if there was any way to override this behavior or have more control here. For example, for my use case, I only use property interpolations when I'm using a mixin. So for example something like this:

export const Container = styled.div`
  ${myMixin};
 padding-left: 2px;
 text-align: center;
 ...

Therefore I would like the sorting to occur but after the interpolated property. Is anything like this possible?

[hudochenkov]

I was thinking about it recently. And I think it is possible to change plugin logic to allow sorting of properties if there is no interpolation between them. Like in your example.

I'm going to look into this in the future. But bear in mind it won't be soon. This plugin is working with PostCSS 8, but the only available CSS-in-JS parser for PostCSS works on PostCSS 7. And I doubt it will ever support PostCSS 8 due its architecture. I have plans to work on new CSS-in-JS parser, which will work with PostCSS 8. But it's not an easy task and won't be done any time soon.

[wdfinch]

Ok thanks so much for the reply. That sounds great. Please let me know if you need any help.

[Dozalex]

Hi, any updates?