2.0-alpha: interpolating a classname from another style file leads to dots doubled

[Guria]

trafficstars

Environment

• Linaria version: 2.0.0-alpha.5
• Bundler (+ version): webpack: [email protected] + [email protected]
• Node.js version: 14.1.0
• OS: Ubuntu 20.04

Description

Given

import { css } from 'linaria';
import { cnFiltersRow } from '../FiltersBlock/styles';

export const cnHistoryFilters = css`
  margin-bottom: 10px;

  .${cnFiltersRow} {
    width: 208px;
  }
`;

With 1.3 was working as expected. With 2.0-alpha generates selectors with extra dots, like .cnHistoryFilters_c1i2jo62>..cnFiltersRow_c1mcdenc

If it is expected behavior for 2.0 then it should be described as Breaking Changes in Migration Guide

[Guria]

I believe that it is a bug of 2.0 alpha, because interpolation for a classname that defined in the same file still working fine.

[Guria]

@Anber could you tell if above is intended behaviour or bug?

[Anber]

@Guria cnFiltersRow here is css class name or styled component? If it's css, it's definitely a bug, but I don't have any idea how that regression passed through our tests.

[Guria]

@Anber yes, that is css template tag defined in another file

[Guria]

@TMaszko @jayu do we have any eta here? any help still needed from my side?

[jayu]

@Guria I'm super busy in recent times and didn't have time to try to reproduce this bug. IF this is not a big deal for you, you can provide repo with reproduction, it will help much since many of the linaria issues are related to some specific project setup. I do not promise on tackling that in upcoming days, so no eta for now.

[jayu]

@Guria I tried to reproduce the issue but I was unsuccessful. I think it may be caused by a behavior related to @babel/plugin-transform-template-literals. PR #609 tried to solve it. I suppose that your css tag is treated as a styled, that's why the dot is appended to the class name If my guess is correct you may have some specific setup in your project that interferes with the linaria setup. If you provide a repository with full babel set up as a reproduction I will be able to help more. It is worth the effort cause there might be more users with a similar problem.

[ksesong]

I have encountered the same issue, with linaria 3.0.0-beta.0, and the rollup bundler. The double dot appears when I use an imported style, using css tags.

I managed to replicate the behaviour in this repository. I have used a boilerplate to make a quick example, so there are many extraneous files that you should ignore, but the important ones are:

• src/lib/components/Button/Button.tsx: contains the test style, with interpolation from an inner style and the exported style as follows:

const innerStyle = css`
  color: blue;
`;

const testStyle = css`
  background: red;

  .${innerStyle} {
    color: red;
  }

  .${exportedStyle} {
    background: blue;
  }
`;

• src/lib/components/Button/Export.tsx: contains the exported style

After building (npm run build), we can inspect the generated style from file src/dist/index.js, we expect both interpolated classes to have one dot, but we can see that the exportedStyle has been interpolated with two dots ..exportedStyle_ea768di.

[layershifter]

@ksesong I have tested your repro with latest versions of v3 and it worked fine.

---

I also have checked with v5 and Vite, it does not repro: https://stackblitz.com/edit/vitejs-vite-78wwvs The output is properly generated:

.i1cb9caz {
  color: #00f;
}
.t1o067xl {
  background: red;
}
.t1o067xl .i1cb9caz {
  color: red;
}
.t1o067xl .eyxbo1f {
  background: blue;
}

Please open a new issue and provide reproduction if it still happens. Thanks