[Question] Is `theme()` auto completion supported?

[JeromeDeLeon]

I set up everything on svelte + vite integration with windicss and using theme() doesn't seem to work but everything worked fine like @apply, and css inside template auto-completion (class="bg-blue-500").

• editor.quickSuggestion is set to true
• "svelte": "html" is set as one of the includeLanguages

[natasha1007]

test/test-ghe-restore.sh

[JeromeDeLeon]

test/test-ghe-restore.sh

What is this?

[alexanderniebuhr]

can you share your windi.config.js/ts to verify

[JeromeDeLeon]

const { defineConfig } = require('windicss/helpers');

module.exports = defineConfig({
  extract: {
    include: ['index.html', 'src/**/*.{html,svelte}'],
  },
  theme: {
    extend: {
      fontFamily: {
        sans: ['Quicksand'],
      },
    },
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      white: '#FFFFFF',
      black: '#000000',
      primary: {
        100: '#C8FAF7',
        200: '#93F5F6',
        300: '#5BD9E4',
        400: '#32B2CA',
        DEFAULT: '#0081A7',
        600: '#00648F',
        700: '#004B78',
        800: '#003560',
        900: '#002650',
      },
      success: {
        100: '#DEF9D1',
        200: '#B8F4A5',
        300: '#83DE73',
        400: '#52BD4B',
        DEFAULT: '#1D9120',
        600: '#157C20',
        700: '#0E6820',
        800: '#09541E',
        900: '#05451D',
      },
      info: {
        100: '#D7DFFE',
        200: '#AFBFFE',
        300: '#879CFC',
        400: '#6981FA',
        DEFAULT: '#3855F7',
        600: '#2840D4',
        700: '#1C2EB1',
        800: '#111E8F',
        900: '#0A1476',
      },
      warning: {
        100: '#FFF2CC',
        200: '#FFE299',
        300: '#FFCE66',
        400: '#FFBA3F',
        DEFAULT: '#FF9900',
        600: '#DB7A00',
        700: '#B75F00',
        800: '#934600',
        900: '#7A3500',
      },
      danger: {
        100: '#FCE1D6',
        200: '#FABDAE',
        300: '#F28F83',
        400: '#E66462',
        DEFAULT: '#D63340',
        600: '#B8253E',
        700: '#9A193B',
        800: '#7C1036',
        900: '#660932',
      },
      neutral: {
        100: '#F5F5F5',
        200: '#E5E5E5',
        300: '#D4D4D4',
        400: '#A3A3A3',
        DEFAULT: '#737373',
        600: '#525252',
        700: '#404040',
        800: '#262626',
        900: '#171717',
      },
    },
  },
});

[alexanderniebuhr]

@JeromeDeLeon I have tested your config. And it seems to work fully for me. What exactly is not working? Maybe you remove svelte: html from your settings.

[JeromeDeLeon]

What I'm expecting is this IntelliSense for when I type in colors., it should show all the colors I set up in the config, and pressing colors.primary. should show a list of primary variants from 100 - 900.

.btn-blue {
  background-color: theme('colors.primary.500');
}

[alexanderniebuhr]

Ok now I understand. I don't think this feature is yet supported. As an workaround you can do your own regex pattern with the includeLanguages option