[V4] Warning in build with :before

[joffreypersia]

Hi,

I have warnings that occures on a css file compilation.

Here is the code that causes problem :

.ql-editor.ql-blank:before {
    color: var(--color-shade-600);
    margin-top: calc(var(--spacing) * 5);
    font-weight: 400;    /* normal */
    font-style: normal;  /* override if you had "not-italic" */
    font-size: var(--text-base);

    @variant dark {
      color: var(--color-shade-400);
    }
}

And here is the error :

▲ [WARNING] Unexpected ")" [css-syntax-error]

    <stdin>:2:192111:
      2 │ ...ql-editor.ql-blank:before:where(){color:var(--color-shade-400)}[...
        ╵                                    ^

What am I missing?

P.S. I find the new syntax using @variant ( instead of simply using @apply dark:text-shade-400 ) rather annoying, but if it’s the recommended approach according to @adamwathan, I’ll try to stick with the new format.

[wongjn]

Seems like this could be #16582 (comment)

[joffreypersia]

Thank you @wongjn but I don't understand how I can remove the warning.

[wongjn]

You'd need to do something like:

.ql-editor.ql-blank {
  &::before {
    color: var(--color-shade-600);
    margin-top: calc(var(--spacing) * 5);
    font-weight: 400;    /* normal */
    font-style: normal;  /* override if you had "not-italic" */
    font-size: var(--text-base);
  }

  @variant dark {
    &::before {
      color: var(--color-shade-400);
    }
  }
}

[joffreypersia]

Thank you! I initially thought it wouldn’t work because the file is app.css instead of app.scss, but it compiled correctly.