Panda 🐼: расширенные возможности 🏋️стилизации примитивов для атомарного CSS и удобочитаемых рецептов 🍲

Panda 🐼: расширенные возможности 🏋️стилизации примитивов для атомарного CSS и удобочитаемых рецептов 🍲

Запачкайте руки с помощью Panda-CSS

Panda — это мощный механизм стилей, упрощающий процесс создания атомарных CSS и удобочитаемых рецептов. Сочетая опыт разработчиков CSS-in-JS с производительностью атомарного CSS, Panda предлагает упрощенный подход к стилю. Благодаря статическому анализу файлов JavaScript и TypeScript Panda генерирует стили по запросу, что обеспечивает безопасное и читабельное кодирование.

Содержание

Мы рассмотрим краткое изложение этих шагов, как указано в их документах, с небольшим пониманием.

1. Инструкция по установке.
2. Руководство по настройке
3. Руководство по фреймворку.
4. Заключение
5. Ссылка

1. Установка

Есть два основных способа установки Panda-CSS в вашем проекте:

• Панда CLI
• Опубликовать CSS

Интерфейс командной строки панды:

Самый быстрый способ использовать Panda с нуля — использовать инструмент Panda CLI.
Использование pnpm

pnpm install -D @pandacss/dev
pnpm panda init

Использование нпм

npm install -D @pandacss/dev
npx panda init

Использование пряжи

yarn add -D @pandacss/dev
yarn panda init

Опубликовать CSS

Чтобы легко интегрировать Panda с инструментами сборки, такими как webpack, Rollup, Vite и Parcel, рекомендуется установить его как подключаемый модуль PostCSS.
Установите panda и создайте свой panda.config.ts. файл.

Использование пнпм

pnpm install -D @pandacss/dev postcss
pnpm panda init -p

Использование нпм

npm install -D @pandacss/dev postcss
npx panda init -p

Использование пряжи

yarn add -D @pandacss/dev postcss
yarn panda init -p

2. Руководство по настройке:

Конфигурация CLI панды

Укажите пути к файлам вашего кода JavaScript или TypeScript, где вы планируете использовать Panda.

import { defineConfig } from '@pandacss/dev'
 
export default defineConfig({
  preflight: true,
  include: ['./src/**/*.{tsx,jsx}', './pages/**/*.{jsx,tsx}'],
  exclude: [],
  outdir: 'styled-system'
})

Импортируйте сгенерированный CSS

После каждого запуска Panda сгенерированный CSS экспортируется в файл styled-system/styles.css. Импортируйте этот файл в корневой компонент вашего проекта.

import './styled-system/styles.css'
 
export function App() {
  return <div>Page</div>
}

Запустите процесс сборки Panda

Запустите инструмент командной строки для сканирования файлов JavaScript и TypeScript, поиска свойств стиля и выражений вызова.
Использование pnpm

# Run it once
pnpm panda
 
# Run it in watch mode
pnpm panda --watch

Использование нпм

# Run it once
npx panda
 
# Run it in watch mode
npx panda --watch

Использование пряжи

# Run it once
yarn panda
 
# Run it in watch mode
yarn panda --watch

Конфигурация для Post CSS

Добавьте Panda в вашу конфигурацию PostCSS

Добавьте панду и автопрефиксер в файл postcss.config.cjs или в любой другой файл, настроенный PostCSS в вашем проекте.

module.exports = {
  plugins: {
    '@pandacss/dev/postcss': {}
  }
}

Настройте содержимое.

Включите вашу конфигурацию Panda в файл panda.config.js или в назначенный файл конфигурации для Panda в вашем проекте.

import { defineConfig } from '@pandacss/dev'
 
export default defineConfig({
  preflight: true,
  include: ['./src/**/*.{tsx,jsx}', './pages/**/*.{jsx,tsx}'],
  exclude: [],
  outdir: 'styled-system'
})

Настройте входной CSS со слоями

Добавьте предоставленный код в файл index.css и импортируйте его в корневой компонент вашего проекта.

@layer reset, base, tokens, recipes, utilities;

Начните процесс сборки

Запустите процесс сборки, выполнив команду, указанную в файле package.json, обычно это npm run dev.

Использование пнпм

pnpm dev

Использование нпм

npm run dev

Использование пряжи

yarn dev

Я решил, что это будет серия из двух частей, в которых в следующей статье я расскажу о:

• Основные концепции и ключевые особенности panda css.
• Стили письма.
• Слои
• Производительность
• Опыт разработчиков

Это будет весело. Вы не хотите пропустить это.

Фреймворки, поддерживающие Panda-CSS

• Nextjs
• Гэтсби.
• ПРЕДВАР.
• Стройный.
• Астройс.
• Вите.
• Сборник рассказов.
• Ремикс.
• Qwik.
• Твердый

3. Использование Panda CSS с Next.js

Теперь давайте настроим Panda-CSS с Nextjs, используя App Router.

