feat: prefix the css class names (#163)

* feat: prefix the css class names * chore: css remove hash * chore: restore css class name hash
ory · Oct 17, 2023 · 11a97ff · 11a97ff
1 parent d1cfe00
commit 11a97ff
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 2 deletions.
diff --git a/packages/markup/vite.config.ts b/packages/markup/vite.config.ts
@@ -10,7 +10,18 @@ import { viteStaticCopy } from "vite-plugin-static-copy"
 
 export default defineConfig({
   plugins: [
-    vanillaExtractPlugin(),
+    vanillaExtractPlugin({
+      emitCssInSsr: true,
+      identifiers: ({ hash, filePath, debugId }) => {
+        const name = filePath
+          .split("/")
+          ?.pop()
+          ?.split(".")[0]
+          ?.replace("-", "_")
+        const id = debugId ? "_" + debugId : ""
+        return `ory_elements__${name}${id}__${hash}`
+      },
+    }),
     dts({ insertTypesEntry: true }),
     react(),
     viteStaticCopy({

diff --git a/packages/preact/vite.config.ts b/packages/preact/vite.config.ts
@@ -32,7 +32,18 @@ export default defineConfig({
     },
   },
   plugins: [
-    vanillaExtractPlugin(),
+    vanillaExtractPlugin({
+      emitCssInSsr: true,
+      identifiers: ({ hash, filePath, debugId }) => {
+        const name = filePath
+          .split("/")
+          ?.pop()
+          ?.split(".")[0]
+          ?.replace("-", "_")
+        const id = debugId ? "_" + debugId : ""
+        return `ory_elements__${name}${id}__${hash}`
+      },
+    }),
     dts({ insertTypesEntry: true }),
     preact(),
     viteStaticCopy({

diff --git a/packages/react/vite.config.ts b/packages/react/vite.config.ts
@@ -21,6 +21,15 @@ export default defineConfig({
   plugins: [
     vanillaExtractPlugin({
       emitCssInSsr: true,
+      identifiers: ({ hash, filePath, debugId }) => {
+        const name = filePath
+          .split("/")
+          ?.pop()
+          ?.split(".")[0]
+          ?.replace("-", "_")
+        const id = debugId ? "_" + debugId : ""
+        return `ory_elements__${name}${id}__${hash}`
+      },
     }),
     dts({
       insertTypesEntry: true,