{"id":25454,"library":"esbuild-stylus-loader","title":"esbuild-stylus-loader","description":"An esbuild plugin for compiling Stylus (.styl) files, currently at v0.4.6. It integrates Stylus preprocessing into esbuild bundling, supporting Stylus options like define, import, include, use, and includeCss. Released under active development with fixes for watch mode and ReDoS vulnerability. Ships TypeScript definitions. Requires esbuild >=0.10.0 and stylus >=0.52.4 as peer dependencies. Differentiated from alternatives (e.g., esbuild-sass-plugin) by its focus on Stylus and compatibility with esbuild's plugin system.","status":"active","version":"0.4.6","language":"javascript","source_language":"en","source_url":"https://github.com/ym-project/esbuild-stylus-loader","tags":["javascript","esbuild","stylus","typescript"],"install":[{"cmd":"npm install esbuild-stylus-loader","lang":"bash","label":"npm"},{"cmd":"yarn add esbuild-stylus-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add esbuild-stylus-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; plugin requires esbuild's plugin API.","package":"esbuild","optional":false},{"reason":"Peer dependency; Stylus compiler is not bundled.","package":"stylus","optional":false}],"imports":[{"note":"Package is ESM/CJS dual; named export 'stylusLoader' is the plugin function.","wrong":"const stylusLoader = require('esbuild-stylus-loader')","symbol":"stylusLoader","correct":"import { stylusLoader } from 'esbuild-stylus-loader'"},{"note":"TypeScript type import; not a runtime value.","wrong":"import StylusLoaderOptions from 'esbuild-stylus-loader'","symbol":"StylusLoaderOptions","correct":"import type { StylusLoaderOptions } from 'esbuild-stylus-loader'"},{"note":"CJS require destructuring; default export is not available.","wrong":"const stylusLoader = require('esbuild-stylus-loader').default","symbol":"stylusLoader","correct":"const { stylusLoader } = require('esbuild-stylus-loader')"}],"quickstart":{"code":"const { build } = require('esbuild');\nconst { stylusLoader } = require('esbuild-stylus-loader');\n\nbuild({\n  entryPoints: ['src/index.js'],\n  bundle: true,\n  outdir: 'dist',\n  plugins: [\n    stylusLoader({\n      stylusOptions: {\n        define: [['BG_IMAGE', 'https://example.com/bg.jpg']],\n        include: ['./styles'],\n        includeCss: false,\n      },\n    }),\n  ],\n}).catch(() => process.exit(1));","lang":"javascript","description":"Sets up esbuild build with Stylus plugin, showing define and include options."},"warnings":[{"fix":"Run 'npm install stylus' or add stylus to your project's dependencies.","message":"In v0.4.0, stylus was moved from dependencies to peerDependencies. You must install stylus manually.","severity":"breaking","affected_versions":">=0.4.0"},{"fix":"Wrap Stylus-specific options in stylusLoader({ stylusOptions: { ... } }).","message":"In v0.3.0, plugin options were moved into a stylusOptions object. Previously flat options are now nested.","severity":"breaking","affected_versions":">=0.3.0"},{"fix":"Set includeCss: true in stylusOptions if you want Stylus to process @import './file.css'.","message":"The plugin does not automatically include CSS files; you must enable includeCss option.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Upgrade to v0.4.5+ to ensure imported Stylus files trigger rebuilds.","message":"Watch mode for imported Stylus files requires v0.4.5 or later. Earlier versions only watch the entry file.","severity":"gotcha","affected_versions":"<0.4.5"},{"fix":"Ensure esbuild >=0.10.0 is installed.","message":"Minimum esbuild version raised to 0.10.0 in v0.4.6 due to watchFiles option dependency.","severity":"deprecated","affected_versions":">=0.4.6"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Run 'npm install stylus' or 'yarn add stylus'.","cause":"Stylus peer dependency is not installed.","error":"Cannot find module 'stylus'"},{"fix":"Use import { stylusLoader } from 'esbuild-stylus-loader'.","cause":"Incorrect import: using default import instead of named import.","error":"TypeError: stylusLoader is not a function"},{"fix":"Call stylusLoader() in the plugins array: plugins: [stylusLoader()].","cause":"Did not call stylusLoader() as a function; passed the function reference instead.","error":"Plugin must be an object with a name property"},{"fix":"Ensure define is an array of arrays, e.g., define: [['BG_IMAGE', 'url']].","cause":"define items must be arrays of [name, value, raw?].","error":"Options.stylusOptions.define[0] is not an array"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}