`postcssJs.objectify(root)` missing sorting causes issues

[hcomnetworkers]

We are using a simple SCSS editor to write SCSS and using postcss/postcss-js to validate and objectify the SCSS. However, storing it in an object does not guarantee a sort order, which leads into bad behaviour of jumping selectors and unexpected sort orders.

An additional issue is, that this can also lead into bad overwritting of rules with the same specificity.

As exmaple:

.foobar .bar {
  color: white;
}

.foo .bar {
  color: red;
}

As expected the color would be red, but without sorting, the following object could be created:

{
  ".foo .bar": {
     color: "red"
  },
  ".foobar .bar": {
     color: "white"
  }
}

Which would result in the color to be white when resolving the object and output the CSS.

Would it be possible to include something like an "arrayfy", which would keep the sort order. A change like that would require also a parse for an array input.

[ai]

Sorry, that PostCSS JS uses standard CSS-in-JS syntax, we can't extend it.

If you care about order, maybe you should not use object syntax at all. What is your use case to use object syntax?

[hcomnetworkers]

Sorry for the late response.

We are using the object to manipulate the data Additionally, we store it as json in the database for selection and also for data manipulation in the database.

[ai]

Sorry, it was not the purpose of this module. This module purpose was to support CSS-in-JS syntax. So we can’t change output format since it will kill compatibility.

Also, I don't think that JSON format is a good format to work with CSS. We created PostCSS AST API especially to have good DOM-like API to work with CSS AST.

If you want you can:

1. Parse CSS into PostCSS AST root = postcss.parse(css)
2. Then write your own conversation function to convert PostCSS AST to any format that you like json = customObjectify(root)