@bookklik/senangstart-icons 1.0.7 → 1.0.11

package/scripts/build-icon-docs.js

@@ -0,0 +1,323 @@
+const fs = require('fs');
+const path = require('path');
+
+// Paths
+const iconsJsonPath = path.join(__dirname, '..', 'src', 'icons.json');
+const docsIconsDir = path.join(__dirname, '..', 'docs', 'icons');
+const docsIconsDirMs = path.join(__dirname, '..', 'docs', 'ms', 'icons');
+const indexPath = path.join(docsIconsDir, 'index.md');
+const indexPathMs = path.join(docsIconsDirMs, 'index.md');
+
+// Read icons.json
+const icons = JSON.parse(fs.readFileSync(iconsJsonPath, 'utf8'));
+
+// Ensure docs/icons directories exist
+fs.mkdirSync(docsIconsDir, { recursive: true });
+fs.mkdirSync(docsIconsDirMs, { recursive: true });
+
+console.log(`📝 Generating documentation for ${icons.length} icons...\n`);
+
+// Generate markdown for each icon
+const iconLinks = [];
+
+icons.forEach((icon, index) => {
+    const { name, slug, src, tags } = icon;
+    
+    // Create SVG preview (stroke-based icon)
+    const svgPreview = `<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="${src}"></path></svg>`;
+    
+    // Generate English markdown content
+    const markdownEn = `---
+title: ${name}
+---
+
+# ${name}
+
+<div style="display: flex; justify-content: center; padding: 2rem; background: var(--vp-c-bg-soft); border-radius: 8px; margin: 1rem 0;">
+${svgPreview}
+</div>
+
+## Usage
+
+### With Web Components
+
+\`\`\`html
+<ss-icon icon="${slug}"></ss-icon>
+\`\`\`
+
+### With icon tag
+
+\`\`\`html
+<i class="ss ss-${slug}"></i>    
+\`\`\`
+
+### With custom stroke width / thickness
+
+\`\`\`html
+<ss-icon icon="${slug}" thickness="1.2"></ss-icon>
+\`\`\`
+
+## Icon Details
+
+| Property | Value |
+|----------|-------|
+| **Name** | ${name} |
+| **Slug** | \`${slug}\` |
+| **Tags** | ${tags.map(t => `\`${t}\``).join(', ')} |
+
+## SVG Path
+
+\`\`\`
+${src}
+\`\`\`
+
+## Raw SVG
+
+\`\`\`html
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+  <path d="${src}"></path>
+</svg>
+\`\`\`
+
+---
+
+[← Back to Icon Library](/icons/)
+`;
+
+    // Generate Malay markdown content
+    const markdownMs = `---
+title: ${name}
+---
+
+# ${name}
+
+<div style="display: flex; justify-content: center; padding: 2rem; background: var(--vp-c-bg-soft); border-radius: 8px; margin: 1rem 0;">
+${svgPreview}
+</div>
+
+## Penggunaan
+
+### Dengan Komponen Web
+
+\`\`\`html
+<ss-icon icon="${slug}"></ss-icon>
+\`\`\`
+
+### Dengan tag ikon
+
+\`\`\`html
+<i class="ss ss-${slug}"></i>    
+\`\`\`
+
+### Dengan ketebalan garisan tersuai
+
+\`\`\`html
+<ss-icon icon="${slug}" thickness="1.2"></ss-icon>
+\`\`\`
+
+## Butiran Ikon
+
+| Ciri | Nilai |
+|------|-------|
+| **Nama** | ${name} |
+| **Slug** | \`${slug}\` |
+| **Tag** | ${tags.map(t => `\`${t}\``).join(', ')} |
+
+## Laluan SVG
+
+\`\`\`
+${src}
+\`\`\`
+
+## SVG Mentah
+
+\`\`\`html
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+  <path d="${src}"></path>
+</svg>
+\`\`\`
+
+---
+
+[← Kembali ke Pustaka Ikon](/ms/icons/)
+`;
+
+    // Write individual icon markdown files (English)
+    const iconFilePath = path.join(docsIconsDir, `${slug}.md`);
+    fs.writeFileSync(iconFilePath, markdownEn);
+    
+    // Write individual icon markdown files (Malay)
+    const iconFilePathMs = path.join(docsIconsDirMs, `${slug}.md`);
+    fs.writeFileSync(iconFilePathMs, markdownMs);
+    
+    // Add to links array
+    iconLinks.push({
+        name,
+        slug,
+        tags
+    });
+    
+    // Progress indicator
+    if ((index + 1) % 50 === 0 || index === icons.length - 1) {
+        console.log(`  ✓ Generated ${index + 1}/${icons.length} icon docs (EN + MS)`);
+    }
+});
+
+// Generate English index.md with links to all icons
+const indexMarkdownEn = `---
+title: Icon Library
+---
+
+# Icon Library
+
+Browse all **${icons.length}** available icons in SenangStart Icons.
+
+## Usage
+
+Once you find the icon you need, use it like this:
+
+\`\`\`html
+<ss-icon name="icon-name"></ss-icon>
+\`\`\`
+
+## All Icons
+
+<div class="icon-grid">
+
+${iconLinks.map(icon => {
+    return `<a href="./${icon.slug}" class="icon-card" title="${icon.tags.join(', ')}">
+  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="${icons.find(i => i.slug === icon.slug).src}"></path></svg>
+  <span>${icon.name}</span>
+</a>`;
+}).join('\n\n')}
+
+</div>
+
+<style>
+.icon-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  gap: 1rem;
+  margin-top: 1rem;
+}
+
+.icon-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  background: var(--vp-c-bg-soft);
+  border-radius: 8px;
+  text-decoration: none;
+  color: var(--vp-c-text-1) !important;
+  transition: all 0.2s ease;
+  text-align: center;
+  aspect-ratio: 1/1;
+}
+
+.icon-card:hover {
+  background: var(--vp-c-bg-soft-up);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.icon-card svg {
+  margin-bottom: 0.5rem;
+  width: 3rem;
+  height: 3rem;
+}
+
+.icon-card span {
+  font-size: 0.8rem;
+  word-break: break-word;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
+</style>
+`;
+
+// Generate Malay index.md with links to all icons
+const indexMarkdownMs = `---
+title: Pustaka Ikon
+---
+
+# Pustaka Ikon
+
+Layari semua **${icons.length}** ikon yang tersedia dalam SenangStart Icons.
+
+## Penggunaan
+
+Setelah anda menemui ikon yang diperlukan, gunakannya seperti ini:
+
+\`\`\`html
+<ss-icon name="nama-ikon"></ss-icon>
+\`\`\`
+
+## Semua Ikon
+
+<div class="icon-grid">
+
+${iconLinks.map(icon => {
+    return `<a href="./${icon.slug}" class="icon-card" title="${icon.tags.join(', ')}">
+  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="${icons.find(i => i.slug === icon.slug).src}"></path></svg>
+  <span>${icon.name}</span>
+</a>`;
+}).join('\n\n')}
+
+</div>
+
+<style>
+.icon-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  gap: 1rem;
+  margin-top: 1rem;
+}
+
+.icon-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  background: var(--vp-c-bg-soft);
+  border-radius: 8px;
+  text-decoration: none;
+  color: var(--vp-c-text-1) !important;
+  transition: all 0.2s ease;
+  text-align: center;
+  aspect-ratio: 1/1;
+}
+
+.icon-card:hover {
+  background: var(--vp-c-bg-soft-up);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.icon-card svg {
+  margin-bottom: 0.5rem;
+  width: 3rem;
+  height: 3rem;
+}
+
+.icon-card span {
+  font-size: 0.8rem;
+  word-break: break-word;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
+</style>
+`;
+
+fs.writeFileSync(indexPath, indexMarkdownEn);
+fs.writeFileSync(indexPathMs, indexMarkdownMs);
+
+console.log(`\n✅ Icon documentation generated successfully!`);
+console.log(`   - ${icons.length} English icon pages created`);
+console.log(`   - ${icons.length} Malay icon pages created`);
+console.log(`   - English index at docs/icons/index.md`);
+console.log(`   - Malay index at docs/ms/icons/index.md`);

