Registry / web-framework / babel-plugin-stylus-compiler

babel-plugin-stylus-compiler

library1.4.0jsnpmunverified

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.

web-framework

npm install babel-plugin-stylus-compiler

github ↗package ↗

INSTALL

IMPORT

SIG · BABEL-PLUGIN-STYLU

babel-plugin-stylus-compiler

web-frameworkjavascriptv1.4.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default import for CSS string

✓ import button_css from './buttons.styl'

✗ const button_css = require('./buttons.styl')

CommonJS require does not work with this plugin; must use ES module import syntax.

side-effect import for style injection

✓ import './buttons.styl'

✗ require('./buttons.styl')

Importing without a variable injects a <style> tag into document.head.

import with custom variable

✓ import myCSS from './styles/theme.styl'

✗ import myCSS from './styles/theme.styl?string'

No query parameters supported; the plugin handles all .styl imports.

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';

Debug

Known issues

breakingOnly 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.

affects: 1.4.0

deprecatedAutoprefixer version may be outdated; no updates since 2017.

fix

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

affects: >=1.3.0

gotchaStylus files must have .styl extension; other extensions not recognized.

fix

Ensure file extensions are .styl exactly.

affects: all

gotchaPlugin 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.

affects: all

Errors

Common errors & fixes

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

Stylus dependency not installed.

fix

Run: npm install stylus --save-dev

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

Using Babel 7 which expects a new plugin format.

fix

Downgrade to Babel 6 or use a modern alternative.

SyntaxError: Unexpected token import

Using the plugin without proper Babel configuration for ES modules.

fix

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

Upgrade

Version history

1.4.0latest on npm

Audit

Dependencies

stylusrequiredCompiles .styl files to CSS

autoprefixeroptionalAdds vendor prefixes to CSS output (since v1.3.0)

Agent activity

9 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/jbwyme/babel-plugin-stylus-compiler ↗

packagehttps://www.npmjs.com/package/babel-plugin-stylus-compiler ↗