From 9902f04890956ca9052710b44d0da1dad1f01a2c Mon Sep 17 00:00:00 2001
From: yue <yue@pixiv.co.jp>
Date: Sun, 18 Aug 2024 23:10:13 +0900
Subject: [PATCH 1/2] feat: add @layer charcoal output

---
 packages/react/package.json   |  4 +++
 packages/react/tsup.config.ts | 55 ++++++++++++++++++++++++++++++++++-
 2 files changed, 58 insertions(+), 1 deletion(-)

diff --git a/packages/react/package.json b/packages/react/package.json
index 89c37ee6b..7add3a356 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -14,6 +14,10 @@
     "./dist/index.css": {
       "import": "./dist/index.css",
       "require": "./dist/index.css"
+    },
+    "./dist/layered.css": {
+      "import": "./dist/layered.css",
+      "require": "./dist/layered.css"
     }
   },
   "types": "./dist/index.d.ts",
diff --git a/packages/react/tsup.config.ts b/packages/react/tsup.config.ts
index 392246d80..b18477d4e 100644
--- a/packages/react/tsup.config.ts
+++ b/packages/react/tsup.config.ts
@@ -1,5 +1,7 @@
 import { defineConfig } from 'tsup'
 import { styledComponentsPlugin } from '@charcoal-ui/esbuild-plugin-styled-components'
+import postcss from 'postcss'
+import fs from 'node:fs/promises'
 
 export default defineConfig({
   entry: ['src/index.ts'],
@@ -11,5 +13,56 @@ export default defineConfig({
   },
   target: 'esnext',
   sourcemap: true,
-  esbuildPlugins: [styledComponentsPlugin],
+  esbuildPlugins: [
+    styledComponentsPlugin,
+    {
+      name: 'at-layer-charcoal',
+      setup(build) {
+        // NOTE: this will be called twice for esm and cjs.
+        build.onEnd(async (result) => {
+          const originalCssOutput = result.outputFiles?.find((file) =>
+            file.path.endsWith('css')
+          )
+          if (!originalCssOutput) {
+            throw new Error('[at-layer-charcoal]: expect original css output')
+          }
+
+          const layeredCssFilePath = originalCssOutput.path.replace(
+            'index.css',
+            'layered.css'
+          )
+          const layeredCssOutput = await postcss({
+            postcssPlugin: 'at-layer-charcoal',
+            Once(_, { AtRule, result }) {
+              const atLayerNode = new AtRule({
+                name: 'layer',
+                params: 'charcoal',
+                nodes: result.root.nodes,
+              })
+              result.root.nodes = [atLayerNode]
+            },
+          }).process(originalCssOutput.text, {
+            from: originalCssOutput.path,
+            to: layeredCssFilePath,
+            map: {
+              inline: false,
+            },
+          })
+
+          await Promise.all([
+            fs.writeFile(layeredCssFilePath, layeredCssOutput.content),
+            fs.writeFile(
+              `${layeredCssFilePath}.map`,
+              layeredCssOutput.map.toString()
+            ),
+          ])
+
+          // eslint-disable-next-line no-console
+          console.log(
+            `${build.initialOptions.format?.toUpperCase()} dist/layered.css`
+          )
+        })
+      },
+    },
+  ],
 })

From 410402807489bf4ad6ffb98a98b1d9d74be6f9da Mon Sep 17 00:00:00 2001
From: yue <yue@pixiv.co.jp>
Date: Mon, 19 Aug 2024 08:46:27 +0900
Subject: [PATCH 2/2] fix: ensure dir exist before write

---
 packages/react/tsup.config.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/react/tsup.config.ts b/packages/react/tsup.config.ts
index b18477d4e..42a8c90fb 100644
--- a/packages/react/tsup.config.ts
+++ b/packages/react/tsup.config.ts
@@ -2,6 +2,7 @@ import { defineConfig } from 'tsup'
 import { styledComponentsPlugin } from '@charcoal-ui/esbuild-plugin-styled-components'
 import postcss from 'postcss'
 import fs from 'node:fs/promises'
+import path from 'node:path'
 
 export default defineConfig({
   entry: ['src/index.ts'],
@@ -49,6 +50,9 @@ export default defineConfig({
             },
           })
 
+          // https://github.com/evanw/esbuild/issues/2999
+          // this will be called before dist is created
+          await fs.mkdir(path.dirname(layeredCssFilePath), { recursive: true })
           await Promise.all([
             fs.writeFile(layeredCssFilePath, layeredCssOutput.content),
             fs.writeFile(