package/scripts/build.js

@@ -0,0 +1,44 @@
+const { execSync } = require('child_process');
+const fs = require('fs');
+const path = require('path');
+
+// Helper function to recursively copy a directory
+function copyDir(src, dest) {
+    fs.mkdirSync(dest, { recursive: true });
+    const entries = fs.readdirSync(src);
+    
+    for (const entry of entries) {
+        const srcPath = path.join(src, entry);
+        const destPath = path.join(dest, entry);
+        
+        if (fs.statSync(srcPath).isDirectory()) {
+            copyDir(srcPath, destPath);
+        } else {
+            fs.copyFileSync(srcPath, destPath);
+        }
+    }
+}
+
+console.log('🔨 Building SenangStart Icons...\n');
+
+// Step 1: Build SVGs
+console.log('📦 Step 1: Building SVGs...');
+execSync('node scripts/build-svgs.js', { stdio: 'inherit' });
+
+// Step 2: Build CSS
+console.log('\n🎨 Step 2: Building CSS...');
+execSync('node scripts/build-css.js', { stdio: 'inherit' });
+
+// Step 3: Run Generate Icon Docs
+console.log('\n⚙️  Step 3: Running Generate Icon Docs...');
+execSync('node scripts/build-icon-docs.js', { stdio: 'inherit' });
+
+// Step 4: Run Webpack
+console.log('\n⚙️  Step 4: Running Webpack...');
+execSync('npx webpack --mode production', { stdio: 'inherit' });
+
+// Step 5: Generate llms.txt
+console.log('\n📝 Step 5: Generating llms.txt...');
+execSync('node scripts/generate-llms-txt.js', { stdio: 'inherit' });
+
+console.log('\n✅ Build complete! Files copied to docs/public/');

