0.0.33 • Published 3 months ago

@meizhou/atomcss v0.0.33

Weekly downloads
-
License
MIT
Repository
-
Last release
3 months ago

为啥是?

  1. 动态规则，灵活
  2. 代码提示插件
  3. 专为vue、uniapp -webkit-tap-highlight-color: transparent; background-color: #f8f8f8; border-radius: 5px; box-sizing: border-box; color: #000; cursor: pointer; display: block; font-size: 18px; line-height: 2.55555556; margin-left: auto; margin-right: auto; overflow: hidden; padding-left: 14px; padding-right: 14px; position: relative; text-align: center; text-decoration: none;

假设有如下vue文件，未定义style样式 w-10%

<template>
  <view class="w-10% myclsss">
    ...
  </view>
</template>

<style type="text/css">
// 空内容
</style>

插件会自动生成如下css样式，不需要写css

// myclsss 不会生成样式

// w-10% 生成如下的样式
.w-10%{
  width:10%;
}

解释： w-10% 命中预设的规则 生成规则指定的CSS样式

w-10% 命中的预设规则： 
 [
   /^(width|w)-(\d+)(vh|vw|%)*$/,
   (match, { unit }) => ({ 'width': `${match[2]}${match[3]?match[3]:unit};` })
 ]
 
 该规则的效果： 
 w-10%        => width:10%;
 w-50        => width:100rpx;  
 w-20vh       => width:20vh
 width-50%    => width:50%;

使用

当前支持 uniapp， vue2， vue3， vitepress

1.下载

pnpm i css-allin-class -D

2.修改 vue 配置文件

  • vue2
// vue.config.js
const { defineConfig } = require('@vue/cli-service')
const { allin } = require('css-allin-class')
const { preset } = require('css-allin-class/preset')

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    plugins: [
      allin({
        // unit:'px',
        // rules: [],
        presets: [preset()]
      })
    ]
  }
})
  • vue3
// vite.config.js
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import allin from 'css-allin-class'
import preset from 'css-allin-class/preset'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    allin({
      // unit:'px',
      // rules: [],
      presets:[preset()]
    }),
    vue()
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni';
import allin from 'css-allin-class'
import preset from 'css-allin-class/preset'


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    uni(),
    allin({
      // unit:'px',
      // rules: [],
      presets:[preset()]
    }),
  ],
})
  • vitepress
// .vitepress/config.js
import { defineConfig } from 'vitepress'
import allin from 'css-allin-class'
import preset from 'css-allin-class/preset'

// https://vitepress.dev/reference/site-config
export default defineConfig({
  vite: {
    plugins: [
      allin({ unit:'px', prefix:'a-', presets:[preset()]})
    ]
  },
  ...
})

3. 安装vscode、hbuilderx代码提示插件

插件开发中 跳过

可选配置

预设样式

  • 导入
// vue.config.js
const allinClass = require('css-allin-class')
const preset = require('css-allin-class/preset') // 预设样式 可选配置

module.exports = {
  configureWebpack: {
    plugins: [
      allin({
        // unit:'px',
        // rules: [],
        presets: [preset()]
      })
    ]
  }
}

预设规则示例

flex-wrap"

  class="wrap" => "flex-wrap:wrap;"
  class="nowrap" => "flex-wrap:nowrap;"
  class="wrap-reverse" =>  "flex-wrap:wrap-reverse;"

flex-wrap"

  class="row" => "flex-direction: row;"
  class="row-reverse" =>  "flex-direction: row-reverse;"
  class="col" => "flex-direction: column;"
  class="col-reverse" =>  "flex-direction: column-reverse;"

flex-basis"

  class="basis-1" => "flex-basis: 1rpx;"
  class="basis-1.1px" =>  "flex-basis: 1.1px;"
  class="basis-1.1em" =>  "flex-basis: 1.1em;"
  class="basis-1.1%" =>  "flex-basis: 1.1%;"
  class="basis-auto" =>  "flex-basis: auto;"
  class="fb-1" => "flex-basis: 1rpx;"
  class="fb-1.1px" => "flex-basis: 1.1px;"
  class="fb-1.1em" => "flex-basis: 1.1em;"
  class="fb-1.1%" => "flex-basis: 1.1%;"
  class="fb-auto" => "flex-basis: auto;"

flex-grow"

  class="grow-1" => "flex-grow: 1;"
  class="grow-1.1" => "flex-grow: 1.1;"

flex-shrink"

  class="shrink-1" => "flex-shrink: 1;"
  class="shrink-1.1" =>  "flex-shrink: 1.1;"

columns"

  class="col-1" => "columns: 1 ;"
  class="col-1em" => "columns: 1em ;"
  class="col-auto-auto" =>  "columns: auto auto;"
  class="col-auto" => "columns: auto;"
  class="col-auto-1" => "columns: auto 1;"
  class="col-auto-1em" =>  "columns: auto 1em;"
  class="col-1-auto" => "columns: 1 auto;"
  class="col-1em-auto" =>  "columns: 1em auto;"

justify-content"

  class="jc-n" =>  "justify-content: normal;"
  class="jc-fs" =>  "justify-content: flex-start;"
  class="jc-fe" =>  "justify-content: flex-end;"
  class="jc-c" =>  "justify-content: center;"
  class="jc-sb" =>  "justify-content: space-between;"
  class="jc-sa" =>  "justify-content: space-around;"
  class="jc-se" =>  "justify-content: sspace-evenly;"
  class="jc-s" =>  "justify-content: stretch;"

justify-items"

  class="ji-fs" =>  "justify-items: flex-start;"
  class="ji-fe" =>  "justify-items: flex-end;"
  class="ji-c" => "justify-items: center;"
  class="ji-s" =>  "justify-items: stretch;"

justify-self"

  class="js-a" => "justify-self: auto;"
  class="js-fs" =>  "justify-self: flex-start;"
  class="js-fe" =>  "justify-self: flex-end;"
  class="js-c" => "justify-self: center;"
  class="js-s" => "justify-self: stretch;"

align-content"

  class="ac-n" => "align-content: normal;"
  class="ac-c" => "align-content: center;"
  class="ac-fs" =>  "align-content: flex-start;"
  class="ac-fe" =>  "align-content: flex-end;"
  class="ac-sb" =>  "align-content: space-between;"
  class="ac-sa" =>  "align-content: space-around;"
  class="ac-se" =>  "align-content: sspace-evenly;"
  class="ac-s" =>  "align-content: stretch;"
  class="ac-b" =>  "align-content: baseline;"

align-items"

  class="ai-c" => "align-items: center;"
  class="ai-fs" =>  "align-items: flex-start;"
  class="ai-fe" =>  "align-items: flex-end;"
  class="ai-s" => "align-items: stretch;"
  class="ai-b" => "align-items: baseline;"

align-items"

  class="as-a" => "align-self: auto;"
  class="as-s" =>  "align-self: flex-start;"
  class="as-e" => "align-self: flex-end;"
  class="as-c" => "align-self: center;"
  class="as-b" => "align-self: baseline;"
  class="as-st" => "align-self: stretch;"

border"

  class="border" =>  "border:1rpx solid #c1c1c1;"
  class="border-4-solid-#c1c" =>  "border:4rpx solid #c1c;"
  class="border-4-#c1c1c1-solid" =>  "border:4rpx solid #c1c1c1;"
  class="border-4-solid" =>  "border:4rpx solid #c1c1c1;"
  class="border-4-#c1c1c1" =>  "border:4rpx solid #c1c1c1;"
  class="border-4" =>  "border:4rpx solid #c1c1c1;"
  class="border" =>  "border:1rpx solid #c1c1c1;"
  class="border-solid" =>  "border:1rpx solid #c1c1c1;"
  class="border-solid-4" =>  "border:4rpx solid #c1c1c1;"
  class="border-solid-4-#f2" =>  "border:4rpx solid #f2f2f2;"
  class="border-solid-#f2-4" =>  "border:4rpx solid #f2f2f2;"
  class="border-solid-#c1c1c1" =>  "border:1rpx solid #c1c1c1;"
  class="border-solid-#f2" =>  "border:1rpx solid #f2f2f2;"
  class="border-#c1c1c1" =>  "border:1rpx solid #c1c1c1;"
  class="border-#f2-solid-4" =>  "border:4rpx solid #f2f2f2;"
  class="border-#f2-4-solid" =>  "border:4rpx solid #f2f2f2;"
  class="border-#f2-4" =>  "border:4rpx solid #f2f2f2;"
  class="border-#f2-solid" =>  "border:1rpx solid #f2f2f2;"

border-color"

  class="bc-#4" => "border-color:#444444;"
  class="bc-#45" =>  "border-color:#454545;"
  class="bc-#456" =>  "border-color:#456456;"

border-width"

  class="bw-r-4" =>  "border-right-width:4rpx;"
  class="bw-4" => "border-width:4rpx;"

border-radius"

  class="radius-t-1" =>  "border-top-left-radius:1rpx;border-top-right-radius:1rpx;"
  class="radius-b-2" =>  "border-bottom-left-radius:2rpx;border-bottom-right-radius:2rpx;"
  class="radius-l-3" =>  "border-top-left-radius:3rpx;border-bottom-left-radius:3rpx;"
  class="radius-r-4" =>  "border-top-right-radius:4rpx;border-bottom-right-radius:4rpx;"
  class="radius-r-50%" =>  "border-top-right-radius:50%;border-bottom-right-radius:50%;"
  class="br-t-1" =>  "border-top-left-radius:1rpx;border-top-right-radius:1rpx;"
  class="br-b-2" =>  "border-bottom-left-radius:2rpx;border-bottom-right-radius:2rpx;"
  class="br-l-3" =>  "border-top-left-radius:3rpx;border-bottom-left-radius:3rpx;"
  class="br-r-4" =>  "border-top-right-radius:4rpx;border-bottom-right-radius:4rpx;"
  class="br-r-50%" =>  "border-top-right-radius:50%;border-bottom-right-radius:50%;"
  class="br-tr-50%" =>  "border-top-right-radius:50%;"
  class="br-10" =>  "border-radius:10rpx;"
  class="radius-10" =>  "border-radius:10rpx;"
  class="radius-10-20" =>  "border-radius:10rpx 20rpx;"
  class="radius-10-20-30" =>  "border-radius:10rpx 20rpx 30rpx;"
  class="radius-10-20-30-40" =>  "border-radius:10rpx 20rpx 30rpx 40rpx;"
  class="radius-10-20-30-40-50" =>  undefined"
  class="radius-10-20-30-40%" =>  "border-radius:10% 20% 30% 40%;"
  class="radius-tr-40" =>  "border-top-right-radius:40rpx;"
  class="radius-tl-40" =>  "border-top-left-radius:40rpx;"
  class="radius-br-40" =>  "border-bottom-right-radius:40rpx;"
  class="radius-bl-40" =>  "border-bottom-left-radius:40rpx;"

