Reference @import? (variables and mixins only)

TL;DR: yes, what I want is something similar to LESS reference import to be implemented in Stylus

A long and boring story:

Let’s say we have the following file structure:

|
|-- main
|    |-- button.styl
|    |-- authform.styl
|    `-- mypage.styl
`-- main.styl

main/button.styl

// variables
$button-height = 33px
$button-rounding = 4px

// mixins
button_color($base-color)
  background-color: $base-color
  &:hover
    background-color: darken($base-color, 20%)

// styles
.button
  height: $button-height
  border-radius: $button-rounding
  color: white

  .normal
    button_color(#90091e)

  .alternate
    button_color(#bada55)

main/authform.styl

// variables
$authform-pad = 5px
$authform-height = $button-height + (2 * $authform-pad)

// styles
.authform
  box-sizing: border-box
  padding: $authform-pad
  height: $authform-height

main/mypage.styl

// styles
.mypage

  header
    height: $authform-height

  .someblock .button
    button_color(#906090)

main.styl

@import 'main/authform'
@import 'main/button'
@import 'main/mypage'

initial state Trying to compile main.styl gives obviously bad results such as height: $button-height10px; for authform etc.

@import Ok, so variables need to be already defined when used. So, we add @import 'button' in the beginning of authform.styl, and both @import 'authform' and @import 'button' to mypage.styl Now, we have all styles compiled correctly, but all authform styles are repeated twice, and button styles are repeated three times.

@require As we may know, @require constructs prevent repeated imports, so we change all @import to @require. Yay, styles are no more repeated!

But… In output css, button styles come first, then authform styles, and then mypage styles. But the order in main.css was: authform, button, mypage. This order is broken because authform first imports button (and thus outputs its styles), and only after that outputs its own styles.

In this synthetic situation the order seems to be no object. But in real life, the styles order can be just crucial, whereas we cannot control it.

build with no button Now let’s create one more build which represents some page with authform but without button (may it be the form has only input, but this form must have the same height)

main/otherpage.styl

@require 'authform'

.otherpage

  .myblock
    min-height: $authform-height

nobutton.styl

@require 'main/authform'
@require 'main/otherpage'

Compiling nobutton.styl, we get button styles which we didn’t really need in this css build.

The only chance to avoid this is to split every component file to at least two parts (“styles” file and “vars+mixins” file), and import them separately.

The solution that should be great LESS has a very good approach for aforesaid problems solution: reference import option

Let us have something similar in Stylus? May it be @reference, or @use, or @refer, or whatever, which would work as “import only variables and mixins from the file, but don’t output any styles”.

Thank you in advance!

[FezVrasta]

Any updates on it? I think something like the import feature of ES6 would be awesome.

@import { myMixin } from '../mixins'
@import { $blue, $red } from '../colors'

[kizu]

Thanks for the issue, we have some plans on enhancing the @import/@require in Stylus, very close to what Less have, but with a slightly different syntax. Stay tuned! 😃