jassy

library0.2.7jsnpmunverified

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.

web-framework

npm install jassy

github ↗package ↗

INSTALL

IMPORT

SIG · JASSY

jassy

web-frameworkjavascriptv0.2.7

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

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

jassy

✓ import { jassy } from 'jassy'

✗ import jassy from 'jassy'

Named export, not default. jassy() returns a CSS string.

Style

✓ import { Style } from 'jassy'

✗ const Style = require('jassy').Style

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.

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

Debug

Known issues

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

affects: >=0.0.0

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

affects: >=0.0.0

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

fix

Use { jassy } in import statement.

affects: >=0.0.0

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

affects: >=0.0.0

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

affects: >=0.0.0

deprecatedOld React class component API using <Style> component. No hooks support.

fix

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

affects: >=0.0.0

Errors

Common errors & fixes

Module not found: Can't resolve 'jassy'

Package not installed or import path incorrect.

fix

Ensure jassy is installed: npm install jassy --save

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

Using default import instead of named import.

fix

Change to: import { jassy } from 'jassy'

Uncaught TypeError: jassy is not a function

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

fix

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

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

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.

Upgrade

Version history

0.2.7latest on npm

Audit

Dependencies

reactoptionalpeer dependency for React integration

react-domoptionalpeer dependency for React integration

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/nbrady-techempower/jassy ↗

packagehttps://www.npmjs.com/package/jassy ↗