babylon-plugin-cssx

1.0.2 verified Fri May 01 auth: no javascript deprecated

A plugin for the Babylon parser (fork of Babel parser) that enables parsing of CSSX syntax, allowing CSS to be embedded directly in JavaScript. Version 1.0.2 is the latest stable release. It is part of the CSSX family for transpiling CSS-in-JS. Provides integration with Babylon to handle CSS template literals.

Common errors

error SyntaxError: Unexpected token (1:14) ↓

cause The Babylon parser is not using the cssx plugin.

fix

Ensure you pass { plugins: ['cssx'] } as the second argument to babylon.parse().

Warnings

deprecated The babylon package has been deprecated in favor of @babel/parser. This plugin likely only works with the deprecated babylon package. ↓

fix Migrate to @babel/parser and use @babel/plugin-syntax-cssx or equivalent.

gotcha The plugin must be activated by including 'cssx' in the plugins array of babylon.parse options, otherwise CSSX syntax will cause parse errors. ↓

fix Add 'cssx' to the plugins list: babylon.parse(code, { plugins: ['cssx'] }).

Install

npm install babylon-plugin-cssx

yarn add babylon-plugin-cssx

pnpm add babylon-plugin-cssx

Imports

default
wrong
```
const babylonPluginCSSX = require('babylon-plugin-cssx')
```
correct
```
import babylonPluginCSSX from 'babylon-plugin-cssx'
```
The package is CommonJS but can be imported as default; using require is also valid but less common in modern JS.

Quickstart

Demonstrates registering the cssx plugin with Babylon to parse a CSSX tagged template literal.

import babylon from 'babylon';
import cssxPlugin from 'babylon-plugin-cssx';

const code = `const styles = cssx`
  .class {
    color: red;
  }
``;

const ast = babylon.parse(code, {
  plugins: ['cssx']
});

console.log(JSON.stringify(ast, null, 2));