babel-plugin-stylus-compiler

1.4.0 verified Sat Apr 25 auth: no javascript maintenance

A Babel 6 plugin that compiles Stylus (.styl) files into CSS strings during build, enabling CSS imports in JavaScript. Current version 1.4.0. It supports importing stylus files as variables or as style tag injection. Key differentiators: simple Babel integration, automatic dependency resolution from node_modules, and built-in autoprefixer (since v1.3.0). However, it is designed for Babel 6 and may not work with Babel 7+ without compatibility adjustments. Not actively maintained, last release in 2017.

Common errors

error Module not found: Error: Cannot resolve module 'stylus' ↓

cause Stylus dependency not installed.

fix

Run: npm install stylus --save-dev

error Error: The plugin 'babel-plugin-stylus-compiler' didn't export a Plugin instance ↓

cause Using Babel 7 which expects a new plugin format.

fix

Downgrade to Babel 6 or use a modern alternative.

error SyntaxError: Unexpected token import ↓

cause Using the plugin without proper Babel configuration for ES modules.

fix

Ensure @babel/preset-env or babel-preset-env is set up.

Warnings

breaking Only works with Babel 6; incompatible with Babel 7+. ↓

fix Upgrade to a Babel 7 compatible plugin (e.g., styled-jsx or custom webpack loader) or stay on Babel 6.

deprecated Autoprefixer version may be outdated; no updates since 2017. ↓

fix Consider using a more modern build tool like webpack with stylus-loader and postcss-loader.

gotcha Stylus files must have .styl extension; other extensions not recognized. ↓

fix Ensure file extensions are .styl exactly.

gotcha Plugin does not support CSS modules or scoped styles; CSS is global. ↓

fix Use a different tool (e.g., CSS Modules with webpack) if scoped styles are needed.

Install

npm install babel-plugin-stylus-compiler

yarn add babel-plugin-stylus-compiler

pnpm add babel-plugin-stylus-compiler

Imports

default import for CSS string
wrong
```
const button_css = require('./buttons.styl')
```
correct
```
import button_css from './buttons.styl'
```
CommonJS require does not work with this plugin; must use ES module import syntax.
side-effect import for style injection
wrong
```
require('./buttons.styl')
```
correct
```
import './buttons.styl'
```
Importing without a variable injects a <style> tag into document.head.
import with custom variable
wrong
```
import myCSS from './styles/theme.styl?string'
```
correct
```
import myCSS from './styles/theme.styl'
```
No query parameters supported; the plugin handles all .styl imports.

Quickstart

Demonstrates installing the plugin, configuring Babel, and importing a Stylus file as a CSS string or injecting it as a style tag.

// Install: npm install babel-plugin-stylus-compiler stylus --save-dev
// .babelrc
{
  "plugins": ["babel-plugin-stylus-compiler"]
}

// In your source file
import buttonStyles from './buttons.styl';
console.log(buttonStyles); // string of compiled CSS

// Or inject directly into head
import './buttons.styl';