search

hperrin / svelte-material-ui

Svelte Material UI Components
https://sveltematerialui.com/
Apache License 2.0
3.33k stars 285 forks source link

Smui Theme Prepare SASS compile not working because of undefined mixin in Sveltkit apps #347

Open KevinVandy opened 3 years ago

KevinVandy commented 3 years ago

Describe the bug Cannot run smui-theme or prepare commands to compile CSS. Get a Undefined mixin error of @include theme.validate-keys($light-theme, $theme);

To Reproduce

  1. Create SvelteKit Skeleton project with package.json dev dependencies
  "scripts": {
    "dev": "svelte-kit dev",
    "build": "svelte-kit build",
    "preview": "svelte-kit preview",
    "check": "svelte-check --tsconfig ./tsconfig.json",
    "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
    "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
    "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. .",
    "prepare": "npm run smui-theme",
    "smui-theme": "smui-theme compile static/smui.css -i src/theme"
  },
  "devDependencies": {
    "@sveltejs/kit": "next",
    "@typescript-eslint/eslint-plugin": "^4.31.1",
    "@typescript-eslint/parser": "^4.31.1",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-svelte3": "^3.2.1",
    "prettier": "^2.4.1",
    "prettier-plugin-svelte": "^2.4.0",
    "svelte": "^3.42.6",
    "svelte-check": "^2.2.6",
    "svelte-preprocess": "^4.9.4",
    "tslib": "^2.3.1",
    "typescript": "^4.4.3",
    "@material/typography": "^13.0.0",
    "@smui/button": "^5.0.0-beta.7",
    "@smui/card": "^5.0.0-beta.7",
    "@smui/checkbox": "^5.0.0-beta.7",
    "@smui/circular-progress": "^5.0.0-beta.7",
    "@smui/common": "^5.0.0-beta.7",
    "@smui/data-table": "^5.0.0-beta.7",
    "@smui/dialog": "^5.0.0-beta.7",
    "@smui/fab": "^5.0.0-beta.7",
    "@smui/form-field": "^5.0.0-beta.7",
    "@smui/select": "^5.0.0-beta.7",
    "@smui/slider": "^5.0.0-beta.7",
    "@smui/snackbar": "^5.0.0-beta.7",
    "@smui/textfield": "^5.0.0-beta.7",
    "@smui/tooltip": "^5.0.0-beta.7",
    "smui-theme": "^5.0.0-beta.7"
  }
  1. Add smui-theme with npx smui-theme template src/theme

The resulting _smui-theme.scss is 

@use 'sass:color';

@use '@material/theme/color-palette';

// Svelte Colors!
@use '@material/theme/index' as theme with (
  $primary: #ff3e00,
  $secondary: #676778,
  $surface: #fff,
  $background: #fff,
  $error: color-palette.$red-900,
);

html,
body {
  background-color: theme.$surface;
  color: theme.$on-surface;
}

