【文件属性】:
文件名称:calico:使用静态生成的原子样式的React组件
文件大小:183KB
文件格式:ZIP
更新时间:2021-05-02 09:39:35
TypeScript
印花布
Calico是一个可定制的样式库,可将React道具映射到静态生成的类名。
动机
Calico是一个CSS-in-JS项目库,旨在将各种样式解决方案的优点结合在一起:
原子CSS受等库的启发
静态提取,但可以在theme文件中进行自定义的预先设置。
使用有限的一组生成的className鼓励重用性。
很轻运行时所做出可能的库。
静态样式提取,具有完整的安全性。
通过交换className的动态样式。
受和启发,以开发人员为中心。
通过数组定义响应样式。
命名空间样式可简化类型可扩展性。
可以在.treat文件中定义一次性样式,并在theme上添加其他响应式帮助器。
安装
除了其对等依赖项之外,还安装软件包:
yarn add @walltowall/calico treat react-treat
根据您的项目,您还需要配置webpack来支持treat 。
【文件预览】:
calico-master
----.gitignore(47B)
----jest-puppeteer.config.js(79B)
----package.json(2KB)
----jest.preset.js(161B)
----src()
--------Box.tsx(3KB)
--------createMq.ts(3KB)
--------calicoTheme.d.ts(132B)
--------index.ts(543B)
--------utils.ts(4KB)
--------createCalicoTheme.ts(1KB)
--------variants.ts(87B)
--------useBoxStyles.treat.ts(2KB)
--------rules.ts(6KB)
--------types.ts(351B)
--------useBoxStyles.ts(3KB)
----jest.config.js(187B)
----LICENSE(1KB)
----CHANGELOG.md(5KB)
----tsconfig.json(555B)
----.github()
--------workflows()
----README.md(5KB)
----jest.setup.js(23B)
----test()
--------createMq.test.ts(1KB)
--------Box.test.ts(9KB)
--------utils()
--------resolveResponsiveProp.test.ts(1KB)
--------fixtures()
----yarn.lock(418KB)