jassy

0.2.7 verified Fri May 01 auth: no javascript maintenance

jassy is a runtime JavaScript-to-CSS transpiler that converts JS objects into CSS strings at runtime. Current stable version is 0.2.7, released with low cadence and marked as beta with an unstable API. It supports nested rules (like Sass/Less), auto-prefixing, media queries, mixins, and font-face declarations. Primarily designed for React projects with peer dependencies on React 0.14/15. Alternative to JSS or styled-components but with a simpler, object-based syntax; however, it is largely outdated and not maintained.

Common errors

error Module not found: Can't resolve 'jassy' ↓

cause Package not installed or import path incorrect.

fix

Ensure jassy is installed: npm install jassy --save

error Attempted import error: 'jassy' is not exported from 'jassy' ↓

cause Using default import instead of named import.

fix

Change to: import { jassy } from 'jassy'

error Uncaught TypeError: jassy is not a function ↓

cause Default import (import jassy from 'jassy') returns undefined due to named export.

fix

Use named import: import { jassy } from 'jassy'

error Warning: React does not recognize the `rules` prop on a DOM element ↓

cause Using <Style rules={...} /> with a React version that doesn't support custom <style> components.

fix

Ensure React and react-dom 0.14.x or 15.x are installed, or use jassy() directly to create a <style> tag.

Warnings

breaking API is labeled beta and likely to change. No breaking changes documented; use with caution in production. ↓

fix Pin to exact version and test upgrades thoroughly.

deprecated Package not updated since 2017, React peer deps limited to 0.14/15. Incompatible with React 16+. ↓

fix Migrate to maintained alternatives like JSS or styled-components.

gotcha Import is named export 'jassy', not default. Common mistake: 'import jassy from "jassy"' fails. ↓

fix Use { jassy } in import statement.

gotcha Numbers without units are treated as px. e.g. padding: 10 becomes padding:10px. May cause unexpected behavior for properties like lineHeight. ↓

fix Always specify units as strings (e.g., '1.5') for unitless properties.

gotcha Mixin property merges styles, but order of precedence may be counterintuitive: mixin styles are applied before the containing object's own properties. ↓

fix Place mixin before other properties to ensure correct override; test thoroughly.

deprecated Old React class component API using <Style> component. No hooks support. ↓

fix Use functional components with useEffect to append style tag, or migrate to alternative.

Install

npm install jassy

yarn add jassy

pnpm add jassy

Imports

jassy
wrong
```
import jassy from 'jassy'
```
correct
```
import { jassy } from 'jassy'
```
Named export, not default. jassy() returns a CSS string.
Style
wrong
```
const Style = require('jassy').Style
```
correct
```
import { Style } from 'jassy'
```
React component that injects a <style> tag. Named export.
mixin
```
mixin: otherStyleObj
```
Not an import; used as a property in a style object to compose styles.

Quickstart

Demonstrates converting a JS object with nested rules, pseudo-selectors, and media queries into CSS string using jassy().

import { jassy } from 'jassy';

const myStyle = jassy({
  '.btn': {
    color: 'white',
    backgroundColor: 'blue',
    padding: 10,
    ':hover': {
      backgroundColor: 'darkblue'
    },
    '@media (max-width: 600px)': {
      padding: 5
    }
  }
});

// Insert into DOM
const styleTag = document.createElement('style');
styleTag.textContent = myStyle;
document.head.appendChild(styleTag);