linaria/babel throws error on nested object interpolations within css

[Hotell]

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

[satya164]

Can you share the demo with me?

[Hotell]

https://codesandbox.io/s/rr6z3pop7p

check Readme pls

[satya164]

Thanks!

[gujral1997]

I am still getting this error.

[afzalsayed96]

Hi, sorry to issue bump this. Strangely I'm facing this same issue in v2.0.0.

SyntaxError: The expression evaluated to 'undefined', which is probably a mistake. If you want it to be inserted into CSS, explicitly cast or transform the value to a string, e.g. - 'String(breakpoints.MOBILE)'.
  50 |   }
  51 |  background-color: blue;
> 52 |   @media ${breakpoints.MOBILE} {
     |            ^^^^^^^^^^^^^^^^^^
  54 |     background-color: red;
  55 |   }
    at Array.forEach (<anonymous>)
    at Array.forEach (<anonymous>)

Has anyone got any pointers on how to work around this? Thanks!