stylik ✏️

Minimal CSS-in-JS library

Features

• ✍️ Simple configuration
• 💅 Minimal API
• 💪 TypeScript support
• 🌈 Media queries and pseudo selectors
• 📦 Astro integration

Installation

Install package using preferred package manager:

npm install @codemask-labs/stylik
yarn add @codemask-labs/stylik
pnpm add @codemask-labs/stylik
bun add @codemask-labs/stylik

Getting started

Configuration

Create theme, breakpoints and override stylik types:

export const theme = {
    colors: {
        error: '#FF0000',
        white: '#FFFFFF',
        black: '#000000',
    },
} as const

export const breakpoints = {
    xs: 0,
    md: 992,
    lg: 1920,
} as const

export type Breakpoints = typeof breakpoints
export type Theme = typeof theme

declare module '@codemask-labs/stylik' {
    interface StylikTheme extends Theme {}
    interface StylikBreakpoints extends Breakpoints {}
}

Configure stylik using StyleSheet.configure or built in Astro integration.

import { StyleSheet } from '@codemask-labs/stylik'

StyleSheet.configure({
    theme,
    breakpoints,
})

import { defineConfig } from 'astro/config'
import { stylik } from '@codemask-labs/stylik/astro'
import { breakpoints, theme } from './src/lib/styles'

export default defineConfig({
    integrations: [
        stylik({
            breakpoints,
            theme,
        }),
    ]
})

And configuration is done!

Styling

import { StyleSheet } from '@codemask-labs/stylik'

const App = () => (
    <div className={styles.wrapper}>
        <h1>Meet stylik!</h1>
        <div className={styles.wrapper({ fontSize: 32 })}>
            Minimal CSS-in-JS library
        </div>
    </div>
)

const styles = StyleSheet.create(theme => ({
    wrapper: {
        padding: 16
    },
}))