stylus-standalone

0.1.0 verified Fri May 01 auth: no javascript abandoned

Stylus-standalone is a standalone browser-ready build of the Stylus CSS preprocessor, allowing you to compile Stylus code directly in the browser without Node.js or a build step. Version 0.1.0 is the initial release, and the package appears to be experimental with no further updates. It provides a single script tag inclusion via CDN, making it easy to experiment with Stylus in HTML. However, it lacks TypeScript definitions, active maintenance, and common developer tooling. Compared to the official stylus package, this is a minimal wrapper that exposes the compiler globally, suitable only for quick prototyping or educational use.

Common errors

error stylus is not defined ↓

cause Script tag not loaded before usage.

fix

Ensure <script src="https://unpkg.com/stylus-standalone"></script> is placed before your code.

error Cannot read property 'render' of undefined ↓

cause Trying to use stylus as a function without proper invocation.

fix

Use stylus.render() directly, not stylus().render().

error TypeError: callback is not a function ↓

cause Missing callback argument in render call.

fix

Always provide a callback: stylus.render(str, opts, (err, css) => {...})

Warnings

gotcha The package is not maintained and may not work with modern browsers. ↓

fix Consider using the official stylus package with a build tool.

breaking Callback-based API only; promises not supported. ↓

fix Wrap calls in a promise: new Promise((resolve, reject) => stylus.render(str, opts, (e,r) => e ? reject(e) : resolve(r)))

deprecated Package likely uses outdated stylus version and may have unpatched security issues. ↓

fix Use stylus package via npm instead.

Install

npm install stylus-standalone

yarn add stylus-standalone

pnpm add stylus-standalone

Imports

stylus

wrong

import stylus from 'stylus-standalone'

correct

<!-- Include via script tag -->
<script src="https://unpkg.com/stylus-standalone"></script>
<!-- then use window.stylus -->

This package is not ESM-compatible; it exports a global stylus object.

stylus.render
wrong
```
stylus.render(str, options)
```
correct
```
stylus.render(str, options, callback)
```
Callback is required; returns undefined.
stylus(str)
wrong
```
stylus(str).render()
```
correct
```
stylus(str).render(callback)
```
The stylus function returns a Renderer instance with a .render method that takes a callback.

Quickstart

Demonstrates in-browser Stylus compilation using a script tag and the global stylus object with callback.

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/stylus-standalone"></script>
</head>
<body>
  <script>
    const stylusCode = `
      body
        font-family sans-serif
        color #333
    `;
    stylus.render(stylusCode, { compress: true }, (err, css) => {
      if (err) console.error(err);
      else {
        const style = document.createElement('style');
        style.textContent = css;
        document.head.appendChild(style);
      }
    });
  </script>
</body>
</html>