Fower: 一个多平台原子类 CSS In JS 样式库

前言

在过去的一年半中，咱们团队分别使用了 Taro React 开发小程序，React 开发 Web 程序 和使用 React Native 开发 App。使用的样式构建也各类各样，并不统一，在小程序中，使用 SCSS，在 Web 中使用 tailwind 和 styledComponent, 在 React Native 中使用 StyleSheet.create 建立样式。

在这三种写法中来回切换是痛苦的。

简介

咱们从 tailwind 中得到了灵感， 将 tailwind 的原子样式 与 JSX Prop 结合，开发了 Fower。Fower 在 JSX 组件外包装了一层，经过收集整合原子样式属性，生成 className 或者 style 属性，并将其注入到内层组件中。因为 Fower 组件本质是一个 JSX 组件，于是也得到了 VSCode 的智能提示，书写样式时，只须要打个首字母，就能够联想出全部的原子样式，回车便可填充属性，这种开发体验是至关爽的。

在此基础上，Fower 经过附加各类属性后缀，支持了伪类，媒体查询，主题切换，暗黑模式等功能；提供了一些布局属性，能够快速让多子元素垂直、水平居中；也有一些功能属性，能够快速裁剪文字，省略显示；能够经过一个属性，构建出一个方形或者圆；还有功能强劲的 css 属性，让你使用各类子元素选择器。。。除了内置的这些属性，Fower 也提供了相关 API，可让你能够定制化你本身的属性实现。

咱们除了对 React, Taro React, React Native 封装了组件包外，还针对 Vue, Svelte 等框架进行了部分兼容和适配，Fower 提供了 VSCode 插件，解决了在 React Like 以外的框架的智能提示。

使用 Fower，基本上可让你不用再写烦人的 CSS 文件

对比

相比于 Tailwind, Fower 的优点是明显的。

• VSCode 插件。Tailwind 的使用离不开 VSCode 插件。Fower 在 React Like 框架中，利用 VSCode 智能提示就能够联想出各类属性，在其余框架中，才须要安装 VSCode 插件
• 开箱即用。Fower 只须要安装对应的框架包，便可直接使用，无需进行繁杂的配置。
• 体积。对于相似 p1, p2 到 p100 这种属性，Tailwind 中枚举了每个属性的样式，致使体积异常的庞大。Fower 在 React Like 中属于运行时库，对属性具备编程性，能够动态生成样式，因此体积很是小。在非 React Like 框架中，Fower 经过收集模板的原子属性样式也是动态生成样式。
• 多端使用。Fower 针对市面上主流的框架进行了针对性适配，你能够在 React, Preact, Vue, Svelte, React Native, Taro React 小程序, Remax 小程序等平台使用 Fower。Tailwind 不支持在 React Native 使用，而且在 Taro, Remax 等小程序环境中没有支持。

因为 Fower 是运行时 UI 库，因此相对于 Tailwind 有必定的运行时损耗。但对于设备算力愈来愈强大的今天，这点损耗能够忽略不计。但 Fower 仍是尽量的使用了各类手段提升运行效率，Fower 内部对全部遍历过的属性进行缓存，极大提升运行速度。

项目

官方文档（https://fower.vercel.app/）

项目地址（https://github.com/forsigner/fower）

功能一览

下面演示了使用 Fower/React 框架包的 Box 组件编写的 demo。实际上，直接使用 div 标签也是能够用的，但须要额外的配置。

基本使用

Fower 提供了大量的原子样式属性，能够极速构建 UI。

<Box text2XL fontBold green500 className="user" style={{ fontWeight: 'bold' }}>
  Hi, Fower
</Box>
复制代码

可编程

你能够经过为属性赋值的方式，来编写动态样式

<Box
  text-14
  display="block"
  color="red"
  blue={false}
  p-10
  m-10rem
  bg="red"
  bgRed={true}
  bgBlue={false}
>
  Hi, Fower
</Box>
复制代码

CSS 属性

Fower 中提供了强大的 CSS 属性，实现了大部分 CSS 的功能。

