compiled icon indicating copy to clipboard operation
compiled copied to clipboard

Introduce experimental non-react package

Open itsdouges opened this issue 4 years ago • 1 comments

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.

itsdouges avatar Dec 19 '21 03:12 itsdouges

🦋 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

changeset-bot[bot] avatar Dec 19 '21 03:12 changeset-bot[bot]

I've closed this since it's been stale for quite a while.

itsdouges avatar Jan 09 '23 23:01 itsdouges