stayedcss

Getting Started

Introduction Installation

Set Up

Basic Styles Styles with Use Client

Styles

Media Query Dark Mode Pseudo Classes Pseudo Elements Combinators

Community

Contribution Preview Code

Basic Styles

Example

The stayedcss function allows you to define styles in a simple and intuitive way, similar to writing traditional CSS. Instead of writing styles in a .css file, you define them as JavaScript objects. This keeps your styles co-located with your component logic.

import { st } from "stayedcss";

export default function Article() {
  return (
    <div className={style.container}>
      <div className={style.title}>title</div>
      <div className={style.content}>content</div>
    </div>
  );
}

const style = st({
  componentId: "components/docs/article",
  container: {
    marginBottom: 60,
  },
  title:{
    fontSize: 27,
  },
  content: {
    marginTop: 32,
    lineHeight: "1.5em",
  },
});

Structure

Property

Type

Description

componentId

string

A unique identifier for the component.

className

object

User-defined class names representing style objects. Fully customizable.

Recommended Component ID Format

1. Unique ID

Component IDs must be unique across your project. This is essential because the Component ID serves as the foundation for the generated class names in your styles. Even if multiple components define the same class names within their style objects, their content will not overlap as long as their Component IDs differ.

2. File Path

It is highly recommended to use the file path of the component as its ID. This approach allows the library to automatically generate CSS files aligned with the component's location. In case of any errors, this convention makes debugging significantly easier, as you can quickly trace the issue back to the relevant component.

Syntax

1. Write styles as object using camelCase

container: {
  backgroundColor: "black",
}

Style properties are defined in camelCase format instead of the kebab-case used in CSS.

2. Numeric values default to px

title: {
  fontSize: 27, // font-size: 27px;
  lineHeight: "1.5em", // line-height: 1.5em;
},

When a numeric value is provided without a unit, it is automatically interpreted as pixels. When a numeric value is provided without a unit, it is automatically interpreted as pixels. If you want to specify a different unit, provide the value as a string.

Available Properties for Default px

backdrop-filter

border-bottom-width

border-left-width

border-radius

border-right-width

border-top-width

border-width

bottom

flex-basis

font-size

grid-column-gap

grid-gap

grid-row-gap

height

inset

inset-block

inset-inline

left

margin

margin-bottom

margin-left

margin-right

margin-top

max-height

max-width

min-height

min-width

outline-width

padding

padding-bottom

padding-left

padding-right

padding-top

right

top

width

3. Use strings for multiple values with units

content: {
  margin: "16px 12px",
  padding: "12px 8px 16px 2px",
},

To define multiple values (e.g., for shorthand properties like padding), use a string and explicitly specify the unit for each value.

4. Multiple ClassName

content: {
  margin: "16px 12px",
  padding: "12px 8px 16px 2px",
},

To define multiple values (e.g., for shorthand properties like padding), use a string and explicitly specify the unit for each value.