How can I get autocomplete / intellisense on custom shortcuts in UnoCSS with SvelteKit?

Question

In the UnoCSS Playground I get intellisense on custom rules and shortcuts (like in the screenshot), but when adding custom rules and shortcuts in my local project I do not see any recommendations in VSCode. I have installed the UnoCSS, WindiCSS, TailwindCSS extensions for VSCode.

My vite.config.ts file:

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
import UnoCSS from 'unocss/vite';

export default defineConfig({
    plugins: [
        UnoCSS({
            
        }),
        sveltekit(),
    ]
});

unocss.config.ts:

import {
  defineConfig,
  presetAttributify,
  presetIcons,
  presetUno,
} from 'unocss';

import { extractorSvelte } from '@unocss/core';

export default defineConfig({
  extractors: [extractorSvelte],
  rules: [
    ['custom-rule', { color: 'red' }],
  ],
  shortcuts: [ 
    {'custom-shortcut': 'text-2xl text-teal-500'}
  ],
  presets: [
    presetUno(),
    presetAttributify(),
  ]
})

score 0 · Answer 1 · answered Jul 02 '23 at 02:33

you need to add the patern at the end

[
        /^(px|py|mx|my)-(\d+)-?(\d+)?$/,
        ([, direction, s, optional]) => {
            const directionXorY = (string: string): string => {
                const dictionary = {
                    p: 'padding',
                    m: 'margin',
                    y: 'block',
                    x: 'inline'
                } as const satisfies Record<string, string>
                type DictionaryValues = typeof dictionary[keyof typeof dictionary]
                const set: DictionaryValues[] = []
                for (const letter of string) {
                    set.push(dictionary[letter as keyof typeof dictionary])
                }
                return set.join('-')
            }

            const returndirection = directionXorY(direction)
            let value = `${+s / 4}em`
            value += optional ? ` ${+optional / 4}em` : ''
            return { [returndirection]: value }
        },
        { autocomplete: 'px|py|mx|my-<num>-<num>' }
    ],

How can I get autocomplete / intellisense on custom shortcuts in UnoCSS with SvelteKit?

1 Answers1