I am looking at @vanilla-extract/css
for my styling in React app. The method style
exports a className from the *.css.ts
file but I require inline styling for Shadow DOM encapsulation.
I was checking @stitches/react
it provides a way called createCss
were a css
is a named export of the method.
I don't see any similar methods in @vanilla-extract/css
.
export const sprinkles = createSprinkles(
responsiveProperties,
colorProperties
);
export const appStyle = sprinkles({
display: 'flex',
paddingTop: 'small',
backgroundColor: 'red'
});
console.log(appStyle) // => gives obfuscated css classname `_1jbh1078`
UPDATE 1
Though the question remains valid, but I have moved forward with @stitches/react
at this point. See my answer for @stitches/react
way of doing things.
Looks like
@vanilla-extract/css
doesn't give a way to export CSS. But@stitches/css
has done a good job with some caveats.getCssText
extracts all the style sheets from the config and puts it under<style />
tags - The issue here isstitches/react
has no ways to tree shaking unwanted variables.<style>
tag in the Shadow DOM should only be placed after all thecss
functions are consumed.