Why is there a theme compiler (theme.js etc.)?

[ghost]

Could you please explain the benefits and why there is a "theme compiler" (theme.js etc.)? In my opinion only using SASS would make more sense because:

• Simplifies the whole code and the usage outside of this project
• SASS is already a pre-processor (the theme.js looks like a pre-processor of SASS)
• Reduces the amount of work and the chance of adding more bugs

[modularcoder]

Hi @Omnia-Code Do you mean v2 dev branch?

[ghost]

Yes, I talking about the v2 dev branch, sorry I wasn't clear. The v1 uses plain SASS. By the way, the custom CSS properties feature is a experimental technology. Therefore I would be careful using it.

[modularcoder]

@Omnia-Code this is a great question, I'll try to give a detailed response soon )

[modularcoder]

@Omnia-Code ok finally got some time to respond, sorry for the delay.

Why do we need variables in the js file?

The reason for src/_theme/variables.js and src/_theme/theme.js is because in some component JS files we need to refer to theme's variables: mostly colors. So variables.js is kind of single source of truth for the theme. variables.js are also injected into SASS variables.scss files in SASS format.

Why do we also need css custom properties?

This is mostly for theme demo on-the fly customization without the need to precompile different variations. So in most of browsers you can customize the theme on the fly just by changing CSS properties. For the browsers that don't support css custom properties (Hello IE :) ) there is a fallback.

CSS properties can be omitted for real production use.