vite-plugin-mecss

简介

可以使css代码属性化，使得样式可以以属性的形式书写：如下

<div style="width:100px;height:100px;margin:30px;color:red;border: 10px solid #ccc;">
    test text
</div>

↓

<div w="100" h="100px" m="30" color="red" bor="10 #ccc">
    test text
</div>

使用

使用npm或yarn下载mecss

npm i vite-plugin-mecss
或者
yarn add vite-plugin-mecss

需在vite.config.ts中引入该插件

import { defineConfig } from 'vite'
import mess from 'vite-plugin-mecss'
export default defineConfig({
  plugins: [mess()]
})

在 serve 或 build后，会在src/assets文件中生成 mess.css文件

后需在main文件中全局引入该文件

import { createApp } from 'vue'
import App from './App.vue'
import "./assets/mess.css"

createApp(App).mount('#app')

完成相关配置操作后可使用以下属性

style	meCss
width:100px	w="100"
height:100px	h="100"
top:100px	t="100"
left:100px	l="100"
right:100px	r="100"
bottom:100px	b="100"
color:red	color="red"
background-color:red	bg="red"
position:static \ relative \ fixed \ absolute \ sticky	static \ relative \ fixed \ absolute \ sticky
display:none \ inline \ flex \ flexbox \ flow-root \ grid \ block \ inline-block \ list-item \ run-in \ table \ inline-table \ table-row-group \ table-header-group \ table-footer-group \ table-row \ table-colume-group \ table-colume \ table-cell \ table-caption \ inherit	none \ inline \ flex \ flexbox \ flow-root \ grid \ block \ inline-block \ list-item \ run-in \ table \ inline-table \ table-row-group \ table-header-group \ table-footer-group \ table-row \ table-colume-group \ table-colume \ table-cell \ table-caption \ inherit
margin:100px	m="100"
margin-top:100px	mt="100"
margin-left:100px	ml="100"
margin-right:100px	mr="100"
margin-bottom:100px	mb="100"
padding:100px	p="100"
padding-top:100px	pt="100"
padding-left:100px	pl="100"
padding-right:100px	pr="100"
padding-bottom:100px	pb="100"
border:1px solid #ccc	bor="1 #ccc"
border-top:1px solid #ccc	bor-t="1 #ccc"
border-left:1px solid #ccc	bor-l="1 #ccc"
border-right:1px solid #ccc	bor-r="1 #ccc"
border-bottom:1px solid #ccc	bor-b="1 #ccc"
float:left	fl
float:right	fr
border-radius:10px	radius="10"
...	...

可使用相关单位(如若不书写单位将自动转为rem) 如 ： mt="10px | 10vh | 10rem | ..." color:"red | #cccccc | rgb(245,245,245)"
display和position可直接以属性方式写在标签上 <div block flex></div> <div absolute t="10vh" l="20px"></div>

0.1.6新增配置 pathCss 可予 plugins 中配置文件生成位置并命名css文件名 plugins: [mecss({pathCss: './src/assets/mess.css'})],