macaron-css / macaron

Compiler-augmented typesafe CSS-in-JS with zero runtime, colocation, maximum safety and productivity
https://macaron.js.org/
MIT License
735 stars 16 forks source link

order of bindings and styled nodes #2

Closed Mokshit06 closed 2 years ago

Mokshit06 commented 2 years ago

The current published version of macaron pushes all the bindings first and the styled nodes later, this means that all the nodes that reference a style declaration in the beginning of the new virtual file and the styled nodes are later. This works fine if only the variables are being used inside declaration but becomes an issue when the declaration is used inside a another variable since babel considers both to be a "binding"

Consider this:

const color = 'red';
const red = style({ color });
const entireClass = `pt-2 ${red}`;

the expected compiled output would be

const color = 'red';
const red = 'red_HASH';
const entireClass = `pt-2 ${red}`;

but it is actually

const color = 'red';
const entireClass = `pt-2 ${red}`;

const red = 'red_HASH';

This would produce an error and shouldn't be that hard to fix. I think the fix would require checking the source location of binding and declaration and based on that decide which one should be pushed first

Mokshit06 commented 2 years ago

Should be fixed with https://github.com/Mokshit06/macaron/commit/4adc57548efabd357de02ddfb3c31576b0ffdc31