[Bug Report] stylus block level import not working

This issue is a continuation of https://github.com/vuetifyjs/vuetify/issues/1902#issuecomment-399030552

Versions and Environment

Vuetify: 1.1.10 Vue: 2.5.17 Browsers: n/a OS: Linux

Steps to reproduce

using a stylus block level import:

src/stylus/main.styl

.myapp
   #import '~vuetify/src/stylus/main'

This is to ensure that the vuetify css doesn’t interfere with elements from other parts of the page which aren’t using vuetify.

Expected Behavior

no error, styles are scoped with the block

Actual Behavior

 ERROR  Failed to compile with 1 errors                                                                         2:13:28 pm

 error  in ./src/stylus/main.styl

Module build failed (from ./node_modules/stylus-loader/index.js):
Error: node_modules/vuetify/src/stylus/settings/_el
evations.styl:85:33
   81|                       0px 9px 46px 8px $shadow-key-ambient-opacity
   82| 
   83| // MIXINS
   84| elevation($z, important = false)
   85|   box-shadow: $shadow-key-umbra[$z],
---------------------------------------^
   86|               $shadow-key-penumbra[$z],
   87|               $shadow-key-ambient[$z] (important ? !important : )
   88| 

cannot perform $shadow-key-umbra[((0))]

[jacekkarczmarczyk]

Closing as we’re moving to sass

[HavokInspiration]

It would seem the problems comes from webpack rather than stylus itself or vuetify itself. I encountered the exact same problem under the same circumstances (nesting the entire vuetify style under an #id in order to prevent vuetify styles override).

I messed around a bit in the vuetify core *.styl file and it would seem (based on the other errors I managed to get) that when you do a “block level import”, the imported *.styl files are not well evaluated and the “raw” content is returned.

I managed to get some this error at some point :

ModuleBuildError: Module build failed (from ./node_modules/stylus-loader/index.js):
Error: node_modules/stylus/lib/functions/index.styl:105:18
   101| 
   102| // check if color is light
   103| 
   104| light(color)
   105|   lightness(color) >= 50%
-------------------------^
   106| 
   107| // check if color is dark
   108| 

TypeError: expected rgba or hsla, but got function:application($material)

As you can see here, the color variable here seems to be the “raw” call to the function.

Since I know exactly nothing about webpack, I’m not really sure if that’s a lead. Maybe someone will be able to dig a bit deeper with these new elements. Please note that I am using this loader for webpack : https://github.com/shama/stylus-loader and that I’m managing my project with vue-cli (which basically hides everything from webpack).

That being said, the only way I found to avoid the issue was to build my custom main.styl using stylus itself and include the resulting file in my main js file.

npm install stylus -g

## will compile the entire vuetify style into ./src/assets/main.css
stylus src/config/main.styl --out ./src/assets

## in my src/App.vue file 
<style lang="scss">
  @import 'assets/main.css';
</style>

The neat thing is that stylus has a --watch option that works pretty well with the --watch option of the vue-cli-service build command. Launch the watch on stylus :

stylus --watch src/config/main.styl --out ./src/assets

In another shell, the vue-cli-service :

vue-cli-service build --watch

Then include your compiled main.css in your vue file and it should properly cascade when you modify your custom main.styl file.

I hope this helps some folks.