linaria@4.0.0 broke re-exports

[nstepien]

Environment

• Linaria version: 4.0.0
• Bundler (+ version): webpack@5.72.0, rollup@2.71.1
• Node.js version: 18.6.0
• OS: Win11

Description

We use linaria@3 in react-data-grid: https://github.com/adazzle/react-data-grid
Trying to upgrade to linaria@4 broke webpack/rollup: adazzle/react-data-grid#2962

> npm run build

./src/index.ts → ./lib/bundle.js, ./lib/bundle.cjs...
[!] Error: 'cellClassname' is not exported by src/style/index.ts, imported by src/utils/styleUtils.ts
https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module
src/utils/styleUtils.ts (5:9)
3: 
4: import type { CalculatedColumn } from '../types';
5: import { cellClassname, cellFrozenClassname, cellFrozenLastClassname } from '../style';
            ^
6: 
7: export function getRowStyle(rowIdx: number, height?: number): CSSProperties {
Error: 'cellClassname' is not exported by src/style/index.ts, imported by src/utils/styleUtils.ts
    at error (D:\repos\react-data-grid\node_modules\rollup\dist\shared\rollup.js:198:30)
    at Module.error (D:\repos\react-data-grid\node_modules\rollup\dist\shared\rollup.js:12542:16)
    at Module.traceVariable (D:\repos\react-data-grid\node_modules\rollup\dist\shared\rollup.js:12901:29)
    at ModuleScope.findVariable (D:\repos\react-data-grid\node_modules\rollup\dist\shared\rollup.js:11553:39)
    at FunctionScope.findVariable (D:\repos\react-data-grid\node_modules\rollup\dist\shared\rollup.js:6486:38)
    at ChildScope.findVariable (D:\repos\react-data-grid\node_modules\rollup\dist\shared\rollup.js:6486:38)
    at Identifier.bind (D:\repos\react-data-grid\node_modules\rollup\dist\shared\rollup.js:7553:40)
    at CallExpression.bind (D:\repos\react-data-grid\node_modules\rollup\dist\shared\rollup.js:5379:73)
    at CallExpression.bind (D:\repos\react-data-grid\node_modules\rollup\dist\shared\rollup.js:9049:15)
    at ReturnStatement.bind (D:\repos\react-data-grid\node_modules\rollup\dist\shared\rollup.js:5383:23)

https://github.com/adazzle/react-data-grid/blob/d11a5cc70615485fd94398a517d4f4e5cab6f088/src/utils/styleUtils.ts
https://github.com/adazzle/react-data-grid/blob/d11a5cc70615485fd94398a517d4f4e5cab6f088/src/style/index.ts
https://github.com/adazzle/react-data-grid/blob/d11a5cc70615485fd94398a517d4f4e5cab6f088/src/style/cell.ts
style/index.ts re-exports styles from style/cell.ts, this works fine with linaria@3 but not with linaria@4 as rollup cannot find the re-exports anymore.

$ npm start

> react-data-grid@7.0.0-beta.14 start
> webpack serve --mode=development

<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/
<i> [webpack-dev-server] On Your Network (IPv4): http://192.168.1.104:8080/
<i> [webpack-dev-middleware] wait until bundle finished: /
D:\repos\react-data-grid\node_modules\@babel\types\lib\definitions\utils.js:131
    throw new TypeError(`Property ${key} of ${node.type} expected node to be of a type ${JSON.stringify(types)} but instead got ${JSON.stringify(val == null ? void 0 : val.type)}`); 
          ^

TypeError: D:\repos\react-data-grid\website\demos\CommonFeatures.tsx: Property body of ObjectMethod expected node to be of a type ["BlockStatement"] but instead got undefined        
    at Object.validate (D:\repos\react-data-grid\node_modules\@babel\types\lib\definitions\utils.js:131:11)
    at validateField (D:\repos\react-data-grid\node_modules\@babel\types\lib\validators\validate.js:24:9)
    at validate (D:\repos\react-data-grid\node_modules\@babel\types\lib\validators\validate.js:17:3)
    at NodePath._replaceWith (D:\repos\react-data-grid\node_modules\@babel\traverse\lib\path\replacement.js:169:5)
    at NodePath._remove (D:\repos\react-data-grid\node_modules\@babel\traverse\lib\path\removal.js:59:10)
    at NodePath.remove (D:\repos\react-data-grid\node_modules\@babel\traverse\lib\path\removal.js:38:8)
    at D:\repos\react-data-grid\node_modules\@linaria\utils\lib\scopeHelpers.js:296:42
    at mutate (D:\repos\react-data-grid\node_modules\@linaria\utils\lib\scopeHelpers.js:327:19)
    at D:\repos\react-data-grid\node_modules\@linaria\utils\lib\scopeHelpers.js:295:5
    at Array.forEach (<anonymous>) {
  code: 'BABEL_TRANSFORM_ERROR'
}

Node.js v18.6.0

Not sure what the webpack error is about.

Reproducible Demo

adazzle/react-data-grid#2962
You can checkout this branch then run these commands locally:

npm i
npm run build # for rollup
npm start # for webpack

[Anber]

Hi @nstepien!
Thank you for your report! I've just published 4.1.0, which should fix both of your problems.

[nstepien]

@Anber Thanks, both work fine now!
Congrats on the stable release.

4.1.0 is breaking Jest now, not sure if 4.0.0 was working in Jest before.
Should I open a new issue?

● Test suite failed to run
    Using the "css" tag in runtime is not supported. Make sure you have set up the Babel plugin correctly.

Same branch as before in react-data-grid.

[Anber]

4.1.0 is breaking Jest now, not sure if 4.0.0 was working in Jest before.

Do you use babel-jest transformer?

[nstepien]

https://github.com/adazzle/react-data-grid/blob/d11a5cc70615485fd94398a517d4f4e5cab6f088/jest.config.js
I believe it does yes. FWIW Jest was working fine with linaria@3.

[Anber]

I can't say right now why it was ok with 3.0, but you need something that can replace css calls before Jest tries to execute your code. Could you try to add this to jest.config.js?

  transform: {
    '^.+\\.[jt]sx?$': 'babel-jest',
  },

[nstepien]

I get the same problem with this config.
I'm sure it's using babel to transpile anyway as we need to transpile ts types/jsx syntax for example.

[Anber]

Hm. I tried with this config, and it worked, but after your message it stopped :) Could you please open a new issue? I'll try to figure out what has happened.

[nstepien]

it worked, but after your message it stopped

Without changing anything the tests worked fine on the first try, but stopped working when I ran the tests with the cache disabled with npm t -- --no-cache. Maybe 4.0.0 worked fine with jest 🤔

Anyway I've opened a new issue here: #1021