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 項目可以真正的幫助你解決樣式開發的痛點。謝謝你們。

下圖是使用效果圖: