admin08077/Githubgemini

1{"version":3,"file":"SassScssCompiler-DuTIgWx4.js","sources":["../../components/features/SassScssCompiler.tsx"],"sourcesContent":["import React, { useState, useMemo } from 'react';\nimport { CodeBracketSquareIcon } from '../icons.tsx';\n\nconst initialScss = `$primary-color: #0047AB;\n$font-size: 16px;\n\n.container {\n  padding: 20px;\n  background-color: #f0f0f0;\n\n  .title {\n    color: $primary-color;\n    font-size: $font-size * 1.5;\n\n    &:hover {\n      text-decoration: underline;\n    }\n  }\n  \n  > p {\n    margin-top: 10px;\n  }\n}`;\n\nconst escapeRegExp = (string: string): string => {\n    // $& means the whole matched string\n    return string.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&');\n};\n\nconst compileScss = (scss: string): string => {\n    try {\n        let css = scss;\n        css = css.replace(/\\/\\/.*$/gm, '');\n        \n        const variables: Record<string, string> = {};\n        css = css.replace(/\\$([\\w-]+):\\s*(.*?);/g, (_, name, value) => {\n            variables[name] = value.trim(); return '';\n        });\n\n        for (let i = 0; i < 5; i++) {\n            Object.entries(variables).forEach(([name, value]) => {\n                css = css.replace(new RegExp(`\\\\$${escapeRegExp(name)}`, 'g'), value);\n            });\n        }\n        \n        css = css.replace(/([\\d.]+)(px|rem|em|%)\\s*([*\\/])\\s*([\\d.]+)/g, (_, n1, unit, op, n2) => {\n            const num1 = parseFloat(n1); const num2 = parseFloat(n2);\n            const result = op === '*' ? num1 * num2 : num1 / num2;\n            return `${result}${unit}`;\n        });\n\n        const processBlock = (block: string, parentSelector: string = ''): string => {\n            let currentCss = '';\n            let nestedCss = '';\n            const properties = [];\n            \n            const regex = /((?:[\\w-:.#&>+~*\\s,]+|\\([^)]*\\))\\s*\\{[^{}]*\\})|((?:[\\w-]+\\s*:[^;]+;))/g;\n            const content = block.substring(block.indexOf('{') + 1, block.lastIndexOf('}'));\n            let match;\n            while ((match = regex.exec(content)) !== null) {\n                if (match[1]) {\n                    const nestedSelector = match[1].substring(0, match[1].indexOf('{')).trim();\n                    const fullSelector = nestedSelector.includes('&') ? nestedSelector.replace(/&/g, parentSelector) : `${parentSelector} ${nestedSelector}`.trim();\n                    nestedCss += processBlock(match[1], fullSelector);\n                } else if (match[2]) {\n                    properties.push(`  ${match[2].trim()}`);\n                }\n            }\n            \n            if (properties.length > 0) {\n                currentCss = `${parentSelector} {\\n${properties.join('\\n')}\\n}\\n`;\n            }\n\n            return currentCss + nestedCss;\n        };\n        \n        let result = processBlock(`root{${css}}`, '').trim();\n        return result.replace(/root\\s*\\{\\s*\\}/, '').trim();\n\n    } catch(e) {\n        console.error(\"SCSS Compilation Error:\", e);\n        return \"/* Error compiling SCSS. Check console for details. */\";\n    }\n};\n\n\nexport const SassScssCompiler: React.FC = () => {\n    const [scss, setScss] = useState(initialScss);\n    const compiledCss = useMemo(() => compileScss(scss), [scss]);\n\n    return (\n        <div className=\"h-full flex flex-col p-4 sm:p-6 lg:p-8 text-text-primary\">\n            <header className=\"mb-6\">\n                <h1 className=\"text-3xl flex items-center\"><CodeBracketSquareIcon /><span className=\"ml-3\">SASS/SCSS Compiler</span></h1>\n                <p className=\"text-text-secondary mt-1\">A real-time SASS/SCSS to CSS compiler.</p>\n            </header>\n            <div className=\"flex-grow flex flex-col gap-4 min-h-0\">\n                <div className=\"flex flex-col flex-1 min-h-0\">\n                    <label htmlFor=\"scss-input\" className=\"text-sm font-medium text-text-secondary mb-2\">SASS/SCSS Input</label>\n                    <textarea id=\"scss-input\" value={scss} onChange={(e) => setScss(e.target.value)} className=\"flex-grow p-4 bg-surface border border-border rounded-md resize-y font-mono text-sm text-pink-600\" spellCheck=\"false\" />\n                </div>\n                <div className=\"flex flex-col flex-1 min-h-0\">\n                    <label className=\"text-sm font-medium text-text-secondary mb-2\">Compiled CSS Output</label>\n                    <pre className=\"flex-grow p-4 bg-background border border-border rounded-md overflow-y-auto text-blue-700 font-mono text-sm whitespace-pre-wrap\">{compiledCss}</pre>\n                </div>\n            </div>\n        </div>\n    );\n};"],"names":["initialScss","escapeRegExp","string","compileScss","scss","css","variables","_","name","value","i","n1","unit","op","n2","num1","num2","processBlock","block","parentSelector","currentCss","nestedCss","properties","regex","content","match","nestedSelector","fullSelector","e","SassScssCompiler","setScss","useState","compiledCss","useMemo","jsxs","jsx","CodeBracketSquareIcon"],"mappings":"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"}