uniapp\ taro 如何使用 UnoCSS 原子化css

偏执的太偏执、 2024-02-24 05:18 48阅读 0赞

### unocss-preset-weapp ###

相较于 [tailwindcss][] 和 [windicss][], [unocss][]的性能和可扩展性都优于它们

[UnoCSS][]小程序预设 [unocss-preset-weapp][]

内置 `transformer` 用于兼容小程序

*  [transformerClass][] 转换转义类名，解决小程序不支持`` `\\`，`\:`，`\[`， `\$`，`\.` ``等转义类名,保持`原子化css`的规范去书写`class`
 *  [transformerAttributify][]，用于支持 [attributify mode][]

--------------------

[uniapp-vue3 demo 在线地址playful-gumption-4bb42b.netlify.app/][uniapp-vue3 demo _playful-gumption-4bb42b.netlify.app]

![format_png][]

#### 使用 ####

#### uniapp-vue2 ####

[使用配置与DEMO][DEMO]

#### uniapp-vue3 ####

[使用配置与DEMO][DEMO 1]

#### taro for react vue2 vue3 ####

[使用配置与DEMO][DEMO 2]

#### 原生微信小程序 wxml ####

[使用配置与DEMO][DEMO 3]

--------------------

#### 其他 ####

#### 修改 w h 默认单位 ####

