@stylezjs/postcss-plugin

@stylezjs/postcss-plugin is a PostCSS plugin for integrating @stylezjs/stylez to generate static CSS styles. Stylez → 'Z' of Zero Runtime.

Installation

To use @stylezjs/stylez, you'll need to install both the package and the PostCSS plugin:

pnpm add @stylezjs/stylez @stylezjs/postcss-plugin

or with npm:

npm install @stylezjs/stylez @stylezjs/postcss-plugin

or with yarn:

yarn add @stylezjs/stylez @stylezjs/postcss-plugin

Setup PostCSS

To enable @stylezjs/postcss-plugin, you need to configure your postcss.config.js file:

export default {
  plugins: {
    '@stylezjs/postcss-plugin': {
      patterns: ['src/**/*.{js,ts,jsx,tsx}'],
    },
  },
};

Usage

Creating and using styles

You can now create dynamic CSS class names and apply them to your React components.

import * as stylez from '@stylezjs/stylez';

// Define styles
const styles = stylez.create({
  color: 'red',
  fontSize: '16px',
  '&::before': {
    height: '100%',
    color: 'red',
  },
});

// Apply class names to your component
const Home = () => (
  <div {...stylez.className(styles)}>
    Remember to keep a clear head in difficult times!
  </div>
);

export default Home;

Global Styles

In order for @stylezjs to work correctly, include the @stylez directive in your global CSS file. Create a .css file, for example globals.css, and add the following at the top:

@stylez;

Then, import this CSS file into your project, ideally in your root file (e.g., index.tsx or App.tsx):

import './globals.css';