css-box-shadow-parser 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 HTML Code Generator (https://www.html-code-generator.com/)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,154 @@
+# css-box-shadow-parser
+
+Parse any CSS `box-shadow` value into structured JavaScript objects.  
+Works in **Node.js** and the **browser**. Zero dependencies.
+
+---
+
+## Install
+
+```bash
+npm install css-box-shadow-parser
+```
+
+**CDN (browser)**
+
+```html
+<script src="https://unpkg.com/css-box-shadow-parser"></script>
+<script>
+  const layers = BoxShadowParser.parse('4px 4px 10px rgba(0,0,0,0.4)');
+</script>
+```
+
+---
+
+## Usage
+
+```js
+const { parse, parseSingle, split } = require('css-box-shadow-parser');
+
+// Single layer
+parse('4px 4px 10px rgba(0,0,0,0.4)');
+
+// Multi-layer
+parse('0 1px 2px #0002, 0 4px 8px #0002');
+
+// Full CSS declaration — strips "box-shadow:" and ";" automatically
+parse('box-shadow: inset 0 2px 4px rgba(0,0,0,.24);');
+
+// CSS keyword → empty array
+parse('none'); // []
+```
+
+---
+
+## API
+
+### `parse(shadow)` → `BoxShadowLayer[]`
+
+Parses a full `box-shadow` value (single or multi-layer).  
+Accepts raw values **or** complete CSS declarations.
+
+### `parseSingle(token)` → `BoxShadowLayer | null`
+
+Parses a single shadow token. Returns `null` for invalid input.
+
+### `split(shadow)` → `string[]`
+
+Splits a compound value on top-level commas without parsing.  
+Commas inside `rgba()`, `hsl()` etc. are correctly ignored.
+
+---
+
+## Return Type — `BoxShadowLayer`
+
+```ts
+{
+  inset:  boolean  // true if shadow uses `inset`
+  x:      number   // horizontal offset (px)
+  y:      number   // vertical offset (px)
+  blur:   number   // blur radius (px)
+  spread: number   // spread radius (px, can be negative)
+  color:  string   // original CSS color token
+  alpha:  number   // opacity 0–1
+  hex:    string   // resolved 6-digit hex
+}
+```
+
+---
+
+## Examples
+
+```js
+const { parse } = require('css-box-shadow-parser');
+
+// Named color → hex resolved
+parse('0 0 28px 6px rebeccapurple')
+// [{
+//   inset: false, x: 0, y: 0, blur: 28, spread: 6,
+//   color: 'rebeccapurple', alpha: 1, hex: '#663399'
+// }]
+
+// 8-digit hex — alpha extracted
+parse('0 8px 24px #00000066')
+// [{
+//   inset: false, x: 0, y: 8, blur: 24, spread: 0,
+//   color: '#00000066', alpha: 0.4, hex: '#000000'
+// }]
+
+// HSL color
+parse('0 6px 20px hsl(270 80% 50% / 0.6)')
+// [{
+//   inset: false, x: 0, y: 6, blur: 20, spread: 0,
+//   color: 'hsl(270 80% 50% / 0.6)', alpha: 0.6, hex: '#8019e6'
+// }]
+
+// Transparent (alpha = 0)
+parse('0 4px 8px transparent')
+// [{
+//   inset: false, x: 0, y: 4, blur: 8, spread: 0,
+//   color: 'transparent', alpha: 0, hex: '#000000'
+// }]
+
+// Inset
+parse('inset 0 2px 4px rgba(0,0,0,0.24)')
+// [{
+//   inset: true, x: 0, y: 2, blur: 4, spread: 0,
+//   color: 'rgba(0,0,0,0.24)', alpha: 0.24, hex: '#000000'
+// }]
+
+// Neumorphic — two layers
+parse('6px 6px 12px #b8b9be, -6px -6px 12px #ffffff')
+// [
+//   { inset: false, x:  6, y:  6, blur: 12, spread: 0, color: '#b8b9be', alpha: 1, hex: '#b8b9be' },
+//   { inset: false, x: -6, y: -6, blur: 12, spread: 0, color: '#ffffff', alpha: 1, hex: '#ffffff' }
+// ]
+
+// split only — no parsing
+split('4px 4px 0 red, inset 0 0 10px rgba(0,0,0,.5)')
+// ['4px 4px 0 red', 'inset 0 0 10px rgba(0,0,0,.5)']
+```
+
+---
+
+## Supported Color Formats
+
+| Format          | Example                        |
+|-----------------|--------------------------------|
+| 3-digit hex     | `#f00`                         |
+| 4-digit hex     | `#f00a`                        |
+| 6-digit hex     | `#ff0000`                      |
+| 8-digit hex     | `#ff000066`                    |
+| `rgb()`         | `rgb(255,0,0)`                 |
+| `rgba()`        | `rgba(0,0,0,0.5)`              |
+| `hsl()`         | `hsl(270 80% 50%)`             |
+| `hsla()`        | `hsla(270,80%,50%,0.6)`        |
+| Named color     | `rebeccapurple`, `coral`, etc. |
+| `transparent`   | alpha = 0                      |
+| `currentcolor`  | resolves to `#000000`          |
+
+---
+
+## License
+
+MIT

package/index.js

@@ -0,0 +1,352 @@
+/*!
+ * css-box-shadow-parser v1.0.0
+ * Parse CSS box-shadow values into structured layer objects.
+ * https://github.com/html-code-generator/css-box-shadow-parser
+ *
+ * @author  HTML Code Generator <htmlcodegenerator.com@gmail.com>
+ * @website https://www.html-code-generator.com/
+ * @license MIT
+ */
+
+(function (root, factory) {
+    const api = factory();
+
+    if (typeof module === 'object' && module.exports) {
+        module.exports = api;
+    } else {
+        root.BoxShadowParser = api;
+    }
+}(
+    typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : this,
+    () => {
+        const NO_SHADOW = new Set(['none', 'initial', 'inherit', 'unset', 'revert', 'revert-layer']);
+        const UNRESOLVED_COLOR_HEX = '#000000';
+
+        const NAMED_COLORS = {
+            aliceblue: '#f0f8ff',
+            antiquewhite: '#faebd7',
+            aqua: '#00ffff',
+            aquamarine: '#7fffd4',
+            azure: '#f0ffff',
+            beige: '#f5f5dc',
+            bisque: '#ffe4c4',
+            black: '#000000',
+            blanchedalmond: '#ffebcd',
+            blue: '#0000ff',
+            blueviolet: '#8a2be2',
+            brown: '#a52a2a',
+            burlywood: '#deb887',
+            cadetblue: '#5f9ea0',
+            chartreuse: '#7fff00',
+            chocolate: '#d2691e',
+            coral: '#ff7f50',
+            cornflowerblue: '#6495ed',
+            cornsilk: '#fff8dc',
+            crimson: '#dc143c',
+            cyan: '#00ffff',
+            darkblue: '#00008b',
+            darkcyan: '#008b8b',
+            darkgoldenrod: '#b8860b',
+            darkgray: '#a9a9a9',
+            darkgreen: '#006400',
+            darkgrey: '#a9a9a9',
+            darkkhaki: '#bdb76b',
+            darkmagenta: '#8b008b',
+            darkolivegreen: '#556b2f',
+            darkorange: '#ff8c00',
+            darkorchid: '#9932cc',
+            darkred: '#8b0000',
+            darksalmon: '#e9967a',
+            darkseagreen: '#8fbc8f',
+            darkslateblue: '#483d8b',
+            darkslategray: '#2f4f4f',
+            darkslategrey: '#2f4f4f',
+            darkturquoise: '#00ced1',
+            darkviolet: '#9400d3',
+            deeppink: '#ff1493',
+            deepskyblue: '#00bfff',
+            dimgray: '#696969',
+            dimgrey: '#696969',
+            dodgerblue: '#1e90ff',
+            firebrick: '#b22222',
+            floralwhite: '#fffaf0',
+            forestgreen: '#228b22',
+            fuchsia: '#ff00ff',
+            gainsboro: '#dcdcdc',
+            ghostwhite: '#f8f8ff',
+            gold: '#ffd700',
+            goldenrod: '#daa520',
+            gray: '#808080',
+            green: '#008000',
+            greenyellow: '#adff2f',
+            grey: '#808080',
+            honeydew: '#f0fff0',
+            hotpink: '#ff69b4',
+            indianred: '#cd5c5c',
+            indigo: '#4b0082',
+            ivory: '#fffff0',
+            khaki: '#f0e68c',
+            lavender: '#e6e6fa',
+            lavenderblush: '#fff0f5',
+            lawngreen: '#7cfc00',
+            lemonchiffon: '#fffacd',
+            lightblue: '#add8e6',
+            lightcoral: '#f08080',
+            lightcyan: '#e0ffff',
+            lightgoldenrodyellow: '#fafad2',
+            lightgray: '#d3d3d3',
+            lightgreen: '#90ee90',
+            lightgrey: '#d3d3d3',
+            lightpink: '#ffb6c1',
+            lightsalmon: '#ffa07a',
+            lightseagreen: '#20b2aa',
+            lightskyblue: '#87cefa',
+            lightslategray: '#778899',
+            lightslategrey: '#778899',
+            lightsteelblue: '#b0c4de',
+            lightyellow: '#ffffe0',
+            lime: '#00ff00',
+            limegreen: '#32cd32',
+            linen: '#faf0e6',
+            magenta: '#ff00ff',
+            maroon: '#800000',
+            mediumaquamarine: '#66cdaa',
+            mediumblue: '#0000cd',
+            mediumorchid: '#ba55d3',
+            mediumpurple: '#9370db',
+            mediumseagreen: '#3cb371',
+            mediumslateblue: '#7b68ee',
+            mediumspringgreen: '#00fa9a',
+            mediumturquoise: '#48d1cc',
+            mediumvioletred: '#c71585',
+            midnightblue: '#191970',
+            mintcream: '#f5fffa',
+            mistyrose: '#ffe4e1',
+            moccasin: '#ffe4b5',
+            navajowhite: '#ffdead',
+            navy: '#000080',
+            oldlace: '#fdf5e6',
+            olive: '#808000',
+            olivedrab: '#6b8e23',
+            orange: '#ffa500',
+            orangered: '#ff4500',
+            orchid: '#da70d6',
+            palegoldenrod: '#eee8aa',
+            palegreen: '#98fb98',
+            paleturquoise: '#afeeee',
+            palevioletred: '#db7093',
+            papayawhip: '#ffefd5',
+            peachpuff: '#ffdab9',
+            peru: '#cd853f',
+            pink: '#ffc0cb',
+            plum: '#dda0dd',
+            powderblue: '#b0e0e6',
+            purple: '#800080',
+            rebeccapurple: '#663399',
+            red: '#ff0000',
+            rosybrown: '#bc8f8f',
+            royalblue: '#4169e1',
+            saddlebrown: '#8b4513',
+            salmon: '#fa8072',
+            sandybrown: '#f4a460',
+            seagreen: '#2e8b57',
+            seashell: '#fff5ee',
+            sienna: '#a0522d',
+            silver: '#c0c0c0',
+            skyblue: '#87ceeb',
+            slateblue: '#6a5acd',
+            slategray: '#708090',
+            slategrey: '#708090',
+            snow: '#fffafa',
+            springgreen: '#00ff7f',
+            steelblue: '#4682b4',
+            tan: '#d2b48c',
+            teal: '#008080',
+            thistle: '#d8bfd8',
+            tomato: '#ff6347',
+            turquoise: '#40e0d0',
+            violet: '#ee82ee',
+            wheat: '#f5deb3',
+            white: '#ffffff',
+            whitesmoke: '#f5f5f5',
+            yellow: '#ffff00',
+            yellowgreen: '#9acd32',
+        };
+
+        const RE_COLOR_FN = /\b(?:rgba?|hsla?|oklch|oklab|lch|lab|hwb|color)\s*\([^()]*\)/i;
+        const RE_COLOR_HEX = /#[0-9a-fA-F]{8}\b|#[0-9a-fA-F]{6}\b|#[0-9a-fA-F]{4}\b|#[0-9a-fA-F]{3}\b/;
+        const RE_COLOR_NAME = new RegExp(`\\b(?:transparent|currentcolor|${Object.keys(NAMED_COLORS).join('|')})\\b`, 'i');
+        const RE_LENGTH = /[+-]?(?:\d*\.)?\d+(?:px|r?em|%|v(?:[hw]|min|max)|ch|ex|cm|mm|in|p[tc]|q)?(?=\s|$)/g;
+
+        const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+        const roundAlpha = (value) => Math.round(clamp(value, 0, 1) * 100) / 100;
+
+        const parseChannel = (raw) => {
+            const value = raw.trim();
+            const parsed = parseFloat(value);
+            return value.endsWith('%') ? clamp(parsed, 0, 100) * 2.55 : clamp(parsed, 0, 255);
+        };
+
+        const parseAlpha = (raw) => {
+            if (raw === undefined || raw === null || raw === '') return 1;
+            const value = raw.trim();
+            const parsed = parseFloat(value);
+            return roundAlpha(value.endsWith('%') ? parsed / 100 : parsed);
+        };
+
+        const toHex = (r, g, b) => (
+            '#' + [r, g, b]
+                .map((value) => Math.round(clamp(Number(value), 0, 255)).toString(16).padStart(2, '0'))
+                .join('')
+        );
+
+        const hslToRgb = (h, s, l) => {
+            const hue = ((h % 360) + 360) % 360;
+            const sat = clamp(s, 0, 100) / 100;
+            const light = clamp(l, 0, 100) / 100;
+            const k = (n) => (n + hue / 30) % 12;
+            const a = sat * Math.min(light, 1 - light);
+            const f = (n) => light - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
+            return [f(0) * 255, f(8) * 255, f(4) * 255];
+        };
+
+        const colorToHex = (color) => {
+            if (!color) return { hex: UNRESOLVED_COLOR_HEX, alpha: 1 };
+
+            const value = color.trim().toLowerCase();
+
+            if (/^#[0-9a-f]{6}$/.test(value)) return { hex: value, alpha: 1 };
+
+            if (/^#[0-9a-f]{3}$/.test(value)) {
+                return { hex: '#' + [...value.slice(1)].map((char) => char + char).join(''), alpha: 1 };
+            }
+
+            if (/^#[0-9a-f]{8}$/.test(value)) {
+                return { hex: value.slice(0, 7), alpha: roundAlpha(parseInt(value.slice(7, 9), 16) / 255) };
+            }
+
+            if (/^#[0-9a-f]{4}$/.test(value)) {
+                return {
+                    hex: '#' + [...value.slice(1, 4)].map((char) => char + char).join(''),
+                    alpha: roundAlpha(parseInt(value[4] + value[4], 16) / 255),
+                };
+            }
+
+            const rgbMatch = value.match(/^rgba?\(\s*([+-]?(?:\d*\.)?\d+%?)\s*(?:,|\s)\s*([+-]?(?:\d*\.)?\d+%?)\s*(?:,|\s)\s*([+-]?(?:\d*\.)?\d+%?)(?:\s*(?:,|\/)\s*([+-]?(?:\d*\.)?\d+%?))?\s*\)$/);
+            if (rgbMatch) {
+                return {
+                    hex: toHex(parseChannel(rgbMatch[1]), parseChannel(rgbMatch[2]), parseChannel(rgbMatch[3])),
+                    alpha: parseAlpha(rgbMatch[4]),
+                };
+            }
+
+            const hslMatch = value.match(/^hsla?\(\s*([+-]?(?:\d*\.)?\d+)(?:deg)?\s*(?:,|\s)\s*([+-]?(?:\d*\.)?\d+)%\s*(?:,|\s)\s*([+-]?(?:\d*\.)?\d+)%(?:\s*(?:,|\/)\s*([+-]?(?:\d*\.)?\d+%?))?\s*\)$/);
+            if (hslMatch) {
+                const [r, g, b] = hslToRgb(
+                    parseFloat(hslMatch[1]),
+                    parseFloat(hslMatch[2]),
+                    parseFloat(hslMatch[3])
+                );
+
+                return {
+                    hex: toHex(r, g, b),
+                    alpha: parseAlpha(hslMatch[4]),
+                };
+            }
+
+            if (value === 'transparent') return { hex: UNRESOLVED_COLOR_HEX, alpha: 0 };
+            if (value === 'currentcolor') return { hex: UNRESOLVED_COLOR_HEX, alpha: 1 };
+            if (NAMED_COLORS[value]) return { hex: NAMED_COLORS[value], alpha: 1 };
+
+            return { hex: UNRESOLVED_COLOR_HEX, alpha: 1 };
+        };
+
+        const splitShadows = (shadow) => {
+            if (typeof shadow !== 'string') return [];
+
+            const result = [];
+            let depth = 0;
+            let current = '';
+
+            for (const char of shadow) {
+                if (char === '(') {
+                    depth += 1;
+                } else if (char === ')' && depth > 0) {
+                    depth -= 1;
+                } else if (char === ',' && depth === 0) {
+                    if (current.trim()) result.push(current.trim());
+                    current = '';
+                    continue;
+                }
+
+                current += char;
+            }
+
+            if (current.trim()) result.push(current.trim());
+            return result;
+        };
+
+        const extractColor = (value) => {
+            let color = null;
+            let rest = value;
+
+            const tryExtract = (regex) => {
+                const match = rest.match(regex);
+                if (!match) return false;
+
+                color = match[0];
+                rest = `${rest.slice(0, match.index)} ${rest.slice(match.index + match[0].length)}`.trim();
+                return true;
+            };
+
+            tryExtract(RE_COLOR_FN) || tryExtract(RE_COLOR_HEX) || tryExtract(RE_COLOR_NAME);
+            return { color, rest };
+        };
+
+        const parseSingleShadow = (raw) => {
+            if (typeof raw !== 'string') return null;
+
+            let value = raw.trim();
+            if (!value || NO_SHADOW.has(value.toLowerCase())) return null;
+
+            const inset = /\binset\b/i.test(value);
+            value = value.replace(/\binset\b/gi, ' ').trim();
+
+            const extracted = extractColor(value);
+            const color = extracted.color;
+            value = extracted.rest;
+
+            const lengths = value.match(RE_LENGTH) || [];
+            if (lengths.length < 2) return null;
+
+            const { hex, alpha } = colorToHex(color);
+
+            return {
+                inset,
+                x: parseFloat(lengths[0]),
+                y: parseFloat(lengths[1]),
+                blur: parseFloat(lengths[2]) || 0,
+                spread: parseFloat(lengths[3]) || 0,
+                color: color || UNRESOLVED_COLOR_HEX,
+                alpha,
+                hex,
+            };
+        };
+
+        const parseBoxShadow = (shadow) => {
+            if (typeof shadow !== 'string') return [];
+
+            // Accept full CSS declarations: "box-shadow: ...; " → extract value only
+            let trimmed = shadow.trim().replace(/^box-shadow\s*:\s*/i, '').replace(/;$/, '').trim();
+            if (!trimmed || NO_SHADOW.has(trimmed.toLowerCase())) return [];
+
+            return splitShadows(trimmed).map(parseSingleShadow).filter(Boolean);
+        };
+
+        return {
+            parse: parseBoxShadow,
+            split: splitShadows,
+            parseSingle: parseSingleShadow,
+        };
+    }
+));

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "css-box-shadow-parser",
+  "version": "1.0.0",
+  "description": "Parse CSS box-shadow values into structured layer objects. Supports multi-layer, inset, all color formats (hex, rgb, hsl, named), and full CSS declarations.",
+  "main": "index.js",
+  "scripts": {
+    "example": "node usage.js",
+    "prepublishOnly": "node -e \"const fs=require('fs'); fs.copyFileSync('../parser.js','index.js'); fs.copyFileSync('../LICENSE','LICENSE'); console.log('Synced parser.js → index.js & LICENSE');\""
+  },
+  "keywords": [
+    "css",
+    "box-shadow",
+    "shadow",
+    "parser",
+    "color",
+    "hex",
+    "rgba",
+    "hsl",
+    "inset",
+    "browser",
+    "node"
+  ],
+  "author": "HTML Code Generator <htmlcodegenerator.com@gmail.com> (https://www.html-code-generator.com/)",
+  "license": "MIT",
+  "files": [
+    "index.js",
+    "README.md"
+  ],
+  "engines": {
+    "node": ">=14"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/html-code-generator/css-box-shadow-parser.git"
+  },
+  "bugs": {
+    "url": "https://github.com/html-code-generator/css-box-shadow-parser/issues"
+  },
+  "homepage": "https://www.html-code-generator.com/",
+  "unpkg": "index.js",
+  "jsdelivr": "index.js"
+}