<Box
  text4XL
  css={{
    backgroundColor: '#edf2f7',
    ':hover': {
      backgroundColor: '#feebc8',
    },
    '.title': {
      fontWeight: 'bold',
    },
    span: {
      color: 'deeppink',
    },
  }}
>
  <div className="title">Nested demo</div>
  <span>Hi, Fower!</span>
</Box>
复制代码

伪类/响应式

Fower 经过后缀的方式，支持了伪类，响应式等功能

<Box text2XL text3XL--hover red--first-child fontBold green500>
  <Box>Hi, Fower</Box>
</Box>
<Box textSM textLG--sm text4XL--md text6XL--lg> Lorem ipsum dolor sit amet </Box>

复制代码

颜色助手

颜色助手能够快速增长或减小颜色的亮度，透明度等等

<Box toEvenly toCenterY>
  <Box red300>normal</Box>
  <Box red300--D40>darken</Box>
</Box>
复制代码

动态样式

对于一些动态样式需求，Fower 一样支持，且相对于传统的内联样式，原子样式属性写法更简洁和简单

<Box toEvenly toCenterY>
  <Box red300 red400={false} text={7 + 7}> normal </Box>
</Box>
复制代码

主题

Fower 内置了主题。你能够经过 setTheme API 更改和添加配置。

import { setTheme } from '@fower/core'

setTheme({
  spacings: {
    10086: 110,
  },
  color: {
    gray10086: '#FFFFFF'
  }
})

<Box textSM bgGray10086 bgGray10086--dark p10086>
  Lorem ipsum dolor sit amet
</Box>
复制代码

与第三方组件库一块儿使用

上文中提到 Fower 原理是经过给现有组件包装了一层，经过收集整合原子样式属性，最终将 className 或 style 属性注入到内层组件。于是与第三方组件使用时，只须要利用 styled API 包装便可。

import { Button as AntdButton } from 'antd'
import { styled } from '@fower/styled'

const Button = styled(AntdButton)

<Button red300 red400={false} text={7 + 7}>
  normal
</Button>
复制代码

属性冲突

Fower 组件提供的属性与三方属性冲突时，Fower 也提供了解决方案。

import { Button as AntdButton } from 'antd'
import { styled } from '@fower/styled'

const Button = styled(AntdButton)

<Button excludedProps={['block']} block>
  normal
</Button>
复制代码

类名

Fower 一样支持了 tailwind 的用法

<Box className="toCenter square-400 bgRed400">
  <Box className="white">Lorem ipsum</Box>
</Box>
复制代码

动画

Fower 提供了 keyframes API，能够快速建立动画。

import { Box } from '@fower/react';
import { keyframes } from '@fower/core';

const bounce = keyframes({
  'from, 20%, 53%, 80%, to': {
    transform: 'translate3d(0,0,0)',
    padding: 10,
  },
    '40%, 43%': {
    transform: 'translate3d(0, -30px, 0)',
  },
})

<Box
  text-30
  css={{
    animation: `${bounce} 1s ease infinite`,
  }}
>
  40 Lorem ipsum dolor sit amet
</Box>
复制代码

扩展

Fower 提供了 addAtom API 能够快速扩展原子样式属性。但这只能在本身的项目中使用。

Fower 提供了灵活的插件机制，你能够编写本身的样式 Util，供他人使用。

import { setConfig } from '@fower/core';
import ellipsis from 'fower-plugin-ellipsis';

setConfig({
  plugin: [ellipsis],
});
复制代码

插件示例: fower-plugin-debug

结语

通过团队半年的不懈努力，Fower 日渐完善，咱们也在项目中积极使用。上文中提到的内容，大体覆盖了 Fower 的全部功能，更多详情，请查阅咱们的官方文档和源代码。目前在咱们小程序项目中作到了仅有一个 app.scss 样式文件的地步。咱们封装了不少框架包，也在积极测试与使用，但不免会遇到不少 Bug，但愿你们积极试用使用 Fower，也但愿 Fower 项目可以真正的帮助你解决样式开发的痛点。谢谢你们。

下图是使用效果图: