Skip to content

Commit 3e4990e

Browse files
segunadebayosegunadebayo
committed
fix: astro integration and create dedicated packages
1 parent 9b8f1e5 commit 3e4990e

File tree

18 files changed

+250
-186
lines changed

18 files changed

+250
-186
lines changed

‎packages/astro/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from './src'
2+
export { default } from './src'

‎packages/astro/package.json

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{
2+
"name": "@pandacss/astro",
3+
"version": "0.0.2",
4+
"type": "module",
5+
"description": "Astro integration for Panda CSS",
6+
"main": "dist/index.js",
7+
"types": "dist/index.d.ts",
8+
"author": "Segun Adebayo <[email protected]>",
9+
"scripts": {
10+
"build": "tsup --dts",
11+
"build-fast": "tsup --no-dts",
12+
"dev": "pnpm build-fast --watch"
13+
},
14+
"sideEffects": false,
15+
"publishConfig": {
16+
"access": "public"
17+
},
18+
"files": [
19+
"dist"
20+
],
21+
"dependencies": {
22+
"@pandacss/postcss": "workspace:*",
23+
"autoprefixer": "^10.4.14",
24+
"postcss": "^8.4.23",
25+
"postcss-load-config": "^4.0.1"
26+
},
27+
"devDependencies": {
28+
"astro": "2.6.1",
29+
"vite": "^4.3.1"
30+
},
31+
"peerDependencies": {
32+
"astro": ">=2.x"
33+
}
34+
}

‎packages/astro/src/index.ts

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import type { AstroConfig, AstroIntegration } from 'astro'
2+
import autoprefixerPlugin from 'autoprefixer'
3+
import type { CSSOptions, UserConfig } from 'vite'
4+
import { createRequire } from 'module'
5+
6+
const require = createRequire(import.meta.url)
7+
const interopDefault = (obj: any) => (obj && obj.__esModule ? obj.default : obj)
8+
9+
async function getPostCssConfig(root: UserConfig['root'], postcssInlineOptions: CSSOptions['postcss']) {
10+
let postcssConfig
11+
if (!(typeof postcssInlineOptions === 'object' && postcssInlineOptions !== null)) {
12+
const { default: postcssrc } = await import('postcss-load-config')
13+
const searchPath = typeof postcssInlineOptions === 'string' ? postcssInlineOptions : root!
14+
try {
15+
postcssConfig = await postcssrc({}, searchPath)
16+
} catch (e) {
17+
postcssConfig = null
18+
}
19+
}
20+
return postcssConfig
21+
}
22+
23+
async function getViteConfig(viteConfig: AstroConfig['vite']) {
24+
const postcssConfig = await getPostCssConfig(viteConfig.root, viteConfig.css?.postcss)
25+
const postcssOptions = postcssConfig?.options || {}
26+
27+
const postcssPlugins = postcssConfig?.plugins?.slice() ?? []
28+
29+
postcssPlugins.push(interopDefault(require('@pandacss/postcss')))
30+
postcssPlugins.push(autoprefixerPlugin())
31+
32+
return {
33+
css: {
34+
postcss: {
35+
options: postcssOptions,
36+
plugins: postcssPlugins,
37+
},
38+
},
39+
}
40+
}
41+
42+
export default function pandaIntegration(): AstroIntegration {
43+
return {
44+
name: '@pandacss/astro',
45+
hooks: {
46+
'astro:config:setup': async ({ config, updateConfig }) => {
47+
updateConfig({
48+
vite: await getViteConfig(config.vite),
49+
})
50+
},
51+
},
52+
}
53+
}

‎packages/astro/tsup.config.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { defineConfig } from 'tsup'
2+
3+
export default defineConfig({
4+
entry: ['./src/index.ts'],
5+
format: ['esm'],
6+
splitting: false,
7+
clean: true,
8+
external: ['@pandacss/dev/postcss'],
9+
})

‎packages/cli/astro.d.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
1-
export default function pandacss(): { name: string; hooks: any }
1+
export * from '@pandacss/astro'
2+
export { default } from '@pandacss/astro'

‎packages/cli/astro.mjs

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,2 @@
1-
import { createRequire } from 'module'
2-
3-
const require = createRequire(import.meta.url)
4-
5-
export default function pandacss() {
6-
return {
7-
name: '@pandacss/vite',
8-
hooks: {
9-
'astro:config:setup': async ({ config }) => {
10-
config.style.postcss.plugins.push(require('@pandacss/dev/postcss'))
11-
},
12-
},
13-
}
14-
}
1+
import astro from '@pandacss/astro'
2+
export default astro

