Giter VIP home page Giter VIP logo

unocss-preset-uni's Introduction

unocss-preset-uni

Version Downloads

⚠️ unocss-preset-uni has been migrated to unocss-applet and fixed the existing issues, maybe you can use unocss-applet.


The UniApp preset for UnoCSS, fork from @unocss/preset-uno and modified to transform some CSS selector that mini-program can't use.

Installation

npm i unocss-preset-uni unocss --save-dev # with npm
yarn add unocss-preset-uni unocss -D # with yarn
pnpm add unocss-preset-uni unocss -D # with pnpm
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Unocss from 'unocss/vite'
import { presetIcons } from 'unocss'

import { presetUni } from 'unocss-preset-uni'
import { UnoCSSToUni } from 'unocss-preset-uni/vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Unocss({
      presets: [
        // presetUno(),
        presetUni(),
        presetIcons(),
      ],
    }),
    // Make sure it's behind Unocss()
    UnoCSSToUni(),
  ],
})

TODO

  • parse string in TS file.
  • parse string in <script></script>.
  • type error.

Change

CSS selector transform

form to sample
*,::before,::after page,::before,::after -
\. -point- p-0.5 -> p-0-point-5
\/ -div- p-1/2 -> p-1-div-2
\: -c- dark:text-green-500 -> dark-c-text-green-500
\% -pct opacity-10% -> opacity-10-pct
\! i- !bg-black -> i-bg-black
\# -h- bg-#121212 -> bg--h-121212
\( p- bg-[hsl(2.7,81.9%,69.6%)] -> bg-[hslp-2.7,81.9%,69.6%)]
\) -q bg-[hsl(2.7,81.9%,69.6%)] -> bg-[hsl(2.7,81.9%,69.6%-q]
\[ l- bg-[hsl(2.7,81.9%,69.6%)] -> bg-l-hsl(2.7,81.9%,69.6%)]
\] -r bg-[hsl(2.7,81.9%,69.6%)] -> bg-[hsl(2.7,81.9%,69.6%)-r
\, -comma- bg-[hsl(2.7,81.9%,69.6%)] -> bg-[hsl(2.7-comma-81.9%-comma-69.6%)]

License

MIT License © 2022-PRESENT Neil Lee

unocss-preset-uni's People

Contributors

zguolee avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

Forkers

llinvip

unocss-preset-uni's Issues

vite.config.ts presetUni() 报错

Type 'Preset<Theme>' is not assignable to type 'Preset<{}> | Preset<{}>[]'.
  Type 'Preset<Theme>' is not assignable to type 'Preset<{}>'.
    Types of property 'rules' are incompatible.
      Type 'Rule<Theme>[] | undefined' is not assignable to type 'Rule<{}>[] | undefined'.
        Type 'Rule<Theme>[]' is not assignable to type 'Rule<{}>[]'.
          Type 'Rule<Theme>' is not assignable to type 'Rule<{}>'.
            Type '[RegExp, DynamicMatcher<Theme>]' is not assignable to type 'Rule<{}>'.
              Type '[RegExp, DynamicMatcher<Theme>]' is not assignable to type '[string, CSSObject | CSSEntries]'.
                Type at position 0 in source is not compatible with type at position 0 in target.
                  Type 'RegExp' is not assignable to type 'string'.
  • vite.config.ts
import { resolve } from 'path'
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import AutoImport from 'unplugin-auto-import/vite'
import Unocss from 'unocss/vite'
import { presetIcons } from 'unocss'
import { presetUni } from 'unocss-preset-uni'
import { UnoCSSToUni } from 'unocss-preset-uni/vite'

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      '@': resolve('./src'),
    },
  },
  plugins: [
    uni(),

    // https://github.com/antfu/unplugin-auto-import
    AutoImport({
      // global imports to register
      imports: [
        'vue',
        'uni-app',
        'pinia',
      ],
      dts: 'src/auto-imports.d.ts',
    }),

    // https://github.com/unocss/unocss
    Unocss({
      presets: [
        presetUni(),
        presetIcons(),
      ],
    }),
    // https://github.com/zguolee/unocss-preset-uni
    // Make sure it's behind Unocss()
    UnoCSSToUni(),
  ],
})

@unocss/transformer-compile-class 失效

[email protected]

// uno.config.js
import { defineConfig, presetAttributify, presetIcons } from 'unocss';
import presetRemToPx from '@unocss/preset-rem-to-px';
import transformerCompileClass from '@unocss/transformer-compile-class';
import transformerDirective from '@unocss/transformer-directives';
import transformerVariantGroup from '@unocss/transformer-variant-group';

import { presetUni } from 'unocss-preset-uni';

export default defineConfig({
    presets: [
        presetUni(),
        presetAttributify(),
        presetIcons({
            cdn: 'https://esm.sh/'
        }),
        presetRemToPx()
    ],
    transformers: [transformerCompileClass(), transformerDirective(), transformerVariantGroup()]
});
<!-- index.vue -->
<template>
  <view class=":uno: text-red">Hello</view>
</template>

配合transformerCompileClass 失效, 审查元素发现class已经合并,但是无对应样式

UnoCSSToUni不支持处理:hover-class

当我的项目中用到了hover-class属性,编译无法通过

17:14:24 [vite] [plugin:vite:vue] Error parsing JavaScript expression: Unexpected token, expected ":" (1:84)
at ../node_modules/@dcloudio/uni-ui/lib/uni-list-item/uni-list-item.vue:7:0
  
                 <view :class="{ 'uni-list-item--disabled': disabled }"
                         :hover-class="(!clickable && !link) || disabled || showSwitch ? '' : 'uni-list-item--hover'"
                        ^
                          class="uni-list-item" @click="onClick">
       

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.