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)
...
Here's a reproducable demo with Codesandbox: https://codesandbox.io/s/linaria-demo-140-jutrr?file=/src/App.js
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
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.