css vars being transformed incorrectly with `textShadow` converter

[ling1726]

• rtl-css-js version: 1.14.1
• node version: 14
• npm (or yarn) version: 1.22.x

Relevant code or config

convertProperty('boxShadow', 'var(--shadow16)');

What you did:

Fluent UI's css-in-js engine uses rtl-css-js for its rtl property and value computations. I noticed that css variable names that included numbers were matched by the textShadow property value converter and transformed the name of the css variable

What happened:

var(--shadow16) became var(--shadow-16) which broke all rtl box shadows using Fluent UI.

Reproduction repository:
https://github.com/ling1726/box-shadow-rtl-css-js-repro

Problem description:

See above in What you did

Suggested solution:

This library could consider ignoring rtl doppelganger computations for any value that includes css variables. This is already the case for undefined and boolean values.

I'm also open to push back, if this check should be done by consumers.

[github-actions]

🎉 This issue has been resolved in version 1.16.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