{"id":24973,"library":"babylon-plugin-cssx","title":"babylon-plugin-cssx","description":"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.","status":"deprecated","version":"1.0.2","language":"javascript","source_language":"en","source_url":"https://github.com/krasimir/babylon-plugin-cssx","tags":["javascript","babylon","css","cssx","transpile","plugin"],"install":[{"cmd":"npm install babylon-plugin-cssx","lang":"bash","label":"npm"},{"cmd":"yarn add babylon-plugin-cssx","lang":"bash","label":"yarn"},{"cmd":"pnpm add babylon-plugin-cssx","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Requires the Babylon parser as a peer dependency.","package":"babylon","optional":false}],"imports":[{"note":"The package is CommonJS but can be imported as default; using require is also valid but less common in modern JS.","wrong":"const babylonPluginCSSX = require('babylon-plugin-cssx')","symbol":"default","correct":"import babylonPluginCSSX from 'babylon-plugin-cssx'"}],"quickstart":{"code":"import babylon from 'babylon';\nimport cssxPlugin from 'babylon-plugin-cssx';\n\nconst code = `const styles = cssx`\n  .class {\n    color: red;\n  }\n``;\n\nconst ast = babylon.parse(code, {\n  plugins: ['cssx']\n});\n\nconsole.log(JSON.stringify(ast, null, 2));","lang":"javascript","description":"Demonstrates registering the cssx plugin with Babylon to parse a CSSX tagged template literal."},"warnings":[{"fix":"Migrate to @babel/parser and use @babel/plugin-syntax-cssx or equivalent.","message":"The babylon package has been deprecated in favor of @babel/parser. This plugin likely only works with the deprecated babylon package.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Add 'cssx' to the plugins list: babylon.parse(code, { plugins: ['cssx'] }).","message":"The plugin must be activated by including 'cssx' in the plugins array of babylon.parse options, otherwise CSSX syntax will cause parse errors.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Ensure you pass { plugins: ['cssx'] } as the second argument to babylon.parse().","cause":"The Babylon parser is not using the cssx plugin.","error":"SyntaxError: Unexpected token (1:14)"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}