Used uniapp unplugin - attributify - to - class plug-ins using the failure

[Soumns777]

I use in uniapp unocss, use the unplugin - attributify - to - class this plug-in hope to be able to achieve without writing style in the class, then is not effective, I had to in front of each style added a prefix, the result is effective, just I in unocss config. Ts set rules yield failure, want to ask next what can I do with my above the solution of this kind of circumstance? Thank you very much。

💦 Used in unplugin Uniapp - attributify - to - class of failure

💫 Vite.config.ts

import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';
import {
  defaultAttributes,
  defaultIgnoreNonValuedAttributes,
  presetAttributifyWechat,
} from 'unplugin-unocss-attributify-wechat/vite';
import AutoImport from 'unplugin-auto-import/vite';
import setupExtend from 'vite-plugin-vue-setup-extend';
import UnoCSS from 'unocss/vite';
import { attributifyToClass } from 'unplugin-attributify-to-class/vite';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    uni(),
    presetAttributifyWechat({
      attributes: [...defaultAttributes],
      ignoreNonValuedAttributes: [...defaultIgnoreNonValuedAttributes],
    }),
    AutoImport({
      imports: ['uni-app', 'vue'],
      dts: 'src/auto-import.d.ts',
    }),
    setupExtend(),
    UnoCSS(),
    attributifyToClass({
      attributes: [...defaultAttributes],
    }),
  ],
});

💫 Unocss.config.ts

import presetWeapp from 'unocss-preset-weapp';
import { defineConfig } from 'unocss';
import {
  transformerAttributify,
  transformerClass,
} from 'unocss-preset-weapp/transformer';

export default defineConfig({
  presets: [
    // https://github.com/MellowCo/unocss-preset-weapp
    presetWeapp({
      // prefix: 'soumns-',
    }),
  ],
   rules: [
    [
      'soumns-flex',
      {
        'display': 'flex',
        'align-items': 'center',
        'justify-content': 'center',
        'box-sizing': 'border-box',
      },
     ],
  ],

  shortcuts: [ ],
  // v0.1.14 unplugin-attributify-to-class 和 unplugin-transform-class 内置到 transformer 中
  transformers: [
    // options 见https://github.com/MellowCo/unplugin-attributify-to-class
    transformerAttributify({
       nonValuedAttribute: true,
       classPrefix: 'soumns-',
    }),

    // options 见https://github.com/MellowCo/unplugin-transform-class
    transformerClass(),
  ],
});

💫 Use

// There is  effective (if not use soumns-flex)
<view w200 h200 bg-green flex items-center justify-center text="red 40">
      Test
</view>

// There is  effective (if use soumns-flex)
<view w200 h200 bg-green soumns-flex text="red 40">
      Test
</view>

[Soumns777]

Above the second use soumns - flex does not take effect, the effective writing is to write wrong

[MellowCo]

• vite.config.ts remove unplugin-unocss-attributify-wechat and unplugin-attributify-to-class , only use transformerAttributify is ok

import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';

import AutoImport from 'unplugin-auto-import/vite';
import setupExtend from 'vite-plugin-vue-setup-extend';
import UnoCSS from 'unocss/vite';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    uni(),
    AutoImport({
      imports: ['uni-app', 'vue'],
      dts: 'src/auto-import.d.ts',
    }),
    setupExtend(),
    UnoCSS(),
  ],
});

[MellowCo]

• flex Because you set classPrefix: 'soumns-' in transformerAttributify, it will be automatically spliced into the class

  <view w200 h200 bg-green flex text="red 40">
   Test
  </view>

  

• soumns-flex so soumns-flex will transform to soumns-soumns-flex

[MellowCo]

if you want to use soumns-flex, not flex you can remove classPrefix: 'soumns-' in transformerAttributify

transformerAttributify({
   nonValuedAttribute: true,
   // classPrefix: 'soumns-',
}),

[Soumns777]

Thank you very much, for the first time I use this thing, and not very skilled, is on the basis of online tutorials messed with, why don't I don't know the start is the main class inside the unocss patterns is not effective, led to the back of a series of problems, now think we should actually just open transformerAttributifyzhong nonValuedAttribute attributes, or thank you very much, also said a very Chen Ken word is hope the author can be used to document and tutorial greatly rich, this also is helpful for beginners to use these things, thanks。

[Soumns777]

The situation seemed to use unocss - preset - weapp transformerAttributify, temporarily I didn't understand what is the author of this plugin for, see trouble tell me just a little, thank you very much。

[MellowCo]

At the beginning, I developed the unplugin-attributify-to-class and unplugin-transform-class to solve the problem of miniprogram css. You need to download the unplugin-attributify-to-class , unplugin-transform-class and unocss-preset-weappat the same time

before unocss-preset-weapp v0.1.14 , need in vite.config.ts import unplugin-transform-class/vite, unplugin-attributify-to-class/vite, unocss,

import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import Unocss from 'unocss/vite'
import transformWeClass from 'unplugin-transform-class/vite'
import { presetAttributifyWechat } from 'unplugin-attributify-to-class/vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    uni(),

    // https://github.com/MellowCo/unplugin-attributify-to-class
    presetAttributifyWechat(),

    // https://github.com/antfu/unocss
    Unocss(),

    // https://github.com/MellowCo/unplugin-transform-class
    transformWeClass(),
  ],
})

and set unocss-preset-weapp in unocss.config.ts, is too much

import presetWeapp from 'unocss-preset-weapp'
import { defineConfig } from 'unocss'

export default defineConfig({
  presets: [
    // https://github.com/MellowCo/unocss-preset-weapp
    presetWeapp(),
  ],
})

---

after unocss-preset-weapp v0.1.14, i put the core function of unplugin-transform-class and unplugin-attributify-to-class in unocss-preset-weapp/transformer

now only install unocss-preset-weapp package and set transformer in unocss-preset-weapp

import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import Unocss from 'unocss/vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    uni(),

    // https://github.com/antfu/unocss
    Unocss(),
  ],
})

the transformer options same as unplugin-transform-class and unplugin-attributify-to-class

import presetWeapp from 'unocss-preset-weapp'
import { defineConfig } from 'unocss'
import { transformerAttributify, transformerClass } from 'unocss-preset-weapp/transformer'

export default defineConfig({
  presets: [
    // https://github.com/MellowCo/unocss-preset-weapp
    presetWeapp(),
  ],
  shortcuts: [
    {
      'border-base': 'border border-gray-500_10',
      'center': 'flex justify-center items-center',
    },
  ],

  // v0.1.14 unplugin-attributify-to-class 和 unplugin-transform-class 内置到 transformer 中
  transformers: [
    // options 见https://github.com/MellowCo/unplugin-attributify-to-class#options
    transformerAttributify(),

    // options 见https://github.com/MellowCo/unplugin-transform-class#options
    transformerClass(),
  ]
})

[Soumns777]

Really thank you can in spite of being very busy toglance answer to my question

[Soumns777]

 <template>
   <view w72 h72 soumns-bg class="bg-[url(src/static/logo.png)]"> </view>
 </template>

[Soumns777]

Like I this situation is to use the above the background image is not normal, but in other vue program can be normal display, I want to ask this is because the small program so you can't display normally?

[MellowCo]

Thank you for your feedback

[MellowCo]

fixed in unocss-preset-weapp latest

but mini program not support local url

so need use style or net url

• style

  <view class="w-100 h-100 bg-cover mb-3" style="background-image: url(../../static/logo.png)" />

• net url

 <view class="bg-[url(https://raw.githubusercontent.com/unocss/unocss/main/playground/public/icon-gray.svg)] bg-cover mb-3 w-100 h-100 " />