StayedCSS: A CSS Library for Next.js App Router, Supporting Both Server and Client Components

Introduction to StayedCSS

Hello! I’m excited to introduce StayedCSS, a static CSS library built specifically for the Next.js App Router. It fully supports both server and client components while providing a simple and intuitive syntax.

Why I Created StayedCSS

With the introduction of the Next.js App Router, the distinction between server and client components became clearer, and I wanted to create a library specifically designed for the App Router version. StayedCSS generates static CSS, ensuring reliable styling.

---

Main Features

1. Automatic Static CSS Generation

StayedCSS automatically creates a stayedcss folder in the project’s root directory and generates CSS files for each component. Since styles are pre-generated at build time, it provides seamless rendering without flickering.

2. Supports Both Server and Client Components

It works perfectly with both server components and client components (with use client) in the Next.js App Router.

3. Familiar CSS Syntax

StayedCSS uses the same syntax as standard CSS, meaning you can define styles naturally without learning a new syntax. Classes are automatically generated, making adoption effortless.

4. Comprehensive Styling Features

• Pseudo-classes and Pseudo-elements: Supports :hover, :focus, ::before, ::after, and more.
• Media Queries: Easily implement responsive designs.
• Dark Mode Support: Enables smooth dark mode transitions without flickering, enhancing the user experience.

5. Component-Based Style Management

StayedCSS manages styles using a componentId, ensuring that each component's CSS is neatly organized. This makes debugging and maintenance much simpler.

6. Lightweight and Efficient

I designed StayedCSS to be lightweight, removing unnecessary overhead and ensuring easy integration with your Next.js projects.

---

Usage Example

import { st } from "stayedcss";

const styles = st({
  componentId: "components/example",
  container: {
    backgroundColor: "black",
    padding: "20px",
  },
  title: {
    fontSize: "24px",
    color: "white",
  },
});

export default function Example() {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>Hello StayedCSS</h1>
    </div>
  );
}

For detailed usage instructions, check out the documentation.

---

Your Feedback is Important!

vectordxy / stayedcss

🎨 CSS library for Next.js App Router

StayedCSS: The CSS library for Next.js App Router

Introduction

StayedCSS - beta version

StayedCSS is a static CSS library designed for Next.js App Router, offering full support for both server and client components. With a simple syntax similar to basic CSS, it enables efficient styling and aims to be the next-generation CSS library for the Next.js App Router.

Currently in its beta version, StayedCSS is rapidly improving in optimization and stability. It will continue to evolve to deliver a better styling experience for your projects.

Main Features

• Server and Client Component Support: Apply styles seamlessly to server and client components in the Next.js App Router environment.
• Various Styling Options: Supports various CSS styles such as :hover, ::after, and ~ p.
• Media Queries: Simplify responsive design implementation.
• Dark Mode: Offers flicker-free dark mode transitions.

Getting Started

Installation

npm install stayedcss
# or
yarn

…

View on GitHub

StayedCSS is currently in beta, and I’m continuously working on optimizations and improvements. Your feedback is incredibly valuable!

Give StayedCSS a try, and let me know your thoughts, suggestions, or ideas. I’d love to hear from you and make StayedCSS even better! 🚀