search

quasarframework / quasar

Quasar Framework - Build high-performance VueJS user interfaces in record time
https://quasar.dev
MIT License
25.86k stars 3.5k forks source link

quasar.sass issue #15247

Closed mbnoimi closed 1 year ago

mbnoimi commented 1 year ago

What happened?

Whenever I run Quasar quasar dev I get many warnings related to quasar.sass

What did you expect to happen?

A clean run

Reproduction URL

https://stackblitz.com/edit/quasarframework-7eejtc?file=package.json

How to reproduce?

  1. Create a new Quasar CLI typescript project.
  2. Add some dependencies.
  3. Upgrade to recent packages.
  4. quasar dev

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

SPA Mode

Platforms/Browsers

Firefox, Chrome

Quasar info output

App • Looking for Quasar App Extension "into" command
 App • ⚠️  Quasar App Extension "into" is missing...

 .d88888b.
d88P" "Y88b
888     888
888     888 888  888  8888b.  .d8888b   8888b.  888d888
888     888 888  888     "88b 88K          "88b 888P"
888 Y8b 888 888  888 .d888888 "Y8888b. .d888888 888
Y88b.Y8b88P Y88b 888 888  888      X88 888  888 888
 "Y888888"   "Y88888 "Y888888  88888P' "Y888888 888
       Y8b

  Running @quasar/cli v1.4.0
  Running @quasar/app-vite v1.1.3

  Example usage
    $ quasar <command> <options>

  Help for a command
    $ quasar <command> --help
    $ quasar <command> -h

  Options
    --version, -v Print Quasar App CLI version

  Commands
    dev, d        Start a dev server for your App
    build, b      Build your app for production
    clean, c      Clean all build artifacts
    new, n        Quickly scaffold page/layout/component/... vue file
    mode, m       Add/remove Quasar Modes for your App
    inspect       Inspect Vite/esbuild configs used under the hood
                    - keeps into account your quasar.config.js
                      and your installed App Extensions
    ext, e        Manage Quasar App Extensions
    run, r        Run specific command provided by an installed
                    Quasar App Extension
    describe      Describe a Quasar API (component)
    test, t       Run @quasar/testing App Extension command
                    - requires @quasar/testing App Extension to be installed
                    - this is an alias command for convenience purposes
    info, i       Display info about your machine and your App
    help, h       Displays this message

  If the specified command is not found, then "quasar run"
  will be executed with the provided arguments.

  Commands supplied by @quasar/cli global installation:

    upgrade       Check (and optionally) upgrade Quasar packages
                    from a Quasar project folder
    serve         Create an ad-hoc server on App's distributables

Relevant log output

