@tbela99/css-parser 1.4.1 → 1.4.3

package/playground/sw.js

@@ -0,0 +1,55 @@
+function isCacheable(request) {
+
+    return request.method === 'GET' && (request.mode === 'cors' || new URL(request.url).origin === self.origin)
+}
+
+self.addEventListener('install', async (event) => {
+
+    event.waitUntil(async () => {
+
+        await clients.claim();
+    });
+})
+
+self.addEventListener('fetch', async (event) => {
+
+    event.respondWith(
+        (async () => {
+
+        // console.debug(event.request);
+
+        const cache = await caches.open('css-parser-playground');
+
+        if (!isCacheable(event.request)) return fetch(event.request);
+
+        let response = await cache.match(event.request);
+
+        console.debug(response);
+
+        if (response != null) {
+
+            return response;
+        }
+
+        response = await fetch(event.request);
+
+        console.debug(response);
+
+        if (response == null || !response.ok) {
+
+            return fetch(event.request)
+        }
+
+        console.debug(response.headers.get('Content-Type'));
+
+        if (response.ok && response.headers.get('Content-Type')?.includes('text/css')) {
+
+            await cache.put(event.request, response.clone());
+        }
+
+        return response.ok ? response : fetch(event.request);
+
+        // return fetch(event.request)
+    })()
+    )
+})

package/playground/tree.js

@@ -0,0 +1,176 @@
+function clickHandler(event) {
+
+    if (event.target.matches('.e,.property') || event.target.tagName === 'A') {
+
+        const parentLi = event.target.closest('li');
+
+        if (parentLi != null) {
+
+            event.preventDefault();
+            parentLi.classList.toggle('tree-collapsed');
+
+        }
+    }
+}
+
+// Función para construir el árbol
+
+export function buildTree(treeElement, jsonObj, options) {
+
+    treeElement.innerHTML = "";
+
+    const isArray = Array.isArray(jsonObj);
+    const isObject = typeof jsonObj === 'object' && !isArray;
+
+    let openKey = '{';
+
+    let closeKey = '}';
+
+    if (isArray) {
+
+        openKey = '[';
+        closeKey = ']';
+
+    } else if (isObject) {
+
+        openKey = '{';
+        closeKey = '}';
+    }
+
+    treeElement.removeEventListener('click', clickHandler);
+    treeElement.addEventListener('click', clickHandler);
+
+    treeElement.innerHTML = `<ul><li data-key=''>
+        <span class="e"></span>
+        ${options?.rootName ? `
+<span class="token property">${options.rootName}</span>
+        <span class="token operator">: </span>` : ''}
+        <span class="token punctuation">${openKey}</span>
+        <span class="tree-more-dots"> ... </span>
+        <span class="token punctuation">${closeKey}</span>
+   `;
+
+    treeElement.firstElementChild.querySelector('.tree-more-dots').insertAdjacentElement('afterend', createTreeDom(jsonObj, '', options));
+
+    treeElement.firstElementChild.addEventListener('click', (event) => {
+
+        const target = event.target.parentElement;
+        if (target.matches('li[data-parsed=no]')) {
+
+            const node = target.querySelector(':scope>.tree-more-dots');
+
+            if (node == null) {
+                return;
+            }
+
+            node.insertAdjacentElement('afterend', createTreeDom(jsonObj, target.dataset.key, options));
+            target.removeAttribute('data-parsed');
+        }
+    })
+}
+
+// Función para crear el DOM del árbol
+
+function createTreeDom(obj, key, options) {
+
+    const path = [];
+
+    if (key !== '' && key !== null) {
+
+        path.push(...JSON.parse(key));
+
+        for (const pathKey of path) {
+
+            obj = obj[pathKey];
+
+            if (obj == null) {
+
+                return;
+            }
+        }
+    }
+
+    // Obtenemos las claves del objeto en un array
+
+    const keys = Object.keys(obj);
+    const ul = document.createElement("ul");
+
+    for (let i = 0; i < keys.length; i++) {
+
+        const key = keys[i];
+
+        const li = document.createElement("li");
+
+        li.classList.add("tree-collapsed");
+        li.dataset.key = JSON.stringify([...path, key]);
+        li.dataset.parsed = 'no';
+
+        const child = obj[key];
+
+        const childTypeof = typeof child;
+
+        const {name, value} = options?.transform(key, child, obj) ?? {name: key, value: child};
+
+        if (childTypeof === "object" && child != null) {
+
+            if (Object.keys(child).length === 0) {
+
+                li.innerHTML = `<span class="token property">${name}</span>
+                <span class="token operator">: </span>
+                <span class="token punctuation">{</span>
+                <span class="tree-more-dots"> ... </span>
+                <span class="token punctuation">${i < keys.length - 1 ? "}," : "}"}</span>
+                `;
+
+            } else {
+
+                const objectIsArray = Array.isArray(obj);
+                const childIsArray = Array.isArray(child);
+
+                const openKey = childIsArray ? '[' : '{';
+                const closeKey = childIsArray ? ']' : '}';
+
+                if (objectIsArray) {
+
+                    li.innerHTML = `<span class="e"></span>
+                                    <span class="token property">${name}</span>
+                                    <span class="token operator">: </span>
+                                    <a href="#" class="token punctuation">${openKey}</a>
+                                    <span class="tree-more-dots"> ... </span>
+                    `;
+
+                } else {
+
+                    li.innerHTML = `<span class="e"></span>
+                    <span class="token property">${key}</span>
+                     <span class="token operator">: </span>
+                     <a href="#" class="token punctuation">${openKey}</a>          
+                    <span class="tree-more-dots"> ... </span>
+                    `;
+                }
+
+                li.innerHTML += `<span class="token punctuation">${closeKey}${i < keys.length - 1 ? "," : ''}</span>
+                `;
+            }
+
+        } else {
+
+            li.innerHTML = `${name === '' ? '' : `<span class="token property">${name}</span>
+            <span class="token operator">: </span>
+            `}
+            <span class="token childTypeof${child === null ? 'null' : ''}">${value}</span>
+                `;
+
+            // Agregamos la coma solo si no es el último elemento
+
+            if (i < keys.length - 1) {
+
+                li.innerHTML += ",";
+            }
+        }
+
+        ul.appendChild(li);
+    }
+
+    return ul;
+}

