XClass

中文简介

Real time parse short class to css,custom rule to parse text.

This tool supports all frameworks, uses native js to operate dom, and is not associated with any framework.

---

Brief introduction

The reason for the tool is that I am fed up with the class name, Tailwindcss and windcss feel too heavyweight, I am a fan of antfu, and I have been watching his live broadcast, because I have learned about antfu's unocss, and it feels so cool. However, due to the company's project, the Node version is only 12. For some reasons, it cannot be upgraded, and there are many colleagues who develop together. It is impossible to mobilize all colleagues to upgrade Node together. The minimum unocss requires node version 16, so this tool was produced. , it is parsed in real time. Since I wrote it myself, I can customize some things I need. Of course, in terms of performance, it is definitely not as good as other compiled frameworks, but it is not slow, output in milliseconds. For ordinary projects, it is completely sufficient. Originally, I just wanted to write a vue component for my own use, but gradually found that it can support all of them during the optimization process, so why not?

Function introduction

• Support custom rule parsing style
• Support custom pseudo-class prefixes, such as hover, after
• debug mode, which supports debugging all the parsed content on a div, and debugging the parsed content of a short class.
• Cache mode. All short classes will be cached after parsing, and will be directly obtained next time. Of course, non-cache mode can also be supported, and version can also be set. Version upgrade will delete other version caches, and cache time can be set
• Custom colors, such as bg-primary, some frames used in the project, can be used directly after configuration
• Immediate processing. After setting on a div, the current rule will be parsed immediately and then the dom will be inserted
• Responsive
• Native framework support
• Custom collection class

Use Instance

安装

npm install -S xclass-all

Vue-Example：

import XClassVue from 'xclass-vue'
let app = createApp(App)
app.use(XClassVue,{...options})

<!--Use v-xclass attr recognition,The tag of v-xclass will be parsed-->
<div v-xclass class="w-100 padding-12 bg-primary hover:bg-warning hover:f-color-white flex align-center justify-center radius-50 cursor-pointer">example</div>

Native：

import XClassAll from 'xclass-all'
XClassAll({...options})

<!--Use xclass attr recognition,The tag of xclass will be parsed-->
<div xclass class="w-100 padding-12 bg-primary hover:bg-warning hover:f-color-white flex align-center justify-center radius-50 cursor-pointer">example</div>

结果:

options config：

{
    //Custom colors, when used such as bg-primary, are translated into background:#936ee6;
    colors:{
        primary:'#936ee6'
    },
    //Custom interception rules, such as W-10, will be intercepted and translated into the following rules width:10px;
    rules:[
        [
            /^(?:size-)?(min-|max-)?([wh])-?(.+)$/,
            (rule,text) => {
                let arr = rule.exec(text)
                let str = `${arr[1] || ''}${arr[2] == 'w'?'width':'height'}:${handleSize(arr[3])};`
                return str 
            }
        ]
    ],
    //Whether it is a new rule, overwriting the out-of-the-box rule
    ruleNew:true,
    // Pseudo-class definitions, prefixed with hover: e.g. hover:f-color-white will be translated as div:hover{color:white;}
    pseudoClassDefine:{
        'hover:':':hover',
        'first:':':first-of-type'
    },
    // Reactive definitions, with md: as a prefix, e.g. md:hover:f-color-white will be translated as @media screen and (max-width:500px){div:hover{color:white;}}
    responsiveDefine:{
        'md:':'@media screen and (max-width:500px)'
    },
    //Collection short class definition, custom will be escaped todiv{width:100px;height:100px;border-radius:16px;}
    shortDefine:{
        'custom':'w-100 h-100 radius-16'
    },
    //Cache time, -1 is permanent, unit ms
    cacheExpire:-1,
    //Version number, with clearing the cache, if you upgrade to 1.0.1, the 1.0.0 version cache will be cleared
    version:'1.0.0',
    //debug
    debug:false,
    // Whether to clear the cache each time
    clearCache:false
}

Label suffix

test

<!-- After enabling debug mode -->
<!-- Suffixes containing test will be printed, and all class parsing results will be printed -->
<div xclass:test class="w-100 padding-12 bg-primary hover:bg-warning hover:f-color-white flex align-center justify-center radius-50 cursor-pointer">example</div>
<!-- The suffix containing test will be printed, and only the W-100 padding-12 parsing result will be printed -->
<div xclass:test="w-100 padding-12" class="w-100 padding-12 bg-primary hover:bg-warning hover:f-color-white flex align-center justify-center radius-50 cursor-pointer">example</div>

real

<!-- DOMs containing real will be parsed immediately, and the rest of the DOMs will only be parsed in the window -->
<div xclass.real class="w-100 padding-12 bg-primary hover:bg-warning hover:f-color-white flex align-center justify-center radius-50 cursor-pointer">example</div>
<!-- Can be used together -->
<div xclass:test.real="w-100 padding-12" class="w-100 padding-12 bg-primary hover:bg-warning hover:f-color-white flex align-center justify-center radius-50 cursor-pointer">example</div>