.d88888b.
d88P" "Y88b
888     888
888     888 888  888  8888b.  .d8888b   8888b.  888d888
888     888 888  888     "88b 88K          "88b 888P"
888 Y8b 888 888  888 .d888888 "Y8888b. .d888888 888
Y88b.Y8b88P Y88b 888 888  888      X88 888  888 888
 "Y888888"   "Y88888 "Y888888  88888P' "Y888888 888
       Y8b

 » Reported at............ 1/10/2023 2:42:18 PM
 » App dir................ /home/admino/Desktop/Vue/crater-ui
 » App URL................ http://localhost:9000/
                           http://192.168.1.4:9000/
 » Dev mode............... spa
 » Pkg quasar............. v2.11.4
 » Pkg @quasar/app-vite... v1.1.3
 » Browser target......... es2019|edge88|firefox78|chrome87|safari13.1

 App • Opening default browser at http://localhost:9000/

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($angle, 180) or calc($angle / 180)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
42 │   $rad: $angle / 180 * $PI
   │         ^^^^^^^^^^^^
   ╵
    node_modules/quasar/dist/quasar.sass 42:9     sin()
    node_modules/quasar/dist/quasar.sass 4587:16  root stylesheet

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(pow(-1, $i) * pow($rad, (2 * $i + 1)), fact(2 * $i + 1)) or calc(pow(-1, $i) * pow($rad, (2 * $i + 1)) / fact(2 * $i + 1))

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
45 │     $sin: $sin + pow(-1, $i) * pow($rad, (2 * $i + 1)) / fact(2 * $i + 1)
   │                  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    node_modules/quasar/dist/quasar.sass 45:18    sin()
    node_modules/quasar/dist/quasar.sass 4587:16  root stylesheet

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($angle, 180) or calc($angle / 180)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
50 │   $rad: $angle / 180 * $PI
   │         ^^^^^^^^^^^^
   ╵
    node_modules/quasar/dist/quasar.sass 50:9     cos()
    node_modules/quasar/dist/quasar.sass 4588:17  root stylesheet

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(pow(-1, $i) * pow($rad, 2 * $i), fact(2 * $i)) or calc(pow(-1, $i) * pow($rad, 2 * $i) / fact(2 * $i))

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
53 │     $cos: $cos + pow(-1, $i) * pow($rad, 2 * $i) / fact(2 * $i)
   │                  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    node_modules/quasar/dist/quasar.sass 53:18    cos()
    node_modules/quasar/dist/quasar.sass 4588:17  root stylesheet

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(round($number * $power), $power) or calc(round($number * $power) / $power)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
38 │   @return round($number * $power) / $power
   │           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    node_modules/quasar/dist/quasar.sass 38:11    toFixed()
    node_modules/quasar/dist/quasar.sass 4590:12  root stylesheet

Warning: 3 repetitive deprecation warnings omitted.

Additional context

No response

yusufkandemir commented 1 year ago

https://github.com/quasarframework/quasar/issues/9362#issuecomment-847992095 Don't install sass or upgrade it yourself, rely on the version that Quasar CLI provides for you.

mbnoimi commented 1 year ago

Are there another packages provided by Quasar?

"dependencies": {
    "@headlessui/vue": "^1.7.7",
    "@heroicons/vue": "^2.0.13",
    "@popperjs/core": "^2.11.6",
    "@quasar/extras": "^1.15.9",
    "@stripe/stripe-js": "^1.46.0",
    "@tailwindcss/line-clamp": "^0.4.2",
    "@tiptap/core": "^2.0.0-beta.209",
    "@tiptap/extension-text-align": "^2.0.0-beta.209",
    "@tiptap/starter-kit": "^2.0.0-beta.209",
    "@tiptap/vue-3": "^2.0.0-beta.209",
    "@vuelidate/components": "^1.2.3",
    "@vuelidate/core": "^2.0.0",
    "@vuelidate/validators": "^2.0.0",
    "@vueuse/core": "^9.10.0",
    "axios": "^1.2.2",
    "chart.js": "^4.1.2",
    "guid": "^0.0.12",
    "lodash": "^4.17.21",
    "maska": "^2.1.3",
    "mini-svg-data-uri": "^1.4.4",
    "moment": "^2.29.4",
    "pinia": "^2.0.28",
    "quasar": "^2.11.4",
    "v-money3": "^3.22.3",
    "v-tooltip": "^2.1.3",
    "vue": "^3.2.45",
    "vue-flatpickr-component": "^11.0.1",
    "vue-i18n": "^9.2.2",
    "vue-router": "^4.1.6",
    "vue3-colorpicker": "^2.1.2",
    "vuedraggable": "^2.24.3"
  },
  "devDependencies": {
    "@intlify/vite-plugin-vue-i18n": "^6.0.3",
    "@quasar/app-vite": "^1.1.3",
    "@rvxlab/tailwind-plugin-ios-full-height": "^1.1.0",
    "@tailwindcss/aspect-ratio": "^0.4.2",
    "@tailwindcss/forms": "^0.5.3",
    "@tailwindcss/typography": "^0.5.8",
    "@types/node": "^18.11.18",
    "@typescript-eslint/eslint-plugin": "^5.48.1",
    "@typescript-eslint/parser": "^5.48.1",
    "@vue/compiler-sfc": "^3.2.45",
    "autoprefixer": "^10.4.13",
    "cross-env": "^7.0.3",
    "eslint": "^8.31.0",
    "eslint-config-prettier": "^8.6.0",
    "eslint-plugin-vue": "^9.8.0",
    "postcss": "^8.4.21",
    "prettier": "^2.8.2",
    "tailwind-scrollbar": "^2.1.0",
    "tailwindcss": "^3.2.4",
    "typescript": "^4.9.4"
  },