package/dist/lib/syntax/color/utils/constants.js

@@ -1,214 +0,0 @@
-import { EnumToken } from '../../../ast/types.js';
-import '../../../ast/minify.js';
-import '../../../ast/walk.js';
-import '../../../parser/parse.js';
-import '../../../parser/tokenize.js';
-import '../../../parser/utils/config.js';
-import '../../../renderer/sourcemap/lib/encode.js';
-
-const colorPrecision = 6;
-const anglePrecision = .001;
-const colorRange = {
-    lab: {
-        l: [0, 100],
-        a: [-125, 125],
-        b: [-125, 125]
-    },
-    lch: {
-        l: [0, 100],
-        c: [0, 150],
-        h: [0, 360]
-    },
-    oklab: {
-        l: [0, 1],
-        a: [-0.4, .4],
-        b: [-0.4, 0.4]
-    },
-    oklch: {
-        l: [0, 1],
-        a: [0, .4],
-        b: [0, 0.4]
-    }
-};
-const timelineFunc = ['view', 'scroll'];
-const generalEnclosedFunc = ['selector', 'font-tech', 'font-format', 'media', 'supports'];
-const timingFunc = ['ease', 'ease-in', 'ease-out', 'ease-in-out', 'linear', 'step-start', 'step-end', 'steps', 'cubic-bezier'];
-const funcLike = [
-    EnumToken.ParensTokenType,
-    EnumToken.FunctionTokenType,
-    EnumToken.UrlFunctionTokenType,
-    EnumToken.StartParensTokenType,
-    EnumToken.ImageFunctionTokenType,
-    EnumToken.TimingFunctionTokenType,
-    EnumToken.TimingFunctionTokenType,
-    EnumToken.PseudoClassFuncTokenType,
-    EnumToken.GridTemplateFuncTokenType
-];
-const colorsFunc = ['rgb', 'rgba', 'hsl', 'hsla', 'hwb', 'device-cmyk', 'color-mix', 'color', 'oklab', 'lab', 'oklch', 'lch', 'light-dark'];
-const colorFuncColorSpace = ['srgb', 'srgb-linear', 'display-p3', 'prophoto-rgb', 'a98-rgb', 'rec2020', 'xyz', 'xyz-d65', 'xyz-d50'];
-const D50 = [0.3457 / 0.3585, 1.00000, (1.0 - 0.3457 - 0.3585) / 0.3585];
-const k = Math.pow(29, 3) / Math.pow(3, 3);
-const e = Math.pow(6, 3) / Math.pow(29, 3);
-// color module v4
-const systemColors = new Set(['ActiveText', 'ButtonBorder', 'ButtonFace', 'ButtonText', 'Canvas', 'CanvasText', 'Field', 'FieldText', 'GrayText', 'Highlight', 'HighlightText', 'LinkText', 'Mark', 'MarkText', 'VisitedText', '-webkit-focus-ring-color'].map(m => m.toLowerCase()));
-// deprecated
-const deprecatedSystemColors = new Set(['ActiveBorder', 'ActiveCaption', 'AppWorkspace', 'Background', 'ButtonFace', 'ButtonHighlight', 'ButtonShadow', 'ButtonText', 'CaptionText', 'GrayText', 'Highlight', 'HighlightText', 'InactiveBorder', 'InactiveCaption', 'InactiveCaptionText', 'InfoBackground', 'InfoText', 'Menu', 'MenuText', 'Scrollbar', 'ThreeDDarkShadow', 'ThreeDFace', 'ThreeDHighlight', 'ThreeDLightShadow', 'ThreeDShadow', 'Window', 'WindowFrame', 'WindowText'].map(t => t.toLowerCase()));
-// name to color
-const COLORS_NAMES = Object.seal({
-    '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',
-    'darkgrey': '#a9a9a9',
-    'darkgreen': '#006400',
-    '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',
-    'grey': '#808080',
-    'green': '#008000',
-    'greenyellow': '#adff2f',
-    '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',
-    'lightgrey': '#d3d3d3',
-    'lightgreen': '#90ee90',
-    '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': '#9370d8',
-    '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': '#d87093',
-    'papayawhip': '#ffefd5',
-    'peachpuff': '#ffdab9',
-    'peru': '#cd853f',
-    'pink': '#ffc0cb',
-    'plum': '#dda0dd',
-    'powderblue': '#b0e0e6',
-    'purple': '#800080',
-    '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',
-    'rebeccapurple': '#663399',
-    'transparent': '#00000000'
-});
-// color to name
-const NAMES_COLORS = Object.seal(Object.entries(COLORS_NAMES).reduce((acc, [key, value]) => {
-    acc[value] = key;
-    return acc;
-}, Object.create(null)));
-
-export { COLORS_NAMES, D50, NAMES_COLORS, anglePrecision, colorFuncColorSpace, colorPrecision, colorRange, colorsFunc, deprecatedSystemColors, e, funcLike, generalEnclosedFunc, k, systemColors, timelineFunc, timingFunc };

