rollup-plugin-postcss-lit
rollup-plugin-postcss-lit copied to clipboard
Published
20 hours ago •
umbopepato
umbopepato
Error thrown on parsing `<style>` tags in `index.html`
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.
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)
Thank you for letting me know! I will inform my colleagues and maybe they will upgrade to new version.