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 writtencolor.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?