package/scripts/generate-llms-txt.js

@@ -0,0 +1,70 @@
+const fs = require('fs');
+const path = require('path');
+
+// Paths
+const iconsJsonPath = path.join(__dirname, '..', 'src', 'icons.json');
+const publicDir = path.join(__dirname, '..', 'docs', 'public');
+const outputFile = path.join(publicDir, 'llms.txt');
+const packageJsonPath = path.join(__dirname, '..', 'package.json');
+
+// Read data
+const icons = JSON.parse(fs.readFileSync(iconsJsonPath, 'utf8'));
+const pkg = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+
+// Ensure output directory exists
+fs.mkdirSync(publicDir, { recursive: true });
+
+console.log(`📝 Generating llms.txt for ${icons.length} icons...\n`);
+
+// Content sections
+const header = `# ${pkg.name}
+
+${pkg.description}
+
+Version: ${pkg.version}
+License: ${pkg.license}
+`;
+
+const usage = `## Usage
+
+### Web Components
+
+1. Include the script:
+   \`\`\`html
+   <script src="https://unpkg.com/${pkg.name}/dist/senangstart-icon.min.js"></script>
+   \`\`\`
+
+2. Use the component:
+   \`\`\`html
+   <ss-icon icon="icon-slug"></ss-icon>
+   <!-- Optional: thickness="1.5" -->
+   <ss-icon icon="icon-slug" thickness="2"></ss-icon>
+   \`\`\`
+
+### CSS Icons
+
+1. Include the CSS:
+   \`\`\`html
+   <link rel="stylesheet" href="https://unpkg.com/${pkg.name}/dist/senangstart-icon.css">
+   \`\`\`
+
+2. Use the class:
+   \`\`\`html
+   <i class="ss ss-icon-slug"></i>
+   \`\`\`
+`;
+
+const iconsList = `## Available Icons (${icons.length})
+
+Format: Icon Name (\`slug\`) - Tags
+
+${icons.map(icon => `- ${icon.name} (\`${icon.slug}\`) - ${icon.tags.join(', ')}`).join('\n')}
+`;
+
+// Combine content
+const content = [header, usage, iconsList].join('\n');
+
+// Write file
+fs.writeFileSync(outputFile, content);
+
+console.log(`✅ Generated docs/public/llms.txt (${content.length} bytes)`);

package/test-results.json

@@ -0,0 +1,11 @@
+npx : The CJS build of Vite's Node API is deprecated. See 
+https://vite.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more 
+details.
+At line:1 char:1
++ npx vitest run tests/build-pipeline.test.js --reporter=json 2>&1 | Ou ...
++ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+    + CategoryInfo          : NotSpecified: (The CJS bu...e details.:String 
+   ) [], RemoteException
+    + FullyQualifiedErrorId : NativeCommandError
+ 
+{"numTotalTestSuites":9,"numPassedTestSuites":6,"numFailedTestSuites":3,"numPendingTestSuites":0,"numTotalTests":14,"numPassedTests":13,"numFailedTests":1,"numPendingTests":0,"numTodoTests":0,"snapshot":{"added":0,"failure":false,"filesAdded":0,"filesRemoved":0,"filesRemovedList":[],"filesUnmatched":0,"filesUpdated":0,"matched":0,"total":0,"unchecked":0,"uncheckedKeysByFile":[],"unmatched":0,"updated":0,"didUpdate":false},"startTime":1768184278421,"success":false,"testResults":[{"assertionResults":[{"ancestorTitles":["Build Pipeline Integration","Source files"],"fullName":"Build Pipeline Integration Source files should have icons.json","status":"passed","title":"should have icons.json","duration":1.2354001998901367,"failureMessages":[],"meta":{}},{"ancestorTitles":["Build Pipeline Integration","Source files"],"fullName":"Build Pipeline Integration Source files should have all required source files","status":"passed","title":"should have all required source files","duration":0.46810007095336914,"failureMessages":[],"meta":{}},{"ancestorTitles":["Build Pipeline Integration","Generated SVG files"],"fullName":"Build Pipeline Integration Generated SVG files should have svg directory","status":"passed","title":"should have svg directory","duration":0.37180042266845703,"failureMessages":[],"meta":{}},{"ancestorTitles":["Build Pipeline Integration","Generated SVG files"],"fullName":"Build Pipeline Integration Generated SVG files should have SVG file for each icon in icons.json","status":"passed","title":"should have SVG file for each icon in icons.json","duration":21.953199863433838,"failureMessages":[],"meta":{}},{"ancestorTitles":["Build Pipeline Integration","Generated SVG files"],"fullName":"Build Pipeline Integration Generated SVG files should have index.js exporting all icons","status":"passed","title":"should have index.js exporting all icons","duration":0.5628995895385742,"failureMessages":[],"meta":{}},{"ancestorTitles":["Build Pipeline Integration","Generated CSS"],"fullName":"Build Pipeline Integration Generated CSS should have icons.css file","status":"passed","title":"should have icons.css file","duration":0.21340036392211914,"failureMessages":[],"meta":{}},{"ancestorTitles":["Build Pipeline Integration","Generated CSS"],"fullName":"Build Pipeline Integration Generated CSS should have CSS class for each icon","status":"passed","title":"should have CSS class for each icon","duration":9.665900230407715,"failureMessages":[],"meta":{}},{"ancestorTitles":["Build Pipeline Integration","Documentation files"],"fullName":"Build Pipeline Integration Documentation files should have docs directory structure","status":"passed","title":"should have docs directory structure","duration":0.31890010833740234,"failureMessages":[],"meta":{}},{"ancestorTitles":["Build Pipeline Integration","Documentation files"],"fullName":"Build Pipeline Integration Documentation files should have documentation for each icon","status":"passed","title":"should have documentation for each icon","duration":44.08650016784668,"failureMessages":[],"meta":{}},{"ancestorTitles":["Build Pipeline Integration","Icon data consistency"],"fullName":"Build Pipeline Integration Icon data consistency should have matching icon counts across all generated files","status":"failed","title":"should have matching icon counts across all generated files","duration":8.33899974822998,"failureMessages":["AssertionError: expected 248 to be 246 // Object.is equality\n    at C:\\wamp64\\www\\senangstart-icons\\tests\\build-pipeline.test.js:93:31\n    at file:///C:/wamp64/www/senangstart-icons/node_modules/@vitest/runner/dist/chunk-hooks.js:155:11\n    at file:///C:/wamp64/www/senangstart-icons/node_modules/@vitest/runner/dist/chunk-hooks.js:752:26\n    at file:///C:/wamp64/www/senangstart-icons/node_modules/@vitest/runner/dist/chunk-hooks.js:1897:20\n    at new Promise (<anonymous>)\n    at runWithTimeout (file:///C:/wamp64/www/senangstart-icons/node_modules/@vitest/runner/dist/chunk-hooks.js:1863:10)\n    at runTest (file:///C:/wamp64/www/senangstart-icons/node_modules/@vitest/runner/dist/chunk-hooks.js:1574:12)\n    at processTicksAndRejections (node:internal/process/task_queues:95:5)\n    at runSuite (file:///C:/wamp64/www/senangstart-icons/node_modules/@vitest/runner/dist/chunk-hooks.js:1729:8)\n    at runSuite (file:///C:/wamp64/www/senangstart-icons/node_modules/@vitest/runner/dist/chunk-hooks.js:1729:8)"],"meta":{}},{"ancestorTitles":["Build Pipeline Integration","Icon data consistency"],"fullName":"Build Pipeline Integration Icon data consistency should have valid SVG path data in icons.json","status":"passed","title":"should have valid SVG path data in icons.json","duration":9.310800075531006,"failureMessages":[],"meta":{}},{"ancestorTitles":["Build Pipeline Integration","Icon data consistency"],"fullName":"Build Pipeline Integration Icon data consistency should have normalized slugs (lowercase, hyphenated)","status":"passed","title":"should have normalized slugs (lowercase, hyphenated)","duration":7.935400009155273,"failureMessages":[],"meta":{}},{"ancestorTitles":["Build Pipeline Integration","Build scripts"],"fullName":"Build Pipeline Integration Build scripts should have all build scripts","status":"passed","title":"should have all build scripts","duration":0.5515999794006348,"failureMessages":[],"meta":{}},{"ancestorTitles":["Build Pipeline Integration","Webpack configuration"],"fullName":"Build Pipeline Integration Webpack configuration should have webpack.config.js","status":"passed","title":"should have webpack.config.js","duration":0.3931999206542969,"failureMessages":[],"meta":{}}],"startTime":1768184278865,"endTime":1768184278972.3933,"status":"failed","message":"","name":"C:/wamp64/www/senangstart-icons/tests/build-pipeline.test.js"}]}

package/tests/build-css.test.js

@@ -0,0 +1,134 @@
+/**
+ * Tests for build-css.js
+ * 
+ * Tests CSS generation with SVG data URIs
+ */
+import { describe, it, expect, beforeAll } from 'vitest';
+import fs from 'fs';
+import path from 'path';
+
+const iconsPath = path.resolve(__dirname, '../src/icons.json');
+const cssPath = path.resolve(__dirname, '../src/icons.css');
+
+// Recreate the encodeSvg function from build-css.js for testing
+function encodeSvg(svg) {
+  return svg
+    .replace(/"/g, "'")
+    .replace(/%/g, "%25")
+    .replace(/#/g, "%23")
+    .replace(/{/g, "%7B")
+    .replace(/}/g, "%7D")
+    .replace(/</g, "%3C")
+    .replace(/>/g, "%3E")
+    .replace(/\s+/g, " ")
+    .trim();
+}
+
+// Recreate generateSvg function from build-css.js
+function generateSvg(icon) {
+  const { src, viewBox, fill, stroke, strokeWidth } = icon;
+  const vBox = viewBox || "0 0 24 24";
+  const fl = fill || "none";
+  const strk = stroke || "currentColor";
+  const strkWidth = strokeWidth || "2";
+
+  return `<svg xmlns='http://www.w3.org/2000/svg' viewBox='${vBox}' fill='${fl}' stroke='${strk}' stroke-width='${strkWidth}' stroke-linecap='round' stroke-linejoin='round'><path d='${src}'/></svg>`;
+}
+
+describe('build-css.js', () => {
+  let icons;
+  let cssContent;
+
+  beforeAll(() => {
+    icons = JSON.parse(fs.readFileSync(iconsPath, 'utf8'));
+    cssContent = fs.readFileSync(cssPath, 'utf8');
+  });
+
+  describe('encodeSvg function', () => {
+    it('should replace double quotes with single quotes', () => {
+      const result = encodeSvg('<svg viewBox="0 0 24 24">');
+      expect(result).not.toContain('"');
+      expect(result).toContain("'");
+    });
+
+    it('should URL-encode special characters', () => {
+      const result = encodeSvg('<svg>#test</svg>');
+      expect(result).toContain('%3C'); // <
+      expect(result).toContain('%3E'); // >
+      expect(result).toContain('%23'); // #
+    });
+
+    it('should collapse whitespace', () => {
+      const result = encodeSvg('<svg>  test   test  </svg>');
+      expect(result).not.toContain('  '); // no double spaces
+    });
+  });
+
+  describe('generateSvg function', () => {
+    it('should generate valid SVG string', () => {
+      const icon = { src: 'M12 4.5v15m7.5-7.5h-15', name: 'test' };
+      const svg = generateSvg(icon);
+
+      expect(svg).toContain("<svg");
+      expect(svg).toContain("xmlns='http://www.w3.org/2000/svg'");
+      expect(svg).toContain("<path d='M12 4.5v15m7.5-7.5h-15'");
+    });
+
+    it('should apply default values', () => {
+      const icon = { src: 'M0 0', name: 'test' };
+      const svg = generateSvg(icon);
+
+      expect(svg).toContain("viewBox='0 0 24 24'");
+      expect(svg).toContain("fill='none'");
+      expect(svg).toContain("stroke='currentColor'");
+      expect(svg).toContain("stroke-width='2'");
+    });
+
+    it('should use custom values when provided', () => {
+      const icon = {
+        src: 'M0 0',
+        name: 'test',
+        viewBox: '0 0 48 48',
+        fill: 'red',
+        stroke: 'blue',
+        strokeWidth: '4'
+      };
+      const svg = generateSvg(icon);
+
+      expect(svg).toContain("viewBox='0 0 48 48'");
+      expect(svg).toContain("fill='red'");
+      expect(svg).toContain("stroke='blue'");
+      expect(svg).toContain("stroke-width='4'");
+    });
+  });
+
+  describe('CSS file generation', () => {
+    it('should contain base .ss class', () => {
+      expect(cssContent).toContain('.ss {');
+      expect(cssContent).toContain('display: inline-block;');
+      expect(cssContent).toContain('width: 1em;');
+      expect(cssContent).toContain('height: 1em;');
+    });
+
+    it('should contain mask properties in base class', () => {
+      expect(cssContent).toContain('mask-size: contain;');
+      expect(cssContent).toContain('mask-repeat: no-repeat;');
+      expect(cssContent).toContain('mask-position: center;');
+    });
+
+    it('should generate class for each icon', () => {
+      icons.forEach(icon => {
+        expect(cssContent).toContain(`.ss-${icon.slug}`);
+      });
+    });
+
+    it('should use data URI for mask-image', () => {
+      expect(cssContent).toContain('mask-image: url("data:image/svg+xml,');
+    });
+
+    it('should have proper header comment', () => {
+      expect(cssContent).toContain('Senangstart Icons - CSS Only');
+      expect(cssContent).toContain('Auto-generated');
+    });
+  });
+});