@stitches/core

What is @stitches/core?

@stitches/core is a CSS-in-JS library that provides a performant, flexible, and feature-rich way to style your applications. It allows you to write CSS with JavaScript, offering features like theming, responsive design, and utility-first styling.

What are @stitches/core's main functionalities?

Styling Components

This feature allows you to create styled components using the `styled` function. You can define styles directly in your JavaScript code and apply them to HTML elements.

const { styled } = require('@stitches/core');

const Button = styled('button', {
  backgroundColor: 'blue',
  color: 'white',
  padding: '10px 20px',
  borderRadius: '5px',
  '&:hover': {
    backgroundColor: 'darkblue'
  }
});

Theming

Theming allows you to define different themes for your application. You can create multiple themes and switch between them dynamically.

const { createTheme } = require('@stitches/core');

const darkTheme = createTheme({
  colors: {
    background: 'black',
    text: 'white'
  }
});

const lightTheme = createTheme({
  colors: {
    background: 'white',
    text: 'black'
  }
});

Responsive Design

This feature allows you to define responsive styles using media queries. You can specify different styles for different screen sizes.

const { styled } = require('@stitches/core');

const Container = styled('div', {
  width: '100%',
  '@media (min-width: 768px)': {
    width: '50%'
  }
});

Utility-First Styling

Utility-first styling allows you to create utility classes that can be reused across your application. This promotes consistency and reduces the amount of CSS you need to write.

const { css } = require('@stitches/core');

const utilityClass = css({
  margin: '10px',
  padding: '20px',
  backgroundColor: 'lightgray'
});

Other packages similar to @stitches/core

styled-components

styled-components is another popular CSS-in-JS library that allows you to write actual CSS to style your components. It offers similar features like theming and dynamic styling but uses tagged template literals for defining styles.

emotion

Emotion is a performant and flexible CSS-in-JS library. It provides both a styled API and a css API, giving you the flexibility to choose how you want to style your components. It also supports theming and server-side rendering.

linaria

Linaria is a zero-runtime CSS-in-JS library. It allows you to write CSS in your JavaScript files but extracts the CSS at build time, resulting in no runtime overhead. It supports theming and dynamic styling.

README

Stitches Core

Near-zero runtime, server-side rendering, multi-variant support, and best-in-class developer experience.

Get started

npm install @stitches/core

import createCss from '@stitches/core'

const sheet = createCss({
  theme: {
    colors: {
      black: '#2f2f2f',
      white: '#f3f3f3',
    },
  },
})

const button = sheet.css({
  all: 'unset',
  boxShadow: '0 0 0 1px $black',
  backgroundColor: '$black',
  color: '$white',
  padding: '.5em 1em',
})

const alertButton = sheet.css(button, {
  boxShadow: '0 0 0 1px red',
})

console.log(`<button class="${button}">`) // html will include a unique class name for the button component
console.log(`<style>${sheet}</style>`) // css will include a unique rule for the button component

Configure an instance

import createCss from '@stitches/core'

export const { css } = createCss({
  // adds a prefix to all classnames to avoid clashes
  prefix: 'my-lib',

  // maps tokens to properties
  theme: {
    colors: {
      red: 'tomato',
    },
    space: {
      0: '1rem',
    },
  },

  // creates breakpoints with media queries
  conditions: {
    tablet: '@media (min-width: 700px)',
  },

  // creates or configures css properties
  utils: {
    mX: (value) => ({
      marginLeft: value,
      marginRight: value,
    }),
    mY: (value) => ({
      marginTop: value,
      marginBottom: value,
    }),
  },
})

css({
  // assigns a custom property that resolves `tomato`
  color: '$red',

  // assigns `0` to `margin-left` and `margin-right`
  marginX: 0,

  // assign "blue" when the breakpoint is matched
  when: {
    tablet: {
      color: 'blue',
    },
  },
})

Themes

Create themes to override defaults:

import createCss from '@stitches/core'

export const { css } = createCss({
  theme: {
    colors: {
      primary: 'tomato',
    },
  },
})

export const curiousTheme = css.theme({
  colors: {
    primary: 'pink',
  },
})