transition: `var(--...)` gets converted to `false(--...)`

[brianmhunt]

Expected behavior:

A clear and concise description of what you expected to happen.

      shown: {
        transition: 'var(--x)',
      },

should show up as a class with

      shown: {
        transition: 'var(--x)',
      },

Describe the bug:

A clear and concise description of what happend instead of the expected behavior.

It shows up as:

      shown: {
        transition: 'false(--x)',
      },

Codesandbox link:

Please create a codesandbox.io with the issue. Make it as minimal as possible as this will help us find the bug quicker.

I can't reproduce it in codesandbox.

I hope this is enough to get started, but let me know if you need more.

Versions (please complete the following information):

• jss:

  $ cat package.json |grep -i jss
  "jss": "^9.8.7",
  "jss-preset-default": "^10.0.0-alpha.16",

• Browser [e.g. chrome, safari]: Chrome 75

• OS [e.g. Windows, macOS]: Mac OS X

Feel free to add any additional versions which you may think are relevant to the bug.

The problem is in jss-preset-default. The last working version was jss-preset-default version 10.0.0-alpha.10 i.e. alpha.11 is the first version to exhibit the breakage.

[kof]

You are using jss v9 with preset v10, which are incompatible, but other than that I was able to reproduce it on the https://cssinjs.org/repl/ and this issue exists only with a transition property.

[brianmhunt]

The issue occurs at line 89 of supported-vendor.js in css-vendor, via jss-plugin-vendor-prefixer:

value = value.replace(transPropsRegExp, prefixTransitionCallback);

Will report this upstream and link this issue.

[AleshaOleg]

Closing this, because of duplicate https://github.com/cssinjs/css-vendor/issues/112

[kof]

released