Вы можете обратиться к документу, если хотите настроить Pages Router.

Создать приложение Nextjs

Мы должны создать наше следующее js-приложение в уже созданной папке для нашего проекта. Мы можем сослаться на Документацию Nextjs о том, как это сделать.

После этого мы можем перейти к нашей папке nextjs, созданной с помощью этой команды CLI.

cd test-app

Установка Panda-CSS в ваше приложение Nextjs

В этом руководстве по установке мы будем использовать менеджер пакетов npm в основном потому, что это наиболее широко используемый менеджер пакетов. Справку о других менеджерах пакетов вы можете найти в документах.

Использование npm
Приведенный ниже код позволяет вам установить Panda-CSS в зависимости от вашей разработки. Panda init --postcss создаст файл postcss.config.js в корне вашего проекта.

npm install -D @pandacss/dev
npx panda init --postcss

Вот как будет выглядеть ваш файл postcss.config.js ниже.

module.exports = {
  plugins: {
    '@pandacss/dev/postcss': {},
  },
}

Для расширенной настройки следуйте руководству Next.js PostCSS, чтобы настроить пользовательскую конфигурацию PostCSS, перейдя по этой ссылке.

Обновить скрипты package.json

Следующий шаг требует, чтобы вы открыли файл package.json и обновили сценарии, как показано ниже.

{
  "scripts": {
+    "prepare": "panda codegen",
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

Этот код запустит codegen после установки зависимостей. В Panda codegen у вас есть некоторые льготы, которые позволяют вам создавать новые утилиты css для вашего проекта на основе файла конфигурации.

Подробнее о кодегене здесь. Это важно проверить, так как это даст вам представление о том, как отлаживать Panda-CSS.

Настройте свой контент

Убедитесь, что все пути к вашим компонентам React включены в раздел include файла panda.config.ts.

import { defineConfig } from "@pandacss/dev"
 
export default defineConfig({
// Whether to use css reset
preflight: true,
 
// Where to look for your css declarations
include: ["./src/components/**/*.{tsx,jsx}", "./src/app/**/*.{tsx,jsx}"],
 
// Files to exclude
exclude: [],
 
// The output directory for your css system
outdir: "styled-system",
})

Настройте входной CSS со слоями

В проекте Next.js перейдите в папку src/app и откройте файл global.css. Замените все содержимое следующим кодом:

   @layer reset, base, tokens, recipes, utilities;

После этого вы можете удалить файл page.module.css, так как он нам больше не нужен.

Импортируйте запись CSS в свое приложение

Убедитесь, что вы импортировали файл global.css в файл src/app/layout.tsx, как показано ниже:

  import './globals.css'
  import { Inter } from 'next/font/google'
 
  const inter = Inter({ subsets: ['latin'] })
 
  export const metadata = {
    title: 'Create Next App',
    description: 'Generated by create next app',
  }
 
  export default function RootLayout({
    children,
  }: {
    children: React.ReactNode
  }) {
    return (
      <html lang="en">
        <body className={inter.className}>{children}</body>
      </html>
    )
  }

Начните использовать Панду

Мы обновим содержимое src/app/page.tsx следующим фрагментом, использующим Panda CSS:

  import { css } from '../../styled-system/css';
 
  export default function Home() {
    return (
      <div className={css({ fontSize: "2xl", fontWeight: 'bold' })}>Hello 🐼!</div>
    )
  }

Запустите сервер разработки

Выполните следующую команду, чтобы запустить сервер разработки с помощью npm:

npm run dev

Поиск неисправностей

Иногда Next.js кэширует созданные PostCSS стили, и вам необходимо очистить кэш. Для этого удалите папку .next и перезапустите сервер разработки.

Вы также можете обновить скрипты package.json, чтобы удалить папку .next перед каждой сборкой:

{
  "scripts": {
-    "dev": "next dev",
+    "dev": "rm -rf .next && next dev",
  },
}

4. Вывод:

Я очень доволен Panda-CSS, потому что это CSS-in-JS, который способствует производительности, опыту разработчиков и самообладанию. С типобезопасным API среды выполнения.

До сих пор это был долгий путь. Процесс установки довольно приличный, на мой честный взгляд. Это еще не так гладко, как это возможно. Я считаю, что команда Panda-CSS будет делать больше для улучшения этого продукта с течением времени. Почему я думаю, что это не гладко, так это из-за постоянной навигации и изменения файлов, поскольку небольшие пропущенные ошибки могут потребовать времени для отладки, что не очень хорошо для опыта разработчиков.

В заключительной части этой статьи я расскажу об основных функциях и концепциях Panda-CSS.

Мы рассмотрим стили написания Panda-CSS и то, как этот продукт повышает производительность и время сборки наших проектов.

Я так же взволнован, как и ты. Поверьте мне.

5. Ссылка:

https://panda-css.com/

Находите эту статью находчивой? Ставь лайк и комментируй.

Грасиас 🙏

Удачного кодирования 🤖💻!