Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

build crashes if index.html contains word "css" #6

Open
janKir opened this issue Jun 4, 2021 · 1 comment
Open

build crashes if index.html contains word "css" #6

janKir opened this issue Jun 4, 2021 · 1 comment

Comments

@janKir
Copy link

janKir commented Jun 4, 2021

First of all, thanks for that nice plugin!

Description

I am using it for a small project and noticed that my builds have started failing a few days ago with following error message:

file: C:/path/to/project/index.html:1:0
error during build:
SyntaxError: C:\path\to\project\index.html: Unexpected token (1:0)

> 1 | <!DOCTYPE html>
    | ^
  2 | <html lang="en">
  3 |
  4 | <head>

I took me a while to notice because the dev command was still working fine. Also if I remove vite-plugin-linaria from the vite.config.ts, the build works again. So I had a look into the commit that broke the build and it happened that I had added Web Fonts to the index.html:

  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap"
    rel="stylesheet">

So after playing around with the changes I had added to the file and when the build works and fails, I figured the issue is the three letters css in the href attribute that caused my build to fail. Also if I put the word css anywhere else in the index.html the build will fail.

Not sure how why this happens but I guess this somehow makes the html file match some css pattern and vite trying to parse it as such. 🤔

Reproduce

  • create a new react-ts project with npm init @vitejs/app
  • install linaria, vite-plugin-linaria and add it to the config
  • add the word css anywhere in the index.html
  • run the vite build
@H-Plus-Time
Copy link

Can confirm this happens in css files as well - both in comments and in actual css (e.g. content: 'cssblah' in an :after block, or color: 'cssfoo') - fortunately it doesn't affect jsx, tsx, ts or js files. Guessing it's an upstream bug in the @linaria/babel-preset package.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@H-Plus-Time @janKir