CoffeeStylesheets

0.0.5 verified Fri May 01 auth: no javascript deprecated

CoffeeStylesheets is an experimental transpiler that converts CoffeeScript function calls into CSS, similar to SASS/SCSS/LESS/Stylus but entirely CoffeeScript-based. Version 0.0.5 (no recent updates) is currently available on npm. It compiles to pure JavaScript concatenation without string parsing, offering faster template compilation than Stylus (claimed 90% faster). It is stand-alone with no dependencies, and allows using common JavaScript/CoffeeScript functions like require() within templates. However, the project has not been updated in years, and the package may be unstable or incomplete. It runs in both Node.js and browser environments.

Common errors

error TypeError: CoffeeStylesheets is not a constructor ↓

cause Import or require returns undefined or the default export is not correctly assigned.

fix

Use: const CoffeeStylesheets = require('coffee-stylesheets').default; or switch to ES6 import.

error undefined is not a function (evaluating 'engine.render(stylesheet)') ↓

cause engine is undefined because the constructor was called incorrectly (e.g., passing a boolean instead of object).

fix

Instantiate engine with an options object: new CoffeeStylesheets({ format: true }).

error Cannot find module 'coffee-script' ↓

cause The package requires CoffeeScript as a peer dependency but does not list it in package.json (or it is not installed).

fix

Install CoffeeScript: npm install coffee-script --save

Warnings

deprecated Package is unmaintained since 2013; may contain bugs and lacks modern CSS features. ↓

fix Consider using SASS/SCSS, Less, or Stylus instead.

gotcha The package is written for CoffeeScript; using it from JavaScript requires wrapping functions to match CoffeeScript syntax (e.g., implicit returns). ↓

fix Ensure all functions return the expected value, and use CoffeeScript-like function bodies or compile from .coffee files.

breaking The default export may not be available via CommonJS require; require('coffee-stylesheets') may return an empty object. ↓

fix Use import or access .default: const CoffeeStylesheets = require('coffee-stylesheets').default;

gotcha Constructor expects an options object; passing a single boolean argument (common in older examples) will cause unexpected behavior. ↓

fix Pass an object: new CoffeeStylesheets({ format: true }).

gotcha The CSS output may not be perfectly valid CSS3; vendor prefixes may be missing and some CSS properties may have different naming. ↓

fix Use established preprocessors for production CSS.

Install

npm install coffee-stylesheets

yarn add coffee-stylesheets

pnpm add coffee-stylesheets

Imports

CoffeeStylesheets
wrong
```
const CoffeeStylesheets = require('coffee-stylesheets')
```
correct
```
import CoffeeStylesheets from 'coffee-stylesheets'
```
CommonJS require may not work due to lack of proper module.exports; use ES6 import.
CoffeeStylesheets
wrong
```
let engine = new CoffeeStylesheets(true)
```
correct
```
let engine = new CoffeeStylesheets({ format: true })
```
Constructor takes an options object, not a boolean. Common mistake for new users.

CoffeeStylesheets

wrong

import { CoffeeStylesheets } from 'coffee-stylesheets'

correct

import CoffeeStylesheets from 'coffee-stylesheets'

This package exports a default function/class; named import will fail.

Quickstart

Demonstrates creating a CoffeeStylesheets engine with a global helper and rendering a stylesheet to CSS.

const CoffeeStylesheets = require('coffee-stylesheets').default || require('coffee-stylesheets');
const engine = new CoffeeStylesheets({
    format: true,
    globals: {
        px: (i) => i + 'px',
        border_radius: function(s) {
            return `
                -moz-border-radius: ${s};
                -webkit-border-radius: ${s};
                border-radius: ${s};
            `;
        }
    }
});
const stylesheet = () => {
    body(() => {
        background('black');
        color('red');
        p(() => {
            font_size('12px');
            border_radius(px(5));
        });
    });
};
console.log(engine.render(stylesheet));