[ShadyCSS] ScopingShim and nested calc issues in IE and Edge <=15

[wessberg]

Hi there. Thanks for writing ShadyCSS and for bringing the web forward.

Problem

Unfortunately, in IE and Edge <= 15, nested calcs (i.e. calc inside of another calc) are not supported. When using and especially combining CSS custom properties, it is easy to end up combining multiple CSS Custom Properties in calc expressions. Some of those may include calcs on their own, which leads to this problem.

Developers can get around this by either rewriting their CSS to avoid nested calcs, (which can be difficult when using CSS Custom Properties to perform dynamic styling) or use tooling to get around it. For example, in the postcss ecosystem, combining the postcss-custom-properties and postcss-calc plugins helps reducing and avoiding nested calcs to fix styling issues in these browsers.

However, not everything can be fixed at compile-time. For example, consider the following:

/* styling applied to 'my-element' */
:host {
    top: calc(var(--foo) - var(--bar));
}

/* somewhere else in some CSS, those properties are set: */
my-element {
    --foo: calc(1px * 2);
    --bar: calc(2px * 2);
}

In this example, both --foo and --bar are dynamic properties, and each of them include a calc.

After applying the ScopingShim, the declaration in the CSSOM will be:

top: calc(calc(1px * 2) - calc(2px * 2));

Which simply won't work in those browsers.

Proposed Solution

There's been some effort going into fixing this issue at runtime such as css-vars-ponyfill that fixes nested calcs by default, and I think it would be very valuable for ShadyCSS to do the same thing. I expect some performance overhead since parsing and reducing calc rules isn't trivial, but I think it is well worth it.

I've submitted a PR: https://github.com/webcomponents/polyfills/pull/196

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[wessberg]

I would appreciate if this issue is kept open, as there is a PR ready and this causes issues in IE and Edge <= 15. By merging in the open PR, better interoperability will be achieved with these older browsers.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[wessberg]

This is the second time this issue is marked as stale without any activity or feedback. I originally submitted this issue, as well as a Pull Request addressing it 3 years ago on the original repo from which it was transferred to here. Without this, certain use of CSS Custom Properties in combination will lead to styling issues in IE and Edge <= 15 as described in the issue. I maintain a web service (Polyfill.app) that sends back tailored polyfill bundles based on UA detection, and there I'm depending on this PR, as I've seen several examples where having this calc flattening step in the scoping shim does fix styling issues in these browsers for when CSS Custom Properties are heavily used in combination.

I realize that IE and Edge <= 15 are increasingly becoming less widely used, thankfully, but still I'd argue these are important browsers, and that this issue is relevant.

So, I hope you'll take another look at it, and I'll happily explain in more details, share examples, etc.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.