windi.config.js is not reloaded correctly (e.g. colors are not updated in the suggestion)

[vexkiddy]

Consider this windi.config.js file

import { defineConfig } from 'windicss/helpers';
import colors from 'windicss/colors';

export default defineConfig({
  darkMode: 'class', // or 'media'
  theme: {

    colors: {
        color1: "#33FF9D",
        color2: "#33FF9D",
        color3: "#33FF9D",
        color4: "#33FF9D",
      },
      fontFamily: {
        semibold: ['SofiaSemiBold', 'sans-serif'],
        light: ['SofiaLight', 'sans-serif'],
        bold: ['SofiaBold', 'sans-serif'],
        regular: ['SofiaRegular', 'sans-serif'],
        medium: ['SofiaMedium', 'sans-serif']

      },
  },
})

This should overwrite the default colours from windi, which it does and they do work in production. However the plugin still suggests the original windicss colours and doesn't suggest these new ones. Any ideas why that is ?

[devmor-j]

I have the same problem :|

[timmychatterbug]

yep.. its really annoying :D

[alexanderniebuhr]

@vexkiddy @devmor-j @timmychatterbug I can not reproduce this. It works perfectly fine. Can you test this with the latest pre-release version v0.23.4?

Also we need more information, do you have any other extensions enabled which provide suggestion. In which files are these not working. HTML?

[devmor-j]

@alexanderniebuhr Yeah, for reproduction you can test this repo and I put the instructions, (it's a simple card component): https://github.com/devmor-j/fm-order-summary-component

I disabled all other css snippets and tailwind intellisense as well. First time you open project and use custom colors like clr-pale-blue It works.

here is how to reproduce the issue (not showing new custom colors - maybe even all custom configs):

Instructions to reproduce issue - custom color not showing up

1. make sure the WindiCSS IntelliSense is enabled (I have v0.21.6)
2. go to file windi.config.js then find colors part
3. add a new color at the end of the list (bright purple), ex: 'clr-green': 'hsl(145, 50%, 50%)', // Green Color
4. save config and go to ./index.html
5. use that color for a element like h1 remove current color clr-dark-blue and add yours (w:text="clr-green" or class="text-clr-green")
6. no suggestion appears (but dev server works fine and color is changed)
7. to run vite dev server use npm run dev or pnpm dev
8. the h1 element should be green (or any color you set in config)

What I thing might be the issue

Seems like configs are only read when the windicss extension is loaded. After that any changes in config is not added to suggestion engine.

Here is how to fix this

1. Just disable windicss extension and reload vscode
2. Then enable extension again (without changing windi.config.js)
3. The new custom color will show up in suggestions even though the suggestion icon is missing (shows an art board object next to it while other native windicss colors have cube colors).
4. If you add a new color in windi.config.js the same problem repeats and you have to do instructions 1-3 to fix this.

Hope this helps and thanks for your response.

[alexanderniebuhr]

Ok than the issue is that the config is not reloaded. This is not an issue that the suggestion do not work. You don't have to disable the extension. Using @command:workbench.action.reloadWindow should work.

I will update the issue to make more sense. Thanks for the information!

[mariohamann]

Hey!

Wanted to experiment with WindiCSS but experienced the same issues as mentioned above and therefore stopped working with it. 😢 (Mac, M1 Pro; I tested with both the current version and the pre-release; I tested with all (windi|tailwind).config.(js|ts))

I experienced another strange problem that somehow feels connected, maybe that helps you with debugging: I had two projects open at the same time in two different windows, both using WindiCSS. Most of the time added colors etc. didn't show up, even after reloading the window – strange enough, at one point I saw (old) suggestions from the project of the other window, but not the suggestions of the current project. Even after several reloads and even after the colors where removed in both projects, they still appeared in the wrong project.

It feels like some strange caching behaviour or similar...?

This feels somehow connected to https://github.com/windicss/windicss-intellisense/issues/287

[alexanderniebuhr]

Yeah. It's a caching issue. I've tried to implement a new loading logic in the newest pre-release version v0.23.5. Hope that helps. Will see.

[ckvv]

@alexanderniebuhr I still have a similar problem using v0.23.5 in vscode. After modifying the alias config, the style must be restarted vite to take effect。

Sorry, The plug-in is correctly prompted, but the code does not take effect, this should be a windicss issue https://github.com/windicss/windicss/issues/655

[devmor-j]

@vexkiddy, Seems like this issue can be closed as of v0.23.5 (pre-release version) works fine. Please try again using that version. Tested with Vite not only reloads config file on change, but also suggestions appear as expected. Thanks @alexanderniebuhr 😀

[NoUserTeam]

@devmor-j @alexanderniebuhr how did you solve this error? How can I implement a new loading logic in the newest pre-release version v0.23.5?