[Dist] Compile special versions of library to handle CSS vars

[xak]

Distribute compiled CSS with CSS vars fallbacks

• Compile with the $fd-support-css-var-fallback set to true
• Distribute as fiori-fundamentals-ie11.css

Distribute LESS version of the compiled library

We have identified a use case where the compiled CSS is imported into a LESS project. However, the LESS processor breaks when encountering CSS vars that are calculated.

• Do fiori-fundamentals.less and fiori-fundamentals-ie11.less
• Any instance of calc() that uses CSS vars must be escaped for LESS

  padding: 12px ~"calc(var(--fd-width-gutter) / 2)";

Grep: calc\((.*)var(.*)\) replace with ~"calc\(\1var\2\)"

Recommend packaging a less directory with only the two above files included and a README to explain that this isn't a true LESS port. This will at least give us to opportunity to populate the directory in the future with addt'l LESS resources.

[kagos]

This should work in Less. The output will look like: padding: 12px calc(var(--fd-width-gutter) / 2;

My only concern is that it would be ignored by the browser if we're not getting :root (--fd-width-gutter wouldn't be defined), but it shouldn't be a major issue. Thanks for looking into this!

[xak]

@kagos I escaped all of the instances of calc() with vars in the attached file. Can you test and see if the attached throws any errors?

fiori-fundamentals.less.zip

Note the CSS vars are still there but should cause no issues since we have all the fallbacks included.

[kagos]

Sure, @xak - testing right now. Thanks!

[kagos]

@xak - it's looking good and compiles as expected. We will continue to test and provide feedback as we work. Thanks again!

[xak]

@kagos Please see https://github.com/SAP/fundamental/pull/1065 to validate this approach. We will include a less dir in the npm package inside we will include basic variables and the full library that will not throw any errors.

Two things ...

1. This is not the final LESS version, still does not include some fallbacks but it will.
2. To avoid pathing issues, the fonts and icons are not included but you can use the ones in dist to import those separately.

Do you see any problems with this approach?

[kagos]

Hi @xak -

1. Fallbacks will be great - IE11 is rough right now, glad they're still in the plan. Can we expect to see them in v1.4? ETA still 12/5(ish)?
2. While running the escaped calc() file, the only errors we got were on font paths. Thank you for considering this issue -- we appreciate it!

I think this approach sounds ideal. Again, thank you guys for considering our use-case!

[xak]

Yes, we are on track to release tomorrow with IE11 fallbacks in the LESS dist.