yusufkandemir commented 1 year ago

No. But, I'd recommend removing @vue/compiler-sfc: https://github.com/vuejs/core/tree/main/packages/compiler-sfc#readme

Note: as of 3.2.13+, this package is included as a dependency of the main vue package and can be accessed as vue/compiler-sfc. This means you no longer need to explicitly install this package and ensure its version match that of vue's. Just use the main vue/compiler-sfc deep import instead.

mbnoimi commented 1 year ago

Thanks a lot for the quick responses. REALLY LOVED QUASAR! This community is fantastic.

Flamenco commented 1 year ago

We just added a Rollup/Vite plugin to remove these errors.

https://www.npmjs.com/package/rollup-plugin-sass-migrator/v/1.0.1

thinkido commented 1 year ago

We just added a Rollup/Vite plugin to remove these errors.

https://www.npmjs.com/package/rollup-plugin-sass-migrator/v/1.0.1

"rollup-plugin-sass-migrator": "^1.0.4", node_modules/@quasar/app-vite/node_modules/vite/dist/node/chunks/dep-6e2fe41e.js:39232 return plugin.buildStart.call(new Context(plugin), container.options); ^

TypeError: plugin.buildStart.call is not a function at /home/thinkido/workspace/todo-cool-quasar/node_modules/@quasar/app-vite/node_modules/vite/dist/node/chunks/dep-6e2fe41e.js:39232:46 at Array.map () at Object.buildStart (/home/thinkido/workspace/todo-cool-quasar/node_modules/@quasar/app-vite/node_modules/vite/dist/node/chunks/dep-6e2fe41e.js:39230:39) at httpServer.listen (/home/thinkido/workspace/todo-cool-quasar/node_modules/@quasar/app-vite/node_modules/vite/dist/node/chunks/dep-6e2fe41e.js:60350:37) at /home/thinkido/workspace/todo-cool-quasar/node_modules/@quasar/app-vite/node_modules/vite/dist/node/chunks/dep-6e2fe41e.js:48219:20 at new Promise () at httpServerStart (/home/thinkido/workspace/todo-cool-quasar/node_modules/@quasar/app-vite/node_modules/vite/dist/node/chunks/dep-6e2fe41e.js:48200:12) at startServer (/home/thinkido/workspace/todo-cool-quasar/node_modules/@quasar/app-vite/node_modules/vite/dist/node/chunks/dep-6e2fe41e.js:60380:30) at Object.listen (/home/thinkido/workspace/todo-cool-quasar/node_modules/@quasar/app-vite/node_modules/vite/dist/node/chunks/dep-6e2fe41e.js:60183:20) at #runVite (/home/thinkido/workspace/todo-cool-quasar/node_modules/@quasar/app-vite/lib/modes/spa/spa-devserver.js:26:24)

Node.js v18.0.0

Flamenco commented 1 year ago

@thinkido Fixed in version 1.0.5

https://www.npmjs.com/package/rollup-plugin-sass-migrator

Thank you for report. 👍

Vladichik commented 10 months ago

The fix refers to vite.config, what if my project does not use vite. Is there any way to fix it?

yusufkandemir commented 10 months ago

@Vladichik what you are experiencing is most likely a separate issue. Assuming you are using Quasar CLI with Webpack, you are either stuck with @quasar/app which is deprecated, or you are using an older version of @quasar/app-webpack. Convert to @quasar/app-webpack if you haven't already, and use the latest version. You must have missed reading the release notes here before upgrading the quasar package: https://github.com/quasarframework/quasar/releases/tag/quasar-v2.14.0