1

In one of the SCSS stylesheets in our project, we import two stylesheets from the WordPress Gutenberg components

@import '@gutenberg-components/button/style.scss';
@import '@gutenberg-components/date-time/style.scss';

(@gutenberg-components is an alias for ./node_modules/@wordpress/components/src).

These stylesheets use the Sass function darken for some colors. This is fine when we build our CSS using LibSass. But when we use Dart Sass instead, we get this error:

SassError: This function isn't allowed in plain CSS.
        ╷
    152 │   color: darken(#cacccd,10%);

The Sass docs say something ambiguous about darken.

Because darken() is usually not the best way to make a color darker, it’s not included directly in the new module system. However, if you have to preserve the existing behavior, darken($color, $amount) can be written color.adjust($color, $lightness: -$amount).

I understand this to mean Dart Sass won't transpile darken properly, and you need to replace it with color.adjust if you're using Dart Sass. Is that correct?

Another confusing thing is that Gutenberg already seems to be using Dart Sass. Yet they apparently don't get this error in their project, because they're still using darken. How do they make it work for them?

And Finally
  • 5,602
  • 14
  • 70
  • 110

0 Answers0