> *unocss-preset-weapp，wh默认单位 \`rpx\`，例如*

.text-20 {
     font-size: 20rpx;
    }
    
    .h-10 {
     height: 10rpx;
    }
    
    .top-10 {
     top: 10rpx;
    }

> *设置 `whRpx`为 `false`，修改默认单位，按 `rem` 规则递增*

*  unocss.config.ts

import presetWeapp from 'unocss-preset-weapp'
    export default defineConfig({
      presets: [
     presetWeapp({
          whRpx: false,
        }),
      ],
    })

.text-20 {
     font-size: 160rpx;
    }
    
    .h-10 {
     height: 80rpx;
    }
    
    .top-10 {
     top: 160rpx;
    }

#### 自定义转换规则 ####

> 如需更改默认的转换规则，可通过 `transformRules` 进行修改

*  unocss.config.js

import presetWeapp from 'unocss-preset-weapp'
    import { extractorAttributify, transformerClass } from 'unocss-preset-weapp/transformer'
    import { defineConfig } from 'unocss'
    
    const transformRules = {
      '.': '-d111-',
      '/': '-s111-',
      ':': '-c111-',
      '%': '-p111-',
      '!': '-e111-',
      '#': '-w111-',
      '(': '-b111l-',
      ')': '-b111r-',
      '[': '-f111l-',
      ']': '-f111r-',
      '$': '-r111-',
      ',': '-r222-',
    }
    
    const { presetWeappAttributify, transformerAttributify } = extractorAttributify({
      transformRules
    })
    
    export default defineConfig({
      presets: [
        // https://github.com/MellowCo/unocss-preset-weapp
        presetWeapp({
          transformRules,
        }),
        // attributify autocomplete
        presetWeappAttributify()
      ],
      transformers: [
        // options 见https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerAttributify
        transformerAttributify({
          transformRules,
        }),
    
        // options 见https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerClass
        transformerClass({
          transformRules,
        }),
      ],
    })

--------------------

#### 原子化 css 冲突问题 ####

> 例如 [tmui][]，自身有一套 [原子化 css][css]，导致与 unocss 冲突

![format_png 1][]

*  unocss.config.ts

> `presetWeapp` 配置 `prefix`, `transformerAttributify` 配置 `classPrefix`

import presetWeapp from 'unocss-preset-weapp'
    import { extractorAttributify, transformerClass } from 'unocss-preset-weapp/transformer'
    import { defineConfig } from 'unocss'
    
    const prefix = 'li-'
    
    const { presetWeappAttributify, transformerAttributify } = extractorAttributify({
      classPrefix: prefix
    })
    
    export default defineConfig({
      presets: [
        // https://github.com/MellowCo/unocss-preset-weapp
        presetWeapp({
          prefix
        }),
        // attributify autocomplet
        presetWeappAttributify()
      ],
      transformers: [
        // options 见https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerAttributify
        transformerAttributify(),
    
        // options 见https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerClass
        transformerClass(),
      ],
    })

> 这样冲突问题就解决了

<view bg="#333" p="x-6 y-10" w100 h200 class="li-bg-red">
      this is a unocss
    </view>

transform

<view class="li-bg-red li-bg-#333 li-p-x-6 li-p-y-10 li-w100 li-200">
      this is a unocss
    </view>

![format_png 2][]

[tm-ui-demo][]

#### css预设 ####

[UnoCSS 文档][unocss]

[Windi CSS文档][Windi CSS]

> 默认单位 `rpx`，w-100 => w-100rpx

#### 渐变背景 (v0.1.12) ####

[gradients][]

![format_png 3][]

#### animation (v0.1.9) ####

参考 [windicss-animation][] [@windicss/plugin-animations][windicss_plugin-animations]

相关动画网站 [animate.css][] [animista.net][]

*  unocss.config.js 自定义动画

import presetWeapp from 'unocss-preset-weapp'
    import { defineConfig } from 'unocss'
    
    export default defineConfig({
      presets: [
        // https://github.com/MellowCo/unocss-preset-weapp
        presetWeapp(),
      ],
      theme: {
        // v0.1.9 加入动画预设
        // https://github.com/MellowCo/unocss-preset-weapp#animation-v019
        // 设置自定义动画
        animation: {
          keyframes: {
            'my-animation': '{0% {letter-spacing: -0.5em;transform: translateZ(-700px);opacity: 0;}40% {opacity: 0.6;}100% {transform: translateZ(0);opacity: 1;}}',
          },
          durations: {
            'my-animation': '0.8s',
          },
          counts: {
            'my-animation': 'infinite',
          },
          timingFns: {
            'my-animation': 'cubic-bezier(0.215, 0.610, 0.355, 1.000)',
          },
        },
      },
    })
    <view class="animate-pulse"></view>
    
    <view class="animate-back-in-down animate-iteration-infinite"></view>
    
    <view class="animate-[4s_linear_0s_infinite_alternate_bounce]"></view>
    
    .animate--fl-4s_linear_0s_infinite_alternate_bounce-fr- {
      -webkit-animation: 4s linear 0s infinite alternate bounce;
      animation: 4s linear 0s infinite alternate bounce;
    }

![format_png 4][]

#### safe-area (v0.1.6) ####

<table> 
 <tbody> 
  <tr> 
   <th>class</th> 
   <th>Properties</th> 
  </tr> 
  <tr> 
   <td>p-safe</td> 
   <td>padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)</td> 
  </tr> 
  <tr> 
   <td>pt-safe</td> 
   <td>padding-top: env(safe-area-inset-top)</td> 
  </tr> 
  <tr> 
   <td>pb-safe</td> 
   <td>padding-bottom: env(safe-area-inset-bottom)</td> 
  </tr> 
  <tr> 
   <td>pl-safe</td> 
   <td>padding-left: env(safe-area-inset-left)</td> 
  </tr> 
  <tr> 
   <td>pr-safe</td> 
   <td>padding-right: env(safe-area-inset-right)</td> 
  </tr> 
 </tbody> 
</table>

#### width and height ####

<table> 
 <tbody> 
  <tr> 
   <th>class</th> 
   <th>Properties</th> 
  </tr> 
  <tr> 
   <td>h-1_2<br> h-1/2<br> h-half</td> 
   <td>height: 50%</td> 
  </tr> 
  <tr> 
   <td>w-1_3<br> w-1/3</td> 
   <td>width: 33.33333%</td> 
  </tr> 
  <tr> 
   <td>h-full</td> 
   <td>height: 100%</td> 
  </tr> 
  <tr> 
   <td>width-20</td> 
   <td>width: 20r</td> 
  </tr> 
  <tr> 
   <td>h-xs</td> 
   <td>height: 180rpx</td> 
  </tr> 
 </tbody> 
</table>

> 预设

export const baseSize = {
      'xs': '180rpx',
      'sm': '220rpx',
      'md': '260rpx',
      'lg': '300rpx',
      'xl': '340rpx',
      '2xl': '390rpx',
      '3xl': '440rpx',
      '4xl': '490rpx',
      '5xl': '540rpx',
      '6xl': '590rpx',
      '7xl': '640rpx',
      '8xl': '690rpx',
      '9xl': '740rpx',
      'full': '100%',
      'half': '50%',
    }

--------------------

#### border ####

<table> 
 <tbody> 
  <tr> 
   <th>class</th> 
   <th>Properties</th> 
  </tr> 
  <tr> 
   <td>border-2</td> 
   <td>border-width:2rpx;border-style:solid;</td> 
  </tr> 
  <tr> 
   <td>b-2</td> 
   <td>border-width:2rpx;border-style:solid;</td> 
  </tr> 
  <tr> 
   <td>border-dashed</td> 
   <td>border-style:dashed</td> 
  </tr> 
  <tr> 
   <td>rounded-1_2<br> rounded-1/2<br> rounded-half</td> 
   <td>border-radius:50%</td> 
  </tr> 
  <tr> 
   <td>rounded-md</td> 
   <td>border-radius:12rpx</td> 
  </tr> 
 </tbody> 
</table>

> 预设

export const borderRadius = {
      'DEFAULT': '8rpx',
      'none': '0',
      'sm': '4rpx',
      'md': '12rpx',
      'lg': '16rpx',
      'xl': '24rpx',
      '2xl': '32rpx',
      '3xl': '48rpx',
      'half': '50%',
      'full': '9999px',
    }

--------------------

#### border-color ####

<table> 
 <tbody> 
  <tr> 
   <th>class</th> 
   <th>Properties</th> 
  </tr> 
  <tr> 
   <td>border-red-100<br> border-red-1</td> 
   <td>--un-border-opacity:1; border-color:rgba(254,226,226,var(--un-border-opacity))</td> 
  </tr> 
  <tr> 
   <td>border-opacity-20<br> border-op-20</td> 
   <td>--un-border-opacity:0.2</td> 
  </tr> 
  <tr> 
   <td>border-black_10<br> border-black/10<br> border-black:10</td> 
   <td>border-color:rgba(0,0,0,0.1)</td> 
  </tr> 
 </tbody> 
</table>

--------------------

#### color ####

<table> 
 <tbody> 
  <tr> 
   <th>class</th> 
   <th>Properties</th> 
  </tr> 
  <tr> 
   <td>op-10<br> opacity-10</td> 
   <td>opacity:0.1</td> 
  </tr> 
  <tr> 
   <td>color-hex-157<br> c-hex-157<br> c-[#157]</td> 
   <td>--un-text-opacity:1;color:rgba(17,85,119,var(--un-text-opacity))</td> 
  </tr> 
  <tr> 
   <td>c-hex-157_10<br> c-hex-157/10<br> c-[#157]/10<br> c-[#157]:10<br> c-[#157]_10</td> 
   <td>color:rgba(17,85,119,0.1)</td> 
  </tr> 
  <tr> 
   <td>color-blue,<br> color-blue-400,<br> c-blue</td> 
   <td>--un-text-opacity:1;color:rgba(96,165,250,var(--un-text-opacity))</td> 
  </tr> 
  <tr> 
   <td>text-red-100<br> text-red100<br> text-red1</td> 
   <td>--un-text-opacity:1;color:rgba(254,226,226,var(--un-text-opacity))</td> 
  </tr> 
  <tr> 
   <td>text-red-100_20<br> text-red-100/20<br> text-red-100:20</td> 
   <td>color:rgba(254,226,226,0.2)</td> 
  </tr> 
 </tbody> 
</table>

#### bg ####

<table> 
 <tbody> 
  <tr> 
   <th>class</th> 
   <th>Properties</th> 
  </tr> 
  <tr> 
   <td>bg-hex-452233_40<br> bg-[#452233]_40<br> bg-[#452233]/40<br> bg-[#452233]:40</td> 
   <td>background-color:rgba(69,34,51,0.4)</td> 
  </tr> 
  <tr> 
   <td>bg-red-100<br> bg-red1<br> bg-red100</td> 
   <td>--un-bg-opacity:1;background-color:rgba(254,226,226,var(--un-bg-opacity))</td> 
  </tr> 
  <tr> 
   <td>bg-teal-100_55<br> bg-teal-100/55<br> bg-teal-100:55</td> 
   <td>background-color:rgba(204,251,241,0.55)</td> 
  </tr> 
  <tr> 
   <td>bg-opacity-45</td> 
   <td>--un-bg-opacity:0.45</td> 
  </tr> 
 </tbody> 
</table>

#### typography ####

<table> 
 <tbody> 
  <tr> 
   <th>class</th> 
   <th>Properties</th> 
  </tr> 
  <tr> 
   <td>text-base</td> 
   <td>font-size:32rpx;line-height:48rpx</td> 
  </tr> 
  <tr> 
   <td>text-100<br> text-size-100</td> 
   <td>font-size:100rpx</td> 
  </tr> 
  <tr> 
   <td>text-2em</td> 
   <td>font-size:2em</td> 
  </tr> 
  <tr> 
   <td>font-900,<br> font-black<br> fw-900</td> 
   <td>font-weight:900</td> 
  </tr> 
  <tr> 
   <td>font-leading-2<br> leading-2</td> 
   <td>line-height:16rpx</td> 
  </tr> 
  <tr> 
   <td>indent</td> 
   <td>text-indent:48rpx</td> 
  </tr> 
  <tr> 
   <td>indent-2</td> 
   <td>text-indent:16rpx</td> 
  </tr> 
  <tr> 
   <td>indent-1_2<br> indent-1/2<br> indent-1:2</td> 
   <td>text-indent:50%</td> 
  </tr> 
  <tr> 
   <td>indent-lg</td> 
   <td>text-indent:64rpx</td> 
  </tr> 
  <tr> 
   <td>text-shadow-lg</td> 
   <td>--un-text-shadow:6rpx 6rpx 12rpx var(--un-text-shadow-color, rgba(0,0,0,0.26)),0 0 10rpx var(--un-text-shadow-color, rgba(15,3,86,0.22));text-shadow:var(--un-text-shadow)</td> 
  </tr> 
  <tr> 
   <td>word-spacing-2</td> 
   <td>word-spacing:16rpx</td> 
  </tr> 
  <tr> 
   <td>tracking-2</td> 
   <td>letter-spacing:16rpx</td> 
  </tr> 
 </tbody> 
</table>

> fontSize预设 `text-base`

export const fontSize: Theme['fontSize'] = {
      'xs': ['24rpx', '32rpx'],
      'sm': ['28rpx', '40rpx'],
      'base': ['32rpx', '48rpx'],
      'lg': ['36rpx', '56rpx'],
      'xl': ['40rpx', '56rpx'],
      '2xl': ['48rpx', '64rpx'],
      '3xl': ['60rpx', '72rpx'],
      '4xl': ['72rpx', '80rpx'],
      '5xl': ['96rpx', '1'],
      '6xl': ['120rpx', '1'],
      '7xl': ['144rpx', '1'],
      '8xl': ['192rpx', '1'],
      '9xl': ['256rpx', '1'],
    }
    text-100 => font-size:100rpx

> textIndent 预设 `indent-lg`

export const textIndent: Theme['textIndent'] = {
      'DEFAULT': '48rpx',
      'xs': '16rpx',
      'sm': '32rpx',
      'md': '48rpx',
      'lg': '64rpx',
      'xl': '80rpx',
      '2xl': '96rpx',
      '3xl': '128rpx',
    }

> `leadings` `tracking` `word-spacing` `indent` 计算方式

`indent-2` 原为 `text-indent: 0.5rem` 等于 `8px` ,

小程序使用 `750rpx` 的基准是 `2倍px` 等于 `16rpx` ,

所以计算为 `2*0.5*1rem = 2*0.5*16px = 16rpx`

indent-2    
    text-indent: 0.5rem 
    text-indent: 16rpx
    
    tracking-2    
    letter-spacing: 0.5rem  
    letter-spacing:16rpx
    
    word-spacing-2   
    word-spacing: 0.5rem  
    word-spacing:16rpx
    
    leadings-2  
    line-height: 0.5rem  
    line-height:16rpx

#### spacing ####

<table> 
 <tbody> 
  <tr> 
   <th>class</th> 
   <th>Properties</th> 
  </tr> 
  <tr> 
   <td>p-2,p2</td> 
   <td>padding:16rpx</td> 
  </tr> 
  <tr> 
   <td>mx-2</td> 
   <td>margin-left:16rpx;margin-right:16rpx</td> 
  </tr> 
  <tr> 
   <td>-m-lg</td> 
   <td>margin:-36rpx</td> 
  </tr> 
  <tr> 
   <td>pl-10px</td> 
   <td>padding-left:10px</td> 
  </tr> 
  <tr> 
   <td>m-10rpx</td> 
   <td>margin:10rpx</td> 
  </tr> 
  <tr> 
   <td>&gt; 预设</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

export const spacing = {
      'DEFAULT': '32rpx',
      'none': '0',
      'xs': '24rpx',
      'sm': '28rpx',
      'md': '36rpx',
      'lg': '40rpx',
      'xl': '48rpx',
      '2xl': '60rpx',
      '3xl': '72rpx',
      '4xl': '96rpx',
      '5xl': '120rpx',
      '6xl': '144rpx',
      '7xl': '192rpx',
      '8xl': '256rpx',
    }

#### box-shadow ####

> 预设

export const boxShadow = {
      'DEFAULT': ['var(--un-shadow-inset) 0 1px 3px 0 rgba(0,0,0,0.1)', 'var(--un-shadow-inset) 0 1px 2px -1px rgba(0,0,0,0.1)'],
      'none': '0 0 rgba(0,0,0,0)',
      'sm': 'var(--un-shadow-inset) 0 1px 2px 0 rgba(0,0,0,0.05)',
      'md': ['var(--un-shadow-inset) 0 4px 6px -1px rgba(0,0,0,0.1)', 'var(--un-shadow-inset) 0 2px 4px -2px rgba(0,0,0,0.1)'],
      'lg': ['var(--un-shadow-inset) 0 10px 15px -3px rgba(0,0,0,0.1)', 'var(--un-shadow-inset) 0 4px 6px -4px rgba(0,0,0,0.1)'],
      'xl': ['var(--un-shadow-inset) 0 20px 25px -5px rgba(0,0,0,0.1)', 'var(--un-shadow-inset) 0 8px 10px -6px rgba(0,0,0,0.1)'],
      '2xl': 'var(--un-shadow-inset) 0 25px 50px -12px rgba(0,0,0,0.25)',
      'inner': 'inset 0 2px 4px 0 rgba(0,0,0,0.05)',
    }

> 连体写法

#### flex gap ####

<table> 
 <tbody> 
  <tr> 
   <th>class</th> 
   <th>Properties</th> 
  </tr> 
  <tr> 
   <td>flex-basis-1_2</td> 
   <td>flex-basis:50%</td> 
  </tr> 
  <tr> 
   <td>flex-basis-2</td> 
   <td>flex-basis:16rpx</td> 
  </tr> 
  <tr> 
   <td>gap-4</td> 
   <td>grid-gap:32rpx;gap:32rpx</td> 
  </tr> 
  <tr> 
   <td>gap-x-2</td> 
   <td>grid-column-gap:16rpx;column-gap:16rpx;</td> 
  </tr> 
 </tbody> 
</table>

[tailwindcss]: https://link.zhihu.com/?target=https%3A//www.tailwindcss.cn/
[windicss]: https://link.zhihu.com/?target=https%3A//cn.windicss.org/
[unocss]: https://link.zhihu.com/?target=https%3A//uno.antfu.me/
[UnoCSS]: https://link.zhihu.com/?target=https%3A//github.com/unocss/unocss
[unocss-preset-weapp]: https://link.zhihu.com/?target=https%3A//github.com/MellowCo/unocss-preset-weapp
[transformerClass]: https://link.zhihu.com/?target=https%3A//github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerClass
[transformerAttributify]: https://link.zhihu.com/?target=https%3A//github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerAttributify
[attributify mode]: https://link.zhihu.com/?target=https%3A//github.com/unocss/unocss/tree/main/packages/preset-attributify%23attributify-mode
[uniapp-vue3 demo _playful-gumption-4bb42b.netlify.app]: https://link.zhihu.com/?target=https%3A//playful-gumption-4bb42b.netlify.app/
[format_png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/24/e401139d83be46c6951d23b908f12b66.png
[DEMO]: https://link.zhihu.com/?target=https%3A//github.com/MellowCo/unocss-preset-weapp/tree/main/examples/uniapp_vue2
[DEMO 1]: https://link.zhihu.com/?target=https%3A//github.com/MellowCo/unocss-preset-weapp/tree/main/examples/uniapp_vue3
[DEMO 2]: https://link.zhihu.com/?target=https%3A//github.com/MellowCo/unocss-preset-weapp/tree/main/examples/taro_webpack4_vue3
[DEMO 3]: https://link.zhihu.com/?target=https%3A//github.com/MellowCo/unocss-wechat
[tmui]: https://link.zhihu.com/?target=https%3A//tmui.design/
[css]: https://link.zhihu.com/?target=https%3A//tmui.design/doc/CSSTool/css.html
[format_png 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/24/afaf954756514ad1a43268b4fe2ac1cc.png
[format_png 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/24/9d991e74fcf04ce89c247f7686e97596.png
[tm-ui-demo]: https://link.zhihu.com/?target=https%3A//github.com/MellowCo/unplugin-attributify-to-class/tree/master/examples/tm-ui-demo
[Windi CSS]: https://link.zhihu.com/?target=https%3A//windicss.org/
[gradients]: https://link.zhihu.com/?target=https%3A//cn.windicss.org/utilities/backgrounds/gradients.html
[format_png 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/24/505093ace31b43a0b95690ddfdc71ea3.png
[windicss-animation]: https://link.zhihu.com/?target=https%3A//cn.windicss.org/utilities/animations/animation.html
[windicss_plugin-animations]: https://link.zhihu.com/?target=https%3A//cn.windicss.org/plugins/community/animations.html
[animate.css]: https://link.zhihu.com/?target=https%3A//animate.style/
[animista.net]: https://link.zhihu.com/?target=https%3A//animista.net/play/basic
[format_png 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/24/2c395d797fb440c29eec4f7565383267.png