generator-metaclass-webpack-plugin

这是一个基于 webpack 的生成原子式 css class 工具

目前测试在 vue2、vue3 基于webpack项目中工作正常

使用

1. npm i generator-metaclass-webpack-plugin -D

2. 在 vue.config.js 中配置

const generatorMetaClassPlugin = require('generator-metaclass-webpack-plugin');

module.exports = {
    configureWebpack: {
        module: {
            rules: [
                {
                    test: /\.vue$/i,
                    use: [generatorMetaClassPlugin.loader]
                }
            ]
        },
        plugins: [
            new generatorMetaClassPlugin()
        ]
      }
}

在 .vue 文件中使用

只需要书写符合规则的 class，就会自动生成 generator.css，插入 html 的 head 中

例如：

<template>
    <h1 class="margin_10-15-20-25 color_#f40"></h1>
</template>

在生成的 generator.css 中内容：

.margin_10_15_20_25{
    margin: 10px 15px 20px 25px;
}
.color_0xf40{
    color: #f40;
}

规则

属性名称

1. 所有的单个单词的属性都可以直接单词，其中有些可以简写 例如：

|属性|简写| |---|---| |background|background, bg| |height|height, h| |width|width, w| |opacity|opacity|

2. 双单词属性几乎可以使用第一个单词首字母+后一个完整单词的形式来书写，但有六个是特殊的：max-height、max-width、min-height、min-width、background-color、background-image 例如：

|属性|简写| |---|---| |max-height|maxh| |max-width|maxw| |min-height|minh| |min-width|minw| |align-content|ac、acontent| |align-items|ai、aitems| |align-self|as、aself| |align-name|an、aname| |backface-visibility|bv、bvisibility| |background-attachment|ba、battachment| |background-color|bc、bgc| |background-image|bi、bgimage| |background-origin|bo、borigin| |background-position|bp、bposition| |background-size|bz、bsize| |background-bottom|bb、bbottom| |border-left|bl、bleft| |border-right|br、bright| |border-style|bs、bstyle| |border-top|bt、btop| |border-top|bt、btop| |clip-path|cp、cpath| |column-count|cc、ccount| |column-fill|cf、cfill| |column-gap|cg、cgap| |column-rule|cr、crule| |column-span|cs、cspan| |column-width|cw、cwidth| |counter-increment|ci、cincrement| |empty-cells|ec、ecells| |flex-basis|fb、fbasis| |flex-direction|fd、fdirection| |flex-grow|fg、fgrow| |font-family|ff、ffamily| |font-kerning|fk、fkerning| |font-size|fs、fsize| |font-variant|fv、fvariant| |font-weight|fw、fweight| |grid-area|ga、garea| |grid-column|gc、gcolumn| |grid-gap|gg、ggap| |grid-row|gr、grow| |grid-template|gt、gtemplate| |hanging-punctuation|hp、hpunctuation| |image-rendering|ir、irendering| |justify-content|jc、jcontent| |justify-item|ji、jitems| |justify-self|js、jself| |letter-spacing|ls、lspacing| |line-break|lb、lbreak| |line-height|lh、lheight| |list-style|ls、lstyle| |margin-bottom|mb、mbottom| |margin-left|ml、mleft| |margin-right|mr、mright| |margin-top|mt、mtop| |object-fit|of、ofit| |object-position|op、oposition| |outline-color|oc、ocolor| |outline-offset|oo、ooffset| |outline-style|os、ostyle| |overflow-wrap|ow、owrap| |padding-bottom|pb、pbottom| |padding-left|pl、pleft| |padding-right|pr、pright| |padding-top|pt、ptop| |perspective-origin|po、porigin| |pointer-events|pe、pevents| |scroll-behavior|sb、sbehavior| |tab-size|bs、bsize| |tab-layout|tl、tlayout| |text-align|ta、talign| |text-decoration|td、tdecoration| |text-indent|ti、tindent| |text-justify|tj、tjustify| |text-shadow|ts、tshadow| |text-transform|tt、ttransform| |transform-origin|to、torigin| |transition-property|tp、tproperty| |unicode-bidi|ub、ubidi| |user-select|us、uselect| |vertical-align|va、valign| |white-space|ws、wspace| |word-break|wb、wbreak| |word-wrap|ww、wwrap| |writing-mode|wm、wmode| |z-index|zi、zindex|

3. 多单词属性，都可以使用单词首字母进行简写 例如：

|属性|简写| |---|---| |border-top-color|btc| |grid-row-gap|gra|

属性值

1. 数字结尾，默认添加px作为单位
   • 如：w_100 得到 .w_100{width: 100px}
2. 不需要添加单位，请使用 n 作为结尾
   • 如：flex_1n 得到 .flex_1{flex: 1}
3. 如果你想以 % 作为单位，请以 p 作为结尾
   • 如：h_10p 得到 .h_10p{height: 10%}
4. 暂不支持 calc()、rgb()、rgba()、url() 等css函数，后续可能会考虑支持