Add support for css variables to mixin

[HanneloreVerbraekel]

While migrating from scss to css variables, we bumped into some issues with the ember power calendar mixin:

codeFrame: Error: Undefined operation "calc(32px + var(--our-variable)) * 1". ╷ 128 │ padding-left: $cell-with-spacing-width * 1; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵ /tmp/broccoli-474vURcC73g1RJ/out-944-funnel_funnel_styles/app/styles/ember-power-calendar.scss 128:21 ember-power-calendar()

This code would make it possible to use css variables in the scss variables needed for the ember power calendar mixin.

[mkszepp]

@HanneloreVerbraekel Looking at the generated css output it looks like the mixin part is missing in css. Atm we use the ember-power-calendar.scss to generate that, but i think we need an other one to generate the clean css... This we should fix.

I'm not sure, but are you using the scss file in css? If you are using vanilla css you should use the import like import 'ember-power-calendar/styles'; in application.js or @import 'ember-power-calendar/vendor/ember-power-calendar.css'; in any css file. See https://ember-power-calendar.com/docs/installation

For add css variable support i think, we need a complete new file (maybe we can do this while rollup, so that we don't need to add a fix css file inside the repo)

[HanneloreVerbraekel]

Hi! We are using css variables in an .scss file. I can test the code with our old scss variables?

[mkszepp]

Ah... if i have understand correctly you are passing in a variable like $cell-width a css variable

Example: $cell-width: var(--cell-width) right?

[HanneloreVerbraekel]

Ah... if i have understand correctly you are passing in a variable like $cell-width a css variable

Example: $cell-width: var(--cell-width) right?

Correct!

[mkszepp]

Whats the benefit to use css variables inside scss?

What do you think about a extra file, which is place css, with css variables?

[HanneloreVerbraekel]

We provide them through our design system. The implementation is scss.

[mkszepp]

@HanneloreVerbraekel can you apply the same code changes also to the less file? So we have same behavior in scss & less

[HanneloreVerbraekel]

Hi! I added it. Can you thorougly check it, though? This is my first time using less!

[mkszepp]

Hi! I added it. Can you thorougly check it, though? This is my first time using less!

thank you, little syntax error, the rest looks good. Can you fix that, than i think this feature is ready

[HanneloreVerbraekel]

Should be fixed now?