Material-components-web: [mdc-card] SASS mixin names potentially wrong in readme

[komali2]

Bug report

The mdc-card readme indicates that there should be a sass mixin called filled-color($color). There's no text indicating anything about a namespace. So, I try

 @use '@material/card/mdc-card';
div {
       @include fill-color(#DADCE0);
}

I get the error

SassError: Undefined mixin.
pointing at the fill-color. But, sass mixin names are all over the place for MDC, so I know to try the following, just in case

mdc-card-fill-color

card-fill-color

Neither work.

I'm looking through various files in the mdc-card node_module folder, but I don't see anything indicating that the mixin should be anything other than just fill-color. I have other mixins working on this repo, so it's not a general issue with SASS imports.

Note, if i do

```
@import '@material/card/mdc-card';

div {
@include mdc-card-fill-color(#DADCE0);
}
````

It works.

Your Environment:

| Software | Version(s) |
| ---------------- | ---------- |
| MDC Web | "@material/card": "^5.1.0",

| Browser | chrome
| Operating System | Ubuntu 18.04

"sass": "^1.26.2",
"sass-loader": "^8.0.2",

[asyncLiz]

Refer to the Sass module system for information on how Sass modules work. The @use syntax defines the prefix. If no prefix is explicitly provided, it will default to the file name of what you're importing.

@use "@material/card/mdc-card"; // generates classes for .mdc-card
@use "@material/card"; // does not generate classes, is used to access mixins and variables

div {
  // The prefix for @use "@material/card" is `card`
  @include card.fill-color(#DADCE0);
}

Let me know if that helps!

[komali2]

Thanks for the help, I had been reading the SASS documentation up and down and just wasn't grasping that.

[mbestavros]

I'd like to chime in and echo @komali2's concerns... the current SASS mixins documentation is deeply unhelpful across the board. Consider the Buttons page as an example -- as a relative beginner, I had no idea that this:

@use "@material/button/mdc-button";

is not how I was supposed to import mdc-button to use the Sass mixins. This is also the only example provided in the documentation, and the SASS mixins section doesn't mention anything about importing the component any differently than specified at the top of the page.

I found the solution to my problem by looking at this bug. That's not good developer UX.

/rant

[komali2]

I actually still don't understand.

I'm trying to use the mixin mentioned for mdc dialog.

https://github.com/material-components/material-components-web/tree/master/packages/mdc-dialog#sass-mixins

It says there's a mixin called title-ink-color($color, $opacity).

So this time I followed the pattern that we did together for button.

 @use "@material/dialog/mdc-dialog";
 @use "@material/dialog";

I get the following error:

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
    ╷
122 │ @use "@material/dialog";

Uh oh. So I try all the other tricks:

 @use "@material/dialog/mdc-dialog";
     @include title-ink-color(vars.$theme-primary, 1);

Nope. Error: Undefined Mixin.

@include dialog-title-ink-color(vars.$theme-primary, 1);

Nope. undefined mixin.

     @include dialog.title-ink-color(vars.$theme-primary, 1);

Nope. SassError: There is no module with the namespace "dialog".

     @include mdc-dialog.title-ink-color(vars.$theme-primary, 1);

Nope. Undefined mixin.

     @include mdc-dialog-title-ink-color(vars.$theme-primary, 1);

Nope. Undefined mixin.

I have read the the link about the module system, https://sass-lang.com/blog/the-module-system-is-launched, about 25 times top to bottom, and have handwritten notes, because in the past it was safe to assume I was just being stupid. I may still be being stupid, but if so, I am so stupid that simply linking to that document isn't going to learn me how to do this. If someone is kind enough to definitively teach me how to do this for all mdc modules, I will happily write up the results in clear enough terms for cromagnums like me and issue a pull request so this never happens again.

[komali2]

I'll create a new issue, since this is closed

[asyncLiz]

@komali2 this is the correct way we are currently encouraging users to apply styles and use mixins.

@use "@material/dialog";

@include dialog.core-styles; // apply default styles

.my-dialog {
  // reference namespace from "@material/dialog". Defaults to "dialog"
  @include dialog.title-ink-color(blue, 1);
}