Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

linaria/babel throws error on nested object interpolations within css

See original GitHub issue

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"
  }
}