WIP add @compiled/vanilla#1885
Conversation
xtan-atlas
requested review from
JakeLane,
danieldelcore,
dddlr,
kylorhall-atlassian,
liamqma and
pancaspe87
as code owners
🦋 Changeset detectedLatest commit: c27f14f The changes in this PR will be included in the next version bump. This PR includes changesets to release 18 packages
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 |
✅ Deploy Preview for compiled-css-in-js canceled.
|
kylorhall-atlassian
left a comment
kylorhall-atlassian
left a comment
There was a problem hiding this comment.
Honestly, this leaves me pretty surprised and happy with what I see so far. I'd have to give these things a dry-run, I don't quite feel there's enough test coverage, eg. we have more end-to-end and performance tests with React that are manually spin up, not put into CI, that are worth either creating or trying to run.
But this is enough to test and validate if it's even close before shipping a 0.x and calling it a pre-release — to that effect, happy to not document it on the web, or mark it as an Alpha early release in both README and web.
| // Result is a plain className-string map; no JSX wrapper. | ||
| expect(actual).toInclude('base:'); | ||
| expect(actual).toInclude('accent:'); | ||
| // Sheets are inserted via the vanilla runtime, not the React runtime. | ||
| expect(actual).toInclude('import { ax, insertSheets } from "@compiled/vanilla/runtime"'); | ||
| expect(actual).toInclude('insertSheets('); |
There was a problem hiding this comment.
I'd expect at least one full snapshot on one of these, I think it's fair to add if it's deterministic.
| // `CS` is needed. `ix` is omitted because vanilla `cssMap` does not support | ||
| // dynamic CSS variable interpolation today (the runtime helper for that lives | ||
| // in `@compiled/react/runtime` and is JSX-shaped). When dynamic interpolation | ||
| // is added to vanilla, `ix` should be re-introduced here. |
There was a problem hiding this comment.
Ah, I'd say that's quite important, but shouldn't block a demo.
Just ensure the TS API or something blows up if used, otherwise it could be really confusing…
| // sheets are inserted via `insertSheets` from | ||
| // `@compiled/vanilla/runtime`, no React or `forwardRef` import is | ||
| // added, and no `<CC><CS>` wrapper is generated. | ||
| if (userLandModule === COMPILED_VANILLA_IMPORT) { |
There was a problem hiding this comment.
Question, could we have @compiled/react and @compiled/vanilla in the same file?
Would these sorts of things fail here with this state, or what level is this state? I feel like it's at a file level.
So we do a pass, hit a cssMap from vanilla and then hit a styled from react and do what?
I'd suggest a file init health-check if not already somewhere to just fast fail if both imports are found in the same file (by both I mean (@compiled/react or @atlaskit/css) and @compiled/vanilla)
There was a problem hiding this comment.
Could use some web documentation, but honestly looking real great. Feeling the vibes.
2 participants
What is this change?
Adds a new
@compiled/vanillapackage exposingcssMapandaxfor use in non-React code. Wires up the Babel plugin andbabel-plugin-strip-runtimeto recognise@compiled/vanillaimports and emit framework-agnostic output: aninsertSheets([...])call replaces the<CC><CS>JSX wrapper, no React orforwardRefimport is added, and production extraction routes the rules into the existing.compiled.csspipeline.Why are we making this change?
The Editor migration from Emotion to Compiled needs a path for non-React code (e.g. ProseMirror
toDOMhelpers). Without it, those files stay on Emotion and Editor ships two CSS-in-JS runtimes, defeating most of the bundle-size win from the React-side migration.How are we making this change?
The CSS pipeline (
buildCss,transformCssItems, atomicifier, sorter, hasher) is unchanged — vanilla calls the same functions and gets back the same(sheets, classNames)data. Only the code-emission layer is new, gated bystate.isVanillaset when the plugin sees an@compiled/vanillaimport.insertRuleis promoted to a public@compiled/react/runtimeexport so vanilla and React rules cohabit the same<style>buckets indocument.head.The internal
insertSheetscall is removed when extract css into.compiled.cssviababel-plugin-strip-runtime.Out of scope
PR checklist
Don't delete me!
I have...
website/