UnoCSS with VitePress and PHP syntax

[bojanrajh]

We have encountered a weird issue with UnoCSS parser.

See Example 3 - PHP array syntax on StackBlitz.

Steps to reproduce:

• Extend default theme in ./docs/.vitepress/theme/index.ts with import 'uno.css'
• Add presetWebFonts() to ./docs/vite.config.js (same thing happens with presetIcons() in my local environment)
• create ./docs/example3.md with the following content (remove last \)

```php
<?php
class Foo
{
    public function bar(): array
    {
        return [Baz::class];
    }
}
\```

• run npm run docs:build

UnoCSS throws Double semicolon error with this CSS section in input.source using the build command, and similar error using the dev command.

.\\[Baz\\:\\:class\\]{Baz::class;}.\\[foo\\:bar\\:baz\\]{foo:bar:baz;}

CssSyntaxError: [postcss] /home/projects/vite-qf1xbf/app.js-unocss-hash.css:55:331: Double colon
    at Input.error (file:///home/projects/vite-qf1xbf/node_modules/postcss/lib/input.js:148:16)
    at Parser.doubleColon (file:///home/projects/vite-qf1xbf/node_modules/postcss/lib/parser.js:561:22)
    at Parser.colon (file:///home/projects/vite-qf1xbf/node_modules/postcss/lib/parser.js:516:16)
    at Parser.checkMissedSemicolon (file:///home/projects/vite-qf1xbf/node_modules/postcss/lib/parser.js:581:22)
    at Parser.decl (file:///home/projects/vite-qf1xbf/node_modules/postcss/lib/parser.js:279:12)
    at Parser.other (file:///home/projects/vite-qf1xbf/node_modules/postcss/lib/parser.js:128:18)
    at Parser.parse (file:///home/projects/vite-qf1xbf/node_modules/postcss/lib/parser.js:72:16)
    at parse (file:///home/projects/vite-qf1xbf/node_modules/postcss/lib/parse.js:11:12)
    at new LazyResult (file:///home/projects/vite-qf1xbf/node_modules/postcss/lib/lazy-result.js:133:16)
    at Processor.process (file:///home/projects/vite-qf1xbf/node_modules/postcss/lib/processor.js:28:14)

Weirdly enough, the multi-line syntax works in my local environment, but it throws Missed semicolon exception in StackBlitz:

        return [
                Baz::class
        ];

CssSyntaxError: [postcss] /home/projects/vite-qf1xbf/assets/app.!~{001}~.js-unocss-hash.css:55:335: Missed semicolon
    at Input.error (file:///home/projects/vite-qf1xbf/node_modules/postcss/lib/input.js:148:16)
    at Parser.checkMissedSemicolon (file:///home/projects/vite-qf1xbf/node_modules/postcss/lib/parser.js:596:22)
    at Parser.decl (file:///home/projects/vite-qf1xbf/node_modules/postcss/lib/parser.js:279:12)
    at Parser.other (file:///home/projects/vite-qf1xbf/node_modules/postcss/lib/parser.js:128:18)
    at Parser.parse (file:///home/projects/vite-qf1xbf/node_modules/postcss/lib/parser.js:72:16)
    at parse (file:///home/projects/vite-qf1xbf/node_modules/postcss/lib/parse.js:11:12)
    at new LazyResult (file:///home/projects/vite-qf1xbf/node_modules/postcss/lib/lazy-result.js:133:16)
    at Processor.process (file:///home/projects/vite-qf1xbf/node_modules/postcss/lib/processor.js:28:14)
    at compileCSS (file://file:///home/projects/vite-qf1xbf/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:36610:14)
    at async Object.transform (file://file:///home/projects/vite-qf1xbf/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:36075:56)

I narrowed this down to the [Baz::class] being added as a token in GlobalModeBuildPlugin(), later passed down into uno.generate(tokens).

Test suite (added to ./test/preset-icons.test.ts):

  test('single-line array syntax', async () => {
    const { css } = await uno.generate(['[Baz::class]'], { preflights: false })
    expect(css).toEqual('');
  })

  test('multi-line array syntax', async () => {
    const { css } = await uno.generate(['Baz::class'], { preflights: false })
    expect(css).toEqual('');
  })

[LittleSound]

When will this fix be released? I also encountered the Missed semicolon error. I want to try whether this fix can solve my problem.

[bojanrajh]

This was fixed in #2117 and released in v0.49.1 thanks to @sibbng