object interpolations stop working for some case

[Mavrin]

Environment

• Linaria version: 3.0.0-beta.21
• Bundler (+ version): webpack 5.73.0
• Node.js version: v16.15.0
• OS: MacOS

Description

I have next code:

const defaultStyle = css`
  color: red;
`;

const greenContentStyles = css`
  ${{
    [`&.${defaultStyle} .green`]: {
      display: "inline-block",
      border: "1px solid green",
    },
  }}
`;

I get error

ERROR in ./src/index.ts (../node_modules/css-loader/dist/cjs.js!../node_modules/@linaria/webpack5-loader/lib/outputCssLoader.js?cacheProvider=!./src/index.ts)
Module build failed (from ../node_modules/css-loader/dist/cjs.js):
CssSyntaxError

(2:11) /linaria-issue/app/src/index.ts Unknown word

  1 | .d2tf5um{color:red;}
> 2 | .g1gk6i3v{d2tf5um;}
    |           ^
  3 | .g2cbfky.s15xamdy .grey{display:inline-block;border:1px solid grey;}
  4 | 

It works with v3.0.0-beta.15
and I noticed it stop worked also

const test = css`padding-bottom: ${0}px`;

Reproducible Demo

repo for reproduce issue
https://github.com/Mavrin/linaria-issue

yarn install

cd app

yarn start

[Anber]

Thank you @Mavrin for your report!
Both bugs were fixed in beta.22