{"id":27071,"library":"jassy","title":"jassy","description":"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.","status":"maintenance","version":"0.2.7","language":"javascript","source_language":"en","source_url":"https://github.com/nbrady-techempower/jassy","tags":["javascript","jassy","css","react","reactjs","jss"],"install":[{"cmd":"npm install jassy","lang":"bash","label":"npm"},{"cmd":"yarn add jassy","lang":"bash","label":"yarn"},{"cmd":"pnpm add jassy","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency for React integration","package":"react","optional":true},{"reason":"peer dependency for React integration","package":"react-dom","optional":true}],"imports":[{"note":"Named export, not default. jassy() returns a CSS string.","wrong":"import jassy from 'jassy'","symbol":"jassy","correct":"import { jassy } from 'jassy'"},{"note":"React component that injects a <style> tag. Named export.","wrong":"const Style = require('jassy').Style","symbol":"Style","correct":"import { Style } from 'jassy'"},{"note":"Not an import; used as a property in a style object to compose styles.","wrong":"","symbol":"mixin","correct":"mixin: otherStyleObj"}],"quickstart":{"code":"import { jassy } from 'jassy';\n\nconst myStyle = jassy({\n  '.btn': {\n    color: 'white',\n    backgroundColor: 'blue',\n    padding: 10,\n    ':hover': {\n      backgroundColor: 'darkblue'\n    },\n    '@media (max-width: 600px)': {\n      padding: 5\n    }\n  }\n});\n\n// Insert into DOM\nconst styleTag = document.createElement('style');\nstyleTag.textContent = myStyle;\ndocument.head.appendChild(styleTag);","lang":"typescript","description":"Demonstrates converting a JS object with nested rules, pseudo-selectors, and media queries into CSS string using jassy()."},"warnings":[{"fix":"Pin to exact version and test upgrades thoroughly.","message":"API is labeled beta and likely to change. No breaking changes documented; use with caution in production.","severity":"breaking","affected_versions":">=0.0.0"},{"fix":"Migrate to maintained alternatives like JSS or styled-components.","message":"Package not updated since 2017, React peer deps limited to 0.14/15. Incompatible with React 16+.","severity":"deprecated","affected_versions":">=0.0.0"},{"fix":"Use { jassy } in import statement.","message":"Import is named export 'jassy', not default. Common mistake: 'import jassy from \"jassy\"' fails.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Always specify units as strings (e.g., '1.5') for unitless properties.","message":"Numbers without units are treated as px. e.g. padding: 10 becomes padding:10px. May cause unexpected behavior for properties like lineHeight.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Place mixin before other properties to ensure correct override; test thoroughly.","message":"Mixin property merges styles, but order of precedence may be counterintuitive: mixin styles are applied before the containing object's own properties.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Use functional components with useEffect to append style tag, or migrate to alternative.","message":"Old React class component API using <Style> component. No hooks support.","severity":"deprecated","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Ensure jassy is installed: npm install jassy --save","cause":"Package not installed or import path incorrect.","error":"Module not found: Can't resolve 'jassy'"},{"fix":"Change to: import { jassy } from 'jassy'","cause":"Using default import instead of named import.","error":"Attempted import error: 'jassy' is not exported from 'jassy'"},{"fix":"Use named import: import { jassy } from 'jassy'","cause":"Default import (import jassy from 'jassy') returns undefined due to named export.","error":"Uncaught TypeError: jassy is not a function"},{"fix":"Ensure React and react-dom 0.14.x or 15.x are installed, or use jassy() directly to create a <style> tag.","cause":"Using <Style rules={...} /> with a React version that doesn't support custom <style> components.","error":"Warning: React does not recognize the `rules` prop on a DOM element"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}