‎packages/cli/package.json

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,13 @@
1313
"exports": {
1414
".": {
1515
"types": "./dist/index.d.ts",
16-
"import": "./dist/index.mjs",
17-
"require": "./dist/index.js"
16+
"require": "./dist/index.js",
17+
"import": "./dist/index.mjs"
1818
},
1919
"./presets": {
2020
"types": "./dist/presets.d.ts",
21-
"import": "./dist/presets.mjs",
22-
"require": "./dist/presets.js"
21+
"require": "./dist/presets.js",
22+
"import": "./dist/presets.mjs"
2323
},
2424
"./postcss": "./postcss.js",
2525
"./astro": {
@@ -33,10 +33,10 @@
3333
"access": "public"
3434
},
3535
"scripts": {
36-
"build": "tsup src/cli-*.ts src/presets.ts src/index.ts --format=esm,cjs --dts --no-splitting --shims",
36+
"build": "tsup src --format=esm,cjs --dts --no-splitting --shims",
3737
"postbuild": "pnpm app:gen",
38-
"build-fast": "tsup src/cli-*.ts src/presets.ts src/index.ts --format=esm,cjs --no-dts --no-splitting --shims",
39-
"dev": "pnpm build-fast --watch src --watch ../presets/dist/index.js --watch postcss.js --watch astro.mjs",
38+
"build-fast": "tsup src --format=esm,cjs --no-dts --no-splitting --shims",
39+
"dev": "pnpm build-fast --watch src",
4040
"css": "dist/cli-default.js",
4141
"app": "cd app && ../dist/cli-default.js --clean",
4242
"app:dev": "cd app && ../dist/cli-default.js --watch",
@@ -47,17 +47,20 @@
4747
"bin",
4848
"app",
4949
"bin.js",
50+
"*.d.ts",
5051
"postcss.js",
51-
"astro.mjs",
52-
"astro.d.ts"
52+
"astro.mjs"
5353
],
5454
"dependencies": {
5555
"@ark-ui/react": "0.6.0",
5656
"@astrojs/react": "2.2.1",
5757
"@pandacss/config": "workspace:*",
58+
"@pandacss/postcss": "workspace:*",
59+
"@pandacss/astro": "workspace:*",
5860
"@pandacss/error": "workspace:*",
5961
"@pandacss/logger": "workspace:*",
6062
"@pandacss/node": "workspace:*",
63+
"@pandacss/preset-panda": "workspace:*",
6164
"@pandacss/shared": "workspace:*",
6265
"@pandacss/token-dictionary": "workspace:*",
6366
"@pandacss/types": "workspace:*",
@@ -68,7 +71,6 @@
6871
"vite": "4.3.9"
6972
},
7073
"devDependencies": {
71-
"@pandacss/preset-panda": "workspace:*",
7274
"@types/react": "18.2.8",
7375
"@types/react-dom": "18.2.4",
7476
"@types/update-notifier": "6.0.4",

‎packages/cli/postcss.d.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from '@pandacss/postcss'
2+
export { default } from '@pandacss/postcss'

‎packages/cli/postcss.js

Lines changed: 2 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,3 @@
1-
/* eslint-disable @typescript-eslint/no-var-requires */
2-
const { Builder } = require('@pandacss/node')
1+
const plugin = require('@pandacss/postcss')
32

4-
const PLUGIN_NAME = 'pandacss'
5-
6-
module.exports = function pandacss() {
7-
const builder = new Builder()
8-
9-
return {
10-
postcssPlugin: PLUGIN_NAME,
11-
plugins: [
12-
async function (root, result) {
13-
// ignore non-panda file
14-
if (!builder.isValidRoot(root)) {
15-
return
16-
}
17-
18-
await builder.setup()
19-
await builder.extract()
20-
21-
builder.registerDependency((dep) => {
22-
result.messages.push({
23-
...dep,
24-
plugin: PLUGIN_NAME,
25-
parent: result.opts.from,
26-
})
27-
})
28-
29-
builder.write(root)
30-
31-
root.walk((node) => {
32-
if (!node.source) {
33-
node.source = { input: { file: result.opts.from } }
34-
}
35-
})
36-
},
37-
],
38-
}
39-
}
40-
41-
module.exports.postcss = true
3+
module.exports = plugin.default ?? plugin

‎packages/postcss/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from './src'
2+
export { default } from './src'

‎packages/postcss/package.json

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "@pandacss/postcss",
3+
"version": "0.0.2",
4+
"description": "PostCSS integration for Panda CSS",
5+
"main": "dist/index.js",
6+
"module": "dist/index.mjs",
7+
"types": "dist/index.d.ts",
8+
"author": "Segun Adebayo <[email protected]>",
9+
"scripts": {
10+
"build": "tsup src/index.ts --format=cjs,esm --shims --dts",
11+
"build-fast": "tsup src/index.ts --format=cjs,esm --shims --no-dts",
12+
"dev": "pnpm build-fast --watch"
13+
},
14+
"sideEffects": false,
15+
"publishConfig": {
16+
"access": "public"
17+
},
18+
"files": [
19+
"dist"
20+
],
21+
"dependencies": {
22+
"@pandacss/node": "workspace:*",
23+
"postcss": "^8.4.23"
24+
}
25+
}

‎packages/postcss/src/index.ts

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { Builder } from '@pandacss/node'
2+
import type { PluginCreator } from 'postcss'
3+
import { createRequire } from 'module'
4+
5+
const require = createRequire(import.meta.url)
6+
7+
const PLUGIN_NAME = 'pandacss'
8+
9+
const interopDefault = (obj: any) => (obj && obj.__esModule ? obj.default : obj)
10+
11+
export const loadConfig = () => {
12+
return interopDefault(require('@pandacss/postcss'))
13+
}
14+
15+
export const pandacss: PluginCreator<{}> = () => {
16+
const builder = new Builder()
17+
18+
return {
19+
postcssPlugin: PLUGIN_NAME,
20+
plugins: [
21+
async function (root, result) {
22+
// ignore non-panda file
23+
if (!builder.isValidRoot(root)) {
24+
return
25+
}
26+
27+
await builder.setup()
28+
await builder.extract()
29+
30+
builder.registerDependency((dep) => {
31+
result.messages.push({
32+
...dep,
33+
plugin: PLUGIN_NAME,
34+
parent: result.opts.from,
35+
})
36+
})
37+
38+
builder.write(root)
39+
40+
root.walk((node) => {
41+
if (!node.source) {
42+
node.source = root.source
43+
}
44+
})
45+
},
46+
],
47+
}
48+
}
49+
50+
pandacss.postcss = true
51+
52+
export default pandacss

0 commit comments

Comments
 (0)