Add initial implementation

Author: ai

.github/workflows/deploy.yaml

@@ -0,0 +1,36 @@
+name: Test
+on:
+  push:
+    branches:
+      - main
+permissions:
+  contents: read
+jobs:
+  deploy:
+    name: Demo Deploy
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    steps:
+      - name: Checkout the repository
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+        with:
+          persist-credentials: false
+      - name: Install pnpm
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        with:
+          version: 10
+      - name: Install Node.js
+        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        with:
+          node-version: 24
+          cache: pnpm
+      - name: Install dependencies
+        run: pnpm install --ignore-scripts
+      - name: Build
+        run: pnpm build
+      - name: Deploy
+        uses: JamesIves/github-pages-deploy-action@6c2d9db40f9296374acc17b90404b6e8864128c8 # v4.7.3
+        with:
+          folder: test/demo/dist
+          branch: gh-pages

.gitignore

@@ -1,3 +1,2 @@
 node_modules/
-
-coverage/
+dist/

README.md

@@ -4,31 +4,27 @@
      title="Philosopher’s stone, logo of PostCSS"
      src="https://postcss.org/logo-leftp.svg">
 
-[PostCSS] plugin to generate more realistic [“smooth” shadows](https://tobiasahlin.com/blog/layered-smooth-box-shadows/).
+[PostCSS](https://github.com/postcss/postcss) plugin to generate more realistic [“smooth” shadows](https://tobiasahlin.com/blog/layered-smooth-box-shadows/).
 
 ```css
 .card {
-  box-shadow: --smooth-shadow(#000, 10px, 2);
+  box-shadow: --soft-shadow(0 1rem 2rem oklch(0 0 0 / 10%));
 }
 ```
 
 ```css
 .card {
   box-shadow:
-    0 calc(10px / 2) calc(10px / 2 * 2) oklch(from #000 l c h / 0.25),
-    0 calc(10px / 2 * 2) calc(10px / 2 * 3) oklch(from #000 l c h / 0.18),
-    0 calc(10px / 2 * 3) calc(10px / 2 * 4) oklch(from #000 l c h / 0.12);
+    0 calc(0.0278 * 1rem) calc(0.0278 * 2rem) rgb(from oklch(0 0 0 / 10%) r g b / calc(alpha * 0.167)),
+    0 calc(0.1111 * 1rem) calc(0.1111 * 2rem) rgb(from oklch(0 0 0 / 10%) r g b / calc(alpha * 0.333)),
+    0 calc(0.25 * 1rem) calc(0.25 * 2rem) rgb(from oklch(0 0 0 / 10%) r g b / calc(alpha * 0.5)),
+    0 calc(0.4444 * 1rem) calc(0.4444 * 2rem) rgb(from oklch(0 0 0 / 10%) r g b / calc(alpha * 0.667)),
+    0 calc(0.6944 * 1rem) calc(0.6944 * 2rem) rgb(from oklch(0 0 0 / 10%) r g b / calc(alpha * 0.833)),
+    0 calc(1 * 1rem) calc(1 * 2rem) rgb(from oklch(0 0 0 / 10%) r g b / calc(alpha * 1));
 }
 ```
 
-[postcss-utilities] collection is better for `clearfix` and other popular hacks.
-For simple cases you can use [postcss-define-property].
-
-[postcss-define-property]: https://github.com/daleeidd/postcss-define-property
-[postcss-utilities]:       https://github.com/ismamz/postcss-utilities
-[postcss-simple-vars]:     https://github.com/postcss/postcss-simple-vars
-[postcss-nested]:          https://github.com/postcss/postcss-nested
-[PostCSS]:                 https://github.com/postcss/postcss
+It supports non-px units like `rem`, 3 shadow types, inset shadows, and any color format (we recommends [`oklch()`](https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl)).
 
 ---
 
@@ -64,3 +60,38 @@ module.exports = {
   ]
 }
 ```
+
+### CSS API
+
+The plugins supports 3 shadows types. You can try them on [`smoothshadows.com`](https://smoothshadows.com).
+
+```css
+.soft {
+  box-shadow: --soft-shadow(10px 0 8px oklch(0 0 0 / 10%));
+}
+.sharp {
+  box-shadow: --sharp-shadow(10px 0 8px oklch(0 0 0 / 10%));
+}
+.linear {
+  box-shadow: --linear-shadow(10px 0 8px oklch(0 0 0 / 10%));
+}
+```
+
+It also supports `inset` shadows:
+
+```css
+.inset {
+  box-shadow: --soft-shadow(inset 10px 0 8px oklch(0 0 0 / 10%));
+}
+```
+
+### JS API
+
+There is low-level JS API:
+
+```ts
+import { renderShadows } from 'postcss-smooth-shadow'
+
+renderShadows('soft', false, '10px', '0', '8px', 'oklch(0 0 0 / 10%)')
+// => "0 calc(0.0278 * 1rem) calc(0.0278 * 2rem) rgb(from oklch(0 0 0 / 10%)…"
+```

index.d.ts

@@ -1,5 +1,14 @@
 import type { PluginCreator, AtRule } from 'postcss'
 
+export function renderShadows(
+  type: 'linear' | 'sharp' | 'soft',
+  inset: boolean,
+  x: number,
+  y: number,
+  blur: number,
+  color: string
+): string
+
 declare const plugin: PluginCreator<{}>
 
-export = plugin
+export default plugin