`at-rule or selector expected `, `semicolon expected`, etc. errors with SelvteKt

[abalmos]

Describe the bug When I add vite-plugin-windicss to a SvelteKit project, I receive errors around the WinidiCSS syntax. Certainly the @apply directive, but maybe others. For example:

The actual compile works because things are as expected at runtime.

I've seen #98, but I don't grok a solution other than that issue is fixed.

Side note: @apply's with only one class are fine.

Minimal Reproductions A minimal reproduction is here: https://github.com/abalmos/windi-sevltekit-min-repo/

Use yarn run dev to start the example and yarn run check to see the errors.

The line in question is: https://github.com/abalmos/windi-sevltekit-min-repo/blob/837fb905e02097db3c69f552a96ae067d8dff6d8/src/routes/index.svelte#L6

Versions

• vite-plugin-windicss: 1.3.0
• vite: 2.5.3
• framework(vue/react/svelte/etc): SvelteKit

Additonal Context

[abalmos]

For additional context, the only things changed from the SvelteKit skeleton template with Typescript, Prettier, and eslint are:

1. Included the WindiCSS plugin in svelte.config.js (which adds to vite's config)
2. Added an @apply directive to a Svelte <style> block
3. Added __layout.svelte to import WindiCSS's CSS file

Which, I believe, is everything required by the docs

Aside: it's a bit confusing to know which instructions to follow. The Svelte page mentions SvelteKit but then also links to the Vite's instructions which has a SvelteKit heading too. From my testing neither setup works correctly.

[antfu]

I suspect this is because Svelte css lint in editor is too strict to understand custom syntax. I am not sure how it works with PostCSS and Tailwind (or does it?), but I guess the current workaround might be either:

• Disable the CSS validation in Svelte
• Find a way to extend Svelte CSS lang (windicss uses similar syntax with PostCSS)
• Avoid using @apply in Svelte but in separate css files.

/cc @alexanderniebuhr WDYT?

[abalmos]

@antfu Thanks for the fast response.

I am far from an expert on how svelte deals with PostCSS, but you do have to enable this plugin for svelte-preprocess and write styles like this <style lang="postcss">...</style>.

[antfu]

So would that work if you specify it as postcss?

[alexanderniebuhr]

To use svelte with PostCSS in svelte you would need to use svelte-preprocess. You should also make use that svelte-preprocess is done running before windi css runs. But since you are using site-plugin it should be fine.

I actually can't reproduce your errors, in any of mine or your repro. Are you sure you are on the latest updates on all extensions.

Another more general setting which helped a lot in the past is:

"css.validate": false,
``

[abalmos]

To use svelte with PostCSS in svelte you would need to use svelte-preprocess.

@alexanderniebuhr I don't I want to use postcss with WindiCSS, do I? I am not a web guy, but I understand that Tailwind/WIndiCSS uses some of the postcss syntax, but it does it's own processing.

I actually can't reproduce your errors, in any of mine or your repro. Are you sure you are on the latest updates on all extensions.

yarn outdated indicates that I am using the newest versions of vite and this plugin. I'm not sure what you mean by extensions.

I'm surprised to hear you can't reproduce the error. I have tried on several machines, including a deployment server which has no pre-existing tools installed, and I get the errors.

Here is the play by play:

abalmos@oats2:~ (master *%=) $ git clone https://github.com/abalmos/windi-sevltekit-min-repo.git
Cloning into 'windi-sevltekit-min-repo'...
remote: Enumerating objects: 22, done.
remote: Counting objects: 100% (22/22), done.
remote: Compressing objects: 100% (17/17), done.
remote: Total 22 (delta 2), reused 22 (delta 2), pack-reused 0
Unpacking objects: 100% (22/22), done.

abalmos@oats2:~ (master *%=) $ cd windi-sevltekit-min-repo/

abalmos@oats2:~/windi-sevltekit-min-repo (master=) $ yarn install
yarn install v1.22.5
warning package.json: No license field
warning ~TODO~@0.0.1: No license field
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.3.2: The platform "linux" is incompatible with this module.
info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > vite-plugin-windicss@1.3.0" has unmet peer dependency "vite@^2.0.1".
[4/4] Building fresh packages...
Done in 3.77s.

abalmos@oats2:~/windi-sevltekit-min-repo (master=) $ yarn run check
yarn run v1.22.5
warning package.json: No license field
$ svelte-check --tsconfig ./tsconfig.json

====================================
Loading svelte-check in workspace: /home/abalmos/windi-sevltekit-min-repo
Getting Svelte diagnostics...

/home/abalmos/windi-sevltekit-min-repo/src/routes/index.svelte:7:2
Error: at-rule or selector expected (css)
        @apply text-purple-600 font-light;
    }
