Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
Kaishiyoku opened this issue Jul 21, 2020 · 6 comments

Comments

@Kaishiyoku
Copy link
Contributor

Kaishiyoku commented Jul 21, 2020

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

@Kaishiyoku Kaishiyoku added the bug label Jul 21, 2020
@Kaishiyoku Kaishiyoku changed the title [Colors and theming] - $color of red($color) must be a color for certain colors [Colors and theming] - Exception: "$color of red($color) must be a color" for certain colors Jul 21, 2020
@mlaursen
Copy link
Owner

mlaursen commented Jul 21, 2020

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
Copy link
Contributor Author

Kaishiyoku commented Jul 21, 2020

I'm using the $rmd- color varialbes

@mlaursen
Copy link
Owner

mlaursen commented Jul 21, 2020

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
Copy link
Owner

mlaursen commented Jul 21, 2020

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));

@viharrevankar
Copy link

viharrevankar commented Jul 21, 2022

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

@mlaursen
Copy link
Owner

mlaursen commented Jul 21, 2022

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants