Linaria: [1.4.0-beta.0/1/2] - Build Error - Using generated classnames as selectors fails

[hemlok]

Environment

"linaria": "1.4.0-beta.2",

Description

The speed improvements on the 1.4.0 beta are incredible and will be a huge win for our team! Unfortunately, using generated classnames as selectors in any of the 1.4.0-betas (0, 1, 2) fails with:

Using the "css" tag in runtime is not supported. Make sure you have set up the Babel plugin correctly.

This works fine in our project on Linaria 1.3.1, and even today's 1.3.2.

Reproducible Demo

import { css } from "linaria";

export const text = css``;

export const square = css`
  background: red;

  .${text} {
    color: red;
  }
`;

This is setup as a minimal reproduction with webpack here: https://github.com/hemlok/linaria-reproduction

[Anber]

Hi @hemlok
Thank you for your report and the reproducible demo! As a workaround I can recommend using shaker evaluation strategy which is the new (still undocumented) feature of 1.4 branch:

const shaker = require('linaria/lib/babel/evaluators/shaker').default;

module.exports = {
  evaluate: true,
  displayName: true,
  sourceMap: true,
  rules: [
    {
      action: shaker,
    },
    {
      test: /\/node_modules\//,
      action: 'ignore',
    },
  ],
};

It's still experimental feature so I'll be happy to get feedback about it.

A bit more information about the shaker you can found here https://github.com/callstack/linaria/pull/353

[Anber]

Fixed in 1.4.0-beta.3

[hemlok]

Thanks so much for the quick progress on this @Anber! Can confirm the latest beta works perfectly in our projects.

[fernandojbf]

I continue to have the same problem with 1.4.0-beta.3.

My problem was not in the class selector but adding dynamic styles

The CSS cannot contain JavaScript expressions when using the 'css' tag. To evaluate the expressions at build time, pass 'evaluate: true' to the babel plugin.

${({ withMargin }) => ``}; 

[Anber]

Hi @fernandojbf!
Are you trying to use ${({ withMargin }) => ''} in css tag?

[fernandojbf]

Forget my comment. I was doing it wrong.