</style>

/home/abalmos/windi-sevltekit-min-repo/src/routes/index.svelte:6:26
Error: semi-colon expected (css)
    h1 {
        @apply text-purple-600 font-light;
    }

====================================
svelte-check found 2 errors, 0 warnings, and 0 hints
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

So would that work if you specify it as postcss?

This error goes away if I add lang="postcss" to the <style> , but others remain. I assume adding this causes Svelte to pass the CSS to postcss, which seems counterproductive?

I created a new branch demonstrating an example of an error that remains Error: Colon is expected https://github.com/abalmos/windi-sevltekit-min-repo/blob/nested-css/src/routes/__layout.svelte

"css.validate": false

Is this required to use WindiCSS? As a honest question, does WindiCSS expect that the user will never need/want custom CSS?

Thanks for spending some time with me on this! I have tried to dig into it, but I am having a hard time understanding where exactly in the processing pipeline the css errors are generated.

[alexanderniebuhr]

Ohh you should have told us, that you use svelte-check, and the issues are coming from it. Or did I miss something in you initial text?

I don't think that svelte-check runs any other "bundler plugin". I barely remember there was a discussion somewhere in the svelte community, if I find it I will provide a link for that.

[abalmos]

@alexanderniebuhr I am using both. I see the same errors in neovim driven by Svelte's language server and in svelte-check. My original question was a screen shot from neovim, but I added reproduction steps with svelte check to avoid editor differences.

I do believe that svelte-check is working correctly and with preprocessors. It correctly deals with Typescript errors. I have never seen errors in neovim and not in svelte-check and vice versa.

Is this the proper plugin for WindiCSS? Should I be using svelte-windicss-preprocess? Based on the website docs and #98 I decided this was now the proper plugin. I didn't have much luck with svelte-windicss-preprocess either.

[abalmos]

Oh, I see your edit from "preprocessor" to "bundler plugin" now. That may be true, but doesn't explain the editor errors unless it is also true for the language server.

I suppose there aren't many Svelte + WindiCSS users? I not certain of what is most "popular" right now.

[abalmos]

Interesting, so svelte-check uses the language server to generate diagnostics. As documented here.

It seems this setup would require that all of WindiCSS's syntax be fully transformed as a preprocessor step to work properly (that is vscode-css-languageservice needs just plain css). Vite is not involved at all.

svelte-windicss-preprocess seems to conflict with vite-plugin-windicss and doesn't work at all by itself (or at least I was having trouble). Could you advise what is the proper setup and I will try again with the preprocessor.

Thanks for the help and discussion!

[alexanderniebuhr]

@abalmos very sorry that you have some trouble setting things up. You should use either svelte-windicss-preprocess or vite-plugin-windicss, not both. I also think that for the editor errors you should just use the css.validate error to disable warnings. For svelte-check you might need to find a way of running site before the actual check.

/cc @antfu anything to add from your site? Otherwise I pretty much providing everything I know.

[silasabbott]

Tacking this on here because it may be related.

After months of no issues, I started getting similar Colon is expected errors on build when I began using CSS variables and tried to reference them in windi.config.js:

---

I started getting this error when I added a function to wind.config.js to convert my CSS variables to rgba() so I can change their opacity:

const varToRgba = colorValue => ({opacityVariable, opacityValue}) => {
    if (opacityValue !== undefined) {
        return `rgba(var(${colorValue}), ${opacityValue})`
    }
    if (opacityVariable !== undefined) {
        return `rgba(var(${colorValue}), var(${opacityVariable}, 1))`
    }
    return `rgb(var(${colorValue}))`
};

And then using the function like this:

export default {
    theme: {
        extend: {
            colors: {
                'primary-50': varToRgba('--primary-50'),
                'primary-100': varToRgba('--primary-100'),
                'primary-200': varToRgba('--primary-200'),
                'primary-300': varToRgba('--primary-300'),
                'primary-400': varToRgba('--primary-400'),
                'primary-500': varToRgba('--primary-500'),
                'primary-600': varToRgba('--primary-600'),
                'primary-700': varToRgba('--primary-700'),
                'primary-800': varToRgba('--primary-800'),
                'primary-900': varToRgba('--primary-900'),
            }
        }
    }
}