Error thrown on parsing `<style>` tags in `index.html`

web-padawan commented 2 years ago

Description

When index.html page contains <style> tags, it is passed to the plugin and the following error occurs:

10:28:47 AM [vite] Internal server error: Unexpected token (2:12)
  Plugin: postcss-lit
  File: /Users/serhii/vaadin/vite-lit-element-ts-sass/index.html?html-proxy&direct&index=0.css
  1  |
  2  |        body, #outlet {
     |              ^
  3  |          height: 100vh;
  4  |          width: 100%;
      at Parser.pp$4.raise (file:///Users/serhii/vaadin/vite-lit-element-ts-sass/node_modules/vite/dist/node/chunks/dep-71eb12cb.js:30616:13)
      at Parser.pp$9.unexpected (file:///Users/serhii/vaadin/vite-lit-element-ts-sass/node_modules/vite/dist/node/chunks/dep-71eb12cb.js:27917:8)
      at Parser.pp$5.parseMaybeUnary (file:///Users/serhii/vaadin/vite-lit-element-ts-sass/node_modules/vite/dist/node/chunks/dep-71eb12cb.js:29753:63)
      at Parser.pp$5.parseExprOps (file:///Users/serhii/vaadin/vite-lit-element-ts-sass/node_modules/vite/dist/node/chunks/dep-71eb12cb.js:29685:19)
      at Parser.pp$5.parseMaybeConditional (file:///Users/serhii/vaadin/vite-lit-element-ts-sass/node_modules/vite/dist/node/chunks/dep-71eb12cb.js:29668:19)
      at Parser.pp$5.parseMaybeAssign (file:///Users/serhii/vaadin/vite-lit-element-ts-sass/node_modules/vite/dist/node/chunks/dep-71eb12cb.js:29635:19)
      at Parser.pp$5.parseExpression (file:///Users/serhii/vaadin/vite-lit-element-ts-sass/node_modules/vite/dist/node/chunks/dep-71eb12cb.js:29602:66)
      at Parser.pp$8.parseStatement (file:///Users/serhii/vaadin/vite-lit-element-ts-sass/node_modules/vite/dist/node/chunks/dep-71eb12cb.js:28107:45)
      at Parser.pp$8.parseTopLevel (file:///Users/serhii/vaadin/vite-lit-element-ts-sass/node_modules/vite/dist/node/chunks/dep-71eb12cb.js:27974:21)
      at Parser.parse (file:///Users/serhii/vaadin/vite-lit-element-ts-sass/node_modules/vite/dist/node/chunks/dep-71eb12cb.js:27746:15) (x2)

Code example

`index.html`

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Test</title>
    <style>
      body, #outlet {
        height: 100vh;
        width: 100%;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <div id="outlet"></div>
  </body>
</html>

`vite.config.js`

import { defineConfig } from "vite";
import path from "path";
import postcssLit from "rollup-plugin-postcss-lit";

// https://vitejs.dev/config/
export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        index: path.resolve("index.html"),
      },
    },
  },
  plugins: [postcssLit({ include: ["**/*.css", "**/*.css?*"] })],
});

Workaround

Updating the exclude helps to ignore these CSS files:

  plugins: [
    postcssLit({
      include: ['**/*.css', '**/*.css\?*'],
      exclude: ['**/*\?html-proxy*']
    })
  ]

The plugin should be probably updated to ignore such CSS files, as they are not supposed to be imported from JS.

umbopepato commented 1 year ago

Hey @web-padawan! Version v2.1.0 is out with a new default exclude filter for this kind of inline scripts (which is called ?direct in more recent versions of Vite)

web-padawan commented 1 year ago

Thank you for letting me know! I will inform my colleagues and maybe they will upgrade to new version.

umbopepato / rollup-plugin-postcss-lit