https://github.com/codemask-labs/stylik
https://github.com/codemask-labs/stylik
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/codemask-labs/stylik
- Owner: codemask-labs
- License: mit
- Created: 2024-11-17T18:39:27.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-28T12:54:55.000Z (over 1 year ago)
- Last Synced: 2025-03-27T23:33:02.393Z (over 1 year ago)
- Language: TypeScript
- Size: 226 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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:
```bash
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:
```ts
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.
```ts
import { StyleSheet } from '@codemask-labs/stylik'
StyleSheet.configure({
theme,
breakpoints,
})
```
```ts
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
```tsx
import { StyleSheet } from '@codemask-labs/stylik'
const App = () => (
Meet stylik!
Minimal CSS-in-JS library
)
const styles = StyleSheet.create(theme => ({
wrapper: {
padding: 16
},
}))
```