Linaria: Generated class name .css3wwc receive `Unexpected token` error during rollup build

[trongthanh]

Environment

• Linaria version: [email protected]
• Bundler (+ version): [email protected]
• Node.js version: 12.18
• OS: macOS 10.15.7

Description

Recently in a complex project, I receive a particularly strange issue during Rollup compilation.

$ rollup -c

src/containers/SearchSuggestion/icon/Search.js → public/production/SearchButton.js...
[!] (plugin linaria) SyntaxError: /Users/trantrongthanh/work/temp/linaria-bug/src/containers/SearchSuggestion/icon/Search_9vgcjs.css: Unexpected token (1:0)

> 1 | .css3wwc{background-color:transparent;border:none;cursor:pointer;outline:none;z-index:1;width:22px;position:absolute;height:100%;padding:0;box-shadow:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
    | ^

The file in question is located at this particular path: src/containers/SearchSuggestion/icon/Search.js

import { styled } from 'linaria/react';

const ControllerButton = styled.div`/* ... */`

export default ControllerButton;

After few hours investigating and reducing the issue, I noticed that, if I change the file location, or change the component's name, Rollup compiles successfully. And I also notice that if I change the file location or rename the component, the generated class name is changed too.

So my current guess is that because of the path and component location (regardless of the CSS content), the generated class name turn out to be .css3wwc. It's suspicious that because of this particular class name, Linaria attempted to process and parse this generated css file and failed.

Reproducible Demo

Here's a minimal reproducible repo: linaria-class-name-bug.zip

Try yarn install first, then yarn build.

[Anber]

Such a beautiful bug!

[Anber]

By default, the Rollup plugin tries to process all files, mistakenly including generated css files. It works since Linaria filters all without css and styled in their text, but not in your case. The fast workaround here is using include config option.

[Anber]

Fixed in 1.4.1 and 2.0.1