Introduce experimental non-react package
This pull request adds a new @compiled/dom__experimental package which can be used to create Compiled styles without React. It reuses the same internals as Compiled, can be extracted and composed alongside current Compiled APIs, but does much less at build/transform time.
It currently forks some of the runtime (insertRule and ax) from the @compiled/react package, in a follow up PR we should create a new package that an be shared between both, including the cache for when styles are inserted at runtime. Interestingly the ax fork should be more performant. Opted not to share them in this PR to keep things small, but I could be convinced otherwise if we think it's a good idea to just do it now.
The API looks like:
https://github.com/atlassian-labs/compiled/blob/d78ae6a22ad2a89fb064030f71ef2cb1d00c7433/packages/dom__experimental/src/tests/browser.test.tsx#L18-L28
cstyle can also be used as a function when wanting to compose styles together.
https://github.com/atlassian-labs/compiled/blob/d78ae6a22ad2a89fb064030f71ef2cb1d00c7433/packages/dom__experimental/src/tests/browser.test.tsx#L60-L79
This package comes with the constraint that styles must be able to be statically evaluated inside the same module. This means no x-module support, and no support for styles not known at build time, for that developers can use the style prop directly. It also doesn't try to do anything clever, so there isn't any global style or keyframes APIs.
There is discussion to be had for the current React bindings as there is still an advantage for them existing for automatic dynamic styles (transparently creating dynamic CSS custom property declarations) through the styled and css prop APIs, but less so for the ClassNames API. It might be advantageous to think about deprecating the ClassNames API to instead use the @compiled/dom API.
Questions
- Should we fold the strip runtime plugin into the primary plugin? We could squeeze better build performance if they're both in the same plugin, especially for apps who want to extract. I should make an issue about it.
🦋 Changeset detected
Latest commit: 46022c65d43272f59237de5271cf6e117163d4ae
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 3 packages
| Name | Type |
|---|---|
| @compiled/babel-plugin | Patch |
| @compiled/babel-plugin-strip-runtime | Patch |
| @compiled/dom__experimental | Patch |
Not sure what this means? Click here to learn what changesets are.
Click here if you're a maintainer who wants to add another changeset to this PR
I've closed this since it's been stale for quite a while.