{"id":25149,"library":"cssx-transpiler","title":"cssx-transpiler","description":"A transpiler that converts CSSX syntax (<style> tags) inside JavaScript code into valid JavaScript object literals. Version 5.2.1, last updated in 2020, with no recent releases. It transforms CSS-like expressions to JSON structures, supports nested media queries, duplicate property handling, and options for minified, compact, or concise output. Primarily used with the CSSX ecosystem for styling in JavaScript.","status":"maintenance","version":"5.2.1","language":"javascript","source_language":"en","source_url":"https://github.com/krasimir/cssx/tree/master/packages/cssx-transpiler","tags":["javascript","css","cssx","transpiler","json"],"install":[{"cmd":"npm install cssx-transpiler","lang":"bash","label":"npm"},{"cmd":"yarn add cssx-transpiler","lang":"bash","label":"yarn"},{"cmd":"pnpm add cssx-transpiler","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Default export only. ESM import works; CommonJS require is also supported.","wrong":"const cssxTranspiler = require('cssx-transpiler')","symbol":"cssxTranspiler","correct":"import cssxTranspiler from 'cssx-transpiler'"},{"note":"ast is a method on the default export, not a named export.","wrong":"import { ast } from 'cssx-transpiler'","symbol":"ast","correct":"import cssxTranspiler from 'cssx-transpiler'; cssxTranspiler.ast(code)"},{"note":"reset is a method on the default export, not a named export.","wrong":"import { reset } from 'cssx-transpiler'","symbol":"reset","correct":"import cssxTranspiler from 'cssx-transpiler'; cssxTranspiler.reset()"}],"quickstart":{"code":"import cssxTranspiler from 'cssx-transpiler';\nimport { readFileSync } from 'fs';\n\nconst code = readFileSync('./file.js', 'utf8');\n// file.js contains: var styles = <style> body { margin: 10px; } </style>;\n\nconst transpiled = cssxTranspiler(code, { minified: false });\nconsole.log(transpiled);\n// Output: (function () { var _1 = {}, _2 = {}; _2['margin'] = '10px'; _1['body'] = _2; return _1; }.apply(this));\n","lang":"javascript","description":"Transpiles a JavaScript file containing a <style> tag into an object literal representing the CSS."},"warnings":[{"fix":"Call cssxTranspiler.reset() before each transpilation if running in a long-lived process.","message":"The transpiler uses unique IDs (_1, _2, etc.) which increase with each call. Use cssxTranspiler.reset() to reset the counter to avoid collisions.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Consider alternatives like emotion or styled-components that offer similar CSS-in-JS solutions.","message":"The package has not been updated since 2020. It may have compatibility issues with newer JavaScript syntax or environments.","severity":"deprecated","affected_versions":">=5.2.1"},{"fix":"Ensure your CSSX code is inline in .js files.","message":"The <style> tag must be in the same file as the JavaScript code. The transpiler does not parse external CSS files.","severity":"gotcha","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":"Run 'npm install cssx-transpiler -D' in your project directory.","cause":"Package not installed or missing from node_modules.","error":"Error: Cannot find module 'cssx-transpiler'"},{"fix":"Use 'import cssxTranspiler from 'cssx-transpiler'' instead of '{ cssxTranspiler }'.","cause":"Using named import instead of default import.","error":"TypeError: cssxTranspiler is not a function"},{"fix":"Run the code through cssxTranspiler() before executing or bundling.","cause":"The code contains a <style> tag but the transpiler has not been applied yet.","error":"SyntaxError: Unexpected token <"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}