Share a file.styl across apps using a package

help
1

Hi!

I would like to share a file.styl file across apps using a package.

  • file.styl ->
  • package(file.styl) ->
  • package(file.styl) used in many apps so that same style in many apps.

Problem: how to make the app using package(file.styl) to compile file.styl into file.css and send it to clients?

2

Hi, I can show you my own package as a reference.

Here is a meteor package: https://github.com/juliancwirko/meteor-s-grid/ (see package.js and plugin/compile-stylus.js files) and here you have npm package with my custom .styl files: https://github.com/juliancwirko/s-grid

Basically in meteor package,js you should depend on npm package with your custom styl files and of course on stylus npm package. Then in your app you will be able to easily import your styles from .styl files included in npm dependency. (In your main .styl file place @import 'my-file-name-from-npm-dependency-package' you can ommit .styl extension)

‘compile-stylus.js’ plugin will compile it all to css on your app startup.

Meteor is very helpful in the front-end work too : )
Meteor + Stylus + good grid system (like for example Jeet) is a powerful toolset for prototyping.

3

Thank you juliancwirko, helpful suggestions :slight_smile:

4

Since stylus files are compiled in the server then sent to clients, one may expect that he should use these lines in package.js:

    Package.onUse(function(api) {
        api.versionsFrom('1.0.3.2');
        api.use('stylus', 'server');
        api.addFiles('style.styl', 'server');
    });

Turns out that this should be used instead:

    Package.onUse(function(api) {
        api.versionsFrom('1.0.3.2');
        api.use('stylus');
        api.addFiles('style.styl');
    });

And it works as expected:

style.styl -> stylPckg := package(style.styl) -> [app1(stylPckg), app2(stylPckg), ...]