GitHub - ym-project/esbuild-stylus-loader: esbuild plugin for stylus files (original) (raw)

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

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,
},

})