a {
  color: #40b3ff;
}
a:visited {
  color: color.scale(#40b3ff, $lightness: -35%);
}
  1. Running npm run smui-theme results in an error and no CSS compilation.
Error: Undefined mixin.
   ╷
53 │   @include theme.validate-keys($light-theme, $theme);
   │   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  node_modules\@material\button\_button-text-theme.scss 53:3  theme()
  node_modules\@material\button\_button-text.scss 41:5        theme-styles()
  node_modules\@material\button\_button.scss 48:3             theme-styles()
  node_modules\@material\button\_button.scss 44:3             styles()
  node_modules\@material\button\_button.scss 84:3             core-styles()
  node_modules\@material\button\styles.scss 25:1              @use
  node_modules\@smui\button\_style.scss 1:1                   @use
  node_modules\smui-theme\_style.scss 3:1                     @use
  node_modules\smui-theme\_index.scss 2:1                     root stylesheet
    at Object._newRenderError (C:\Users\kevin\Desktop\my-app\node_modules\sass\sass.dart.js:2203:19)
    at Object._wrapException (C:\Users\kevin\Desktop\my-app\node_modules\sass\sass.dart.js:2023:16)
    at StaticClosure._renderSync (C:\Users\kevin\Desktop\my-app\node_modules\sass\sass.dart.js:2000:18)
    at Object.Primitives_applyFunction (C:\Users\kevin\Desktop\my-app\node_modules\sass\sass.dart.js:6505:30)
    at Object.Function_apply (C:\Users\kevin\Desktop\my-app\node_modules\sass\sass.dart.js:13832:16)
    at _callDartFunctionFast (C:\Users\kevin\Desktop\my-app\node_modules\sass\sass.dart.js:15538:16)
    at Object.renderSync (C:\Users\kevin\Desktop\my-app\node_modules\sass\sass.dart.js:15516:18)
    at Object.handler (C:\Users\kevin\Desktop\my-app\node_modules\smui-theme\bin\index.js:50:27)
    at Object.runCommand (C:\Users\kevin\Desktop\my-app\node_modules\yargs\build\index.cjs:446:48)
    at Object.parseArgs [as _parseArgs] (C:\Users\kevin\Desktop\my-app\node_modules\yargs\build\index.cjs:2697:57) {
  formatted: 'Error: Undefined mixin.\n' +
    '   ╷\n' +
    '53 │   @include theme.validate-keys($light-theme, $theme);\n' +
    '   │   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n' +
    '   ╵\n' +
    '  node_modules\\@material\\button\\_button-text-theme.scss 53:3  theme()\n' +
    '  node_modules\\@material\\button\\_button-text.scss 41:5        theme-styles()\n' +
    '  node_modules\\@material\\button\\_button.scss 48:3             theme-styles()\n' +
    '  node_modules\\@material\\button\\_button.scss 44:3             styles()\n' +
    '  node_modules\\@material\\button\\_button.scss 84:3             core-styles()\n' +
    '  node_modules\\@material\\button\\styles.scss 25:1              @use\n' +
    '  node_modules\\@smui\\button\\_style.scss 1:1                   @use\n' +
    '  node_modules\\smui-theme\\_style.scss 3:1                     @use\n' +
    '  node_modules\\smui-theme\\_index.scss 2:1                     root stylesheet',
  line: 53,
  column: 3,
  file: 'C:\\Users\\kevin\\Desktop\\my-app\\node_modules\\@material\\button\\_button-text-theme.scss',
  status: 1
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Expected behavior Smui-theme prepare should work after following the docs.

Desktop (please complete the following information):

Additional context This was working last week, I noticed that it stopped working for multiple of my projects this week. I have a larger project with this error here: https://github.com/KevinVandy/multi-monitor_calculator

But also, this error is happening on a brand new skeleton project that I described above, so I don't know what changed to cause this problem. I ran a npm update --latest a few days ago, and ever since then, I have not been able to get any smui sass compilation.

hidekuma commented 3 years ago

same problem.

Egnus commented 3 years ago

npm i sass -D maybe?

hidekuma commented 3 years ago

@Egnus i tried. but it still happen..

Egnus commented 3 years ago

It depends a lot on what method you are using to install. But in most of the cases I recommend you to have @material/theme installed in your devDeps.

hidekuma commented 3 years ago

@Egnus i already installed @material/theme but not working.. :(

hidekuma commented 3 years ago

i solved this problem. SOLUTION: update repository's node version (12.14.1 -> 16.13.0) and i update dev dependencies. let's try this.

KevinVandy commented 3 years ago

I completely started a new project again a few days later, and then installed the dependencies one by one, and now it works fine. So I'm guessing some dependency that smui-theme uses got updated and fixed.

If you are still running into this problem, try deleting node_modules and your lock file, and then reinstalling.

hidekuma commented 3 years ago

I completely started a new project again a few days later, and then installed the dependencies one by one, and now it works fine. So I'm guessing some dependency that smui-theme uses got updated and fixed.

If you are still running into this problem, try deleting node_modules and your lock file, and then reinstalling.

thanks! it's working well now.

Hubro commented 3 years ago

I don't have a lockfile, I'm installing every dependency from scratch, I still get this error.

KevinVandy commented 3 years ago

So it turns out that the real solution is to make sure all @material/* packages are at a max of version 11 since that is what SMUI uses. I downgraded @material/typography to v11 and it works fine.