border-bottom"

  class="border-b" =>  "border-bottom:1rpx solid #c1c1c1;"
  class="border-b-4" =>  "border-bottom:4rpx solid #c1c1c1;"
  class="border-b-4-dashed" =>  "border-bottom:4rpx dashed #c1c1c1;"
  class="border-b-4-dashed-#ed" =>  "border-bottom:4rpx dashed #ededed;"
  class="border-b-4-#ed-dashed" =>  "border-bottom:4rpx dashed #ededed;"
  class="border-b-4-#ed" =>  "border-bottom:4rpx solid #ededed;"
  class="border-b-#ed" =>  "border-bottom:1rpx solid #ededed;"
  class="border-b-#ed-dashed" =>  "border-bottom:1rpx dashed #ededed;"
  class="border-b-#ed-dashed" =>  "border-bottom:1rpx dashed #ededed;"
  class="border-b-4-solid-#c1c" =>  "border-bottom:4rpx solid #c1c;"
  class="border-b-4-#c1c1c1-solid" =>  "border-bottom:4rpx solid #c1c1c1;"
  class="border-b-4-solid" =>  "border-bottom:4rpx solid #c1c1c1;"
  class="border-b-4-#c1c1c1" =>  "border-bottom:4rpx solid #c1c1c1;"
  class="border-b-4" =>  "border-bottom:4rpx solid #c1c1c1;"
  class="border-b" =>  "border-bottom:1rpx solid #c1c1c1;"
  class="border-b-solid" =>  "border-bottom:1rpx solid #c1c1c1;"
  class="border-b-solid-4" =>  "border-bottom:4rpx solid #c1c1c1;"
  class="border-b-solid-4-#f2" =>  "border-bottom:4rpx solid #f2f2f2;"
  class="border-b-solid-#f2-4" =>  "border-bottom:4rpx solid #f2f2f2;"
  class="border-b-solid-#c1c1c1" =>  "border-bottom:1rpx solid #c1c1c1;"
  class="border-b-solid-#f2" =>  "border-bottom:1rpx solid #f2f2f2;"
  class="border-b-#c1c1c1" =>  "border-bottom:1rpx solid #c1c1c1;"
  class="border-b-#f2-solid-4" =>  "border-bottom:4rpx solid #f2f2f2;"
  class="border-b-#f2-4-solid" =>  "border-bottom:4rpx solid #f2f2f2;"
  class="border-b-#f2-4" =>  "border-bottom:4rpx solid #f2f2f2;"
  class="border-b-#f2-solid" =>  "border-bottom:1rpx solid #f2f2f2;"

border-left"

  class="border-l" =>  "border-left:1rpx solid #c1c1c1;"
  class="border-l-4" =>  "border-left:4rpx solid #c1c1c1;"
  class="border-l-4-dashed" =>  "border-left:4rpx dashed #c1c1c1;"
  class="border-l-4-dashed-#ed" =>  "border-left:4rpx dashed #ededed;"
  class="border-l-4-solid-#c1c" =>  "border-left:4rpx solid #c1c;"
  class="border-l-4-#c1c1c1-solid" =>  "border-left:4rpx solid #c1c1c1;"
  class="border-l-4-solid" =>  "border-left:4rpx solid #c1c1c1;"
  class="border-l-4-#c1c1c1" =>  "border-left:4rpx solid #c1c1c1;"
  class="border-l-4" =>  "border-left:4rpx solid #c1c1c1;"
  class="border-l" =>  "border-left:1rpx solid #c1c1c1;"
  class="border-l-solid" =>  "border-left:1rpx solid #c1c1c1;"
  class="border-l-solid-4" =>  "border-left:4rpx solid #c1c1c1;"
  class="border-l-solid-4-#f2" =>  "border-left:4rpx solid #f2f2f2;"
  class="border-l-solid-#f2-4" =>  "border-left:4rpx solid #f2f2f2;"
  class="border-l-solid-#c1c1c1" =>  "border-left:1rpx solid #c1c1c1;"
  class="border-l-solid-#f2" =>  "border-left:1rpx solid #f2f2f2;"
  class="border-l-#c1c1c1" =>  "border-left:1rpx solid #c1c1c1;"
  class="border-l-#f2-solid-4" =>  "border-left:4rpx solid #f2f2f2;"
  class="border-l-#f2-4-solid" =>  "border-left:4rpx solid #f2f2f2;"
  class="border-l-#f2-4" =>  "border-left:4rpx solid #f2f2f2;"
  class="border-l-#f2-solid" =>  "border-left:1rpx solid #f2f2f2;"

border-right"

  class="border-r" =>  "border-right:1rpx solid #c1c1c1;"
  class="border-r-4" =>  "border-right:4rpx solid #c1c1c1;"
  class="border-r-4-dashed" =>  "border-right:4rpx dashed #c1c1c1;"
  class="border-r-4-dashed-#ed" =>  "border-right:4rpx dashed #ededed;"
  class="border-r-4-solid-#c1c" =>  "border-right:4rpx solid #c1c;"
  class="border-r-4-#c1c1c1-solid" =>  "border-right:4rpx solid #c1c1c1;"
  class="border-r-4-solid" =>  "border-right:4rpx solid #c1c1c1;"
  class="border-r-4-#c1c1c1" =>  "border-right:4rpx solid #c1c1c1;"
  class="border-r-4" =>  "border-right:4rpx solid #c1c1c1;"
  class="border-r" =>  "border-right:1rpx solid #c1c1c1;"
  class="border-r-solid" =>  "border-right:1rpx solid #c1c1c1;"
  class="border-r-solid-4" =>  "border-right:4rpx solid #c1c1c1;"
  class="border-r-solid-4-#f2" =>  "border-right:4rpx solid #f2f2f2;"
  class="border-r-solid-#f2-4" =>  "border-right:4rpx solid #f2f2f2;"
  class="border-r-solid-#c1c1c1" =>  "border-right:1rpx solid #c1c1c1;"
  class="border-r-solid-#f2" =>  "border-right:1rpx solid #f2f2f2;"
  class="border-r-#c1c1c1" =>  "border-right:1rpx solid #c1c1c1;"
  class="border-r-#f2-solid-4" =>  "border-right:4rpx solid #f2f2f2;"
  class="border-r-#f2-4-solid" =>  "border-right:4rpx solid #f2f2f2;"
  class="border-r-#f2-4" =>  "border-right:4rpx solid #f2f2f2;"
  class="border-r-#f2-solid" =>  "border-right:1rpx solid #f2f2f2;"

