unocss engine transform javascript code like p[k1][k2] into .p\[k1\]\[k2\]{padding:k1][k2;}.(notice there is a space on 'p[k1][k2]'s each side.)

[laddish]

Describe the bug
unocss engine transform javascript code like p[k1][k2] into .p\[k1\]\[k2\]{padding:k1][k2;}.(notice there is a space on 'p[k1][k2]'s each side.)

To Reproduce
Steps to reproduce the behavior:

1. Go to unocss playground with my bad code
2. Click on 'Output css'
3. Scroll down to '.p[k1][k2]{padding:k1][k2;}'
4. See the result, this code broke the output css.

Expected behavior
I expect it didn't transform javascript code or it ignores code in javascript.
I first encountered this error in my program using vitesse-lite,
the origin error code is like

const LCAKeys = ['GWP', 'PED', 'AP', 'RI'] as const;
const arr = [....]
arr.reduce((p, c) => {
  const process = c.process
  LCAKeys.forEach((LCAkey) => {
    if (p[LCAkey][process]) {
      p[LCAkey][process].value += c[LCAkey]
    }else{
     p[LCAkey][process] = {.....} // this line is the error reason. (notice there is a space on 'p[LCAkey][process]'s each side.)
    }
 }, {
  PED: {},
  GWP: {},
  AP: {},
  RI: {},
} as any)

then the program broke and throw a error

[vite] Internal server error: /__uno.css:89:27: Unclosed bracket
  Plugin: vite:css
  File: /__uno.css
      at Input.error (\node_modules\.pnpm\postcss@8.4.13\node_modules\postcss\lib\input.js:148:16)
      at Parser.unclosedBracket (\node_modules\.pnpm\postcss@8.4.13\node_modules\postcss\lib\parser.js:532:22)
      at Parser.other (\node_modules\.pnpm\postcss@8.4.13\node_modules\postcss\lib\parser.js:152:35)
      at Parser.parse (\node_modules\.pnpm\postcss@8.4.13\node_modules\postcss\lib\parser.js:72:16)
      at parse \node_modules\.pnpm\postcss@8.4.13\node_modules\postcss\lib\parse.js:11:12)
      at new LazyResult (\node_modules\.pnpm\postcss@8.4.13\node_modules\postcss\lib\lazy-result.js:133:16)
      at Processor.process (\node_modules\.pnpm\postcss@8.4.13\node_modules\postcss\lib\processor.js:28:14)
      at compileCSS (\node_modules\.pnpm\vite@2.9.13\node_modules\vite\dist\node\chunks\dep-80fe9c6b.js:37635:10)
      at async TransformContext.transform (\node_modules\.pnpm\vite@2.9.13\node_modules\vite\dist\node\chunks\dep-80fe9c6b.js:37186:55)     
      at async Object.transform (\node_modules\.pnpm\vite@2.9.13\node_modules\vite\dist\node\chunks\dep-80fe9c6b.js:39292:30)

so I try to find the reason,
first I thought it was postcss's bug,
after I visit the http://localhost:4000/__unocss#/ inspector (this inspector is awesome like this unocss project!!!),it generate css code like
.p\[LCAkey\]\[process\]{padding:LCAkey][process;}
I realize there is something wrong to write code like ' p[LCAkey][process] ' via using unocss.()
the bad code is p[LCAkey][process] = {.....}

I know how to avoid this problem, just don't name a variable like p or ' p[LCAkey][process] ' via using unocss, so I change p to prev, like prev[LCAkey][process], the program back to ok as expected.

Then I realize naming a variable in one character is my bad code habit,
maybe this is a unsolvable situation rather than a bug.

I try to reproduce the situation in the unocss playground.
compare unocss playground and unocss playground with my error,
the wrong css broke the style.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. windows] windows
• Browser [e.g. chrome] chrome
• Version [e.g. 103.0.5060.114] 103.0.5060.114
• unocss version: 0.44.3
• vite version: 2.9.9
• postcss version: 8.4.13

unocss presets:

  presets: [
    presetUno(),
    presetAttributify(),
    presetIcons({
      scale: 1.2,
      warn: true,
    }),
    presetWebFonts({
      fonts: {
        sans: 'DM Sans',
        serif: 'DM Serif Display',
        mono: 'DM Mono',
      },
    }),
  ],

Additional context
Add any other context about the problem here.

I try to find the regexp rule in unocss's engine code .
first i search where to generate the padding code, and I found

it didn't match the p[LCAkey][process],
then I try to search \[(.+?) to match the [...
I found this

don't know whether it help or not.

Thanks for reading this issue.

[zyyv]

This is intentional, the unocss extractor needs to parse the code.

Please refer to scanning