#styl Template

The styl template literal lets you write styles using Stylus syntax.

#Basic Usage

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

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

  styl`
    .button
      padding 12px 24px
      background #007bff
      border-radius 8px
    .text
      color white
  `
}

#Placement

Inside a function — styles are scoped to that component:

import { View } from 'react-native'

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

  styl`
    .card
      background white
  `
}

At module level — styles are shared across all components in the file:

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

styl`
  .shared-button
    padding 12px 24px
`

function ButtonA() {
  return (
    <Pressable styleName="shared-button">
      <Text>A</Text>
    </Pressable>
  )
}

function ButtonB() {
  return (
    <Pressable styleName="shared-button">
      <Text>B</Text>
    </Pressable>
  )
}

#Stylus Syntax

#Minimal Syntax

Braces, colons, and semicolons are optional:

// All equivalent:
.box
  padding 16px
  margin 8px

.box {
  padding: 16px;
  margin: 8px;
}

.box { padding: 16px; margin: 8px }

#Parent Reference (&)

Use & to reference the parent selector:

.button
  background blue
  &.primary
    background green
  &.disabled
    opacity 0.5

Compiles to .button.primary, .button.disabled.

#Variables

Define and use Stylus variables:

$primary = #007bff
$spacing = 16px

.button
  background $primary
  padding $spacing

#Mixins

Define reusable style patterns:

flex-center()
  display flex
  align-items center
  justify-content center

.container
  flex-center()
  padding 16px

#Global Configuration

Create styles/index.styl in your project root. This file is automatically imported into every styl block:

// styles/index.styl

// Variables
$primary = #007bff
$spacing-md = 16px

// Mixins
flex-center()
  display flex
  align-items center
  justify-content center

// Global helper classes
.text-center
  text-align center

Use anywhere in your app:

styl`
  .card
    padding $spacing-md
    background $primary
    flex-center()
`

#The u Unit

CSSX adds a custom u unit where 1u = 8px (Material Design grid):

.card
  padding 2u        // 16px
  margin 1u         // 8px
  gap 0.5u          // 4px
  border-radius 1u  // 8px

#Supported CSS Features

#Media Queries

.container
  padding 16px

  @media (max-width: 768px)
    padding 8px

#Viewport Units

.hero
  height 100vh
  width 100vw

#CSS Variables

.button
  background var(--primary-color, #007bff)
  color var(--text-color, white)

See CSS Variables for runtime variable updates.

#Selectors

Note: Descendant selectors (.parent .child) are not supported. Apply modifiers directly to each element that needs styling.

Note: Pseudo-classes (:hover, :focus, :active, etc.) and pseudo-elements (::before, ::after) are not supported. Use state-based modifiers instead (e.g., &.focused, &.active).

#Part Selector

Target internal parts of child components:

.button:part(icon)
  color red

.button:part(text)
  font-weight bold

Single colon shorthand also works: .button:part(icon)

See Component Parts for details.

#Style Priority

When the same property is defined in multiple places (highest to lowest):

1. Inline style prop
2. Local styles (styl inside function)
3. Global styles (styl at module level)
4. File styles (imported .cssx.styl files)

#Limitations

• No expression interpolations: styl`color ${color}` is not allowed
• Must be a plain template literal
• For dynamic values, use CSS variables or the style prop

#See Also

• css Template — Plain CSS alternative
• styl() Function — Apply styles via spread
• styleName Prop — Connect elements to styles