esbuild-stylus-loader

esbuild-stylus-loader

Esbuild plugin for stylus files.

Installation

npm install esbuild-stylus-loader stylus

or

yarn add esbuild-stylus-loader stylus

Example

build.js

const {build} = require('esbuild')
const {stylusLoader} = require('esbuild-stylus-loader')

build({
    entryPoints: [
        'src/index.js',
    ],
    bundle: true,
    outdir: 'dist',
    plugins: [
        stylusLoader({
            stylusOptions: {
                define: [
                    ['BG_IMAGE', 'https://domain.com/image.jpeg'],
                ],
            },
        })
    ],
}).then(result => {})

src/index.js

import './style.styl'
console.log('hello world')

src/style.styl

html
    background-image url(BG_IMAGE)

command line

node ./build.js

Arguments

stylusLoader({
    stylusOptions: {
        /**
         * @see https://stylus-lang.com/docs/js.html#includepath
         * @type {string[]}
         */
        include: ['./some/path'],

        /**
         * @see https://stylus-lang.com/docs/js.html#importpath
         * @type {string[]}
         */
        import: [
            path.resolve(__dirname, 'path'),
            path.resolve(__dirname, 'another-path'),
        ],

        /**
         * @see https://stylus-lang.com/docs/js.html#usefn
         * @type {Function[]}
         */
        use: [
            (stylus) => {
                stylus.define('URL', 'domain.com')
            },
        ],

        /**
         * @see https://stylus-lang.com/docs/js.html#definename-node
         * @type {[string, any, boolean?][]}
         */
        define: [
            ['BG_IMAGE', 'https://domain.com/image.jpeg'],
            /** The third argument allows to insert raw data */
            ['BG_IMAGE', 'https://domain.com/image.jpeg', true],
        ],

        /**
         * Stylus will include css file content via @import "./file.css" keyword.
         * @type {boolean}
         */
        includeCss: false,
    },
})