OpenProps & UnoCss

简介 TL;DR OpenProps 使用产物优化结论 UnoCss 结论

简介

https://2023.stateofcss.com/en-US/css-frameworks/上看到OpenProps 和 UnoCss

这是一次尝鲜使用的使用记录。

TL;DR

OpenProps通过强大的Css Variables来构建一致风格的组件（Html片段）

UnoCss，一个性能好，DX好的Atomic Css方案

两者之间的选择：

快速Prototyping选择OpenProps

Pro：简单易用
Con: 请求多，css variable的维护难易程度见仁见智

实际生产使用UnoCss

Pro：Atomic Css
Con：Atomic Css

OpenProps

https://open-props.style/

使用


@import "https://unpkg.com/open-props/src/index.css";

button {
  color: var(--blue-6);
  font-size: var(--font-size-8);
  font-family: var(--font-serif);
}

button.sans {
  font-family: var(--font-sans);
}

打包产物如下：


var css_248z = `
	@import \"https://unpkg.com/open-props/src/index.css\";
	button{color:var(--blue-6);font-family:var(--font-serif);font-size:var(--font-size-8)}
	button.sans{font-family:var(--font-sans)}
`;
styleInject(css_248z);

但是运行时会有以下请求。

产物优化

可使用postcss-jit-props


button {
  color: var(--blue-6);
  font-size: var(--font-size-8);
  font-family: var(--font-serif);
}

button.sans {
  font-family: var(--font-sans);
}

使用postcss-jit-props可以做到按需引入


// postcss.config.js
const postcssJitProps = require('postcss-jit-props');
const OpenProps = require('open-props');

module.exports = {
  plugins: [
    postcssJitProps(OpenProps),
  ]
}

产物如下：


var css_248z = `
	:root{--blue-6:#228be6;--font-size-8:3.5rem;--font-serif:ui-serif,serif;--font-sans:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif}
	button{color:var(--blue-6);font-family:var(--font-serif);font-size:var(--font-size-8)}
	button.sans{font-family:var(--font-sans)}
`;
styleInject(css_248z);

可以发现以上css variables被自动引入。对应没有使用到的css variables会被purge。