{"id":19172,"library":"babel-plugin-stylus-compiler","title":"babel-plugin-stylus-compiler","description":"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.","status":"maintenance","version":"1.4.0","language":"javascript","source_language":"en","source_url":"https://github.com/jbwyme/babel-plugin-stylus-compiler","tags":["javascript","babel 6","stylus"],"install":[{"cmd":"npm install babel-plugin-stylus-compiler","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-stylus-compiler","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-stylus-compiler","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Compiles .styl files to CSS","package":"stylus","optional":false},{"reason":"Adds vendor prefixes to CSS output (since v1.3.0)","package":"autoprefixer","optional":true}],"imports":[{"note":"CommonJS require does not work with this plugin; must use ES module import syntax.","wrong":"const button_css = require('./buttons.styl')","symbol":"default import for CSS string","correct":"import button_css from './buttons.styl'"},{"note":"Importing without a variable injects a <style> tag into document.head.","wrong":"require('./buttons.styl')","symbol":"side-effect import for style injection","correct":"import './buttons.styl'"},{"note":"No query parameters supported; the plugin handles all .styl imports.","wrong":"import myCSS from './styles/theme.styl?string'","symbol":"import with custom variable","correct":"import myCSS from './styles/theme.styl'"}],"quickstart":{"code":"// Install: npm install babel-plugin-stylus-compiler stylus --save-dev\n// .babelrc\n{\n  \"plugins\": [\"babel-plugin-stylus-compiler\"]\n}\n\n// In your source file\nimport buttonStyles from './buttons.styl';\nconsole.log(buttonStyles); // string of compiled CSS\n\n// Or inject directly into head\nimport './buttons.styl';","lang":"javascript","description":"Demonstrates installing the plugin, configuring Babel, and importing a Stylus file as a CSS string or injecting it as a style tag."},"warnings":[{"fix":"Upgrade to a Babel 7 compatible plugin (e.g., styled-jsx or custom webpack loader) or stay on Babel 6.","message":"Only works with Babel 6; incompatible with Babel 7+.","severity":"breaking","affected_versions":"1.4.0"},{"fix":"Consider using a more modern build tool like webpack with stylus-loader and postcss-loader.","message":"Autoprefixer version may be outdated; no updates since 2017.","severity":"deprecated","affected_versions":">=1.3.0"},{"fix":"Ensure file extensions are .styl exactly.","message":"Stylus files must have .styl extension; other extensions not recognized.","severity":"gotcha","affected_versions":"all"},{"fix":"Use a different tool (e.g., CSS Modules with webpack) if scoped styles are needed.","message":"Plugin does not support CSS modules or scoped styles; CSS is global.","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run: npm install stylus --save-dev","cause":"Stylus dependency not installed.","error":"Module not found: Error: Cannot resolve module 'stylus'"},{"fix":"Downgrade to Babel 6 or use a modern alternative.","cause":"Using Babel 7 which expects a new plugin format.","error":"Error: The plugin 'babel-plugin-stylus-compiler' didn't export a Plugin instance"},{"fix":"Ensure @babel/preset-env or babel-preset-env is set up.","cause":"Using the plugin without proper Babel configuration for ES modules.","error":"SyntaxError: Unexpected token import"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}