feat: add tailwind export

aidanaden · Jan 13, 2024 · 6548bf7 · 6548bf7
1 parent 357354d
commit 6548bf7
Show file tree

Hide file tree

Showing 12 changed files with 140 additions and 39 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,29 @@
 # solid-glow
 
+## 0.0.5
+
+### Patch Changes
+
+- add tailwind export
+
+## 0.0.4
+
+### Patch Changes
+
+- add tailwind export
+
+## 0.0.3
+
+### Patch Changes
+
+- add tailwind to exports
+
+## 0.0.2
+
+### Patch Changes
+
+- add tailwind package
+
 ## 0.0.1
 
 ### Patch Changes

diff --git a/README.md b/README.md
@@ -16,16 +16,11 @@
 
 [![solid-glow](https://nodei.co/npm/solid-glow.png)](https://npmjs.org/package/solid-glow)
 
-{{desc_of_lib}}
+Add a mouse-tracing glow effect to React components.
 
-> **Note** After using this template, you have to search and replace all `solid-glow` and similar strings
-> with appropriate texts.
->
-> `solid-glow` should be a **kebab-case** string representing the name of you monorepo.
->
-> `{{desc_of_lib}}` should be a **Normal case** string with the description of the repository.
->
-> `{{me}}` should be a **kebab-case** string from your profile URL.
+![gif of glow effect](./media/glow.gif)
+
+The glow effect will only work using the mouse as the pointer. Touch events will not trigger it.
 
 ## Quick start
 
@@ -41,6 +36,67 @@ pnpm add solid-glow
 
 Use it:
 
-```tsx
-import solid-glow from 'solid-glow'
+Wrap any number of `<Glow>` components in a `<GlowCapture>` which will be used to track the mouse location.
+
+```jsx
+<GlowCapture>
+  <span>This won't glow</span>
+  <Glow color="purple">
+    <span className="text-black glow:text-glow/50 glow:bg-red-100">
+      This will glow purple when the mouse is passed over
+    </span>
+  </Glow>
+</GlowCapture>
+```
+
+Children of `<Glow>` can style themselves how to look when glowing. You might choose to leave some children unchanged, or highlight them with the `glow:` variant style.
+
+The value of `color` will be available as a CSS variable `--glow-color`, as well as the Tailwind `glow` color.
+You can pass any valid CSS color, including `hsl()` values etc.
+Of course, you might choose to use any other color; you can leave out the `color` prop entirely.
+
+## Tailwind
+
+Add the tailwind plugin to unlock the `glow:` variant and `glow` color
+
+`tailwind.config.js`
+
+```js
+module.exports = {
+  ...
+  plugins: [
+    require('@codaworks/react-glow/tailwind')
+  ]
+}
+```
+
+As with all colors in Tailwind, you may add opacity by appending a percentage after the color, such as `bg-glow/20` for 20% opacity.
+
+## Vanilla CSS
+
+You can style the glow effect with vanilla CSS:
+
+```jsx
+<GlowCapture>
+  <span>This won't glow</span>
+  <Glow color="hsl(338.69 100% 48.04%)">
+    <span className="glowable-text">
+      This will glow pink when the mouse is passed over
+    </span>
+  </Glow>
+</GlowCapture>
 ```
+
+```css
+.glowable-text {
+  color: black;
+}
+
+[glow] .glowable-text {
+  color: var(--glow-color);
+}
+```
+
+## Attribution
+
+SolidJS port of [react-glow](https://twitter.com/codepen/status/1696297659663888490).
diff --git a/dev/bun.lockb b/dev/bun.lockb
diff --git a/dev/package.json b/dev/package.json
@@ -9,11 +9,16 @@
   "dependencies": {
     "@solidjs/start": "^0.4.9",
     "highlight.js": "11.9.0",
-    "solid-glow": "^0.0.1",
+    "solid-glow": "^0.0.7",
     "solid-js": "^1.8.11",
     "vinxi": "0.1.2"
   },
   "engines": {
     "node": ">=18"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.33",
+    "tailwindcss": "^3.4.1"
   }
 }
diff --git a/dev/postcss.config.cjs b/dev/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/dev/src/app.tsx b/dev/src/app.tsx
@@ -10,7 +10,7 @@ const App: Component = () => {
       <GlowCapture>
         <span>This won't glow</span>
         <Glow color="hsl(338.69 100% 48.04%)">
-          <span class="glowable-text">
+          <span class="text-black glow:text-glow">
             This will glow pink when the mouse is passed over
           </span>
         </Glow>

diff --git a/dev/src/main.css b/dev/src/main.css
@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
@@ -11,11 +15,3 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
-
-.glowable-text {
-  color: black;
-}
-
-[glow] .glowable-text {
-  color: var(--glow-color);
-}
diff --git a/dev/tailwind.config.cjs b/dev/tailwind.config.cjs
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [require("solid-glow/tailwind")],
+};
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "solid-glow",
-  "version": "0.0.1",
+  "version": "0.0.7",
   "description": "Add a mouse-tracing glow effect to Solid components",
   "license": "MIT",
   "author": "aidanaden",
@@ -28,19 +28,24 @@
   "types": "./dist/index.d.ts",
   "browser": {},
   "exports": {
-    "solid": {
-      "development": "./dist/dev.jsx",
-      "import": "./dist/index.jsx"
-    },
-    "development": {
+    ".": {
+      "solid": {
+        "development": "./dist/dev.jsx",
+        "import": "./dist/index.jsx"
+      },
+      "development": {
+        "import": {
+          "types": "./dist/index.d.ts",
+          "default": "./dist/dev.js"
+        }
+      },
       "import": {
         "types": "./dist/index.d.ts",
-        "default": "./dist/dev.js"
+        "default": "./dist/index.js"
       }
     },
-    "import": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
+    "./tailwind": {
+      "default": "./src/tailwind.js"
     }
   },
   "typesVersions": {},

diff --git a/src/tailwind.cjs → src/tailwind.js b/src/tailwind.cjs → src/tailwind.js
diff --git a/tsconfig.json b/tsconfig.json
@@ -9,6 +9,7 @@
     "esModuleInterop": true,
     "noEmit": true,
     "isolatedModules": true,
+    "declaration": true,
     "skipLibCheck": true,
     "allowSyntheticDefaultImports": true,
     "forceConsistentCasingInFileNames": true,

diff --git a/tsup.config.ts b/tsup.config.ts
@@ -29,16 +29,16 @@ export default defineConfig((config) => {
 
   const parsed_options = preset.parsePresetOptions(preset_options, watching);
 
-  if (!watching && !CI) {
-    const package_fields = preset.generatePackageExports(parsed_options);
+  // if (!watching && !CI) {
+  //   const package_fields = preset.generatePackageExports(parsed_options);
 
-    console.log(
-      `package.json: \n\n${JSON.stringify(package_fields, null, 2)}\n\n`
-    );
+  //   console.log(
+  //     `package.json: \n\n${JSON.stringify(package_fields, null, 2)}\n\n`
+  //   );
 
-    // will update ./package.json with the correct export fields
-    preset.writePackageJson(package_fields);
-  }
+  //   // will update ./package.json with the correct export fields
+  //   preset.writePackageJson(package_fields);
+  // }
 
   return preset.generateTsupOptions(parsed_options);
 });