stormseed / daykeep-calendar-quasar

A full event display calendar for the Quasar framework that has multiple viewing formats.
MIT License
270 stars 71 forks source link

Quasar beta build error against "do upgrade" branch #54

Closed wooliet closed 5 years ago

wooliet commented 5 years ago

We've been building against the calendar's "do upgrade" branch, and the latest quasar beta build fails with:

ERROR in ./node_modules/quasar-calendar/component/calendar/Calendar.vue?vue&type=style&index=0&lang=stylus& (./node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-2-0!./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--6-oneOf-2-2!./node_modules/stylus-loader??ref--6-oneOf-2-3!./node_modules/@quasar/app/lib/webpack/loader.quasar-stylus-variables.js!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/quasar-calendar/component/calendar/Calendar.vue?vue&type=style&index=0&lang=stylus&)
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
  ModuleBuildError: Module build failed (from ./node_modules/stylus-loader/index.js):
    Error: /Users/me/Projects/project/node_modules/stylus/lib/functions/index.styl:133:36
       129| 
       130| // lighten by the given amount
       131| 
       132| lighten(color, amount)
       133|   adjust(color, 'lightness', amount)
    -------------------------------------------^
       134| 
       135| // decrease opacity by amount
       136| 
    TypeError: expected rgba or hsla, but got ident:$grey-3

More info:

Possibly related

https://github.com/quasarframework/quasar/issues/3966#issuecomment-487502525

Quasar version succeeds

quasar - v1.0.0-beta.18 @quasar/app - v1.0.0-beta.19

Quasar version fails

quasar - 1.0.0-beta.20 @quasar/app - 1.0.0-beta.22

Calendar integration

package.json

"dependencies": {
    "quasar-calendar": "github:stormseed/quasar-calendar#do_upgrade_to_1.0"
}

quasar.conf.js

  return {
    boot: [
      'quasar-calendar'
    ],

src/boot/quasar-calendar.js

import {
  Calendar,
  CalendarMonth,
  CalendarMultiDay,
  CalendarAgenda
} from 'quasar-calendar/component';

export default async ({ Vue }) => {
  Vue.component('q-calendar', Calendar);
  Vue.component('q-calendar-month', CalendarMonth);
  Vue.component('q-calendar-multi-day', CalendarMultiDay);
  Vue.component('q-calendar-agenda', CalendarAgenda);
};
sirbeagle commented 5 years ago

So there's a file called calendar.vars.styl that I use between the different calendar components to keep some styles consistent. That did have the @import '~quasar-variables' line in it which I removed but I was still getting an error. The error involves these two lines:

$currentDayBackgroundColor = $grey-3
$weekendDayBackgroundColor = lighten($currentDayBackgroundColor, 50%)

It looks like the failure is when trying to use the Stylus lighten command on a variable. No big deal in this case as I can just substitute a different Quasar color, but it might be something to look into.

This will be fixed on the next push.