vite-plugin-css-position 2.0.2

package/README.md

@@ -0,0 +1,124 @@
+# vite-plugin-react-css-position
+
+[![npm version](https://img.shields.io/npm/v/vite-plugin-react-css-position)](https://www.npmjs.com/package/vite-plugin-react-css-position)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+A Vite plugin that allows you to control where CSS stylesheets are injected in your React application. Perfect for scenarios where you need precise control over style placement, especially when working with Shadow DOM.
+
+## ✨ Features
+
+- 🎯 **Custom CSS positioning** - Place stylesheets exactly where you need them in your component tree
+- 🌗 **Shadow DOM support** - Ideal for Shadow DOM implementations where styles need to be scoped
+- 🚀 **Development mode** - Optional hot module replacement support
+
+## 📦 Installation
+
+```bash
+npm install vite-plugin-react-css-position
+```
+
+or
+
+```bash
+pnpm add vite-plugin-react-css-position
+```
+
+or
+
+```bash
+yarn add vite-plugin-react-css-position
+```
+
+## 🚀 Quick Start
+
+### 1. Configure Vite
+
+Add the plugin to your `vite.config.ts`:
+
+```typescript
+...
+import { viteReactCssPosition } from "vite-plugin-react-css-position";
+
+export default defineConfig({
+  plugins: [react(), /* or vue(), */ viteReactCssPosition()],
+});
+```
+
+### 2. Use StylesTarget Component
+
+Import and place the `StylesTarget` component where you want your styles to be injected:
+
+#### In React
+
+```tsx
+import StylesTarget from "vite-plugin-react-css-position/react";
+
+export function App() {
+  return (
+    <div>
+      <StylesTarget />
+      <span>Your App Content</span>
+    </div>
+  );
+}
+```
+
+#### In Vue
+
+```vue
+<script setup lang="ts">
+import StylesTarget from "vite-plugin-css-position/vue";
+</script>
+
+<template>
+  <div>
+    <StylesTarget />
+  </div>
+</template>
+```
+
+That's it! Your stylesheets will now be injected at the position of the `<StylesTarget />` component.
+
+## ⚙️ Configuration
+
+The plugin accepts optional configuration:
+
+```typescript
+viteReactCssPosition({
+  enableDev: true,
+});
+```
+
+### Options
+
+- **`instanceId`** - A custom identifier for the plugin instance. Useful when you have multiple instances or need to avoid conflicts. Defaults to a random UUID.
+- **`enableDev`** - When `true`, enables CSS injection during development mode. Defaults to `false`. Enable this for HMR support
+
+## 🛠️ Development
+
+```bash
+# Install dependencies
+npm install
+
+# Run the playground
+npm run play
+
+# Build the library
+npm run build
+
+# Run tests
+npm test
+
+# Type check
+npm run typecheck
+```
+
+## 📝 License
+
+MIT © [Alexander Bogoslawski](https://github.com/Ahn1)
+
+## 🔗 Links
+
+- [GitHub Repository](https://github.com/Ahn1/vite-plugin-react-css-position)
+- [Issue Tracker](https://github.com/Ahn1/vite-plugin-react-css-position/issues)
+- [npm Package](https://www.npmjs.com/package/vite-plugin-react-css-position)

package/dist/StylesTarget.types.d.ts

@@ -0,0 +1,6 @@
+export interface StylesTargetProps {
+    onChange?: (stylesMap: Map<string, {
+        css: string;
+        attributes: Record<string, string>;
+    }>) => void;
+}

package/dist/StylesTargetReact.d.ts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/StylesTarget.types.d.ts
+interface StylesTargetProps {
+  onChange?: (stylesMap: Map<string, {
+    css: string;
+    attributes: Record<string, string>;
+  }>) => void;
+}
+//#endregion
+//#region src/StylesTargetReact.d.ts
+declare const StylesTarget: (props: StylesTargetProps) => (react_jsx_runtime0.JSX.Element | null)[];
+//#endregion
+export { StylesTarget as default };
+//# sourceMappingURL=StylesTargetReact.d.ts.map

package/dist/StylesTargetReact.js

@@ -0,0 +1,2 @@
+import{createElement as e,useEffect as t,useState as n}from"react";const r=__VITE_CSS_POS_GLOBAL_VAR_NAME__,i=__VITE_CSS_POS_EVENT_NAME__,a=()=>window[r];var o=r=>{let[o,s]=n(a()||new Map),[c,l]=n(0);return t(()=>{let e=e=>{let t=a()||new Map;s(t),l(e=>e+1),r.onChange?.(t)};return window.addEventListener(i,e),e(void 0),()=>{window.removeEventListener(i,e)}},[r.onChange]),Array.from(o?.keys()||[]).map(t=>{let n=o.get(t);return n?e(`style`,{...n.attributes,key:`${t}-${c}`},n.css):null})};export{o as default};
+//# sourceMappingURL=StylesTargetReact.js.map

package/dist/StylesTargetReact.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StylesTargetReact.js","names":[],"sources":["../src/StylesTargetReact.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport type { StylesTargetProps } from \"./StylesTarget.types\";\n\ndeclare const __VITE_CSS_POS_GLOBAL_VAR_NAME__: string;\ndeclare const __VITE_CSS_POS_EVENT_NAME__: string;\n\nconst globalVarName = __VITE_CSS_POS_GLOBAL_VAR_NAME__;\nconst eventName = __VITE_CSS_POS_EVENT_NAME__;\n\nconst getCurrent = () => (window as any)[globalVarName];\n\nconst StylesTarget = (props: StylesTargetProps) => {\n  const [stylesMap, setStylesMap] = useState<\n    Map<string, { css: string; attributes: Record<string, string> }>\n  >(getCurrent() || new Map());\n\n  const [version, setVersion] = useState(0);\n\n  useEffect(() => {\n    const updateListener = (_e: Event | undefined) => {\n      const newValues = getCurrent() || new Map();\n      setStylesMap(newValues);\n      setVersion((v) => v + 1);\n      props.onChange?.(newValues);\n    };\n    window.addEventListener(eventName, updateListener);\n\n    updateListener(undefined);\n\n    return () => {\n      window.removeEventListener(eventName, updateListener);\n    };\n  }, [props.onChange]);\n\n  return Array.from(stylesMap?.keys() || []).map((key) => {\n    const entry = stylesMap.get(key);\n    if (!entry) return null;\n    return (\n      <style {...entry.attributes} key={`${key}-${version}`}>\n        {entry.css}\n      </style>\n    );\n  });\n};\n\nexport default StylesTarget;\n"],"mappings":"mEAMA,MAAM,EAAgB,iCAChB,EAAY,4BAEZ,MAAoB,OAAe,GAoCzC,IAAA,EAlCsB,GAA6B,CACjD,GAAM,CAAC,EAAW,GAAgB,EAEhC,GAAY,EAAI,IAAI,IAAM,CAEtB,CAAC,EAAS,GAAc,EAAS,EAAE,CAkBzC,OAhBA,MAAgB,CACd,IAAM,EAAkB,GAA0B,CAChD,IAAM,EAAY,GAAY,EAAI,IAAI,IACtC,EAAa,EAAU,CACvB,EAAY,GAAM,EAAI,EAAE,CACxB,EAAM,WAAW,EAAU,EAM7B,OAJA,OAAO,iBAAiB,EAAW,EAAe,CAElD,EAAe,IAAA,GAAU,KAEZ,CACX,OAAO,oBAAoB,EAAW,EAAe,GAEtD,CAAC,EAAM,SAAS,CAAC,CAEb,MAAM,KAAK,GAAW,MAAM,EAAI,EAAE,CAAC,CAAC,IAAK,GAAQ,CACtD,IAAM,EAAQ,EAAU,IAAI,EAAI,CAEhC,OADK,EAEH,EAAC,QAAA,CAAM,GAAI,EAAM,WAAY,IAAK,GAAG,EAAI,GAAG,KACzC,EAAM,IACD,CAJS,MAMnB"}

package/dist/StylesTargetVue.vue

@@ -0,0 +1,52 @@
+<script lang="ts">
+import { defineComponent, ref, h, onMounted, onUnmounted } from "vue";
+import type { StylesTargetProps } from "./StylesTarget.types";
+
+declare const __VITE_CSS_POS_GLOBAL_VAR_NAME__: string;
+declare const __VITE_CSS_POS_EVENT_NAME__: string;
+
+const globalVarName = __VITE_CSS_POS_GLOBAL_VAR_NAME__;
+const eventName = __VITE_CSS_POS_EVENT_NAME__;
+
+const getCurrent = () => (window as any)[globalVarName];
+
+export default defineComponent({
+  name: "StylesTarget",
+  props: {
+    onChange: {
+      type: Function as unknown as () => StylesTargetProps["onChange"],
+      required: false,
+    },
+  },
+  setup(props) {
+    const stylesMap = ref<Map<string, { css: string; attributes: Record<string, string> }>>(
+      getCurrent() || new Map()
+    );
+    const version = ref(0);
+
+    const updateListener = (_e: Event | undefined) => {
+      const newValues = getCurrent() || new Map();
+      stylesMap.value = newValues;
+      version.value++;
+      (props.onChange as StylesTargetProps["onChange"])?.(newValues);
+    };
+
+    onMounted(() => {
+      window.addEventListener(eventName, updateListener);
+      updateListener(undefined);
+    });
+
+    onUnmounted(() => {
+      window.removeEventListener(eventName, updateListener);
+    });
+
+    return () => {
+      return Array.from(stylesMap.value?.keys() || []).map((key) => {
+        const entry = stylesMap.value.get(key);
+        if (!entry) return null;
+        return h("style", { key: `${key}-${version.value}`, ...entry.attributes }, entry.css);
+      });
+    };
+  },
+});
+</script>

package/dist/StylesTargetVue.vue.d.ts

@@ -0,0 +1,16 @@
+import type { StylesTargetProps } from "./StylesTarget.types";
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    onChange: {
+        type: () => StylesTargetProps["onChange"];
+        required: false;
+    };
+}>, () => (import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | null)[], {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    onChange: {
+        type: () => StylesTargetProps["onChange"];
+        required: false;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+import { Plugin } from "vite";
+
+//#region src/viteCustomCssPosition.d.ts
+interface ViteCustomCssPositionOptions {
+  instanceId?: string;
+  enableDev?: boolean;
+}
+declare function viteCustomCssPosition(options?: ViteCustomCssPositionOptions): Plugin | Plugin[];
+//#endregion
+export { type ViteCustomCssPositionOptions, viteCustomCssPosition as viteReactCssPosition };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -0,0 +1,17 @@
+import e from"vite-plugin-css-injected-by-js";import{hash as t,randomUUID as n}from"crypto";function r(r){let i=r?.instanceId||n().replace(/-/g,``),a=`__vite_c_css_pos_initial_${i}`,o=`__vite_c_css_pos_update_${i}`,s=e({dev:{enableDev:r?.enableDev??!1,removeStyleCode(e){return`
+    (() => {
+          if(window.${a} && window.${a}.has('${e}')) {
+            window.${a}.delete('${e}');
+            window.dispatchEvent( new Event('${o}') );
+          }
+    })()
+          `}},injectCode:(e,n)=>{let r=JSON.stringify(n.attributes||{});return`
+    const css = ${e};
+    const id = ${`"${n.attributes?.[`data-vite-dev-id`]??t(`sha1`,e).substring(0,12)}"`};
+      const attributes = JSON.parse('${r}');
+      window.${a} = window.${a} || new Map();
+      window.${a}.set(id, {css, attributes});
+
+      window.dispatchEvent( new Event('${o}') );
+    `}});return[{name:`vite-plugin-custom-css-position`,config(e){return{...e,define:{...e.define,__VITE_CSS_POS_GLOBAL_VAR_NAME__:JSON.stringify(a),__VITE_CSS_POS_EVENT_NAME__:JSON.stringify(o)}}}},...Array.isArray(s)?s:[s]]}export{r as viteReactCssPosition};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../src/viteCustomCssPosition.ts"],"sourcesContent":["import type { Plugin } from \"vite\";\nimport cssInjectedByJsPlugin from \"vite-plugin-css-injected-by-js\";\nimport { randomUUID, hash } from \"crypto\";\n\nexport interface ViteCustomCssPositionOptions {\n  instanceId?: string;\n  enableDev?: boolean;\n}\n\nexport default function viteCustomCssPosition(\n  options?: ViteCustomCssPositionOptions\n): Plugin | Plugin[] {\n  const instanceId = options?.instanceId || randomUUID().replace(/-/g, \"\");\n\n  const globalVarName = `__vite_c_css_pos_initial_${instanceId}`;\n  const eventName = `__vite_c_css_pos_update_${instanceId}`;\n\n  const cssPlugin = cssInjectedByJsPlugin({\n    dev: {\n      enableDev: options?.enableDev ?? false,\n      removeStyleCode(id: string) {\n        return `\n    (() => {\n          if(window.${globalVarName} && window.${globalVarName}.has('${id}')) {\n            window.${globalVarName}.delete('${id}');\n            window.dispatchEvent( new Event('${eventName}') );\n          }\n    })()\n          `;\n      },\n    },\n    injectCode: (css, attributes) => {\n      const attributesString = JSON.stringify(attributes.attributes || {});\n      const id = `\"${\n        attributes.attributes?.[\"data-vite-dev-id\"] ??\n        hash(\"sha1\", css).substring(0, 12)\n      }\"`;\n      return `\n    const css = ${css};\n    const id = ${id};\n      const attributes = JSON.parse('${attributesString}');\n      window.${globalVarName} = window.${globalVarName} || new Map();\n      window.${globalVarName}.set(id, {css, attributes});\n\n      window.dispatchEvent( new Event('${eventName}') );\n    `;\n    },\n  });\n\n  return [\n    {\n      name: \"vite-plugin-custom-css-position\",\n      config(c) {\n        return {\n          ...c,\n          define: {\n            ...c.define,\n            __VITE_CSS_POS_GLOBAL_VAR_NAME__: JSON.stringify(globalVarName),\n            __VITE_CSS_POS_EVENT_NAME__: JSON.stringify(eventName),\n          },\n        };\n      },\n    },\n    ...(Array.isArray(cssPlugin) ? cssPlugin : [cssPlugin]),\n  ];\n}\n"],"mappings":"4FASA,SAAwB,EACtB,EACmB,CACnB,IAAM,EAAa,GAAS,YAAc,GAAY,CAAC,QAAQ,KAAM,GAAG,CAElE,EAAgB,4BAA4B,IAC5C,EAAY,2BAA2B,IAEvC,EAAY,EAAsB,CACtC,IAAK,CACH,UAAW,GAAS,WAAa,GACjC,gBAAgB,EAAY,CAC1B,MAAO;;sBAEO,EAAc,aAAa,EAAc,QAAQ,EAAG;qBACrD,EAAc,WAAW,EAAG;+CACF,EAAU;;;aAKpD,CACD,YAAa,EAAK,IAAe,CAC/B,IAAM,EAAmB,KAAK,UAAU,EAAW,YAAc,EAAE,CAAC,CAKpE,MAAO;kBACK,EAAI;iBALL,IACT,EAAW,aAAa,qBACxB,EAAK,OAAQ,EAAI,CAAC,UAAU,EAAG,GAAG,CACnC,GAGa;uCACmB,EAAiB;eACzC,EAAc,YAAY,EAAc;eACxC,EAAc;;yCAEY,EAAU;OAGhD,CAAC,CAEF,MAAO,CACL,CACE,KAAM,kCACN,OAAO,EAAG,CACR,MAAO,CACL,GAAG,EACH,OAAQ,CACN,GAAG,EAAE,OACL,iCAAkC,KAAK,UAAU,EAAc,CAC/D,4BAA6B,KAAK,UAAU,EAAU,CACvD,CACF,EAEJ,CACD,GAAI,MAAM,QAAQ,EAAU,CAAG,EAAY,CAAC,EAAU,CACvD"}

package/package.json

@@ -0,0 +1,79 @@
+{
+  "name": "vite-plugin-css-position",
+  "version": "2.0.2",
+  "description": "Custom position of vite styles within a vite react app",
+  "type": "module",
+  "license": "MIT",
+  "homepage": "https://github.com/Ahn1/vite-plugin-react-css-position",
+  "bugs": {
+    "url": "https://github.com/Ahn1/vite-plugin-react-css-position/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Ahn1/vite-plugin-react-css-position.git"
+  },
+  "author": "Alexander Bogoslawski <alexanderb@posteo.de>",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./target": {
+      "types": "./dist/StylesTarget.d.ts",
+      "default": "./dist/StylesTarget.js"
+    },
+    "./react": {
+      "types": "./dist/StylesTarget.d.ts",
+      "default": "./dist/StylesTarget.js"
+    },
+    "./vue": {
+      "types": "./dist/StylesTargetVue.vue.d.ts",
+      "default": "./dist/StylesTargetVue.vue"
+    },
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "vue": "^3.5.22"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
+    "@tsconfig/strictest": "^2.0.6",
+    "@types/node": "^24.9.1",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "@vitejs/plugin-react": "^5.0.4",
+    "bumpp": "^10.3.1",
+    "globals": "^16.4.0",
+    "happy-dom": "^20.0.8",
+    "tsdown": "^0.15.9",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.45.0",
+    "unplugin-vue": "^7.0.4",
+    "vite": "^7.1.12",
+    "vitest": "^4.0.1",
+    "vue-tsc": "^3.1.3"
+  },
+  "dependencies": {
+    "vite-plugin-css-injected-by-js": "^3.5.2"
+  },
+  "scripts": {
+    "build": "tsdown && vue-tsc --project tsconfig.vue.json --skipLibCheck && cp src/StylesTargetVue.vue dist/StylesTargetVue.vue",
+    "dev": "tsdown --watch",
+    "play": "vite --config playground/vite.config.ts",
+    "test": "vitest",
+    "typecheck": "tsc --noEmit",
+    "release": "bumpp && pnpm publish"
+  }
+}