@c8y/style/helper-scripts/convert-stroke-icons-to-less.js

Styles for Cumulocity IoT applications

#!/usr/bin/env node

/**
 * Convert SCSS stroke icons file to LESS
 *
 * The SCSS version uses SCSS maps and map.get() which LESS doesn't support.
 * This script converts it to direct LESS class definitions.
 */

const fs = require('fs');
const path = require('path');

const scssFile = path.join(__dirname, 'styles/icons/_dlt-c8y-icons-stroke.scss');
const lessFile = path.join(__dirname, 'styles/icons/_dlt-c8y-icons-stroke.less');

console.log('Converting SCSS stroke icons to LESS...');

// Read SCSS file
const scssContent = fs.readFileSync(scssFile, 'utf8');

// Extract the icon map
const mapMatch = scssContent.match(/\$dlt-c8y-icons:\s*\(([\s\S]*?)\);/);
if (!mapMatch) {
  console.error('Could not find icon map in SCSS file');
  process.exit(1);
}

// Parse the map entries
const mapContent = mapMatch[1];
const iconEntries = [];
const lines = mapContent.split('\n');

for (const line of lines) {
  const match = line.match(/['"]([^'"]+)['"]\s*:\s*["']([^"']+)["']/);
  if (match) {
    iconEntries.push({
      name: match[1],
      unicode: match[2]
    });
  }
}

console.log(`Found ${iconEntries.length} icon entries in map`);

// Extract all icon-stroke mixin calls to get the complete list
const mixinCalls = [];
const mixinCallRegex = /@include icon-stroke\(['"]([^'"]+)['"]\);/g;
let match;
while ((match = mixinCallRegex.exec(scssContent)) !== null) {
  mixinCalls.push(match[1]);
}

console.log(`Found ${mixinCalls.length} mixin calls`);

// Create a map for quick lookup
const iconMap = new Map();
for (const entry of iconEntries) {
  iconMap.set(entry.name, entry.unicode);
}

// Generate LESS content
let lessContent = `@import "../../variables/index.less";

/**
 * DLT C8Y Icons Stroke - Stroked icon definitions (GENERATED FILE)
 *
 * Note: This file is auto-generated from the SCSS version by convert-stroke-icons-to-less.js
 *       DO NOT EDIT MANUALLY - Changes will be overwritten
 *
 * Intentionally hardcoded values:
 * - Stroke width (2px): Icon stroke rendering
 * - Unicode icon codes: Icon font character mappings
 */

// Stroked icon styles - CONVERTED FROM SCSS
// Auto-converted from _dlt-c8y-icons-stroke.scss
// DO NOT EDIT MANUALLY - Run 'node convert-stroke-icons-to-less.js' to regenerate

// Base stroked-icon styles (applies to all icons with .stroked-icon class)
[class^='dlt-c8y-icon-'],
[class*=' dlt-c8y-icon-'] {
  &.stroked-icon {
    position: relative;
    z-index: 0;

    &::before {
      position: absolute;
      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: var(--c8y-icon-stroke-color, @component-background-default);
    }

    &::after {
      position: relative;
    }
  }
}

// Individual icon definitions
`;

// Generate class definitions for each icon
for (const iconName of mixinCalls) {
  const unicode = iconMap.get(iconName);
  if (unicode) {
    lessContent += `.${iconName}.stroked-icon::after {\n  content: "${unicode}";\n}\n\n`;
  } else {
    console.warn(`Warning: No unicode value found for ${iconName}`);
  }
}

// Write LESS file
fs.writeFileSync(lessFile, lessContent, 'utf8');

console.log(`✅ Successfully converted to ${lessFile}`);
console.log(`   Generated ${mixinCalls.length} icon class definitions`);