feat: Add style transform support for stencils

[NicholasBoll]

Summary

Fixes: #2463

• Refactors the style transform to make it easier to understand the parts.
• Add automated fallback support
• Removed unnecessary fallbacks
• Add style transform support for createStencils
• Add auto-wrapping for CSS variables in createStyles, createStencils, and the transformer.

Release Category

Components

Release Note

CSS variables can now be unwrapped anywhere in a property definition when using createStyles or createStencil. Previously, unwrapped variables could only be used if they started the property. For example, the following is now valid:

const myVar = '--my-var';

const myStyles= createStyles({
  boxShadow: `0 0 0 2px ${myVar}`
})

You no longer need to use cssVar around myVar to be valid. This should help with the transition from hard-coded variables (const myVar = 'red' => const myVar = '--my-var') without needing to wrap in a cssVar. It allows us to think about myVar as a JS variable and the system will convert to a CSS variable for us.

---

Checklist

• MDX documentation adheres to Canvas Kit's Documentation Guidelines
• Label ready for review has been added to PR

For the Reviewer

• PR title is short and descriptive
• PR summary describes the change (Fixes/Resolves linked correctly)

Where Should the Reviewer Start?

Areas for Feedback? (optional)

• Code
• Documentation
• Testing

Testing Manually

Tests should suffice, but you could always do a (cd modules/react; yarn clean && yarn build:es6) and verify the dist directory. Remember to do a yarn clean when you're done otherwise your environment is hosed.

[cypress]

Passing run #6646 ↗︎

0	964	3	0	0
⚠️ You've recorded test results over your free plan limit. Upgrade your plan to view test results.

Details:

Merge 43061c7 into bd715f1...
Project: canvas-kit	Commit: f928e200cd ℹ️
Status: Passed	Duration: 16:43 💡
Started: Jan 5, 2024 9:31 PM	Ended: Jan 5, 2024 9:48 PM

Review all test suite changes for PR #2489 ↗︎

[NicholasBoll]

This type of change is in many places. Auto-fallback works and manually including a fallback is a maitenance issue.

[mannycarrera4]

You write code, sometimes I agree with the code you write

[josh-bagwell]

Would outer be considered to be both focus rings on the "outside" of the container? I noticed an inset here or this something we need to talk about when re-factoring focusRing?

[NicholasBoll]

This is why I think focusRing will need an update. outer is actually both inner:

canvas-kit/modules/react/common/lib/styles/focusRing.ts

Lines 10 to 13 in 8817a0a

	* Specifies where the ring(s) should be attached.
	* - undefined: Both "inner" and "outer" shadows outside the container.
	* - 'inner': "Inner" shadow inset. "Outer" shadow outside the container.
	* - 'outer': Both "inner" and "outer" shadows inside the container.

I'm supporting focusRing in the static optimizer, not changing it.