Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Customized rules have no prompt #64

Closed
jasper-ops opened this issue Jun 6, 2024 · 8 comments
Closed

Customized rules have no prompt #64

jasper-ops opened this issue Jun 6, 2024 · 8 comments
Labels
🐛 bug Something isn't working

Comments

@jasper-ops
Copy link

The rules defined in uno.config.js have no intelligent prompts

@re-ovo
Copy link
Owner

re-ovo commented Jun 6, 2024

是不是同时用了vite, 优先读取vite内的配置,不会同时读取多个配置

@jasper-ops
Copy link
Author

jasper-ops commented Jun 6, 2024 via email

@re-ovo
Copy link
Owner

re-ovo commented Jun 6, 2024

看下配置

@jasper-ops
Copy link
Author

看下配置

依赖项:

  • "unocss": "^0.58.0",
  • "unocss-applet": "^0.7.8",
  • "@unocss/preset-legacy-compat": "^0.59.1",
  • "@unocss/webpack": "^0.58.0",

Unocss新的版本已经不支持cjs了,uniapp又只支持cjs,所以目前使用的是0.58.0版本

uno.config.js

// uno.config.ts
import {
    Preset,
    defineConfig,
    presetUno,
    presetAttributify,
    presetIcons,
    transformerDirectives,
    transformerVariantGroup,
} from 'unocss'

import { presetApplet, presetRemRpx, transformerAttributify } from 'unocss-applet'

// @see https://unocss.dev/presets/legacy-compat
import  presetLegacyCompat  from '@unocss/preset-legacy-compat'

const isMp = process.env?.UNI_PLATFORM?.startsWith('mp') ?? false

/**
 * @type {Preset[]}
 */
const presets = []

if (isMp) {
    // 使用小程序预设
    presets.push(presetApplet(), presetRemRpx())
} else {
    presets.push(
        // 非小程序用官方预设
        presetUno(),
        // 支持css class属性化
        presetAttributify(),
    )
}
export default defineConfig({
    presets: [
        ...presets,
        // 支持图标,需要搭配图标库,eg: @iconify-json/carbon, 使用 `<button class="i-carbon-sun dark:i-carbon-moon" />`
        presetIcons({
            scale: 1.2,
            warn: true,
            extraProperties: {
                display: 'inline-block',
                'vertical-align': 'middle',
            },
        }),
        // 将颜色函数 (rgb()和hsl()) 从空格分隔转换为逗号分隔,更好的兼容性app端,example:
        // `rgb(255 0 0)` -> `rgb(255, 0, 0)`
        // `rgba(255 0 0 / 0.5)` -> `rgba(255, 0, 0, 0.5)`
        presetLegacyCompat({
            commaStyleColorFunction: true,
        }),
    ],
    /**
     * 自定义快捷语句
     * @see https://github.com/unocss/unocss#shortcuts
     */
    shortcuts: [['center', 'flex justify-center items-center']],
    transformers: [
        // 启用 @apply 功能
        transformerDirectives(),
        // 启用 () 分组功能
        // 支持css class组合,eg: `<div class="hover:(bg-gray-400 font-medium) font-(light mono)">测试 unocss</div>`
        transformerVariantGroup(),
        // Don't change the following order
        transformerAttributify({
            // 解决与第三方框架样式冲突问题
            prefixedOnly: true,
            prefix: 'fg',
        }),
    ],
    rules: [
        [
            'p-safe',
            {
                padding:
                    'env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)',
            },
        ],
        ['pt-safe', { 'padding-top': 'env(safe-area-inset-top)' }],
        ['pb-safe', { 'padding-bottom': 'env(safe-area-inset-bottom)' }],

        // region WH 相关rules,用来同时配置width和height
        [/^WH-(\d+)$/, match => ({
            width: `${match[1] / 4}rem`,
            height: `${match[1] / 4}rem`
        })],
        [/^WH-\[(.*?)\]$/, ([_, val]) => ({
            width: val,
            height: val
        })],
        ['WH-full', {
            width: '100%',
            height: '100%'
        }],
        [/^WH-(\d+)\/(\d+)$/, ([_, n1, n2]) => {
            n1 = Number(n1);
            n2 = Number(n2);
            const val = (n1 / n2 * 100).toFixed(2) + '%';

            return {
                width: val,
                height: val
            }
        }]
        // endregion
    ],
    theme: {
        colors: {
            primary: '#fddd00',
            st: '#00263A',
        },
    },
})

vue.config.js

const path = require("node:path");
const { defineConfig } = require('@vue/cli-service')
const UnoCSS = require('@unocss/webpack').default

module.exports = defineConfig(() => {
    return {
        configureWebpack: {
            resolve: {
                alias: {
                    '@': path.resolve(__dirname, 'src'),
                }
            },
            plugins: [
                UnoCSS()
            ]
        }
    }
})

@re-ovo
Copy link
Owner

re-ovo commented Jun 6, 2024

@unocss/preset-legacy-compatunocss-applet这2个依赖安装了吗

@jasper-ops
Copy link
Author

@unocss/preset-legacy-compatunocss-applet这2个依赖安装了吗

这些都有安装的,然后今天来公司打开电脑,发现有提示了,是不是自定义的规则要重启webstorm才有提示呀,昨天我写了规则后没重启过

@AiHMin
Copy link
Contributor

AiHMin commented Jun 7, 2024

@jasper-ops 正常来说插件应该会自动监听 config 文件的变化,如果无效可以试试点击状态栏图标的 Update config 试下
CleanShot 2024-06-07 at 10 46 32@2x

(当前版本可能第一次开 Webstorm 找不到这个状态栏按钮,可以尝试右键其他的图标,找到 Unocss status bar 然后关闭再开一下就显示了,这个问题下个版本修复)

@jasper-ops
Copy link
Author

jasper-ops commented Jun 7, 2024 via email

@re-ovo re-ovo added 🛒 feature request Request a new feature 🐛 bug Something isn't working and removed 🛒 feature request Request a new feature labels Jun 7, 2024
@re-ovo re-ovo closed this as completed Jun 7, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🐛 bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants