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

web-padawan · 2022-08-09T07:34:30Z

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.

The text was updated successfully, but these errors were encountered:

Fixes #14142 Added rollup-plugin-postcss-lit and configured it to handle all CSS files except those under theme folder. Note the extra entry with ? is necessary until umbopepato/rollup-plugin-postcss-lit#49 fixed. Another entry added to excludes to workaround umbopepato/rollup-plugin-postcss-lit#52

Refs #52

umbopepato · 2023-06-21T16:28:51Z

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 · 2023-06-22T06:48:15Z

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

web-padawan mentioned this issue Aug 9, 2022

fix: use rollup-plugin-postcss-lit with Vite vaadin/flow#14295

Merged

umbopepato added a commit that referenced this issue Jun 21, 2023

feat: exclude Vite direct style tags by default

cab989a

Refs #52

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

web-padawan commented Aug 9, 2022

umbopepato commented Jun 21, 2023

web-padawan commented Jun 22, 2023

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

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

Comments

web-padawan commented Aug 9, 2022

Description

Code example

index.html

vite.config.js

Workaround

umbopepato commented Jun 21, 2023

web-padawan commented Jun 22, 2023

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

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

`index.html`

`vite.config.js`