Using css func within interpolation caused wrong output

[yurkimus]

Environment

• Linaria version: 3.0.0-beta.13
• Bundler (+ version): webpack 5.62.1
• Node.js version: 16.13.0
• OS: macOS

Description

When I try to use css function within interpolation there is wrong output css which can't load by css-loader because syntax destroyed.

I have styles for my button types:

const style = {
  base: css`
    font-weight: normal;
  `,
  primary: css`
    font-weight: bold;
    color: #fff;
    background-color: #2b2b2b;
  `,
}

The I use it within interpolation:

const Component = styled.button<Partial<StyledProps>>`
  padding: 8px 16px;

  width: ${({ wide = false }) => (wide ? '100%' : 'auto')};
  min-width: ${({ width = 0 }) => (width ? width : 0)};

  font-family: inherit;
  font-size: 18px;
  line-height: 40px;

  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;

  border: none;
  border-radius: ${({ rounded = 0 }) => (rounded ? 40 : 0)};
  cursor: pointer;

  ${({ type = Type.Base }) => {
    switch (type) {
      case Type.Primary:
        return style.primary
      default:
        return style.base
    }
  }}
`

Output was:

cache/linaria/...path to the component...

.buj61ew {
    font-weight: normal;
  }

.pchllas {
    font-weight: bold;
    color: #fff;
    background-color: #2b2b2b;
  }

.chywuvm {
  padding: 8px 16px;

  width: var(--chywuvm-0);
  min-width: var(--chywuvm-1);

  font-family: inherit;
  font-size: 18px;
  line-height: 40px;

  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;

  border: none;
  border-radius: var(--chywuvm-2);
  cursor: pointer;

  var(--chywuvm-3)
}

There is wrong syntax at the bottom of the compiled css-file, after that webpack throws Module build failed Error6 then throws description in the console (Unknown word):

My configs:

babel:

{
  "presets": [
    [
      "@babel/preset-typescript",
      {
        "isTSX": true,
        "allExtensions": true
      }
    ],
    [
      "@babel/preset-react",
      {
        "runtime": "automatic"
      }
    ],
    [
      "@linaria/babel-preset"
    ]
  ]
}

webpack:

module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        use: [
          { loader: 'babel-loader' },
          {
            loader: '@linaria/webpack-loader',
            options: {
              cacheDirectory: resolve('src/cache/linaria'),
              extension: '.linaria.css',
              preprocessor: 'none',
            },
          },
        ],
        exclude: /node_modules/,
      },

      {
        test: /\.css$/,
        use: [{ loader: Css.loader }, { loader: 'css-loader' }],
      },

      {
        test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/,
        type: 'asset',
      },
    ],
  },

Reproducible Demo

[Anber]

Hi @AngryBotIY

It's not an error, it's how Linaria handles dynamic values without runtime: interpolated values are converted to CSS variables, but CSS variables can be used only for values, so that you can't interpolate the whole fragment of CSS.

You can use data-attributes and nested rules or [cx](https://github.com/callstack/linaria/blob/master/docs/API.md#cxclassnames-arraystring--false--void--null--0--string) and compositions of classes.

#244 we have an issue about fragments, but there is still no decision.