border-top"

  class="border-t" =>  "border-top:1rpx solid #c1c1c1;"
  class="border-t-4" =>  "border-top:4rpx solid #c1c1c1;"
  class="border-t-4-dashed" =>  "border-top:4rpx dashed #c1c1c1;"
  class="border-t-4-dashed-#ed" =>  "border-top:4rpx dashed #ededed;"
  class="border-t-4-solid-#c1c" =>  "border-top:4rpx solid #c1c;"
  class="border-t-4-#c1c1c1-solid" =>  "border-top:4rpx solid #c1c1c1;"
  class="border-t-4-solid" =>  "border-top:4rpx solid #c1c1c1;"
  class="border-t-4-#c1c1c1" =>  "border-top:4rpx solid #c1c1c1;"
  class="border-t-4" =>  "border-top:4rpx solid #c1c1c1;"
  class="border-t" =>  "border-top:1rpx solid #c1c1c1;"
  class="border-t-solid" =>  "border-top:1rpx solid #c1c1c1;"
  class="border-t-solid-4" =>  "border-top:4rpx solid #c1c1c1;"
  class="border-t-solid-4-#f2" =>  "border-top:4rpx solid #f2f2f2;"
  class="border-t-solid-#f2-4" =>  "border-top:4rpx solid #f2f2f2;"
  class="border-t-solid-#c1c1c1" =>  "border-top:1rpx solid #c1c1c1;"
  class="border-t-solid-#f2" =>  "border-top:1rpx solid #f2f2f2;"
  class="border-t-#c1c1c1" =>  "border-top:1rpx solid #c1c1c1;"
  class="border-t-#f2-solid-4" =>  "border-top:4rpx solid #f2f2f2;"
  class="border-t-#f2-4-solid" =>  "border-top:4rpx solid #f2f2f2;"
  class="border-t-#f2-4" =>  "border-top:4rpx solid #f2f2f2;"
  class="border-t-#f2-solid" =>  "border-top:1rpx solid #f2f2f2;"

css颜色变量"

  class="bg-v-c-bg-page" =>  "background-color:var(--c-bg-page";"
  class="c-v-c-bg-page" =>  "color:var(--c-bg-page";"
  class="c-v-c1-bg2-3" =>  "color:var(--c1-bg2-3";"

translate"

  class="translateX-.04" =>  "transform:translateX(.04rpx";"
  class="translateY-.04" =>  "transform:translateY(.04rpx";"
  class="translateY--.04" =>  "transform:translateY(-.04rpx";"
  class="translateY-40%" =>  "transform:translateY(40%";"
  class="translateY--40%" =>  "transform:translateY(-40%";"

shadow阴影"

  class="shadow-.4" =>  "box-shadow:0px 4px 12px 0px rgba(0, 0, 0, .4";"
  class="shadow-0.4" =>  "box-shadow:0px 4px 12px 0px rgba(0, 0, 0, .4";"
  class="shadow-0.04" =>  "box-shadow:0px 4px 12px 0px rgba(0, 0, 0, .04";"
  class="shadow-1-.04" =>  "box-shadow:1px 4px 12px 0px rgba(0, 0, 0, .04";"
  class="shadow-1-2-.04" =>  "box-shadow:1px 2px 12px 0px rgba(0, 0, 0, .04";"
  class="shadow-1-2-3-.04" =>  "box-shadow:1px 2px 3px 0px rgba(0, 0, 0, .04";"
  class="shadow-1-2-3-4-.04" =>  "box-shadow:1px 2px 3px 4px rgba(0, 0, 0, .04";"

行高"

  class="lh-10" => "line-height: 10;"
  class="lh-10.09" =>  "line-height: 10.09;"
  class="lh-10.09" =>  "line-height: 10.09;"
  class="lh-.09" => "line-height: .09;"
  class="lh-10px" => "line-height: 10px;"
  class="lh-10rpx" =>  "line-height: 10rpx;"

text-align"

  class="ta-l" => "text-align: left;"
  class="ta-c" => "text-align: center;"
  class="ta-r" => "text-align: right;"
  class="ta-j" => "text-align: justify;"
  class="ta-s" => "text-align: start;"
  class="ta-e" => "text-align: end;"

text-indent"

  class="ti-1" => "text-indent: 1rpx;"
  class="ti-1px" => "text-indent: 1px;"
  class="ti-1.5em" =>  "text-indent: 1.5em;"