package/dist/lib/syntax/utils.js

@@ -1,70 +0,0 @@
-import { EnumToken } from '../ast/types.js';
-import '../ast/minify.js';
-import '../ast/walk.js';
-import '../parser/parse.js';
-import '../parser/tokenize.js';
-import '../parser/utils/config.js';
-import './color/utils/constants.js';
-import '../renderer/sourcemap/lib/encode.js';
-
-function length2Px(value) {
-    let result = null;
-    if (value.typ == EnumToken.NumberTokenType) {
-        result = +value.val;
-    }
-    else {
-        switch (value.unit) {
-            case 'cm':
-                // @ts-ignore
-                result = value.val * 37.8;
-                break;
-            case 'mm':
-                // @ts-ignore
-                result = value.val * 3.78;
-                break;
-            case 'Q':
-                // @ts-ignore
-                result = value.val * 37.8 / 40;
-                break;
-            case 'in':
-                // @ts-ignore
-                result = value.val / 96;
-                break;
-            case 'pc':
-                // @ts-ignore
-                result = value.val / 16;
-                break;
-            case 'pt':
-                // @ts-ignore
-                result = value.val * 4 / 3;
-                break;
-            case 'px':
-                result = +value.val;
-                break;
-        }
-    }
-    return isNaN(result) ? null : result;
-}
-/**
- * minify number
- * @param val
- */
-function minifyNumber(val) {
-    val = String(val);
-    if (val === '0') {
-        return '0';
-    }
-    const chr = val.charAt(0);
-    if (chr == '-') {
-        const slice = val.slice(0, 2);
-        if (slice == '-0') {
-            return val.length == 2 ? '0' : '-' + val.slice(2);
-        }
-    }
-    if (chr == '0') {
-        return val.slice(1);
-    }
-    return val;
-}
-
-export { length2Px, minifyNumber };