[Colors and theming] - Exception: "$color of red($color) must be a color" for certain colors

[Kaishiyoku]

When I'm trying to adjust the color theme sometimes I get an exception on SCSS compile-time:

ERROR in ./resources/sass/app.scss
Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: argument `$color` of `red($color)` must be a color
        on line 100 of node_modules/@react-md/theme/dist/_color-a11y.scss, in function `red`
        from line 100 of node_modules/@react-md/theme/dist/_color-a11y.scss, in function `rmd-theme-luminance`
        from line 118 of node_modules/@react-md/theme/dist/_color-a11y.scss, in function `rmd-theme-contrast`
        from line 138 of node_modules/@react-md/theme/dist/_color-a11y.scss, in function `rmd-theme-tone`
        from line 84 of node_modules/@react-md/chip/dist/_variables.scss, in function `if`
        from line 83 of node_modules/@react-md/chip/dist/_variables.scss
        from line 6 of node_modules/@react-md/chip/dist/_functions.scss
        from line 12 of node_modules/@react-md/chip/dist/_mixins.scss
        from line 7 of node_modules/react-md/dist/_react-md.scss
        from line 6 of XXX\resources\sass\app.scss
>> ed: nth($rmd-theme-linear-channel-values, red($color) + 1);

   ------------------------------------------^

    at XXX\node_modules\webpack\lib\NormalModule.js:316:20
    at XXX\node_modules\loader-runner\lib\LoaderRunner.js:367:11
    at XXX\node_modules\loader-runner\lib\LoaderRunner.js:233:18
    at context.callback (XXX\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at Object.callback (XXX\node_modules\sass-loader\dist\index.js:73:7)
    at Object.done [as callback] (XXX\node_modules\neo-async\async.js:8069:18)
    at options.error (XXX\node_modules\node-sass\lib\index.js:294:32)
 @ ./resources/sass/app.scss

This happens with some colors. deep-purple works for example

[mlaursen]

This error occurs when you use a css color name string provided by the css color value spec and not one of the $rmd- prefixed color values? Is that correct?

If it's one of the color value strings, I think this is an issue with sass itself but I could use that lookup table in the link above to get a hex value.

[Kaishiyoku]

I'm using the $rmd- color varialbes

[mlaursen]

Ooh, interesting. Thanks! That'll help me debug this a bit more and hopefully have a fix out this week.

As a final check, what version of node and node-sass are you using? Found it. Release 1.2.1 should be coming out shortly.

[mlaursen]

I believe 353de23 should have fixed this issue and is released in v2.1.1. The simple test script I wrote to compile all $rmd-* colors worked without throwing errors with this fix, but just let me know if this error still occurs and I'll reopen this issue.

Simple test script (mostly so I can reference this again)

const { renderSync } = require('node-sass');
const scssVariables = require('@react-md/theme/dist/scssVariables').default;

const colors = Object.keys(scssVariables).filter(
  (name) => !name.startsWith('rmd-theme')
);

const errors = [];
colors.forEach((color) => {
  const data = `@import '@react-md/theme/dist/scss/color-palette';

$rmd-theme-primary: $${color};

@import 'react-md/dist/scss/react-md';
@include react-md-utils;
`;

  try {
    // console.log(`Trying to compile '$${color}'...`);
    // console.log(data);
    // console.log('');
    renderSync({
      data,
      includePaths: ['node_modules'],
    });
    // console.log('Compiled successfully!');
  } catch (error) {
    errors.push({ color, error });
  }
});

console.log(JSON.stringify(errors, null, 2));

Even I am facing the same issue, can someone help me figure out the solution?

[mlaursen]

I can try to help out if you provide the following information:

• version of react-md and sass
• a stack trace of the error
• what $rmd-* overrides you are using
• what build tool (create-react-app, nextjs, gatsby, vite, etc) - optional