test: css

.eslintrc

@@ -2,15 +2,21 @@
   "root": true,
   "parser": "@typescript-eslint/parser",
   "plugins": ["@typescript-eslint", "no-only-tests", "eslint-comments"],
-  "ignorePatterns": ["node_modules", "dist", "dev", "tsup.config.ts", "vitest.config.ts"],
+  "ignorePatterns": [
+    "node_modules",
+    "dist",
+    "dev",
+    "tsup.config.ts",
+    "vitest.config.ts"
+  ],
   "parserOptions": {
     "project": "./tsconfig.json",
     "tsconfigRootDir": ".",
     "sourceType": "module"
   },
   "rules": {
     "prefer-const": "warn",
-    "no-console": "warn",
+    // "no-console": "warn",
     "no-debugger": "warn",
     "@typescript-eslint/no-unused-vars": [
       "warn",

dev/App.tsx

@@ -1,4 +1,5 @@
 import type { Component } from "solid-js";
+import { Glow, GlowCapture } from "./../src/index";
 import styles from "./App.module.css";
 import logo from "./logo.svg";
 
@@ -19,6 +20,17 @@ const App: Component = () => {
           Learn Solid
         </a>
       </header>
+      <div>
+        GLOW CAPTURE:
+        <GlowCapture>
+          <span>This won't glow</span>
+          <Glow color="hsl(338.69 100% 48.04%)">
+            <span class="glowable-text">
+              This will glow pink when the mouse is passed over
+            </span>
+          </Glow>
+        </GlowCapture>
+      </div>
     </div>
   );
 };

dev/styles.css

@@ -1,11 +1,21 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
-    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    monospace;
+}
+
+.glowable-text {
+  color: black;
+}
+
+[glow] .glowable-text {
+  color: var(--glow-color);
 }

package.json

@@ -38,8 +38,7 @@
     "import": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
-    },
-    "tailwind": "./src/tailwind.cjs"
+    }
   },
   "typesVersions": {},
   "scripts": {
@@ -61,12 +60,14 @@
     "@types/node": "^20.10.5",
     "@typescript-eslint/eslint-plugin": "^6.1.0",
     "@typescript-eslint/parser": "^6.1.0",
+    "autoprefixer": "^10.4.16",
     "concurrently": "^8.2.2",
     "esbuild": "^0.19.10",
     "esbuild-plugin-solid": "^0.5.0",
     "eslint": "^8.56.0",
     "eslint-plugin-eslint-comments": "^3.2.0",
     "eslint-plugin-no-only-tests": "^3.1.0",
+    "postcss": "^8.4.32",
     "solid-js": "^1.8.7",
     "tailwindcss": "^3.3.7",
     "tsup": "^8.0.1",

postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

src/index.tsx

@@ -20,9 +20,9 @@ export const GlowCapture: Component<GlowCaptureProps> = (props) => {
       if (e.pointerType === "mouse") {
         requestAnimationFrame(() => {
           // @ts-ignore
-          element.current?.style.setProperty("--glow-x", `${e.layerX}px`);
+          element.style.setProperty("--glow-x", `${e.offsetX}px`);
           // @ts-ignore
-          element.current?.style.setProperty("--glow-y", `${e.layerY}px`);
+          element.style.setProperty("--glow-y", `${e.offsetY}px`);
         });
       }
     };
@@ -50,7 +50,9 @@ export const GlowCapture: Component<GlowCaptureProps> = (props) => {
         "--glow-size": `${local.size}px`,
       }}
       {...rest}
-    />
+    >
+      {local.children}
+    </div>
   );
 };
 
@@ -61,11 +63,17 @@ calc(var(--glow-y, -99999px) - var(--glow-top, 0px)), #000000 1%, transparent 50
 
 type GlowProps = ComponentProps<"div"> & {
   color: string;
-  debug: boolean;
+  debug?: boolean;
 };
 
 export const Glow: Component<GlowProps> = (props) => {
-  const [local, rest] = splitProps(props, ["class", "style", "children"]);
+  const [local, rest] = splitProps(props, [
+    "class",
+    "style",
+    "children",
+    "color",
+    "debug",
+  ]);
   let element: HTMLDivElement;
 
   createEffect(() => {
@@ -82,9 +90,10 @@ export const Glow: Component<GlowProps> = (props) => {
     });
 
     const capture = element.closest(".glow-capture");
-    if (capture) observer.observe(capture);
-
-    return () => observer.disconnect();
+    if (capture) {
+      observer.observe(capture);
+    }
+    onCleanup(() => observer.disconnect());
   });
 
   return (
@@ -100,15 +109,15 @@ export const Glow: Component<GlowProps> = (props) => {
         {local.children}
       </div>
       <div
-        class={`glow-mask ${props.class}`}
+        class={`glow-mask ${local.class}`}
         // @ts-ignore
         glow="true"
         style={{
-          "--glow-color": props.color,
+          "--glow-color": local.color,
           "grid-area": "1/1/1/1",
           "pointer-events": "none",
-          mask: props.debug ? undefined : mask,
-          "-webkit-mask": props.debug ? undefined : mask,
+          mask: local.debug ? undefined : mask,
+          "-webkit-mask": local.debug ? undefined : mask,
         }}
         {...rest}
       >

tailwind.config.cjs

@@ -0,0 +1,5 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ["./dev/**/*.tsx"],
+  plugins: [require("./src/tailwind.cjs")],
+};