linaria: linaria/babel throws error on nested object interpolations within css
Bug:
What is the current behavior?
When nested objects, which have been created by some helper function, are used within css interpolation, pure babel compilation will throw error. webpack plugin works though!
Command:
yarn babel src --out-dir dist --source-maps --extensions .ts,.tsx --delete-dir-on-start
import { css } from 'linaria';
{
// ✅ WORKS
const mqStyle = {
'@media (min-width:200px)': {
width: 500,
color: 'red',
},
'@media (min-width:400px)': {
width: 700,
color: 'green',
},
};
const responsiveLayoutCss = css`
display: flex;
flex-direction: column;
${mqStyle}
`;
}
{
// ❌THROWS
// in real codebase this is generated by some function
// for demonstration purposes static references are used
const commonMediaQueries = {
xs: '@media (min-width:200px)',
md: '@media (min-width:400px)',
};
const mqStyle = {
[commonMediaQueries.xs]: {
backgroundColor: 'green',
},
[commonMediaQueries.md]: {
backgroundColor: 'green',
},
};
const responsiveLayoutCss = css`
display: flex;
flex-direction: column;
${mqStyle}
`;
}
Error:
babel src --out-dir dist --source-maps --extensions .ts,.tsx --delete-dir-on-start
SyntaxError: /Users/hotell/Projects/devel/labs/linaria/linaria-demo/src/ResponsiveLayout.tsx: An error occurred when evaluating the expression: Cannot read property 'start' of undefined. Make sure you are not using a browser or Node specific API.
81 | height: 100vh;
82 | background-color: white;
> 83 | ${mqStyle}
| ^
84 | `
85 |
86 | // export const ResponsiveLayout = styled.div`
at File.buildCodeFrameError (/Users/hotell/Projects/devel/labs/linaria/linaria-demo/node_modules/@babel/core/lib/transformation/file/file.js:261:12)
at NodePath.buildCodeFrameError (/Users/hotell/Projects/devel/labs/linaria/linaria-demo/node_modules/@babel/traverse/lib/path/index.js:157:21)
at /Users/hotell/Projects/devel/labs/linaria/linaria-demo/node_modules/linaria/lib/babel/extract.js:349:28
at Array.forEach (<anonymous>)
at PluginPass.TaggedTemplateExpression (/Users/hotell/Projects/devel/labs/linaria/linaria-demo/node_modules/linaria/lib/babel/extract.js:276:22)
at newFn (/Users/hotell/Projects/devel/labs/linaria/linaria-demo/node_modules/@babel/traverse/lib/visitors.js:193:21)
at NodePath._call (/Users/hotell/Projects/devel/labs/linaria/linaria-demo/node_modules/@babel/traverse/lib/path/context.js:53:20)
at NodePath.call (/Users/hotell/Projects/devel/labs/linaria/linaria-demo/node_modules/@babel/traverse/lib/path/context.js:40:17)
at NodePath.visit (/Users/hotell/Projects/devel/labs/linaria/linaria-demo/node_modules/@babel/traverse/lib/path/context.js:88:12)
at TraversalContext.visitQueue (/Users/hotell/Projects/devel/labs/linaria/linaria-demo/node_modules/@babel/traverse/lib/context.js:118:16)
error Command failed with exit code 1.
What is the expected behavior?
babel loader should work the same way as rollup/webpack plugin 👀 ( otherwise issues may/will occur during development - for instance, bundling will work but tests will fail because of this issue )
Please provide your exact Babel configuration and mention your Linaria, Node, Yarn/npm version and operating system.
module.exports = {
presets: [
[
'@babel/preset-env',
{
useBuiltIns: 'entry',
modules: false,
loose: true,
},
],
'@babel/preset-react',
'@babel/preset-typescript',
'linaria/babel',
],
plugins: [
'@babel/plugin-syntax-dynamic-import',
['@babel/plugin-proposal-class-properties', { loose: true }],
['@babel/plugin-proposal-object-rest-spread', { loose: true }],
],
};
{
"devDependencies": {
"@babel/cli": "7.2.3",
"@babel/core": "7.3.3",
"@babel/plugin-proposal-class-properties": "7.3.3",
"@babel/plugin-proposal-object-rest-spread": "7.3.2",
"@babel/plugin-syntax-dynamic-import": "7.2.0",
"@babel/preset-env": "7.3.1",
"@babel/preset-react": "7.0.0",
"@babel/preset-typescript": "7.3.3",
"linaria": "1.2.4",
"typescript": "3.3.3333"
}
}
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Comments: 16 (5 by maintainers)
Commits related to this issue
- fix: ensure that linaria plugin to run first fixes #333 — committed to callstack/linaria by satya164 5 years ago
- fix: ensure that the linaria plugin runs first (#343) fixes #333 — committed to callstack/linaria by satya164 5 years ago
- fix(shaker): fix undefined imports in some cases (#333, #761) — committed to callstack/linaria by Anber 3 years ago
- fix(shaker): fix undefined imports in some cases (#333, #761) (#787) — committed to callstack/linaria by Anber 3 years ago
I am still getting this error.
Hey @layershifter, look, there is another problem with imports. I wonder, how much more I missed? 😃
Thank you @M1r1k! The new problem was fixed in
3.0.0-beta.11.Thanks!