Papunya

Papunya is a React Native styling library that incorporates many CSS-inspired features, including color schemes, custom properties, pseudo classes, styling based upon parent state and media, container and style queries.

Papunya is designed to be a low-level tool, and can be especially useful for developers building high-level styling solutions like component libraries. However, it may not be the best choice for everyday use due to its specialized focus.

Features

• Pseudo classes
• Conditional styling
• Custom properties (variables), w/ inheritance
• Color scheme
• Media queries
• Container media & style queries
• CSS functions
• Writing direction
• Styling children

Docs

StyleSheet

• Basic
• value()
• Variables
• Functions
• Media Queries
• Container Queries

Usage

import { Pressable } from "react-native";
import { stylesheet, Styled } from "papunya";

const StyledPressable = styled(Pressable);

const styles = stylesheet.create({
  padding: {
    padding: 10, // Values can be standard static RN values
  },
  margin: {
    margin: value(10), // or a value object
  },
  // Atoms can have any name
  brandColor: {
    color: value.hover("red"), // a fluent interface allows for conditional values
  },
  // Atoms can contain multiple styles
  container: {
    height: "50vh", // Papunya understands extra units
    width: "clamp(20rem, 30vw, 70rem)", // and also functions
  },
});

export function MyButton(props) {
  return (
    <StyledPressable
      styles={[atoms.padding, atoms.margin, atoms.brandColor, atoms.container]}
      {...props}
    />
  );
}

Why the name?

Papunya is short for Papunya Tula (wiki), a modern Australian Aboriginal art form and a recording of the Aboriginal visual language.

React Native Web

Papunya only offers a minimal web implementation, with a future version to offer CSS extraction.

Preprocessed styles

A preprocessed style is a style object annotated with a classname via the $$css property. At runtime the classname will be applied instead of the style object. It is the user's responsibility to ensure a stylesheet with the classname rule exists.

For Server Side Rendering we highly recommend using preprocessed styles.

const styles = stylesheet.create({
  padding: {
    $$css: "p-2",
    padding: 8,
  },
  text: {
    $$css: "text-red",
    color: "red",
  },
};

<View style={[styles.padding, style.text]} />

// outputs as

<div className="p-2 text-red" />

Inline styles

Inline styles will work as expected, however all value() attributes should be annotated with a classname and their rules declared in a user defined stylesheet.

<View style={{
  color: "red",
  padding: value(8, "p-2")
            .hover(12, "hover:p-3")
            .set(16, { hover: true, focus: true }, "hover:focus:p-4" )
}} />

// outputs as

<div className="p-2 hover:p-3 hover:focus:p-4" style={{ color: "red" }} />

Inspiration

Credit to Naman Goel and rest of the stylex team at Meta for inspiration for the API design.