更新记录

1.0.15（2024-04-24）

1. 新增 text-overflow 预设规则；

2. 对 transform 属性的 scale 值调整；如：scale(X|Y)?-[number % 100] 小于100表示缩小，大于100表示放大；

3. 对正则匹配规则优化；

1.0.14（2024-04-19）

1. 删除 unocss 文件夹

2. Options.once 默认值设为 true

1.0.13（2024-04-19）

1. 新增 Options.once 是否生成一次CSS样式；注：运行项目时，是否清除上次生成的原子类，然后重新生成。

2. 优化一套代码运行多个平台。

平台兼容性

简单版轻量原子化CSS

Usage

/** vite.config.js */
import { defineConfig } from 'vite';
import unocss from './js_sdk/a-hua-unocss';
import uni from '@dcloudio/vite-plugin-uni';

export default defineConfig({
    plugins: [
        uni(),
        unocss()

        /** 自定义预设【原子化CSS】规则 */
        // unocss({
        //     rules: [
        //         ['m-1', { margin: '1px' }],
        //         [/^m-([\.\d]+)$/, (_, m, d) => ({ margin: `${d}px` })]
        //     ]
        // })
    ]
});

/** App.vue */
<style lang="scss">
    /*每个页面公共css */
    @import "@/js_sdk/a-hua-unocss/index.scss";
</style>

// *.vue
<view class="p-20 mx-16 bg-red bg-red-20 text-white text-bold text-32 opacity-70">简单版轻量原子化CSS</view>
/** 
 * p-20 => padding: 20rpx;
 * opacity-70 => opacity: .7;
 * text-white => color: white;
 * text-32 => font-size: 32rpx;
 * text-bold => font-weight: bold;
 * bg-red => background-color: red;
 * bg-red-20 => background-color: rgba(red, .2);
 * mx-16 => margin-left: 16rpx;margin-right: 16rpx;
 */

Use Rule

• width、height

  example：w-full w-full-10 w-auto w-fit w-10
  rule：(w|h)-(auto|fit|number|full(-[1-9]0{1,2})?)

• margin

  example：m-full m--full m-full-10 m--full--10 m-auto m-10 m--10 ***
  example：mt-full mt--full mt-full-10 mt--full--10 mt-auto mt-10 mt--10 ***
  rule：m(t|r|b|l|x|y)?(-|--)(auto|number|full((-|--)[1-9]0{1,2})?)

• padding

  example：p-full p-full-10 p-10 ***
  example：pt-full pt-full-10 pt-10 ***
  rule：p(t|r|b|l|x|y)?-(number|full(-[1-9]0{1,2})?)

• background-color

  example：bg-red bg-red-10 bg-000 bg-000-10 bg-000000 bg-000000-10
  rule：bg-(color预设值|number:length[3|6])(-[1-9]0{1,2})?

• border

  example：b-1 b-soild b-red b-red-10 b-style-soild b-color-red b-color-red-10 ***
  example：bt-1 bt-soild bt-red bt-red-10 bt-style-soild bt-color-red bt-color-red-10 ***
  rule：b(t|r|b|l)?-(number|color预设值|border-style预设值|style|color)(-(color预设值|border-style预设值|[1-9]0{1,2}))?

• font-size

  example：text-24
  rule：text-[2468][02468]?

• text-align

  example：text-center ***
  rule：text-(center|right|left)

• text-overflow

  example：text-ellipsis
  rule：text-ellipsis

• color

  example：text-red text-red-10 text-000 text-000-10 text-000000 text-000000-10
  rule：text-(color预设值|number[1369]+:length[3|6])(-[1-9]0{1,2})?

• font-weight

  example：text-bold ***
  rule：text-(bold|normal)

• white-space

  example：nowrap ***
  rule：(nowrap|pre-line)

• display

  example：none block inline inline-flex ***
  rule：display-[display属性值，除多关键字语法以外]

• flex

  example：flex-1 flex-row flex-column flex-wrap flex-nowrap flex-reverse flex-auto
  rule：flex-([1-9]|row|column|wrap|nowrap|reverse|auto|none)

• justify-content

  example：justify-center justify-between justify-around justify-evenly ***
  rule：justify-(inherit|initial|unset|left|right|between|around|evenly|start|end|baseline)

• align-items

  example：items-center items-start items-end items-baseline ***
  rule：items-(inherit|initial|center|start|end|baseline|normal|stretch|revert|revert-layer)

