Svelte: About the css prefix to css

[szmtcjm]

When I use css prefix on style attributes of the html template, svelte will remove it.
Or when I use transition, svelte will not include css prefix and my page will break down in the old browsers.

[Rich-Harris]

Not quite sure I follow – can you create a reproduction in the REPL? https://svelte.technology/repl

[szmtcjm]

https://svelte.technology/repl?version=2.6.4&gist=6ef4f009ca9ae20c24f422d0e44ea7a3

The h1 will not show in the older browser because the transition is implemented by @keyframe, for example:

@keyframe name {
...
}

but svelte will not include the prefixed @keyframe:

@-webkit-keyframes  name{
...
}

So in the old browser would throw a css insert error, and not show the h1 in the REPL example. at the moment, I am not sure why it throw the error, So I guess the reason is that the the prefixed @keyframes is not included in the animation rule.

[szmtcjm]

https://svelte.technology/repl?version=2.6.4&gist=cb9db0e243ab33370295a144ad025954

This is another example which add a style attribute. The style include transform css rule transform:translateX(100px);-webkit-transform:translateX(100px). But svelte will remote -webkit-transform:translateX(100px) in the complied result.

In #558 you also had ask about browser support. So my suggestion is that

1. Include old browser's polyfills in the complied result directly. Or
2. A svelte-polyfill needed by old browser.

[kaisermann]

@szmtcjm You can do that at the svelte.preprocess step. Here's some packages that can help you with that:

• svelte-preprocess
• svelte-preprocess-postcss

And then you can just add autoprefixer to your postcss config.

[szmtcjm]

@kaisermann Did you mean add preprocess for the <style> part? Yes, I can add preprocess css for the <style> part, there is no problem. But my question is the transition and style attribute in the html.

[kaisermann]

@szmtcjm Oh, my bad! Actually, I've just hit the same issue with inline styles. Will update here if I find any solution for it.

About the autoprefixer thingie I commented, it seems svelte is renaming only the original @keyframes.

This:

@keyframes test {
  to {
    transform: translateX(125%)
  }
}

Generates:

@-webkit-keyframes test {}

@keyframes svelte-1erlk4x-test {
  to {
    -webkit-transform: translateX(125%);
    transform: translateX(125%)
  }
}

[szmtcjm]

@kaisermann It's true. So I put autoprefixer in the css option of svelte instead of preprocess.

svelte({
  css: css => {
      postcss([autoprefixer({...})])
      .process(css.code)
      .then(result => css.write(...))
  }
})

[kaisermann]

@szmtcjm Good workaround! I've made a PR(#1505) to fix the prefixed @keyframes issue.

[szmtcjm]

@kaisermann Awesome! But my problem have not solved.

[Conduitry]

@szmtcjm The fix in 2.7.0 looks to be working to me - @keyframes blocks with known prefixes are now getting processed like regular ones are. Can you find a reproduction for your issue, preferably in the form of an example in the REPL showing the component just before Svelte gets it (not some earlier form before it goes through autoprefixer or anything).

[kaisermann]

Here's the REPL. It's transforming the -webkit-transform into transform

[Conduitry]

At what step is that happening? It looks to me like that is the browser's doing. In the generated code, I see setStyle(button, "-webkit-transform", "translateX(50px)");.

[szmtcjm]

Oh, I see. The api CSSStyleDeclaration.setProperty(key, value); will show the unprefixed property on the style attr if it support standard . on the contrary, it will show the prefixed property.

[Conduitry]

@szmtcjm Do you still have other questions or issues related to this - or can this be closed?

[szmtcjm]

@Conduitry transitions which implemented by css animation also did not have @-webkit-keyframes animation-name.

[Conduitry]

I'm not sure what would be a good way to handle that that wouldn't impact the vast majority of users who don't need this. The @keyframes rule is added at runtime when using transitions. caniuse reports that pretty much everyone has supported CSS animations without prefixes for a while. What browser and version is giving you trouble?

[szmtcjm]

@Conduitry emm... It will throw an error when insert the @keyframes name if the browser does not support it. But the page can render in addition to did not act the transition. Maybe you can add a try {} catch() {} around the insertRule('@keyframes'). However, it does not affect if it is not added.
And this issue can be closed.

[ankitstarski]

We solved this by overriding browser's CSSStyleSheet.prototype.insertRule.