Linaria: Linaria 1.4.0+ failed to interpolate destructured theme object

Created on 11 Aug 2020  ·  2Comments  ·  Source: callstack/linaria

Environment

  • Linaria version: 1.4.0+
  • Bundler (+ version): webpack 4.22.0
  • Node.js version: 14
  • OS: any (confirmed on MacOS & Linux)

Description

There are different strategies to import and use theme's tokens, but here's mine destructuring the theme object like so:

import theme from './theme';

const { colors, fontSizes, fonts } = theme;

const Title = styled.h1`
  font-family: ${fonts.heading};
  font-size: ${fontSizes.h1};
  color: ${colors.primary};
`;

const App = () => (<Title>Hello World!</Title>);

With Linaria 1.4.0-beta.10, I receive this error in the terminal:

ERROR in ./src/App.js
Module build failed (from ./node_modules/linaria/loader.js):
SyntaxError: /sandbox/src/App.js: The expression evaluated to 'undefined', which is probablya mistake. If you want it to be inserted into CSS, explicitly cast or transform the value toa string, e.g. - 'String(fonts.heading)'.
   8 |
   9 | const Title = styled.h1`
> 10 |   font-family: ${fonts.heading};
     |                  ^^^^^^^^^^^^^
  11 |   font-size: ${fontSizes.h1};
  12 |   color: ${colors.primary};
  13 | `;
    at File.buildCodeFrameError (/sandbox/node_modules/@babel/core/lib/transformation/file/file.js:248:12)
    at NodePath.buildCodeFrameError (/sandbox/node_modules/@babel/traverse/lib/path/index.js:144:21)
    at throwIfInvalid (/sandbox/node_modules/linaria/lib/babel/utils/throwIfInvalid.js:24:12)
    at quasi.quasis.forEach (/sandbox/node_modules/linaria/lib/babel/evaluators/templateProcessor.js:152:41)
    ...

Reproducible Demo

Here's a reproducable demo with Codesandbox: https://codesandbox.io/s/linaria-demo-140-jutrr?file=/src/App.js

Expected behavior:

It works as expected in Linaria 1.3.3

Here's the identical codesandbox with only difference is [email protected]: https://codesandbox.io/s/linaria-demo-133-fmejw?file=/src/App.js

bug report 🦗 webpack 📦 complete repro 🖥️

All 2 comments

Hi @trongthanh!

Thank you for your report. I've accidentally found and fixed it in https://github.com/callstack/linaria/pull/654 :)
You can check it in 1.4.0-rc.1. 2.0.0-rc.1 will be released a bit later.

You can check it in 1.4.0-rc.1. 2.0.0-rc.1 will be released a bit later.

@Anber I notice you mention that a 2.0.0-rc.1 will be released soon. Do you have an expected release date? I'm currently using the 2.0.0-rc.0 and am not able to use 1.4.0-rc.1 at the moment. It's mainly to do with #654 which fixed #643, opened by a user of a library I maintain.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

SchlagerKhan picture SchlagerKhan  ·  4Comments

secretlifeof picture secretlifeof  ·  6Comments

amankkg picture amankkg  ·  4Comments

zaguiini picture zaguiini  ·  5Comments

jpnelson picture jpnelson  ·  4Comments