最小最大高度"

  class="min-w-0" => "min-width:0rpx;"
  class="min-w-10.9" =>  "min-width:10.9rpx;"
  class="min-w-.9" => "min-width:.9rpx;"
  class="min-w-50vw" => "min-width:50vw;"
  class="min-w-50%" => "min-width:50%;"
  class="min-h-0" => "min-height:0rpx;"
  class="min-h-10.9" =>  "min-height:10.9rpx;"
  class="min-h-.9" => "min-height:.9rpx;"
  class="min-h-50vw" => "min-height:50vw;"
  class="min-h-50%" => "min-height:50%;"
  class="max-w-0" => "max-width:0rpx;"
  class="max-w-10.9" =>  "max-width:10.9rpx;"
  class="max-w-.9" => "max-width:.9rpx;"
  class="max-w-50vw" => "max-width:50vw;"
  class="max-w-50%" => "max-width:50%;"
  class="max-h-0" => "max-height:0rpx;"
  class="max-h-10.9" =>  "max-height:10.9rpx;"
  class="max-h-.9" => "max-height:.9rpx;"
  class="max-h-50vw" => "max-height:50vw;"
  class="max-h-50%" => "max-height:50%;"

opacity"

  class="opacity-0.5" => "opacity:0.5;"
  class="opacity-.5" => "opacity:.5;"

scale"

  class="scale-0.5" =>  "transform:scale(0.5";"
  class="scaleX-.5" =>  "transform:scaleX(.5";"
  class="scaleY-.5" =>  "transform:scaleY(.5";"

rotate"

  class="rotate-0.5" =>  "transform:rotate(0.5deg";"
  class="rotate-.5" =>  "transform:rotate(.5deg";"
  class="rotate-.5" =>  "transform:rotate(.5deg";"

order"

  class="order-1.5" => "order:1.5;"
  class="order-.5" => "order:.5;"
  class="order-5" => "order:5;"
  class="order--999" => "order:-999;"

z-index"

  class="z-10" => "z-index:10;"
  class="z-auto" => "z-index:auto;"

上下左右"

  class="t-10" => "top:10rpx;"
  class="t-10%" => "top:10%;"
  class="t--10%" => "top:-10%;"
  class="t--10vh" => "top:-10vh;"
  class="t-10vw" => "top:10vw;"
  class="t-.10vw" => "top:.10vw;"
  class="t-10.10vw" => "top:10.10vw;"
  class="t-10.10" => "top:10.10rpx;"
  class="inset--10%" =>  "top: -10%;right: -10%;bottom: -10%;left: -10%;"
  class="inset--10" =>  "top: -10rpx;right: -10rpx;bottom: -10rpx;left: -10rpx;"
  class="inset-0" =>  "top: 0rpx;right: 0rpx;bottom: 0rpx;left: 0rpx;"
  class="inset-0.5" =>  "top: 0.5rpx;right: 0.5rpx;bottom: 0.5rpx;left: 0.5rpx;"
  class="inset-.5" =>  "top: .5rpx;right: .5rpx;bottom: .5rpx;left: .5rpx;"
  class="b-10.10" => "bottom:10.10rpx;"
  class="r-10.10" => "right:10.10rpx;"
  class="l-10.10" => "left:10.10rpx;"

display"

  class="flex" => "display: flex;"
  class="grid" => "display: grid;"
  class="none" => "display: none;"
  class="block" => "display: block;"
  class="inline-block" =>  "display: inline-block;"
  class="inline" => "display: inline;"
  class="inline-flex" =>  "display: inline-flex;"
  class="table" => "display: table;"
  class="inline-table" =>  "display: inline-table;"
  class="table-caption" =>  "display: table-caption;"
  class="table-cell" =>  "display: table-cell;"
  class="table-column" =>  "display: table-column;"
  class="table-column-group" =>  "display: table-column-group;"
  class="table-footer-group" =>  "display: table-footer-group;"
  class="table-header-group" =>  "display: table-header-group;"
  class="table-row-group" =>  "display: table-row-group;"
  class="table-row" =>  "display: table-row;"
  class="flow-root" =>  "display: flow-root;"
  class="inline-grid" =>  "display: inline-grid;"
  class="contents" => "display: contents;"
  class="list-item" =>  "display: list-item;"

flex"

  class="flex-1" => "flex: 1;"
  class="f-1" => "flex: 1;"
  class="f-1-1" => "flex: 1 1;"
  class="f-1-1%" => "flex: 1 1%;"
  class="f-1-1-1%" => "flex: 1 1 1%;"
  class="f-auto" => "flex: auto;"
  class="f-none" => "flex: none;"

字体"

  class="fs-25" => "font-size: 25rpx;"
  class="fs-w25" => undefined"
  class="fs- => undefined"

颜色"

  class="c-#123" => "color:#123;"
  class="c-#1" => "color:#111111;"
  class="c-#12" => "color:#121212;"
  class="c-#123456" => "color:#123456;"
  class="c-#1111111" => undefined"
  class="c-#" => undefined"
  class="c-#d23" => "color:#d23;"
  class="c-#d2" => "color:#d2d2d2;"
  class="c-#d" => "color:#dddddd;"
  class="c-#0" => "color:#000000;"
  class="c-red" => "color:red;"
  class="c-red1" => undefined"
  class="c-cur" => "color:currentcolor;"
  class="c-initial" => "color:initial;"
  class="bg-#1" =>  "background-color:#111111;"
  class="bg-#d2" =>  "background-color:#d2d2d2;"
  class="bg-#d23" =>  "background-color:#d23;"
  class="bg-#d" =>  "background-color:#dddddd;"
  class="bg-red" =>  "background-color:red;"
  class="bg-red1" => undefined"
  class="rgba-1-2-3-4" =>  "color:rgba(1,2,3,.4";"
  class="rgba-1-2-3-0.6" =>  "color:rgba(1,2,3,0.6";"
  class="rgba-1-2-3-.6" =>  "color:rgba(1,2,3,.6";"
  class="gba-10-222-256" =>  "color:gba(10%,222%,256%";"

