Material-components-web: [Radio] Undefined mixin

[lucka-me]

Bug report

When upgrade to 8.0.0, @include radio.core-styles causes an undefined mixin error.

Steps to reproduce

Follow the README.

Here is the code;

@use '@material/form-field';
@use '@material/radio';

@include form-field.core-styles;
@include radio.core-styles;

Actual behavior

    ERROR in ./src/ui/dialog/details/style.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/ui/dialog/details/style.scss)
    Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
    SassError: Undefined mixin.
      ╷
    7 │ @include radio.core-styles;
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^
      ╵
      src/ui/dialog/details/style.scss 7:1  root stylesheet

Your Environment:

| Software | Version(s) |
| ---------------- | ---------- |
| MDC Web | 8.0.0
| Browser | Firefox
| Operating System | Ubuntu 16.04 & 18.04

Possible solution

Could be resolved by updating to:

@use '@material/form-field';
@use '@material/radio/mdc-radio';

@include form-field.core-styles;
// @include radio.core-styles;

I'm not familiar with Sass and not sure if it's the correct way to use it.

[chaficnajjar]

@lucka-me I asked the same question on Discord and @asyncLiz suggested we do this:

@use '@material/radio/styles';

instead of this:

@use '@material/radio';

@include radio.core-styles;

[lucka-me]

I read your discussions and it works, thank you. And I'm wondering, will other components follow this change in the future?

[chaficnajjar]

@lucka-me yes, @asyncLiz said on Discord that this is the new syntax they're going to go with from now on. I noticed that other packages like mdc-select and mdc-slider also have a styles.scss file, but not all of them.

By the way, writing this:

@use '@material/radio/styles';
@use '@material/slider/styles';

will throw the error Error: There's already a module with namespace "styles". There are a couple of workarounds listed here: https://github.com/sass/sass/issues/2778.

[lucka-me]

@chaficnajjar That helps a lot, thank you!

And still another question, I noticed there is @forward './styles' in mdc-radio.scss, could we prevent that error with @use '@material/radio/mdc-radio'? And I also noticed there is not such a mdc-slider.scss in mdc-slider.

[chaficnajjar]

@lucka-me It seems like there's currently more than one way to import the CSS styles of components and that not every component supports each approach. I suggest not overthinking it for now and to just use any one of the approaches that works until the MDC Web team has the chance to see this GitHub issue and update the docs with the approach they recommend.

[lucka-me]

Okay, then I will keep this issue open until the team update the README or code.