https://github.com/astahmer/box-extractor

Static code extraction. Zero-runtime CSS-in-TS `<Box />` -> became a part of Panda CSS
https://github.com/astahmer/box-extractor

ast box extractor sprinkles static typescript vanilla-extract vite

Last synced: 3 months ago
JSON representation

Static code extraction. Zero-runtime CSS-in-TS `<Box />` -> became a part of Panda CSS

• Host: GitHub
• URL: https://github.com/astahmer/box-extractor
• Owner: astahmer
• Archived: true
• Created: 2022-11-14T14:06:55.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-06-19T14:14:00.000Z (over 1 year ago)
• Last Synced: 2024-07-13T15:09:17.557Z (4 months ago)
• Topics: ast, box, extractor, sprinkles, static, typescript, vanilla-extract, vite
• Language: TypeScript
• Homepage: https://panda-css.com/
• Size: 2.07 MB
• Stars: 127
• Watchers: 4
• Forks: 3
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
this repo was inlined in [Panda CSS](https://panda-css.com/) (here in [this PR](https://github.com/chakra-ui/panda/pull/387)) and will therefore no longer be maintained, code now living in [the current @pandacss/extractor package](https://github.com/chakra-ui/panda/tree/main/packages/extractor)

---

# [📦 box-extractor](https://github.com/astahmer/box-extractor/)

**Static code extraction. Zero-runtime CSS-in-TS ``**

Optimize your code and elevate your developer experience with compile-time optimizations from static analysis.

💎   Enhanced DX close to [Chakra-UI's ``](https://chakra-ui.com/docs/styled-system/style-props#pseudo) without [the](https://github.com/chakra-ui/chakra-ui/issues/4003) [runtime](https://github.com/chakra-ui/chakra-ui/issues/859) [cost](https://twitter.com/jaredpalmer/status/1271482711132254210?lang=en)

✂️   Smaller CSS/JS output (up to 99%) with compile-time purge just like Tailwind CSS

🎯   Over 180k props/values/conditions combinations, only 1 used in your app, only 1 will remain

🔍   Smart analyzer built-in for near instant drop-in benefits

💾   Low-level AST output with access to `ts-morph` `Node` objects for fine-grained control

# Installation

## core (static AST extraction)

if you need the static analysis (using [ts-morph](https://github.com/dsherret/ts-morph) on components props/functions args:

```ts

pnpm add @box-extractor/core

```

or you could try it like this:

```ts

pnpx @box-extractor/cli -i path/to/input.ts -o path/to/report.json --functions="css,styled" --components="div,factory.*,SomeComponent"

```