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!

[chrisabrams]

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!

Nope, get the same error. Makes the project completely unusable for practical purposes.

[Anber]

@chrisabrams the original repo works well now. Can you provide the broken one?

[aviral-clarifai]

@Anber I too am getting this error and can't have any way around it. Funny thing is it just started happening by itself; it was working as expected earlier.

[Anber]

Hi @aviral-clarifai
Could you please try to make a repo with this error?

[M1r1k]

Hi @Anber

I have been strugling with the same issue.
Here is repo where you can see this error by running build or dev - https://github.com/M1r1k/debug-linaria-interpolatiton-error

It is a copy of this repo https://github.com/vercel/next.js/tree/canary/examples/with-linaria but with next-linaria pacakge included (plus this fix to support global styles - #724 (comment))
Thanks

[Anber]

@M1r1k thank you so much! Now I see that problem appears when a default export is used.

[Anber]

Released in 3.0.0-beta.7!

[M1r1k]

Hi @Anber
It's me again with follow up problems :)

https://github.com/M1r1k/debug-linaria-interpolatiton-error same repo but with a small tweak - mixed import here
https://github.com/M1r1k/debug-linaria-interpolatiton-error/blob/master/theme/index.js#L1 that for some reason breaks variable resolving the same way as before.

If you remove named import and only leave default everything works fine

[Anber]

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.

[M1r1k]

Hi @Anber,

I think that's the last one :D
https://github.com/M1r1k/debug-linaria-interpolatiton-error latest version

I think the problem is export of external import :)
https://github.com/M1r1k/debug-linaria-interpolatiton-error/blob/master/components/Layout/index.js#L1

[Anber]

@M1r1k sorry, I've missed your message.
It looks like nextjs (?) inserts imports of React in the generated code. Is it possible?