acorn parser crashes on CSS files

[aheissenberger]

When plugin is configured with client: true, apply: 'server' it will also receive CSS code which currently breaks the parsing process.

Error:

file:///waku-mantine/node_modules/.pnpm/acorn@8.11.3/node_modules/acorn/dist/acorn.mjs:3567
  var err = new SyntaxError(message);
            ^

SyntaxError: Unexpected token (1:0)
    at pp$4.raise (file:///waku-mantine/node_modules/.pnpm/acorn@8.11.3/node_modules/acorn/dist/acorn.mjs:3567:13)
    at pp$9.unexpected (file:///waku-mantine/node_modules/.pnpm/acorn@8.11.3/node_modules/acorn/dist/acorn.mjs:766:8)
    at pp$5.parseExprAtomDefault (file:///waku-mantine/node_modules/.pnpm/acorn@8.11.3/node_modules/acorn/dist/acorn.mjs:2930:8)
    at pp$5.parseExprAtom (file:///waku-mantine/node_modules/.pnpm/acorn@8.11.3/node_modules/acorn/dist/acorn.mjs:2925:17)
    at pp$5.parseExprSubscripts (file:///waku-mantine/node_modules/.pnpm/acorn@8.11.3/node_modules/acorn/dist/acorn.mjs:2709:19)
    at pp$5.parseMaybeUnary (file:///waku-mantine/node_modules/.pnpm/acorn@8.11.3/node_modules/acorn/dist/acorn.mjs:2675:17)
    at pp$5.parseExprOps (file:///waku-mantine/node_modules/.pnpm/acorn@8.11.3/node_modules/acorn/dist/acorn.mjs:2602:19)
    at pp$5.parseMaybeConditional (file:///waku-mantine/node_modules/.pnpm/acorn@8.11.3/node_modules/acorn/dist/acorn.mjs:2585:19)
    at pp$5.parseMaybeAssign (file:///waku-mantine/node_modules/.pnpm/acorn@8.11.3/node_modules/acorn/dist/acorn.mjs:2552:19)
    at pp$5.parseExpression (file:///waku-mantine/node_modules/.pnpm/acorn@8.11.3/node_modules/acorn/dist/acorn.mjs:2515:19) {
  pos: 0,
  loc: Position { line: 1, column: 0 },
  raisedAt: 1,
  plugin: 'cjs-interop',
  id: '\x00/appshell/mantine/date?html-proxy&direct&index=0.css',
  pluginCode: ':root{--mantine-font-family: Open Sans, sans-serif;--mantine-font-family-headings: Open Sans, sans-serif;--mantine-primary-color-filled: var(--mantine-color-orange-filled);--mantine-primary-color-filled-hover: var(--mantine-color-orange-filled-hover);--mantine-primary-color-light: var(--mantine-color-orange-light);--mantine-primary-color-light-hover: var(--mantine-color-orange-light-hover);--mantine-primary-color-light-color: var(--mantine-color-orange-light-color);--mantine-primary-color-0: var(--mantine-color-orange-0);--mantine-primary-color-1: var(--mantine-color-orange-1);--mantine-primary-color-2: var(--mantine-color-orange-2);--mantine-primary-color-3: var(--mantine-color-orange-3);--mantine-primary-color-4: var(--mantine-color-orange-4);--mantine-primary-color-5: var(--mantine-color-orange-5);--mantine-primary-color-6: var(--mantine-color-orange-6);--mantine-primary-color-7: var(--mantine-color-orange-7);--mantine-primary-color-8: var(--mantine-color-orange-8);--mantine-primary-color-9: var(--mantine-color-orange-9);--mantine-color-myColor-0: #fff4e2;--mantine-color-myColor-1: #ffe9cc;--mantine-color-myColor-2: #ffd09c;--mantine-color-myColor-3: #fdb766;--mantine-color-myColor-4: #fca13a;--mantine-color-myColor-5: #fb931d;--mantine-color-myColor-6: #fc8c0c;--mantine-color-myColor-7: #e17900;--mantine-color-myColor-8: #c86a00;--mantine-color-myColor-9: #ae5a00;}:root[data-mantine-color-scheme="dark"]{--mantine-color-anchor: var(--mantine-color-orange-4);--mantine-color-myColor-text: var(--mantine-color-myColor-4);--mantine-color-myColor-filled: var(--mantine-color-myColor-8);--mantine-color-myColor-filled-hover: var(--mantine-color-myColor-9);--mantine-color-myColor-light: rgba(252, 140, 12, 0.15);--mantine-color-myColor-light-hover: rgba(252, 140, 12, 0.2);--mantine-color-myColor-light-color: var(--mantine-color-myColor-3);--mantine-color-myColor-outline: var(--mantine-color-myColor-4);--mantine-color-myColor-outline-hover: rgba(252, 161, 58, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-anchor: var(--mantine-color-orange-6);--mantine-color-myColor-text: var(--mantine-color-myColor-filled);--mantine-color-myColor-filled: var(--mantine-color-myColor-6);--mantine-color-myColor-filled-hover: var(--mantine-color-myColor-7);--mantine-color-myColor-light: rgba(252, 140, 12, 0.1);--mantine-color-myColor-light-hover: rgba(252, 140, 12, 0.12);--mantine-color-myColor-light-color: var(--mantine-color-myColor-6);--mantine-color-myColor-outline: var(--mantine-color-myColor-6);--mantine-color-myColor-outline-hover: rgba(252, 140, 12, 0.05);}',
  frame: '1  |  :root{--mantine-font-family: Open Sans, sans-serif;--mantine-font-family-headings: Open Sans, sans-serif;--mantine-primary-color-filled: var(--mantine-color-orange-filled);--mantine-primary-color-filled-hover: var(--mantine-color-orange-filled-hover);--mantine-primary-color-light: var(--mantine-color-orange-light);--mantine-primary-color-light-hover: var(--mantine-color-orange-light-hover);--mantine-primary-color-light-color: var(--mantine-color-orange-light-color);--mantine-primary-color-0: var(--mantine-color-orange-0);--mantine-primary-color-1: var(--mantine-color-orange-1);--mantine-primary-color-2: var(--mantine-color-orange-2);--mantine-primary-color-3: var(--mantine-color-orange-3);--mantine-primary-color-4: var(--mantine-color-orange-4);--mantine-primary-color-5: var(--mantine-color-orange-5);--mantine-primary-color-6: var(--mantine-color-orange-6);--mantine-primary-color-7: var(--mantine-color-orange-7);--mantine-primary-color-8: var(--mantine-color-orange-8);--mantine-primary-color-9: var(--mantine-color-orange-9);--mantine-color-myColor-0: #fff4e2;--mantine-color-myColor-1: #ffe9cc;--mantine-color-myColor-2: #ffd09c;--mantine-color-myColor-3: #fdb766;--mantine-color-myColor-4: #fca13a;--mantine-color-myColor-5: #fb931d;--mantine-color-myColor-6: #fc8c0c;--mantine-color-myColor-7: #e17900;--mantine-color-myColor-8: #c86a00;--mantine-color-myColor-9: #ae5a00;}:root[data-mantine-color-scheme="dark"]{--mantine-color-anchor: var(--mantine-color-orange-4);--mantine-color-myColor-text: var(--mantine-color-myColor-4);--mantine-color-myColor-filled: var(--mantine-color-myColor-8);--mantine-color-myColor-filled-hover: var(--mantine-color-myColor-9);--mantine-color-myColor-light: rgba(252, 140, 12, 0.15);--mantine-color-myColor-light-hover: rgba(252, 140, 12, 0.2);--mantine-color-myColor-light-color: var(--mantine-color-myColor-3);--mantine-color-myColor-outline: var(--mantine-color-myColor-4);--mantine-color-myColor-outline-hover: rgba(252, 161, 58, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-anchor: var(--mantine-color-orange-6);--mantine-color-myColor-text: var(--mantine-color-myColor-filled);--mantine-color-myColor-filled: var(--mantine-color-myColor-6);--mantine-color-myColor-filled-hover: var(--mantine-color-myColor-7);--mantine-color-myColor-light: rgba(252, 140, 12, 0.1);--mantine-color-myColor-light-hover: rgba(252, 140, 12, 0.12);--mantine-color-myColor-light-color: var(--mantine-color-myColor-6);--mantine-color-myColor-outline: var(--mantine-color-myColor-6);--mantine-color-myColor-outline-hover: rgba(252, 140, 12, 0.05);}\n' +
    '   |  ^'
}

My vite.config.ts:

cjsInterop({
      // List of CJS dependencies that require interop
      dependencies: [/*'lodash','lodash/**',*/
      'lodash',
      'dayjs',
    ],
      client: true,
      apply:'serve'
    }),

[cyco130]

Hopefully fixed by your PR (#30) and published in 2.0.6.

Thank you for your contribution!