Mixins (Upcoming)

We plan to support reusable style fragments through mixins, inspired by Sass. This feature is currently in development.

Mixins aim to let you define reusable groups of styles and include them inside other styles using a simple and expressive API.

Planned syntax

ts 

const center = {
  justifyContent: 'center',
  alignItems: 'center',
};

const styles = StyleSheet.create({
  container: {
    $include: center,
  },
});

Multiple mixins

ts 

const styles = StyleSheet.create({
  container: {
    $include: [center, fullSize],
  },
});

Override behavior

Styles defined after $include will override values coming from mixins — following a predictable merge order.

ts 

const styles = StyleSheet.create({
  container: {
    $include: center,
    justifyContent: 'flex-start', // overrides mixin
  },
});

Why not just use the spread operator?

You could achieve something similar using JavaScript’s spread syntax:

ts 
const styles = StyleSheet.create({
  container: {
    ...center,
    ...fullSize,
  },
});

However, mixins provide several advantages over simple object spreading:

  • Better intent: $include clearly communicates that styles are being reused, rather than merged manually.
  • Tooling support: Fluffle can process mixins internally, enabling future features like validation, composition rules, or dev warnings.
  • Predictable merging: Mixins follow a consistent resolution order, making overrides easier to reason about.
  • Extensibility: The mixin system can evolve (e.g. conditional styles, theming, variants) without changing userland code.
  • True composition: Mixins can include other mixins recursively, allowing you to build reusable style layers that scale cleanly across your app.

In short, while spreading works, mixins provide a more structured and scalable approach as your styling system grows.

Goals

  • Encourage reuse of style logic
  • Reduce duplication across components
  • Keep styles modular and maintainable

The API may evolve before release. Feedback and ideas are welcome.