perf: lightningcss / rule sorting from JS (#1896)

* feat: HashFactory + StyleCollector

* refactor(fixtures): use dev alias and rm deps across workspace packages

55ff125

* test: move/update files after refactor

* feat: StaticCss engine

* test: update snapshots
chore: rm deadcode toKeyframeCss
fix: HashFactory shouldnt normalize shorthands for recipe variants
ex: rounded -> borderRadius shouldnt happen cause rounded is a variant name, not a prop name

* refactor: extract / generate / builder / debug-files / cli-main

* chore: fix imports

* refactor: ship files JSON format
chore: rename appendFilesCss -> ctx.parseFiles
chore: only call toCss once for cssgen with artifact static & add outpath log

* fix: dts declarations + playground

* chore: fix rebase

* chore: update snapshots/lock/json after rebase

* fix: builder write

* fix: playground after changes

* chore: fix import

* chore: fix playground build

* chore: rm comment / deadcode

* fix: cli generate

* refactor: encoder -> decoder

* refactor: more stuff

* chore: rm dead types

* fix: cssgen include other layers if not minimal

* fix: tslint

* chore: update

* refactor: emit-artifact -> codegen

* refactor: config pkg and diff

* chore: add diff types

* refactor: project

* refactor: more stuff

* chore: refactor

* refactor: more stuff

* chore: update

* refactor: rm lil-fp

* fix: typecheck

* refactor: add method

* chore: rm unused dep

* fix: dts generation for config

* chore: rm unused code

* perf: markImportant from JS instead of postcss

* feat: add lightningcss under a flag

* test: update snapshot

* feat: add config.browserslist

* feat: add lightningcss flag in buider

* test: update snapshots after sorting from JS

* refactor: toCss with a fork of stitches stringify

* perf: only compute once token-dictionary properties

* perf: serializeStyle -> use decoder

* fix: playground with lightningcss-wasm

* chore: rm postcss sorting plugins in favor of JS fns

* feat(cli): add --lightningcss flag to cssgen

* chore: update snapshot

* chore: log time spent generating the CSS

* chore: add changeset

* chore: update based on review

* refactor: serialize style

* revert: prettify

* refactor: setup composition

* refactor: deep set to shared

* refactor: stringify

* refactor: rule processor

* chore: move things around

* refactor: rm stringify

* refactor: keyframe code

* refactor: code

---------

Co-authored-by: Segun Adebayo <[email protected]>

.changeset/old-pumpkins-do.md

@@ -0,0 +1,42 @@
+---
+'@pandacss/astro-plugin-studio': minor
+'@pandacss/preset-open-props': minor
+'@pandacss/token-dictionary': minor
+'@pandacss/preset-atlaskit': minor
+'@pandacss/is-valid-prop': minor
+'@pandacss/preset-panda': minor
+'@pandacss/preset-base': minor
+'@pandacss/extractor': minor
+'@pandacss/generator': minor
+'@pandacss/fixture': minor
+'@pandacss/postcss': minor
+'@pandacss/config': minor
+'@pandacss/logger': minor
+'@pandacss/parser': minor
+'@pandacss/shared': minor
+'@pandacss/studio': minor
+'@pandacss/astro': minor
+'@pandacss/error': minor
+'@pandacss/types': minor
+'@pandacss/core': minor
+'@pandacss/node': minor
+'@pandacss/dev': minor
+---
+
+Improve performance, mostly for the CSS generation by removing a lot of `postcss` usage (and plugins).
+
+## Public changes:
+
+- Introduce a new `config.lightningcss` option to use `lightningcss` (currently disabled by default) instead of
+  `postcss`.
+- Add a new `config.browserslist` option to configure the browserslist used by `lightningcss`.
+- Add a `--lightningcss` flag to the `panda` and `panda cssgen` command to use `lightningcss` instead of `postcss` for
+  this run.
+
+## Internal changes:
+
+- `markImportant` fn from JS instead of walking through postcss AST nodes
+- use a fork of `stitches` `stringify` function instead of `postcss-css-in-js` to write the CSS string from a JS object
+- only compute once `TokenDictionary` properties
+- refactor `serializeStyle` to use the same code path as the rest of the pipeline with `StyleEncoder` / `StyleDecoder`
+  and rename it to `transformStyles` to better convey what it does

packages/cli/src/cli-main.ts

@@ -139,11 +139,12 @@ export async function main() {
     .option('-c, --config <path>', 'Path to panda config file')
     .option('-w, --watch', 'Watch files and rebuild')
     .option('--minimal', 'Do not include CSS generation for theme tokens, preflight, keyframes, static and global css')
+    .option('--lightningcss', 'Use `lightningcss` instead of `postcss` for css optimization.')
     .option('-p, --poll', 'Use polling instead of filesystem events when watching')
     .option('-o, --outfile [file]', "Output file for extracted css, default to './styled-system/styles.css'")
     .option('--cwd <cwd>', 'Current working directory', { default: cwd })
     .action(async (maybeGlob?: string, flags: CssGenCommandFlags = {}) => {
-      const { silent, clean, config: configPath, outfile, watch, poll, minify, minimal } = flags
+      const { silent, clean, config: configPath, outfile, watch, poll, minify, minimal, lightningcss } = flags
 
       const cwd = resolve(flags.cwd ?? '')
 
@@ -160,6 +161,7 @@ export async function main() {
       const overrideConfig = {
         clean,
         minify,
+        lightningcss,
         optimize: true,
         ...(glob ? { include: [glob] } : undefined),
       }
@@ -219,6 +221,7 @@ export async function main() {
     .option('-e, --exclude <files>', 'Exclude files', { default: [] })
     .option('--clean', 'Clean output directory')
     .option('--hash', 'Hash the generated classnames to make them shorter')
+    .option('--lightningcss', 'Use `lightningcss` instead of `postcss` for css optimization.')
     .option('--emitTokensOnly', 'Whether to only emit the `tokens` directory')
     .action(async (files: string[], flags: MainCommandFlags) => {
       const { config: configPath, silent, ...rest } = flags

packages/cli/src/types.ts

@@ -19,6 +19,7 @@ export interface CssGenCommandFlags {
   cwd?: string
   config?: string
   minify?: boolean
+  lightningcss?: boolean
 }
 
 export interface StudioCommandFlags extends Pick<Config, 'cwd'> {
@@ -72,4 +73,5 @@ export interface MainCommandFlags extends Pick<Config, 'cwd' | 'poll' | 'watch'>
   exclude?: string[]
   hash?: boolean
   emitTokensOnly?: boolean
+  lightningcss?: boolean
 }

packages/config/package.json

@@ -56,8 +56,8 @@
     "./package.json": "./package.json"
   },
   "scripts": {
-    "build": "pnpm tsup --dts",
-    "build-fast": "pnpm tsup --no-dts",
+    "build": "pnpm tsup --tsconfig tsconfig.build.json src/index.ts src/merge-config.ts src/resolve-ts-path-pattern.ts --format=esm,cjs --shims --dts",
+    "build-fast": "pnpm tsup src/index.ts src/merge-config.ts src/resolve-ts-path-pattern.ts --format=esm,cjs --shims --no-dts",
     "dev": "pnpm build-fast --watch"
   },
   "files": [
@@ -72,7 +72,6 @@
     "@pandacss/types": "workspace:*",
     "bundle-n-require": "^1.0.1",
     "escalade": "3.1.1",
-    "jiti": "^1.19.1",
     "merge-anything": "^5.1.7",
     "microdiff": "^1.3.2",
     "typescript": "^5.3.3"

packages/config/tsconfig.build.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src", "index.ts"],
+  "compilerOptions": {
+    "customConditions": null
+  }
+}

packages/config/tsconfig.json

@@ -2,7 +2,6 @@
   "extends": "../../tsconfig.build.json",
   "include": ["src", "__tests__"],
   "compilerOptions": {
-    "baseUrl": ".",
     "paths": {
       "@pandacss/fixture": ["../fixture/src/index.ts"]
     }

packages/core/__tests__/atomic-recipe.test.ts

@@ -42,39 +42,39 @@ describe('Atomic recipe', () => {
     expect(sheet).toMatchInlineSnapshot(`
       "@layer utilities {
         .fs_lg {
-          font-size: var(--font-sizes-lg)
+          font-size: var(--font-sizes-lg);
       }
 
         .p_2 {
-          padding: var(--spacing-2)
+          padding: var(--spacing-2);
       }
 
         .rounded_sm {
-          border-radius: var(--radii-sm)
+          border-radius: var(--radii-sm);
       }
 
         .p_4 {
-          padding: var(--spacing-4)
+          padding: var(--spacing-4);
       }
 
         .rounded_md {
-          border-radius: var(--radii-md)
+          border-radius: var(--radii-md);
       }
 
         .text_white {
-          color: var(--colors-white)
+          color: var(--colors-white);
       }
 
         .bg_blue\\\\.500 {
-          background-color: var(--colors-blue-500)
+          background-color: var(--colors-blue-500);
       }
 
         .bg_red\\\\.500 {
-          background-color: var(--colors-red-500)
+          background-color: var(--colors-red-500);
       }
 
         .hover\\\\:text_green:is(:hover, [data-hover]) {
-          color: green
+          color: green;
       }
       }"
     `)