Stylus package with config file


#1

Hey, I just want to show you Stylus package (sGrid) with config file. (feedback appreciated)
I could’t find such an option for Stylus among existing packages.

This is a Stylus package with flexbox grid system, rupture and autoprefixer, but you can use it as a normal Stylus package. You don’t have to import s-grid in your main .styl file. (Of course I encourage you to use it ;))

With this package you can add other Stylus plugins (npm modules) or add other file paths.
All is configurable in json file in app root directory.

You will read more about it here on s-grid website: http://s-grid.meteor.com/#stylusconfiguration
or in the package readme file: https://github.com/juliancwirko/meteor-s-grid#stylus-compile-plugin-configuration

This is a similar approach as fourseven:scss ( which is the greatest package for SCSS :wink: )


Below is a copy from the docs:


Stylus compile plugin configuration

Even if you don’t want to use sGrid with this package you have possibility to use Stylus compile plugin with config file. For now you can add aditional stylus plugins (npm modules) and add more custom file paths for compiler.

Additional plugins

sGrid uses 3 default plugins (npm modules): autoprefixer-stylus, rupture and s-grid itself. Sometimes you want to use your core stylus compile plugin and add some more stylus plugins. This is quite hard with Meteor.

If you want to add some more stylus plugins like for example nib (or your custom ones) you should prepare two things:

  • Your local Meteor package with ‘nib’ npm dependency. You will need only package.json file with content like:
Package.describe({
    summary: 'Your package description here',
    version: "1.0.0",
    name: 'myname:some-other-packages',
    git: ''
});

Npm.depends({
    'nib': '1.1.0',
    'typographic': '2.9.3'
});

Of course you need to add the package: meteor add myname:nib

  • Next is sGrid config file in your app root directory. This file is called sgrid.json and its content will be like:
{
    "pluginsDirName": "some-other-packages-directory-name",
    "includePlugins": [
        "nib", "typographic"
    ]
}

Remember that plugin name must be the same as npm module name.

Additional include paths

Sometimes you need to create package that will expose one or more .styl files. Then you want to include these files in your main .styl file in your app. Or maybe you want to include only couple of them. With Meteor it is quite complicated. This package tries to simplify it a little bit. Let say that you have for example theme package with one .styl file and your package.js file looks like:

Package.describe({
    summary: 'Starter theme for Scotty - Meteor boilerplate',
    version: "0.1.0",
    name: 'scotty:theme',
    git: 'https://github.com/juliancwirko/scotty.git'
});

Package.onUse(function (api) {

    api.addFiles([
        'scotty-theme.import.styl',
    ], 'server', {isAsset: true});

});

The .styl file is our asset and it is located on the server. Now we can provide additional path to its folder. Our stylus compile plugin will know about it and we can import the theme file in our main .styl file in the app just like the others, so: @import 'scotty-theme.import'

To do this you need to add another information in sgrid.json file.

{
    "includePaths": [
        ".meteor/local/build/programs/server/assets/packages/scotty_theme"
    ],
    "pluginsDirName": "some-other-packages-directory-name",
    "includePlugins": [
        "nib", "typographic"
    ]
}

Here we have includePaths array. You can add more similar packages.

Important note: On an initial startup of the project there will be error related with stylus paths. Just ignore it and restart Meteor. This is because the .meteor/local/ directory doesn’t exist yet. Unfortunately there isn’t any other good solution for this with Meteor. But dont worry, this will occure only when you start it for the first time


#2

(I think I can’t edit the one above :confused: )

There was many changes so here you’ll find the actual state of the package:
http://s-grid.meteor.com/

Now you can use PostCSS with this package (poststylus).
You can add custom PostCSS plugins using meteorhacks:npm and its npm-container package. The build plugin will know what to do. More in the readme file or on the website.

You can also read Stylus grid documentation here: