React项目中，如何用@vanilla-extract/css导出Shadow DOM适配的内联样式？

问题描述 #

我在React项目中评估@vanilla-extract/css作为样式方案，这个库的style方法以及createSprinkles生成的工具都会输出混淆后的类名（比如示例中的_1jbh1078），但我需要能直接用于Shadow DOM封装的内联样式。我知道@stitches/react的createCss方法能导出css工具生成内联样式，但在@vanilla-extract/css里没找到类似方法。

示例代码：

export const sprinkles = createSprinkles(
  responsiveProperties,
  colorProperties
);

export const appStyle = sprinkles({
  display: 'flex',
  paddingTop: 'small',
  backgroundColor: 'red'
});

console.log(appStyle) // => 输出混淆类名 `_1jbh1078`

更新说明：目前我已经改用@stitches/react，但原问题仍有参考价值。

解决方案 #

针对@vanilla-extract/css的替代实现 #

虽然@vanilla-extract/css本身没有原生生成内联样式的API，但可以通过以下两种方式满足需求：

1. 手动映射令牌到内联样式对象
   如果你依赖createSprinkles定义的响应式属性和颜色令牌，可以编写一个转换函数，将令牌值映射为实际CSS值，直接生成内联样式对象：

   // 假设已定义令牌与CSS值的映射关系
   const tokenMappings = {
     paddingTop: { small: '16px' },
     backgroundColor: { red: '#ff0000' }
   };
   
   const getInlineSprinkles = (styleConfig) => {
     const inlineStyle = {};
     Object.entries(styleConfig).forEach(([prop, token]) => {
       inlineStyle[prop] = tokenMappings[prop]?.[token] || token;
     });
     return inlineStyle;
   };
   
   // 使用示例
   const appInlineStyle = getInlineSprinkles({
     display: 'flex',
     paddingTop: 'small',
     backgroundColor: 'red'
   });
   // 输出: { display: 'flex', paddingTop: '16px', backgroundColor: '#ff0000' }
   

2. 利用vanilla-extract的令牌导出能力
   @vanilla-extract/css支持导出定义的全局主题令牌，结合这一特性可以直接在组件中构建内联样式：

   // tokens.css.ts
   import { createGlobalTheme } from '@vanilla-extract/css';
   
   export const themeVars = createGlobalTheme(':root', {
     space: { small: '16px' },
     colors: { red: '#ff0000' }
   });
   
   // 组件文件中使用
   import { themeVars } from './tokens.css.ts';
   
   const appInlineStyle = {
     display: 'flex',
     paddingTop: themeVars.space.small,
     backgroundColor: themeVars.colors.red
   };
   

关于改用@stitches/react的合理性 #

@stitches/react的createCss方法原生支持生成内联样式（通过css工具的返回值或toString()方法），不需要额外转换就能适配Shadow DOM的样式封装场景，这也是选择切换方案的合理原因。

内容的提问来源于stack exchange，提问作者cs1193