Registry / serialization / cssx-transpiler

cssx-transpiler

library5.2.1jsnpmunverified

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.

serialization

npm install cssx-transpiler

github ↗package ↗

INSTALL

IMPORT

SIG · CSSX-TRANSPILER

cssx-transpiler

serializationjavascriptv5.2.1

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.

cssxTranspiler

✓ import cssxTranspiler from 'cssx-transpiler'

✗ const cssxTranspiler = require('cssx-transpiler')

Default export only. ESM import works; CommonJS require is also supported.

ast

✓ import cssxTranspiler from 'cssx-transpiler'; cssxTranspiler.ast(code)

✗ import { ast } from 'cssx-transpiler'

ast is a method on the default export, not a named export.

reset

✓ import cssxTranspiler from 'cssx-transpiler'; cssxTranspiler.reset()

✗ import { reset } from 'cssx-transpiler'

reset is a method on the default export, not a named export.

Transpiles a JavaScript file containing a <style> tag into an object literal representing the CSS.

import cssxTranspiler from 'cssx-transpiler'; import { readFileSync } from 'fs'; const code = readFileSync('./file.js', 'utf8'); // file.js contains: var styles = <style> body { margin: 10px; } </style>; const transpiled = cssxTranspiler(code, { minified: false }); console.log(transpiled); // Output: (function () { var _1 = {}, _2 = {}; _2['margin'] = '10px'; _1['body'] = _2; return _1; }.apply(this));

Debug

Known issues

gotchaThe transpiler uses unique IDs (_1, _2, etc.) which increase with each call. Use cssxTranspiler.reset() to reset the counter to avoid collisions.

fix

Call cssxTranspiler.reset() before each transpilation if running in a long-lived process.

affects: >=0.0.0

deprecatedThe package has not been updated since 2020. It may have compatibility issues with newer JavaScript syntax or environments.

fix

Consider alternatives like emotion or styled-components that offer similar CSS-in-JS solutions.

affects: >=5.2.1

gotchaThe <style> tag must be in the same file as the JavaScript code. The transpiler does not parse external CSS files.

fix

Ensure your CSSX code is inline in .js files.

affects: >=0.0.0

Errors

Common errors & fixes

Error: Cannot find module 'cssx-transpiler'

Package not installed or missing from node_modules.

fix

Run 'npm install cssx-transpiler -D' in your project directory.

TypeError: cssxTranspiler is not a function

Using named import instead of default import.

fix

Use 'import cssxTranspiler from 'cssx-transpiler'' instead of '{ cssxTranspiler }'.

SyntaxError: Unexpected token <

The code contains a <style> tag but the transpiler has not been applied yet.

fix

Run the code through cssxTranspiler() before executing or bundling.

Upgrade

Version history

5.2.1latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

8 hits · last 30 days

node

Resources

githubhttps://github.com/krasimir/cssx ↗

packagehttps://www.npmjs.com/package/cssx-transpiler ↗