Cabel

0.1.3 verified Fri May 01 auth: no javascript deprecated

Cabel is a CSSX transpiler that converts CSSX syntax into valid JavaScript. Version 0.1.3 is the latest release, but the project is deprecated; its functionality has been absorbed into the main CSSX project (https://github.com/krasimir/cssx). It was designed as a Babel plugin-like tool for transforming CSS-like stylesheets embedded in JavaScript. No active development, as all transpilation features are now maintained under the CSSX umbrella. Use cssx instead.

Common errors

error Cannot find module 'cabel' ↓

cause Missing install or deprecated package removed from registry.

fix

npm install cabel@0.1.3 --save

error cabel is not a function ↓

cause Using wrong import (e.g., named instead of default).

fix

Use 'import cabel from "cabel"' or 'cabel = require("cabel").default'

Warnings

deprecated Cabel is deprecated; functionality moved to CSSX project. ↓

fix Use https://github.com/krasimir/cssx instead.

gotcha Cabel only transpiles CSSX embedded in JS; it does not bundle or transform JSX. ↓

fix Use cssx for full transpilation pipeline.

breaking Version 0.1.0 changed the default export from transform function to a class. ↓

fix Update import to use default export as callable: cabel(code).

Install

npm install cabel

yarn add cabel

pnpm add cabel

Imports

default
wrong
```
const cabel = require('cabel')
```
correct
```
import cabel from 'cabel'
```
Cabel is ESM-only. CommonJS require will fail.

transform

wrong

const { transform } = require('cabel')

correct

import { transform } from 'cabel'

Escape require; tree-shakeable named export.

Cabel
wrong
```
import { Cabel } from 'cabel'
```
correct
```
import Cabel from 'cabel'
```
Default export is a class/function, not a named export.

Quickstart

Transforms CSSX syntax into JavaScript object literal.

import cabel from 'cabel';
const code = `
  const styles = {
    color: red,
    fontSize: 14px
  };
`;
const result = cabel(code);
console.log(result);
// => 'var styles = {\n  color: "red",\n  fontSize: "14px"\n};'