Material-components-web: [tab][tab-bar] undefined function variables.prop-value

[komali2]

Bug report

When I try to use either just the tab module, or the whole tab-bar module (including scroller and indicator), dart-sass throws the following error:

Error in plugin "sass"
Message:
    node_modules/@material/tab/_variables.scss
Error: Undefined function.
   ╷
31 │ $text-label-color-default: rgba(variables.prop-value(on-surface), $text-label-opacity) !default;
   │                                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  node_modules/@material/tab/_variables.scss 31:33       @use
  node_modules/@material/tab/_mixins.scss 30:1           @use
  node_modules/@material/tab-scroller/_mixins.scss 24:1  @use
  node_modules/@material/tab-bar/_mixins.scss 27:1       @use
  node_modules/@material/tab-bar/mdc-tab-bar.scss 24:1   @use
  frontend/src/scss/main.scss 19:1                       root stylesheet

Steps to reproduce

1. Install tab or tab-bar according to instructions
2. Include mdc-tab in your SCSS
3. Run the dart-sass compiler on that SCSS file.
4. See error

Actual behavior

I get an error when I compile.

Expected behavior

I don't get an error when I compile.

Screenshots

Your Environment:

Here are our dependencies and version:

  "devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/preset-env": "^7.8.4",
    "@material/button": "^4.0.0",
    "@material/layout-grid": "^4.0.0",
    "@material/menu": "^4.0.0",
    "@material/select": "^4.0.0",
    "@material/tab": "^5.0.0",
    "@material/tab-bar": "^5.0.0",
    "del": "^5.1.0",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^7.0.1",
    "gulp-babel": "^8.0.0",
    "gulp-cli": "^2.2.0",
    "gulp-concat": "^2.6.1",
    "gulp-dart-sass": "^0.9.1",
    "gulp-livereload": "^4.0.2",
    "gulp-rename": "^2.0.0",
    "gulp-rev": "^9.0.0",
    "gulp-sass": "^4.0.2",
    "gulp-sourcemaps": "^2.6.5",
    "gulp-uglify-es": "^2.0.0",
    "gulp-uglifycss": "^1.1.0",
    "gulp-webpack": "^1.5.0",
    "install": "^0.13.0",
    "normalize.css": "^8.0.1",
    "npm": "^6.14.0",
    "sass": "^1.26.0",
    "sass-loader": "^8.0.2",
    "webpack-cli": "^3.3.11",
    "webpack": "^4.41.5"

  },

I import the component like so:

@use "@material/tab-bar/mdc-tab-bar";
@use "@material/tab-scroller/mdc-tab-scroller";
@use "@material/tab-indicator/mdc-tab-indicator";
@use "@material/tab/mdc-tab";

| Software | Version(s) |
| ---------------- | ---------- |
| Operating System | Ubuntu 18.04

[komali2]

If I comment out mdc-tab-bar and mdc-tab-scroller imports, the error changes to

Error in plugin "sass"
Message:
    node_modules/@material/tab-indicator/_mixins.scss
Error: Undefined function.
   ╷
28 │ @mixin core-styles($query: functions.all()) {
   │                            ^^^^^^^^^^^^^^^
   ╵
  node_modules/@material/tab-indicator/_mixins.scss 28:28           core-styles()
  node_modules/@material/tab-indicator/mdc-tab-indicator.scss 25:1  @use
  frontend/src/scss/main.scss 21:1                                  root stylesheet

[komali2]

If I change from use to import, I get the following error:

Error in plugin "sass"
Message:
    node_modules/@material/tab/mdc-tab.import.scss
Error: Two forwarded modules both define a variable named $mdc-feature-mdc-feature-all-features.
  ╷
1 │ @forward "@material/feature-targeting/variables" as mdc-feature-*;
  │ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ original @forward
2 │ @forward "@material/feature-targeting/mixins" as mdc-feature-*;
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ new @forward
  ╵
  node_modules/@material/tab/mdc-tab.import.scss 2:1  @import
  frontend/src/scss/main.scss 27:9                    root stylesheet

[komali2]

You can fix this error by going into node_modules/@material/tab/_variables.scss and changing references to variables.prop-value() to mdc-theme-prop-value(). Or, you can go into node_modules/@material/theme/_variables.scss, and change the name of the function there.

[komali2]

This function name mis-match is propagated all over the place. It seems a ton of functions are expected to be one name in one module and a different one elsewhere. I have no idea how to fix all of them nor how this could occur.

[asyncLiz]

Can you upload a repository with a build step showing the error? I tried running sass on a file importing the dependencies as you described and it built just fine.

Additionally, try ensuring that all of your @material/* dependencies are on the same version. I see a mix of v4 and v5 in your package list.

[komali2]

Version mis-match is correct. Thank you.

Changing all versions to 4.0 fixed this for me.