超出省略"

  class="ellipsis-1" =>  "-webkit-line-clamp: 1;overflow: hidden;word-break: break-all;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;"
  class="ellipsis-5" =>  "-webkit-line-clamp: 5;overflow: hidden;word-break: break-all;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;"

边距"

  class="m-10" => "margin:10rpx;"
  class="m--10" => "margin:-10rpx;"
  class="m-4-40" => "margin:4rpx 40rpx;"
  class="m-4-40-0-9" =>  "margin:4rpx 40rpx 0rpx 9rpx;"
  class="mt-20" => "margin-top:20rpx;"
  class="mb-20" => "margin-bottom:20rpx;"
  class="ml-20" => "margin-left:20rpx;"
  class="mr-20" => "margin-right:20rpx;"
  class="mlr-20" =>  "margin-left:20rpx;margin-right:20rpx;"
  class="mtb-20" =>  "margin-top:20rpx;margin-bottom:20rpx;"
  class="mtb-20.5" =>  "margin-top:20.5rpx;margin-bottom:20.5rpx;"
  class="m-auto" => "margin:auto;"
  class="mlr-auto" =>  "margin-left:auto;margin-right:auto;"
  class="mtb-auto" =>  "margin-top:auto;margin-bottom:auto;"
  class="ml-auto" => "margin-left:auto;"
  class="mt-auto" => "margin-top:auto;"
  class="mb-auto" => "margin-bottom:auto;"
  class="m-10-auto" =>  "margin:10rpx auto;"
  class="m-auto-10" =>  "margin:auto 10rpx;" //
  class="m-auto-10-10-auto" => "margin:auto 10rpx;"
  class="p-10" => "padding:10rpx;"
  class="p-auto" => "padding:auto;"
  class="p-4-40" => "padding:4rpx 40rpx;"
  class="p-10-auto" =>  "padding:10rpx auto;"
  class="p-auto-10" =>  "padding:auto 10rpx;"
  class="p-4-40-0-9" =>  "padding:4rpx 40rpx 0rpx 9rpx;"
  class="pt-20" => "padding-top:20rpx;"
  class="pb-20" => "padding-bottom:20rpx;"
  class="pl-20" => "padding-left:20rpx;"
  class="pr-20" => "padding-right:20rpx;"
  class="plr-20" =>  "padding-left:20rpx;padding-right:20rpx;"
  class="ptb-20" =>  "padding-top:20rpx;padding-bottom:20rpx;"
  class="ptb-20.5" =>  "padding-top:20.5rpx;padding-bottom:20.5rpx;"

宽高"

  class="wh-4.04" =>  "width:4.04rpx;height:4.04rpx;"
  class="wh-4.04rem" =>  "width:4.04rem;height:4.04rem;"
  class="wh-4" =>  "width:4rpx;height:4rpx;"
  class="wh-4vh" =>  "width:4vh;height:4vh;"
  class="wh-21vw" =>  "width:21vw;height:21vw;"
  class="wh-21rem" =>  "width:21rem;height:21rem;"
  class="wh-21.5em" =>  "width:21.5em;height:21.5em;"
  class="wh-21px" =>  "width:21px;height:21px;"
  class="wh-21rpx" =>  "width:21rpx;height:21rpx;"
  class="wh-40%" =>  "width:40%;height:40%;"
  class="wh-40.5%" =>  "width:40.5%;height:40.5%;"
  class="wh-40.05%" =>  "width:40.05%;height:40.05%;"
  class="width-100" => "width:100rpx;"
  class="width-100vh" => "width:100vh;"
  class="width-100vw" => "width:100vw;"
  class="width-100%" => "width:100%;"
  class="width-50%" => "width:50%;"
  class="w-100" => "width:100rpx;"
  class="w-100vh" => "width:100vh;"
  class="w-100vw" => "width:100vw;"
  class="w-100rem" => "width:100rem;"
  class="w-100px" => "width:100px;"
  class="w-100rpx" => "width:100rpx;"
  class="w-100em" => "width:100em;"
  class="w-100%" => "width:100%;"
  class="w-50%" => "width:50%;"
  class="w-50.5%" => "width:50.5%;"
  class="w-1.5" => "width:1.5rpx;"
  class="w-.5" => "width:.5rpx;"
  class="w-10.5" => "width:10.5rpx;"
  class="height-100" => "height:100rpx;"
  class="height-100vh" => "height:100vh;"
  class="height-100vw" => "height:100vw;"
  class="height-100%" => "height:100%;"
  class="height-50%" => "height:50%;"
  class="h-100" => "height:100rpx;"
  class="h-100vh" => "height:100vh;"
  class="h-100vw" => "height:100vw;"
  class="h-100%" => "height:100%;"
  class="h-50%" => "height:50%;"
  class="h-1.5" => "height:1.5rpx;"
  class="h-.5" => "height:.5rpx;"
  class="h-10.5" => "height:10.5rpx;"

鼠标样式"

  class="poiter" => "cursor: pointer;"

根据现有css文件，生成规则

字符串形式

cssFile: './style/index.scss',

对象形式

cssFile: {
  input:'./style/index.scss', // 支持文件夹和文件路径 
  // 局部 > 全局，局部prefix，suffix可以覆盖全局的prefix，suffix
  prefix: 'f', // 给这些文件内的css增加前缀
  suffix: 'suf', // 给这些文件内的css增加后缀
  rmPrefix: 'uni-', // 给这些文件内的css移除前后缀
  rmSuffix: 'ff', // 给这些文件内的css移除增加后缀
},