• align-content

  example：content-center content-between content-around content-stretch ***
  rule：content-(inherit|initial|unset|center|between|around|stretch|normal|baseline)

• position

  example：relative relative-1 ***
  rule：[position属性值](-number[除static值外])?

• z-index

  example：z-1 z-[number]
  rule：z-[number]

• top、right、bottom、left

  example：top-1 top-full top-full-10 top--1 top--full top--full--10 ***
  rule：(top|right|bottom|left)(-|--)(number|full((-|--)[1-9]0{1,2})?)

• translate、scale

  example：translate-1 translate-full translate-full-10 translate--1 translate--full translate--full--10 ***
  rule：(translate(X|Y|Z)?|scale(X|Y)?)(-|--)(number|full((-|--)[1-9]0{1,2})?) 注：scale(X|Y)?-[number % 100] 小于100表示缩小，大于100表示放大

• rotate、skew

  example：rotate-45 rotate--45 rotateX-45 rotateX--45 ***
  rule：(rotate|skew)(-|--)[number]

• transform-origin

  example：transform-origin-ct transform-origin-center ***
  rule：transform-origin-(center|tr|br|bl|tr|ct|cr|cb|cl|tc|rc|bc|rc|number)

• transform-style

  example：transform-style-3d ***
  rule：transform-style-(flat|3d)

• overflow

  example：overflow-hidden overflowX-auto ***
  rule：overflow(X|Y)-[overflow属性值]

• gap [设置行与列之间的间隙]

  example：gap-200-3 表示【一行三列每列宽200】剩余的均分为间距
  rule：gap-[number]-[number]

• min、max-width、height

  example：min-w-10 min-w-full min-w-full-10 ***
  rule：(min|max)-(w|h)-(number|full(-[1-9]0{1,2})?)

• object-fit

  example：fit-none fit-cover ***
  rule：fit-[object-fit属性值]

• opacity

  example：opacity-10
  rule：opacity-[1-9]0{1,2}

• transition

  example：transition-color-300 ***
  rule：transition-(color|transform|border|bg|font-size|margin|padding|width|height)(-[1-9]0{1,2})?

• line-clamp [文字省略几行显示]

  example：line-1
  rule：line-[number]

• line-height

  example：line-height-10 ***
  rule：line-height-[number]

• border-radius

  example：round-10 round-t-10 round-tr-10 ***
  rule：round-([1-9][0-9]{0,2}|t|r|b|l|tr|tl|br|bl)(-[1-9][0-9]{0,2})?

• column-count [将一个元素的内容分成指定数量的列]

  example：column-count-2
  rule：column-count-[number]

• column-gap [设置元素列之间的间隔 gutter 大小]

  example：column-gap-10
  rule：column-gap-[number]

• box-sizing

  example：box-border ***
  rule：box-(content|border)

• break-inside [设置生成的盒子内部的页面、栏或区域应有的中断行为。如果没有生成盒子，则该属性将被忽略]

  example：avoid-column
  rule：avoid-column

Options

• unit

  type：string
  default：rpx
  explain：单位

• once

  type：boolean
  default：true
  explain：true 只第一次运行项目生成原子类样式；false 每次运行项目清空上次生成原子类样式，然后重新生成原子类样式

• rules

  default：[]
  explain：自定义预设CSS规则
  type：Rules

    type CSSEntries = [string, string | number][];
    type CSSObject = Record<string, string | number>;
    type CSSValue = CSSObject | CSSEntries;
    type Rules = [string, CSSObject | CSSEntries] | [RegExp, ((match: RegExpMatchArray, ...context: string[]) => CSSValue | string | (CSSValue | string)[] | undefined)]

• cssFilePath

  type：string
  default：@/js_sdk/a-hua-unocss/index.scss
  explain：预设css文件路径；注：此属性只对 mp-weixin 生效。需要配合 autoImport 使用

• autoImport

  type：boolean
  default：true
  explain：是否在使用了此规则的 .vue 文件，自动引入预设 .scss 文件；注：此属性只对 mp-weixin 生效。因为 uniapp 编译 mp-weixin 问题，开发环境默认自动添加，生产环境自动删除。故而开发微信小程序时不要关闭该属性。后续迭代版本会解决此问题

Contact

• 欢迎大家提供建议。
• wx：_____ahua
• phone：15850531310
• email：cvsq@icloud.com