Vuetify: [Bug Report] Importing stylus file causes some classes to cascade incorrectly

[aaronrosenthal]

Versions and Environment

Vuetify: 1.0.8
Vue: 2.5.16
Browsers: Chrome 65.0.3325.162
OS: Windows 7

Steps to reproduce

1) Import main stylus file in main App.vue with:

<style lang="stylus">
@import '~vuetify/src/stylus/main'
</style>

2) Build the Data Iterator example.

Expected Behavior

The classes from components/_grid.styl should take precedence.

Actual Behavior

The align-end class is being overwritten by other classes from v-list components.

Reproduction Link

https://codepen.io/pen/?&editors=101

Other comments

The only workaround I have found is to add:

@import '~vuetify/src/stylus/main'
@import '~vuetify/src/stylus/components/_grid'

But this may have unintended side effects...

[KaelWD]

That link is not sufficient to diagnose this issue. Please provide an example project that will demonstrate it. You may be able to use CodeSandbox if it doesn't require any advanced configuration.

[aaronrosenthal]

I'm not an expert on this, but I think it will require advanced configuration to reproduce. The Vue sandbox doesn't have stylus support out-of-the-box and I can't modify its Webpack configuration files, so I'm unable to use it to import stylus files.

[KaelWD]

You should be able to just add stylus and stylus-loader to the dependencies. We do also accept git repos as reproduction if thatis easier.

[aaronrosenthal]

I created a git repo as I could not get codesandbox to work:

https://github.com/aaronrosenthal/webpack4-vue-vuetify

Running this you will notice that class="align-end" does not work properly when importing Vuetify stylus files. If you uncomment the code in src\styles\main.styl then the example will work.

[nwaughachukwuma]

Am getting this error:

1| @require './settings/*' 2| @require './generic/*' 3| @require './elements/*' 4| @require './tools/*' ---------------^ 5| @require './trumps/*' 6| @require './components/_tooltips.styl' 7| failed to locate @require file ./tools/*.styl

What could I be doing wrong

[jacekkarczmarczyk]

This is not related to this issue, please ask questions on discord channel https://chat.vuetifyjs.com

[aaronrosenthal]

@KaelWD Was the git repo I posted sufficient for reproducing this problem?

[johnleider]

It is sufficient.

[verstoff]

Reproduced on latest version (1.2.5).
Builded css (vuetify.css) styles order differs from css generated by application when import main.styl. This breaks down the layout in some cases
https://vuetifyjs.com/en/components/data-tables#example-headers for example (Look at the checkboxes)

I think the reason is in the order of imports.

main.styl imports all components @import './components/*'
But building vuetify dist has other logic: the component can import another component and break the order

[hurrycaner]

It's happening in 1.2.6 too

I would like to fix this, but i don't know the correct order

[johnleider]

I'm unsure how to resolve this atm, help wanted.

[hurrycaner]

@johnleider I believe the best way to fix this is to change all @import .../* and import the ordered list of components... but we need to define the correct order of it, what do you think?

When i get some time on the weekend, i will try to map that :)

[Traxo7]

Might be related:
I think this line causes trouble for v-select:
https://github.com/vuetifyjs/vuetify/blob/17582f62cd80c7f8f0a6d9cf3cd5cdb6015af806/packages/vuetify/src/stylus/components/_text-fields.styl#L163

I copied relevant stylus to codepen to show the issue:
https://codepen.io/anon/pen/rQMGxG
Hovering over v-select shows text-cursor.
This does not happen when importing .css, but only .styl as far as I can see.

[Djaler]

This happens to me even if I import vuetify/dist/vuetify.min.css instead of stylus file.
I leave more info and reproduction link there - #5681
Also, in my case issue was fixed by removing vuetify-loader

[Traxo7]

@Djaler Perhaps we should open issue there then if you are sure it's the vuetify-loader's issue?
I have not tested it yet.
https://github.com/vuetifyjs/vuetify-loader/issues

META:
I suggest in the future you edit first comment instead of posting 3 different ones within few mins.

[jacekkarczmarczyk]

The problem here is that the css order matters, afaik it shouldn't matter if we clinged to the BEM rules, but fixing this might be a massive change

[Traxo7]

Apparently this line also messes up my style: https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/stylus/components/_selection-controls.styl#L34

So it looks like this, see how checkbox is positioned:
https://codepen.io/anon/pen/dQdJWR

Again,
import 'vuetify/dist/vuetify.min.css' apparently works properly but
@require '~vuetify/src/stylus/main.styl' messes it up

Temp fix:

.v-select-list .v-input--selection-controls:not(.v-input--hide-details) .v-input__slot {
  margin-bottom: 0
}

[sn0rcha]

Can confirm I have the same issue when doing

// Import Vuetify styling
@require '~vuetify/src/stylus/main'

The v-select component cursor is not the right one

[AGPDev]

We have news about this?
I have problem to customize breakpoints in 1.4.0-beta.0 because i can replace variables.
I think this issue cause this problem too.

[sele9]

The "correct" order to import the stylus files inside components would be nice.
Actually i think its just alphabetic, which causes the VSelect cursor: text;

Since we manipulate some variables its required to compile the stylesheet by ourself.
Actually this did it, but we're not able to see any side effects yet.

@import '~vuetify/src/stylus/main'
@import '~vuetify/src/stylus/components/_select'

[ikudosi]

I am also experiencing the same issue using latest 1.5.13 with stylus. I only see the discrepancies on select component using the multiple flag. If you compare the framework's CSS from https://vuetifyjs.com/ and the stylus output the hierarchy is different.

For example, on vuetify.com this is the following order on common.{hash}.css

// line 4381 and imported from _select.styl
.v-input--selection-controls:not(.v-input--hide-details) .v-input__slot {
  margin-bottom: 12px;
}

// line 4852 and imported from _lists.styl
.v-list__tile__action .v-input--selection-controls .v-input__slot {
  margin: 0;
}

However.... when using stylus the order is flipped! After looking into it, I believe the issue may stem from
vuetify/src/stylus/main.styl on the @import './components/*' statement as I'm going to assume that _lists.styl will run after __select.styl.

For me in my own main.styl override... the following fixes my issue with the the checkbox alignment when using select with multiple though I am not sure if there will be repercussions on this.

@import '~vuetify/src/stylus/main'
@import '~vuetify/src/stylus/components/_lists.styl'

[johnleider]

As this issue is focused on v1.x of the framework, this issue is no longer actionable. We have made huge strides to alleviate these issues in v2 and while some issues do still exist, we are actively working to resolve them.