例如：

// 现有的css文件 位于 根目录/style/index.scss
.over-hide{overflow: hidden;}

.flex{display: flex;} .tn-flex {display: -webkit-flex;display: flex;} // 暂不支持 .flex .col5{width:20%;}

```js
// vue.config.js 指定css文件的路径
module.exports = {
  chainWebpack: (config) => {
    config
      .plugin('allinClass')
      .use(allinClass({
      cssFile: './style/index.scss'
   }))
  }
}
// 自动生成静态规则 加入rules
rules: [
   {
    'over-hide': 'overflow: hidden;',
    'flex': 'display: flex;',
    'tn-flex': 'display: -webkit-flex;display: flex;'
   }
]

规则配置

动态规则

动态规则使用 match 进行匹配，匹配有结果，调用数组第二项的方法，并把匹配值当做参数

rules: [
  [/^m-(\d+)$/, (match, { unit }) => ({ 'margin': `${match[1]}${unit};` })],
  [/^m-(\d+)-(\d+)-(\d+)-(\d+)$/, (match, { unit }) => ({ 'margin': `${match[1]}${unit};` })],
]

如果template中存在 {{title}}

m-10 可以被/^m-(\d+)$/匹配到，这时会调用(match, { unit }) => ({ 'margin': ${match[1]}${unit}; })得到返回值 => { 'margin': 10rpx; } // unit为配置的单位 默认rpx

m-10 将会生成css样式 .m-10{margin:10rpx;;}

### 静态规则

```js
rules: [
  // 数组形式
  ['flex', 'display:flex;'],
  // 对象形式
  {
    'jc-c': 'justify-content: center;',
    
    'border-main': 'border:2rpx solid #FB7302;',
    'border-E6': 'border:2rpx solid #E6E6E6;',
    
    'c-white': 'color:#FFFFFF;',
  }
]

// 当rules数组中增加了上面这些规则

template中存在 <div class="flex jc-c">{{title}}</div>

将会根据rules匹配class中的 flex jc-c

在输出文件中生成如下css样式

.flex{display:flex;}
.jc-c{justify-content: center;}

全局添加前缀和后缀

prefix: 'ff',

suffix: 'ff',

层叠权重覆盖

使用!important是危险的，因为没有办法对其进行覆盖,不建议使用

权重后缀：-i + 数字

例如：p-10-i3 后缀：-i3，表示需要增加p-10的权重 权重增加3

生成 示例：

// p-10 =>  padding：10rpx
class="p-10-i3"

// 生成 
.p-10-i3.p-10-i3.p-10-i3{
  padding：10rpx
}

uniapp .vue文件style标签内的样式 默认增加了css作用域，需要三层css才能覆盖 因此最小默认从3开始

.p-10-i.p-10-i的权重 > p-10 即可覆盖

要覆盖 p-10-i 怎么办？

增加i后面的数字 p-10-i === p-10-i3 ,权重 p-10-i4 > p-10-i3

使用p-10-i4，p-10-i5， p-10-i6 ...,权重高的来覆盖，数字越大，权重越高

class="p-10-i5"

// 生成
.p-10-i5.p-10-i5.p-10-i5.p-10-i5.p-10-i5{
  padding：10rpx
}

参数示例

