feat: add panda-css integration for brisa (#528)

* initial commit to add pandacss integration

* biome fixes

* fixed linking in docs

* biome fixes

* addressing review comments

* biome fixes

---------

Co-authored-by: anusikh <[email protected]>

.gitignore

@@ -33,3 +33,7 @@ tsconfig.tsbuildinfo
 # Deployment
 .vercel*
 .vercel
+
+## Panda
+styled-system
+styled-system-studio

docs/api-reference/brisa-cli/brisa-add.md

@@ -17,6 +17,7 @@ Usage: brisa add <integration>
 Integrations:
  mdx Add mdx integration
  tailwindcss Add tailwindcss integration
+ pandacss Add pandacss integration
 Options:
  --help Show help
 ```
@@ -43,4 +44,16 @@ brisa add tailwindcss
 
 > [!NOTE]
 >
-> Take a look at the [Tailwind CSS integration documentation](/building-your-application/integrations/tailwind-css) to learn more about the Tailwind CSS integration.
+> Take a look at the [Tailwind CSS integration documentation](/building-your-application/integrations/tailwind-css) to learn more about the Tailwind CSS integration.
+
+## Panda CSS integration
+
+The Panda CSS integration allows you to use Panda CSS in your project. To add the Panda CSS integration to your project, run the following command inside your project directory:
+
+```sh
+brisa add pandacss 
+```
+
+> [!NOTE]
+>
+> Take a look at the [Panda CSS integration documentation](/building-your-application/integrations/panda-css) to learn more about the Panda CSS integration.

docs/api-reference/brisa-cli/index.md

@@ -28,7 +28,7 @@ Commands:
  dev Start development server
  build Build for production
  start Start production server
- add Add integrations (e.g., mdx, tailwindcss)
+ add Add integrations (e.g., mdx, tailwindcss, pandacss)
  ```
 
 # Commands

docs/building-your-application/integrations/panda-css.md

@@ -0,0 +1,75 @@
+---
+description: Understand how to integrate Panda CSS in your Brisa project
+---
+
+# Integrating Panda CSS
+
+Brisa, offers versatile integration with third-party libraries like [PandaCSS](https://panda-css.com/) to be automatically handled for the Brisa internals.
+
+PandaCSS lets you create atomic compiled styles like tailwind. You might find it easier to write and maintain your styles using this.
+
+## Installation
+
+Run this command to integrate PandaCSS in your Brisa project:
+
+```sh
+brisa add pandacss
+```
+
+And you are ready to use PandaCSS in your Brisa project.
+
+## Manual Installation
+
+If you want to install PandaCSS manually, you can do it by running:
+
+```bash
+bun add -D @pandacss/dev postcss
+bun panda init -p
+```
+
+And then, you can add the integration in your `brisa.config.ts` file:
+
+**brisa.config.ts**
+
+```ts {4}
+import brisaPandaCSS from "brisa-pandacss";
+
+export default {
+ integrations: [brisaPandaCSS()],
+} satisfies Configuration;
+```
+
+And then, in your package.json add the following to the `scripts` section:
+
+```json
+{
+ "scripts": {
+ "prepare": "panda codegen",
+ }
+}
+```
+
+And then, create a `.css` file and add the following code:
+
+```css
+@layer reset, base, tokens, recipes, utilities; 
+```
+
+Then import the file in `layout.tsx` file
+And you are ready to use PandaCSS in your Brisa project.
+
+> [!NOTE]
+>
+> Installing the dependencies manually, take care to use a PandaCSS version `v0.46.x`.
+
+## Usage
+
+You can use PandaCSS classes in your Brisa project as you would in a regular TSX file:
+
+```tsx
+import { css } from './styled-system/css'
+
+export function App() {
+ return <div className={css({ bg: 'red.400' })} />
+}
+```

docs/building-your-application/styling/index.md

@@ -16,6 +16,7 @@ Brisa supports different ways of styling your application, including:
 - [CSS Template literal](/building-your-application/styling/css-template-literal)
 - [CSS inlined in JSX](/building-your-application/styling/css-inlined-in-jsx)
 - [Tailwind CSS](/building-your-application/styling/tailwind-css)
+- [Panda CSS](/building-your-application/styling/panda-css)
 - _CSS Modules_ (coming soon)
 
 In addition, you can also style your web components and server components:

docs/building-your-application/styling/panda-css.md

@@ -0,0 +1,20 @@
+---
+title: Panda CSS
+description: Learn how to style your pages using Panda CSS
+---
+
+# Panda CSS
+
+One option in Brisa is to integrate your app with [Panda CSS](https://panda-css.com/), a CSS framework that lets you create atomic compiled styles like tailwind. You might find it easier to write and maintain your styles using this.
+
+Then you can use in your `.tsx`:
+
+```tsx
+import { css } from './styled-system/css'
+
+export function App() {
+ return <div className={css({ bg: 'red.400' })} />
+}
+```
+
+To integrate Panda CSS into your Brisa project, take a look at the integration with Panda CSS in the [integrations section](/building-your-application/integrations/panda-css).

docs/building-your-application/styling/web-components.md

@@ -11,6 +11,7 @@ Brisa provides a different ways to style your web components, including:
 - [**CSS Template String**](#css-template-string): A powerful way to create reactive styles to signals within web components.
 - [**CSS inlined in JSX**](#css-inlined-in-jsx): You can use the `style` attribute to apply styles directly to the HTML element.
 - [**Tailwind CSS**](#tailwind-css): A CSS framework that lets you use utility classes instead of writing CSS.
+- [**Panda CSS**](#panda-css): Another CSS framework that lets you use utility classes instead of writing CSS.
 
 ## Global Styles in Web Components
 
@@ -96,3 +97,21 @@ export default function MyWebComponent() {
 > [!NOTE]
 >
 > Read more about how to integrate Tailwind CSS in your Brisa project in the [Tailwind CSS](/building-your-application/integrations/tailwind-css) page.
+
+## Panda CSS
+
+The shadow DOM is adapted to be possible to use Panda CSS in your elements.
+
+```tsx
+import type { WebContext } from "brisa";
+import { css } from './styled-system/css'
+
+export default function MyWebComponent() {
+ return <div className={css({ bg: 'red.400' })} />
+}
+```
+
+> [!NOTE]
+>
+> Read more about how to integrate Panda CSS in your Brisa project in the [Panda CSS](/building-your-application/integrations/panda-css) page.
+

examples/with-pandacss/.gitignore

@@ -0,0 +1,8 @@
+build
+node_modules
+out
+.vercel
+
+## Panda
+styled-system
+styled-system-studio

examples/with-pandacss/README.md

@@ -0,0 +1,7 @@
+# with-pandacss
+
+Example with [Panda CSS](https://brisa.build/building-your-application/integrations/panda-css#integrating-panda-css) in Brisa.
+
+```bash
+bun create brisa --example with-pandacss
+```

examples/with-pandacss/brisa.config.ts

@@ -0,0 +1,6 @@
+import type { Configuration } from 'brisa';
+import PandaCSS from 'brisa-pandacss';
+
+export default {
+ integrations: [PandaCSS()],
+} as Configuration;

examples/with-pandacss/bunfig.toml

@@ -0,0 +1,2 @@
+[test]
+preload = "brisa/test"

examples/with-pandacss/package.json

@@ -0,0 +1,21 @@
+{
+ "name": "with-pandacss",
+ "module": "src/pages/index.tsx",
+ "type": "module",
+ "scripts": {
+ "dev": "brisa dev",
+ "dev:debug": "brisa dev --debug",
+ "prepare": "panda codegen",
+ "build": "brisa build",
+ "start": "brisa start"
+ },
+ "dependencies": {
+ "brisa": "0.1.0"
+ },
+ "devDependencies": {
+ "@pandacss/dev": "^0.46.1",
+ "@types/bun": "latest",
+ "postcss": "^8.4.47",
+ "typescript": "latest"
+ }
+}

examples/with-pandacss/panda.config.ts

@@ -0,0 +1,20 @@
+import { defineConfig } from '@pandacss/dev';
+
+export default defineConfig({
+ // Whether to use css reset
+ preflight: true,
+
+ // Where to look for your css declarations
+ include: ['./src/**/*.{js,jsx,ts,tsx}', './pages/**/*.{js,jsx,ts,tsx}'],
+
+ // Files to exclude
+ exclude: [],
+
+ // Useful for theme customization
+ theme: {
+ extend: {},
+ },
+
+ // The output directory for your css system
+ outdir: 'styled-system',
+});

examples/with-pandacss/postcss.config.cjs

@@ -0,0 +1,5 @@
+module.exports = {
+ plugins: {
+ '@pandacss/dev/postcss': {},
+ },
+};

examples/with-pandacss/src/components/attacks.tsx

@@ -0,0 +1,20 @@
+import type { Pokemon } from '@/data';
+
+export default function Attacks({
+ attacks,
+}: {
+ attacks: Pokemon['attacks'];
+}) {
+ return (
+ <div>
+ <h4 class="">Attacks</h4>
+ <ul>
+ {attacks?.map((attack) => (
+ <li>
+ <span class="">{attack.name}</span> - {attack.power}
+ </li>
+ ))}
+ </ul>
+ </div>
+ );
+}

examples/with-pandacss/src/components/pokemon-card.tsx

@@ -0,0 +1,19 @@
+import type { Pokemon } from '@/data';
+import { css } from '../../styled-system/css';
+import { baseCard, content, image } from '@/styles/styles';
+
+export default function PokemonCard({ pokemon }: { pokemon: Pokemon }) {
+ return (
+ <a href={`/pokemon/${pokemon.slug}`} class="block">
+ <article class={baseCard}>
+ <div class={image}>
+ <img src={pokemon.cover} alt={pokemon.name} class="" />
+ </div>
+ <div class={content}>
+ <h3 class={css({})}>{pokemon.name}</h3>
+ <p class="">{pokemon.description}</p>
+ </div>
+ </article>
+ </a>
+ );
+}

examples/with-pandacss/src/data/index.ts

@@ -0,0 +1,98 @@
+export enum PokemonCategory {
+ Fire = 'fire',
+ Water = 'water',
+ Grass = 'grass',
+ Electric = 'electric',
+}
+
+export interface Pokemon {
+ id: number;
+ name: string;
+ slug: string;
+ description: string;
+ cover: string;
+ attacks: {
+ name: string;
+ power: number;
+ }[];
+ category: PokemonCategory;
+}
+
+export const pokemons: Pokemon[] = [
+ {
+ id: 32,
+ name: 'Charmander',
+ slug: 'charmander',
+ description:
+ 'Charmander is a Fire-type Pokémon. It evolves into Charmeleon starting at level 16. It is one of the three Starter Pokémon introduced in the Kanto region.',
+ cover: '/pokemons/charmander.jpg',
+ attacks: [
+ {
+ name: 'Ember',
+ power: 40,
+ },
+ {
+ name: 'Scratch',
+ power: 40,
+ },
+ ],
+ category: PokemonCategory.Fire,
+ },
+ {
+ id: 18,
+ name: 'Pikachu',
+ slug: 'pikachu',
+ description:
+ 'Pikachu is an Electric-type Pokémon. It evolves from Pichu when leveled up with high friendship and evolves into Raichu when exposed to a Thunder Stone.',
+ cover: '/pokemons/pika.jpeg',
+ category: PokemonCategory.Electric,
+ attacks: [
+ {
+ name: 'Thunder Shock',
+ power: 40,
+ },
+ {
+ name: 'Quick Attack',
+ power: 40,
+ },
+ ],
+ },
+ {
+ id: 21,
+ name: 'Bulbasaur',
+ slug: 'bulbasaur',
+ description:
+ 'Bulbasaur is a Grass/Poison-type Pokémon. It evolves into Ivysaur starting at level 16. It is one of the three Starter Pokémon introduced in the Kanto region.',
+ cover: '/pokemons/bulbasaur.jpg',
+ category: PokemonCategory.Grass,
+ attacks: [
+ {
+ name: 'Tackle',
+ power: 40,
+ },
+ {
+ name: 'Vine Whip',
+ power: 40,
+ },
+ ],
+ },
+ {
+ id: 49,
+ name: 'Squirtle',
+ slug: 'squirtle',
+ description:
+ 'Squirtle is a Water-type Pokémon. It evolves into Wartortle starting at level 16. It is one of the three Starter Pokémon introduced in the Kanto region.',
+ cover: '/pokemons/squirtle.jpeg',
+ category: PokemonCategory.Water,
+ attacks: [
+ {
+ name: 'Tackle',
+ power: 40,
+ },
+ {
+ name: 'Water Gun',
+ power: 40,
+ },
+ ],
+ },
+];