CSSX

    Installation

    Install the Package

    npm
    yarn
    pnpm
    bun
    deno
    npm install cssxjs

    Configure Babel

    Add the CSSX preset to your babel.config.js:

    // babel.config.js
module.exports = function (api) {
  api.cache(true)
  return {
    presets: [
      'babel-preset-expo', // or your existing preset
      'cssxjs/babel'
    ]
  }
}

    The default options work for most projects. See Babel Options for advanced configuration.

    Verify Installation

    Create a simple component to verify everything works:

    // App.jsx
import { styl } from 'cssxjs'
import { View, Text } from 'react-native'

export default function App() {
  return (
    <View styleName="container">
      <Text styleName="title">CSSX is working!</Text>
    </View>
  )

  styl`
    .container
      flex 1
      justify-content center
      align-items center
      background-color #f5f5f5
    .title
      font-size 24px
      color #333
  `
}

    Run your app and you should see the styled component.

    Separate Style Files (Optional)

    While inline styl blocks are recommended (easier composition, colocation with components), you can also use separate style files.

    Files must be named with the .cssx.styl extension:

    components/
  Button.jsx
  Button.cssx.styl    ← Will be processed by CSSX
  Card.styl           ← NOT processed (missing .cssx prefix)

    Import styles in your component:

    import './Button.cssx.styl'
import { Pressable, Text } from 'react-native'

function Button({ children }) {
  return (
    <Pressable styleName="button">
      <Text styleName="text">{children}</Text>
    </Pressable>
  )
}

    Metro Config for Hot Reloading (Optional)

    If you want .cssx.styl files to hot-reload during development, add the Metro config:

    // metro.config.js
const { getDefaultConfig } = require('cssxjs/metro-config')

module.exports = getDefaultConfig(__dirname)

    With an existing Metro config:

    // metro.config.js
const { getDefaultConfig: getExpoConfig } = require('expo/metro-config')
const { getDefaultConfig } = require('cssxjs/metro-config')

const upstreamConfig = getExpoConfig(__dirname)

module.exports = getDefaultConfig(__dirname, { upstreamConfig })

    Note: Metro config is only needed for hot-reloading separate .cssx.styl files. Inline styl blocks work without it.

    Web Support

    CSSX is designed primarily for React Native and Expo projects. On web, it works seamlessly through react-native-web — if you're using Expo, web support is included automatically.

    Pure React Web Projects

    You can also use CSSX in pure React web projects (without React Native). Just add the Babel preset as shown above. If you use separate .cssx.styl files, configure your bundler (webpack, Vite, etc.) to watch for changes in those files for hot reloading.

    TypeScript Support

    CSSX is written in JavaScript but works seamlessly with TypeScript. The styl and pug template literals are typed to accept template strings.

    For better IDE support with Stylus syntax, consider installing the Stylus language extension for your editor.

    Next Steps