DEV Community

loading...
Cover image for Creating a Stylus Library

Creating a Stylus Library

shadowtime2000 profile image shadowtime2000 Originally published at h.shadowtime2000.com on ・1 min read

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)
    })
Enter fullscreen mode Exit fullscreen mode

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";
Enter fullscreen mode Exit fullscreen mode

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

@import "foo";
Enter fullscreen mode Exit fullscreen mode

So now, if you do this:

@import "my-lib";
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)

pic
Editor guide