Creating a Stylus Library

Hi, in this article I will be showing how to create a Stylus library.

Wait what is Stylus?

Stylus is a CSS preprocessor which has features such as whitespace sensitivity but all that is optional. Kind of like a mixture of SASS and SCSS.

So how will we do it?

Stylus has a JavaScript API which exposes a .include function. The .include function allows you to add another path which will be searched when importing.

Let's Do It

We will be using the Plugin API of the JavaScript API so it can become a little more organized.

const stylus = require("stylus");

const plugin = () => (style) => {
    style.include(__dirname)
}

stylus("@import 'my-lib/foo';")
    .use(plugin())
    .render((err, css) => {
        if (err) throw err;
        console.log(css)
    })

If you have a my-lib subfolder, it will use that and import my-lib/foo.styl.

Getting an Import All Entry

But, what if a user wants to import everything? Like:

@import "my-lib";

Then, we can create an index.styl within the my-lib subfolder, and change it to this:

@import "foo";

So now, if you do this:

@import "my-lib";

It will import everything from my-lib/index.styl, so make sure index.styl is importing every other file there is.

Conclusion

So in this post I showed how to use the JavaScript API to create a Stylus library, allow submodules, and allow one main index.styl entry point.