#css Template

The css template literal lets you write styles using plain CSS syntax.

#Basic Usage

import { css } from 'cssxjs'
import { Pressable, Text } from 'react-native'

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

  css`
    .button {
      padding: 12px 24px;
      background: #007bff;
      border-radius: 8px;
    }
    .text {
      color: white;
    }
  `
}

#When to Use

Use css instead of styl when you:

• Prefer standard CSS syntax
• Are migrating from another CSS-in-JS solution
• Want to copy/paste CSS from other sources
• Don't need Stylus features like variables or mixins

#Placement

Works the same as styl — inside a function for component-scoped styles, or at module level for shared styles:

import { View } from 'react-native'

// Module-level (shared)
css`
  .shared-button {
    padding: 12px 24px;
  }
`

function Card() {
  return <View styleName="card">...</View>

  // Function-level (scoped)
  css`
    .card {
      background: white;
      border-radius: 8px;
    }
  `
}

#Syntax

Standard CSS with all familiar features:

.button {
  padding: 12px 24px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 8px;
}

.button.primary {
  background-color: #0056b3;
}

.button.disabled {
  opacity: 0.5;
}

#The u Unit

The custom u unit works in css too:

.card {
  padding: 2u;        /* 16px */
  margin: 1u;         /* 8px */
  border-radius: 1u;  /* 8px */
}

#Supported Features

#Media Queries

.container {
  padding: 16px;
}

@media (max-width: 768px) {
  .container {
    padding: 8px;
  }
}

#CSS Variables

.button {
  background: var(--primary-color, #007bff);
  color: var(--text-color, white);
}

#Part Selectors

.button:part(icon) {
  color: red;
}

.button:part(text) {
  font-weight: bold;
}

#Limitations

The css template does not support:

• Stylus variables ($var)
• Stylus mixins
• Global styles/index.styl imports

For these features, use the styl template instead.

#Comparison

#See Also

• styl Template — Stylus syntax with variables and mixins
• styleName Prop — Connect elements to styles