https://github.com/ym-project/esbuild-stylus-loader

esbuild plugin for stylus files
https://github.com/ym-project/esbuild-stylus-loader

esbuild plugin stylus

Last synced: about 2 months ago
JSON representation

esbuild plugin for stylus files

• Host: GitHub
• URL: https://github.com/ym-project/esbuild-stylus-loader
• Owner: ym-project
• License: mit
• Created: 2020-11-12T02:26:30.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2022-12-15T05:06:28.000Z (almost 2 years ago)
• Last Synced: 2024-07-29T12:39:49.336Z (about 2 months ago)
• Topics: esbuild, plugin, stylus
• Language: JavaScript
• Homepage:
• Size: 575 KB
• Stars: 11
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-esbuild - esbuild-stylus-loader

README

        
# esbuild-stylus-loader

[Esbuild](https://esbuild.github.io/) plugin for [stylus](https://stylus-lang.com/) files.

## Installation

```sh

npm install esbuild-stylus-loader stylus

```

or

```sh

yarn add esbuild-stylus-loader stylus

```

## Example

`build.js`

```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`

```js

import './style.styl'

console.log('hello world')

```

`src/style.styl`

```styl

html

    background-image url(BG_IMAGE)

```

`command line`

```sh

node ./build.js

```

## Arguments

```js

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,

    },

})

```