cssx-transpiler

5.2.1 verified Fri May 01 auth: no javascript maintenance

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.

Common errors

error Error: Cannot find module 'cssx-transpiler' ↓

cause Package not installed or missing from node_modules.

fix

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

error TypeError: cssxTranspiler is not a function ↓

cause Using named import instead of default import.

fix

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

error SyntaxError: Unexpected token < ↓

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

fix

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

Warnings

gotcha The 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.

deprecated The 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.

gotcha The <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.

Install

npm install cssx-transpiler

yarn add cssx-transpiler

pnpm add cssx-transpiler

Imports

cssxTranspiler
wrong
```
const cssxTranspiler = require('cssx-transpiler')
```
correct
```
import cssxTranspiler from 'cssx-transpiler'
```
Default export only. ESM import works; CommonJS require is also supported.

ast

wrong

import { ast } from 'cssx-transpiler'

correct

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

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

reset

wrong

import { reset } from 'cssx-transpiler'

correct

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

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

Quickstart

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