Compound background-image JIT not working

[DanielBailey-web]

What version of Tailwind CSS are you using?

tailwindcss@3.0.24

Operating System:
      Platform: linux
      Arch: x64
      Version: #44-Ubuntu SMP Thu Mar 24 15:35:05 UTC 2022
    Binaries:
      Node: 14.18.1
      npm: 8.6.0
      Yarn: 1.22.18
      pnpm: N/A
    Relevant packages:
      next: 12.1.5
      react: 18.0.0
      react-dom: 18.0.0

What browser are you using?

Firefox

Doing compound bg-[] for background images is not working.
e.g.

bg-[url('/media/left-side-bar.png'),linear-gradient(to_right,_#e2d9d4,_#f3eeeb)]

Either of those work by themselves works, but when it is joined it is not working.

When I hover over it the CSS class it says it will create is correct.

.bg-\[url\(\'\/media\/left-side-bar\.png\'\)\2c _linear-gradient\(to_right\2c _\#e2d9d4\2c _\#f3eeeb\)\] {
    background-image: url('/media/left-side-bar.png'), linear-gradient(to right, #e2d9d4, #f3eeeb);
}

https://play.tailwindcss.com/5sCBtDy3RZ

[aggreggator]

Maybe there is a bug using single quotes. (the selector is just not valid)
Here is a workaround without quotes and also omitting the underscore(space) before linear-gradient:
https://play.tailwindcss.com/hFVoqe2TPr

[thecrypticace]

Hey! We've rewritten our default class candidate extractor and it should allow multiple backgrounds in arbitrary values even with mixed/missing quotes. Would you mind giving the insiders build a test and make sure that you're seeing what you expect? npm install tailwindcss@insiders — thanks!

[DanielBailey-web]

@thecrypticace I am getting an error in globals.css when importing tailwind base using @insiders

@tailwind base; /* <- error */
@tailwind components;
@tailwind utilities;

* {
  --primary-color: #00bcd4;
}

Error:

'base' is not a valid value. Did you mean 'screens'?(invalidTailwindDirective)

The error is gone if I switch back to tailwindcss@latest

[thecrypticace]

Is the error coming from the Intellisense plugin? Does it build properly? I'm testing the insiders build and I can see that it builds properly but did apparently cause the intellisense plugin to have an issue. Will look into that. Thanks!

[DanielBailey-web]

@thecrypticace I am not getting it to work. Just for reference, I am using:

yarn create next-app --example with-tailwindcss with-tailwindcss-app;
yarn add tailwindcss@insiders;
yarn dev;

bg-[var(--primary-color)]