astahmer / box-extractor Goto Github PK

atm we include all of the conditionNames in the output file even though we might only use 0 or 1, 2, etc

ex:

we could save a few more kbs by filtering this conditionNames array

this might not be possible since a sprinkles fn can come from a user-defined fn, like createBoxSprinkles that we have in @box-extractor/vanilla-extract :

if, for some reason, a theme's prop value is un-extractable then we need an escape hatch to ignore some props/values so that it doesn't get removed from the used class names list (and therefore not in the vanilla-extract .css/js output)

not sure yet about the granularity level that should be available :

• can we include a list of prop values ? are those values included only for that prop name or all props ?
• is this list of values included only for this component or function (for this prop ?) ?
• etc

it could look like this, a forceInclude option:

createViteVanillaExtractSprinklesExtractor({
    components: ["Box", "Stack"],
    functions: ["themeSprinkles"],
    forceInclude: [
         { value: "*", prop: "*", function: "specialSprinkleFn" }, 
         { value: "*", prop: "color", component: "Box" }, 
         { value: ["blue.100", "red.300", "primary"], prop: ["color", "backgroundColor"], component: "*", functions: "*" }
     ],
}),

which means:

• all values of all props for the specialSPrinkleFn will be included
• all values of the color prop for the component <Box /> will be included
• blue.100 & red.300 values will be included for the color and backgroundColor props of all components & functions (in addition to those extracted as usual ofc)

also, a forceIncludeDev option could be used so that some props values would be included just in dev mode in order to skip the whole process of AST-parsing+invalidation+serialization (which means quicker HMR = quicker feedback = better DX)
this could be used in implementation phase where you might be playing with different margin spaces, or colors, etc..

it would be nice to have those integrations tests, just to be sure nothing breaks between releases since behaviours differs quite a lot

• CSR (classic SPA vite app)
• SSR (rakkas, vite-plugin-ssr, etc)
• HTML-only (rakkas with rakkas({ filterRoutes: (_route) => "server" }) / vite-plugin-ssr with xxx.page.server.ts only = no xxx.page.ts)

and each of those should test that:

• has the "xxx" style on initial load
• has the "yyy" style after HMR
• has the updated "yyy" style when updating the sprinkle (.css.ts) providing this color+yyy combination

finally, it should test this for 3 different kind of sources :

• .css.ts coming from user-code : ./src/sprinkle.css.ts
• .css.ts coming from user-code in another package : @monorepo/ui-lib
• .css.ts coming from node_modules : @npm-package/sprinkles

not sure if this is useful, at least not in the vanilla-extract context

atm we invalidate all .css.ts cause I haven't made a link between what changed & where does the prop changed value comes from

ex:

• we have a (box.ts) component using themeSprinkles (theme.css.ts), itself using colors (colors.css.ts) props (made with VE defineProperties)

• we also have other .css.ts like color-mode.css.ts & button.css.ts used in other places (but not box.ts)

• initial code: <Box color="blue.100" />

• after change: <Box color="red.300" />

• we can see only the color prop value has changed, and we know the color prop comes from the sprinkle prop defined in colors.css.ts

• currently: we invalidate all modules ending with .css.ts (theme.css.ts, colors.css.ts, color-mode.css.ts, button.css.ts)

• TODO: invalidate only colors.css.ts (and maybe theme.css.ts, if needed ?)

allow extracting values in a condition that is not a ternary (only those are supported atm, like cond ? whenTrue : whenFalse) :

• nullish coalescing operator: valueOrNullable ?? fallback
• or operator: valueOrFalsy || fallback
• and operator: valueOrFalsy && fallback
• arrays (not really used by vanilla-extract except for responsiveArray but is not recommended, still could be useful for basically everyone else)