Customized rules have no prompt

[jasper-ops]

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

[re-ovo]

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

[jasper-ops]

没有哦，我这个项目是uniapp+vue2的，没有vite，项目类型是cli的

---

发件人: RE @.> 发送时间: 2024年6月6日 17:23 收件人: re-ovo/unocss-intellij @.> 抄送: Jasper @.>; Author @.> 主题: Re: [re-ovo/unocss-intellij] Customized rules have no prompt (Issue #64)

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

― Reply to this email directly, view it on GitHubhttps://github.com/re-ovo/unocss-intellij/issues/64#issuecomment-2151816147, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AUIV3Y75YKO7W5VNCYASY6LZGATBFAVCNFSM6AAAAABI4KG6PWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCNJRHAYTMMJUG4. You are receiving this because you authored the thread.Message ID: @.***>

[re-ovo]

看下配置

[jasper-ops]

看下配置

依赖项：

• "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]

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

[jasper-ops]

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

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

[AiHMin]

@jasper-ops 正常来说插件应该会自动监听 config 文件的变化，如果无效可以试试点击状态栏图标的 Update config 试下

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

[jasper-ops]

好的呢，十分感谢，今天我发现修改后也能立即有提示

---

发件人: AiHMin @.> 发送时间: 2024年6月7日 10:49 收件人: re-ovo/unocss-intellij @.> 抄送: Jasper @.>; Mention @.> 主题: Re: [re-ovo/unocss-intellij] Customized rules have no prompt (Issue #64)

@jasper-opshttps://github.com/jasper-ops 正常来说插件应该会自动监听 config 文件的变化，如果无效可以试试点击状态栏图标的 Update config 试下 @.*** (view on web)https://github.com/re-ovo/unocss-intellij/assets/28809242/59fd4082-9d35-4958-a34c-2295dd9576b1

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

― Reply to this email directly, view it on GitHubhttps://github.com/re-ovo/unocss-intellij/issues/64#issuecomment-2153753573, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AUIV3Y5LVD5ZZ2G5JQDTX5TZGENSDAVCNFSM6AAAAABI4KG6PWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCNJTG42TGNJXGM. You are receiving this because you were mentioned.Message ID: @.***>