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

Most upvoted comments

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!