Meteor stylus import

Question

I'm working on meteor site design, built with meteor. I'm using stylus to write the css. I've read that Meteor supports stylus import by default, but when I split my main stylesheet in partials, they get imported separatly by meteor. If I want to comment out a partial to disable it it still get's imported.

I have the following structure:

site/
  client/
    stylesheets/
      partials/
        all.styl
        typography.styl
        webform.styl
        etc.styl
      main.styl

In main.styl I do @import 'partials/all and all imports all of the partials:

@import 'typography'
@import 'webform'
@import 'etc'

Are @import in stylus supported by meteor? I've tried to add the stylus package, stylus-latest but to no avail.

This people seem to says that it works out of the box: https://github.com/percolatestudio/ground-control. I tried to run the app but it doesn't work with meteor latest.

Anybody haz tip?

cheers

Answer 1

You should use .import.styl for files you will import. It was fixed in https://github.com/meteor/meteor/pull/1803

Answer 2

This is a complicated issue. @imports work for other stylus plugins such as nib, because each file runs its own set of plugins. However, for imports across a project, the regular way won't work because Meteor will load each file. This is discussed in the following thread:

https://github.com/meteor/meteor/pull/462

The workarounds are to import the file manually, either by

• Put some files to manually import in a .import directory (or anything that starts with ., which is ignored by Meteor)
• Put change the extension of the file to something .stylimport which is also ignored by Meteor.

Both of the issues above have the problem that Meteor won't watch the file for changes during development. If you'd like this issue fixed, I'd encourage you to pitch in on that discussion.

Answer 3

My previous attempt to use @import with meteor-stylus was ill fated.

I tried to leave the main.styl at the root of the application and load the imports from /client/stylesheets. I thought it worked, but as mentionned by @AndrewMao it duplicates the code.

I worked on a previous project with less and .lessimport extension. but for this one I want to keep using stylus. So I decided to move all of my .styl in client/stylesheets/.includes/. I run stylus -u autoprefixer-stylus -w .includes/main.styl -o ./ to output a fresh copy of the css each time the stylus watcher compiles the files. This way it keep the benefits of meteor hot reload.

I wish there was a way to specify the option for the stylus-autoprefixer cli. anybody knows if it's possible? otherwise i'll have to use prepos app.