CSSX Babel Preset

0.2.32 verified Sat Apr 25 auth: no javascript

A Babel preset for compiling CSSX, a CSS-in-JS syntax extension that allows writing CSS directly in JavaScript/JSX files. Version 0.2.32 is a pre-1.0 release with no regular release cadence. It strips CSSX syntax during transpilation, outputting plain JavaScript. Differentiates from other CSS-in-JS libraries by using a custom parser/tokenizer rather than template literals. Limited adoption and documentation.

Common errors

error Error: Cannot find module 'cssxjs' ↓

cause Missing runtime dependency cssxjs.

fix

Run: npm install cssxjs

error Error: Preset requires a function or object, got 'undefined' ↓

cause Incorrect import or misconfigured preset.

fix

Use require('babel-preset-cssxjs') directly, not default property.

Warnings

breaking Breaking changes in unpublished versions: no changelog; treat minor bumps as breaking. ↓

fix Pin to exact version and test after every update.

gotcha Preset requires runtime dependency 'cssxjs' for parsing; ensure it is installed. ↓

fix Install cssxjs: npm install cssxjs

deprecated Babel 6 support dropped; use Babel 7+. ↓

fix Upgrade to Babel 7 and latest preset version.

Install

npm install babel-preset-cssxjs

yarn add babel-preset-cssxjs

pnpm add babel-preset-cssxjs

Imports

default (preset)
wrong
```
import preset from 'babel-preset-cssxjs'
```
correct
```
module.exports = { presets: ['babel-preset-cssxjs'] }
```
This package is a CJS preset and should be used in Babel config, not imported directly.

require

wrong

const babelPresetCssxjs = require('babel-preset-cssxjs').default

correct

const babelPresetCssxjs = require('babel-preset-cssxjs')

The preset is exported as a function, no default property.

ESM import (rarely used)

wrong

import { babelPresetCssxjs } from 'babel-preset-cssxjs'

correct

import babelPresetCssxjs from 'babel-preset-cssxjs'

Named import is incorrect; use default import.

Quickstart

Shows how to configure the preset in .babelrc and run Babel with the preset.

// .babelrc
{
  "presets": [
    ["babel-preset-cssxjs", {}]
  ]
}

// Then run: npx babel --presets=babel-preset-cssxjs input.js -o output.js