import{demo}from'./style.css'functionApp(){return(css in js);}exportdefaultApp; 其中,在style.css.ts中,我们像写ts那样写css,并以JS变量的形式对其进行使用; 可以看到,除了达到了我们的预期外,还在类名上加入hash,就想我们再react中使用css modules那样,我们再也不用担心类名的冲突了;并且还支持ts类型校...
import { style }from'@vanilla-extract/css';export const parentClass = style({background:'red',':hover': {background:'blue',},});export const childClass = style({selectors: {'&:nth-child(2n)': {background:'#fafafa',},[`${parentClass} &`]: {color:'pink',},},});import { ch...
@vanilla-extract/css:开发核心库,基于该库进行项目业务样式开发; @vanilla-extract/webpack-plugin:webpack插件。前面也提及了vanilla-extract是一个零运行的库,主要是通过该插件处理。 通过增加webpack配置项,对相关后缀文件使用自定义的@vanilla-extract/webpack-plugi/loader进行处理。 在其内部通过eval库在编译时先...
Basically, it’s “CSS Modules-in-TypeScript” but with scoped CSS Variables + heaps more. 🔥 All styles generated at build time — just like Sass, Less, etc. ✨ Minimal abstraction over standard CSS. 🦄 Works with any front-end framework — or even without one. 🌳 Locally scoped...
2021年,vanilla-extract作为黑马登顶了css-in-js满意度榜首(虽然使用率仅为1%),号称是一个类型安全、高度兼容 TS 场景的库,国内相关讨论还很少,稍微看了一下还挺好用的。 介绍 官方文档:https://vanilla-extract.style/documentation/ 打开vanilla-extract官网文档,里面已经罗列了他的那些优点。作为一个如果使用css...
// styles.css.tsimport{createTheme,style}from'@vanilla-extract/css';exportconst[themeClass,vars]=createTheme({color:{brand:'blue'},font:{body:'arial'}});exportconstexampleStyle=style({backgroundColor:vars.color.brand,fontFamily:vars.font.body,color:'white',padding:10}); ...
// styles.css.tsimport{createTheme,style}from'@vanilla-extract/css';exportconst[themeClass,vars]=createTheme({color:{brand:'blue'},font:{body:'arial'}});exportconstexampleStyle=style({backgroundColor:vars.color.brand,fontFamily:vars.font.body,color:'white',padding:10}); ...
又一个 CSS-in-JS 库,vanilla-extract,主打类型安全、零运行时、基于 CSS 变量的主题功能,来自 CSS Modules 的发明者之一 Mark Dalgleish。试了下还挺有意思的,有官方 Vite 插件可用。说起来 styled-components 就是 CSS Modules 的另一位共同发明者 Glen Maddern 搞出来的。一直觉得纯 JS 的方案离完美还是有...
For questions about the vanilla-extract CSS library, vanilla-extract.style vanilla-extract is a “CSS Modules-in-TypeScript” but with scoped CSS Variables and heaps more. Features Type-safe static CSS:All styles generated at build time — just like Sass, LESS, etc, but with the power of ...
看起来@vanilla-extract/css并没有给予导出CSS的方法。但是@stitches/css在一些注意事项方面做得很好。