// vue.config.js
module.exports = {
  chainWebpack: (config) => {
    config
      .plugin('allinClass')
      .use(allinClass({
        // cssFile: './style/index.scss', // 把现有css，scss文件变成全局的规则
        // 也支持对象
        // cssFile: {
        //   input:'./style/index.scss',
        //   prefix: 'ff', // 当前文件或文件夹内的css前缀 局部生效 默认为""
        //   suffix: 'ff', // 后缀 默认为""
        //   rmPrefix: 'w-', // 移除前缀 默认为"" 例如：w-flex => felx 
        //   rmSuffix: 'ff', // 移除前缀 默认为""
        // },
        // prefix: 'ff', // 前缀 全局css生效 用于解决冲突
        // suffix: 'ff', // 后缀 全局css生效 用于解决冲突
        // unit: 'px', // 宽高等的单位 默认rpx 
        // iSuffix: '-i', // 权重后缀
        rules: [
          // 动态规则示例
          [/^fs-(\d+)$/, ([, d], { unit }) => ({ 'font-size': `${d * 2}${unit};` })], // fs-10 => font-size:20rpx
          [/^fs-(\d+)$/, (match, { unit }) => `font-size: ${match[1]}${unit};`], // 与上面这个等价
          [/^fw-(\d+)$/, ([, d], { unit }) => ({ 'font-weight': `${d};` })], // fw-700 => font-weight: 700
          
          // w-50%或者width-50% => width:50%; | w-50 =>  width:100rpx; |  w-20vh => width:20
          [/^(width|w)-(\d+)(vh|vw|%)*$/, (match, { unit }) => ({ 'width': `${match[2]}${match[3]?match[3]:unit};` })],
          [/^(height|h)-(\d+)(vh|vw|%)*$/, (match, { unit }) => ({ 'height': `${match[2]}${match[3]?match[3]:unit};` })],
          
          // color--#000 => color:#000
          [/^color-#([\d\w])$/, (match) => `color:#${match[1]};`],
          // c-#000 => color:#000
          [/^c-#([\d\w])$/, (match) => `color:#${match[1]};`],
          
          [/^bg-#([\d\w])$/, (match) => `background-color: #${match[1]};`],
          [/^color-(\w+)$/, (match) => `color: ${match[1]};`],
          [/^bg-(\w+)$/, (match) => `background-color: ${match[1]};`],
          
          // 文字超出省略 d是正则匹配到的数字 例如：line-1  match[1]为1 
          [/^line-(\d+)$/, (match, { unit }) =>  `overflow: hidden;word-break: break-all;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:  ${match[1]};`],

          [/^icon-(\d+)$/, ([, d], { unit }) =>  `width: ${d}${unit};height: ${d}${unit};`],
          
          [/^flex-(\d+)$/, (match) => `flex: ${match[1]};`],
          
          [/^lh-(\d+)$/, (match, { unit }) => `line-height: ${match[1]}${unit};`],
          
          [/^m-(\d+)-(\d+|auto)$/, (match, { unit }) => ({ 'margin': `${match[1]}${unit} ${match[2]}${unit};` })],
          [/^m-(\d+)$/, ([, d], { unit }) => ({ 'margin': `${d}${unit};` })],
          [/^mt-(\d+)$/, ([, d], { unit }) => ({ 'margin-top': `${d}${unit};` })],
          [/^mb-(\d+)$/, ([, d], { unit }) => ({ 'margin-bottom': `${d}${unit};` })],
          [/^ml-(\d+)$/, ([, d], { unit }) => ({ 'margin-left': `${d}${unit};` })],
          [/^mr-(\d+)$/, ([, d], { unit }) => ({ 'margin-right': `${d}${unit};` })],
          [/^mlr-(\d+)$/, (match, { unit }) => `margin-left:${match[1] }${unit};margin-right:${match[1]}${unit};`],
          [/^mtb-(\d+)$/, (match, { unit }) => `margin-top:${match[1] }${unit};margin-bottom:${match[1]}${unit};`],
          [/^m-(\d+)-(\d+)-(\d+)-(\d+)$/, match => ({ 'margin': `${match[1]}${unit} ${match[2]}${unit} ${match[3]}${unit} ${match[4]}${unit};` })],
          
          [/^p-(\d+)-(\d+)$/, (match, { unit }) => ({ 'padding': `${match[1]}${unit} ${match[2]}${unit};` })],
          [/^p-(\d+)$/, (match, { unit }) => ({ 'padding': `${match[1]}${unit}` })],
          [/^pt-(\d+)$/, (match, { unit }) => ({ 'padding-top': `${match[1]}${unit}` })],
          [/^pb-(\d+)$/, (match, { unit }) => ({ 'padding-bottom': `${match[1]}${unit}` })],
          [/^pl-(\d+)$/, (match, { unit }) => ({ 'padding-left': `${match[1]}${unit}` })],
          [/^pr-(\d+)$/, (match, { unit }) => ({ 'padding-right': `${match[1]}${unit}` })],
          [/^ptb-(\d+)$/, (match, { unit }) => `padding-top:${match[1] }${unit};padding-bottom:${match[1]}${unit};`],
          [/^plr-(\d+)$/, (match, { unit }) => `padding-left:${match[1] }${unit};padding-right:${match[1]}${unit};`],
          [/^p-(\d+)-(\d+)-(\d+)-(\d+)$/, (match, { unit }) => ({ 'padding': `${match[1]}${unit} ${match[2]}${unit} ${match[3]}${unit} ${match[4]}${unit};` })],
          

          // 静态规则
          // ['br-lg', 'border-radius: 20rpx;'],
          
          // 静态对象规则 
          {
            'jc-c': 'justify-content: center;',
            'ai-c': 'align-items: center;',
            
            'border-main': 'border:2rpx solid #FB7302;',
            'border-E6': 'border:2rpx solid #E6E6E6;',
            
            'c-white': 'color:#FFFFFF;',
          }
        ],
        // 组合 基于单个现有规则的组合    class="py-2 px-4  br-lg c-3 bg-red" 等价于 class="btn"
        shortcuts: [
          // 静态规则
          {
            btn: 'py-2 px-4  br-lg c-3 bg-red',
          },
          // 动态规则
          [/^btn-(.*)$/, ([, c]) => `bg-${c} text-${c} py-2 px-4 radius-lg`],
        ],
      }))
  }
}

为啥不是

tailwindcss

  1. 规则不够灵活
  2. 不会用
  3. 不支持 ...
@babel/generator@babel/parser@babel/traverse@babel/types@iconify/json@vue/compiler-core@vue/compiler-dom@vue/compiler-sfcchalkjitiopentype.jspostcsssasssvg2ttfsvgicons2svgfontwebpack-sourceswebpack-virtual-modules
@everything-registry/sub-chunk-593
0.0.33

3 months ago

0.0.32

4 months ago

0.0.31

4 months ago

0.0.30

5 months ago

0.0.28

5 months ago

0.0.29

5 months ago

0.0.26

5 months ago

0.0.27

5 months ago

0.0.25

5 months ago

0.0.24

5 months ago

0.0.23

5 months ago

0.0.22

5 months ago

0.0.21

5 months ago

0.0.20

5 months ago

0.0.19

5 months ago

0.0.18

6 months ago

0.0.17

6 months ago

0.0.16

6 months ago

0.0.15

7 months ago

0.0.14

7 months ago

0.0.13

7 months ago

0.0.12

7 months ago

0.0.11

7 months ago

0.0.10

7 months ago

0.0.9

8 months ago

0.0.8

8 months ago

0.0.7

8 months ago

0.0.6

8 months ago

0.0.5

8 months ago

0.0.4

8 months ago

0.0.3

8 months ago

0.0.2

8 months ago

0.0.1

8 months ago