Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 | #!/usr/bin/env node
/**
* Compares each SLDS2 component's main CSS file with its themes/base.css copy.
* Use to ensure CSS changes are kept in sync (see Developer Checklist).
*
* Usage: node scripts/compareThemeBaseCss.js
* or: yarn workspace @salesforce-ux/design-system-2 node scripts/compareThemeBaseCss.js
*/
import fs from 'node:fs';
import path from 'node:path';
import { fileURLToPath } from 'node:url';
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const root = path.resolve(__dirname, '..');
const slds2 = path.join(root, 'src', 'slds2');
const COMPONENTS = [
'accordion',
'alert',
'avatar',
'avatarGroup',
'badge',
'breadcrumbs',
'button',
'buttonDualStateful',
'buttonGroup',
'buttonIcon',
'buttonStateful',
'card',
'carousel',
'checkbox',
'checkboxButton',
'checkboxToggle',
'colorPicker',
'combobox',
'dataTable',
'datepicker',
'datetimePicker',
'duelingPicklist',
'dynamicIcons',
'fileSelector',
'form-element',
'icon',
'illustration',
'input',
'map',
'menu',
'modal',
'pill',
'progressBar',
'progressIndicator',
'progressRing',
'prompt',
'radioButtonGroup',
'radioGroup',
'richTextEditor',
'select',
'slider',
'spinner',
'tabs',
'textarea',
'tile',
'toast',
'tooltip',
'treeGrid',
'trees',
'verticalNavigation',
];
function compare() {
let matchCount = 0;
let diffCount = 0;
let missingSource = [];
let missingBase = [];
for (const component of COMPONENTS) {
const cssName = `${component}.css`;
const sourcePath = path.join(slds2, component, cssName);
const basePath = path.join(slds2, component, 'themes', 'base.css');
const sourceExists = fs.existsSync(sourcePath);
const baseExists = fs.existsSync(basePath);
if (!sourceExists) {
missingSource.push(component);
continue;
}
if (!baseExists) {
missingBase.push(component);
continue;
}
const sourceContent = fs.readFileSync(sourcePath, 'utf8');
const baseContent = fs.readFileSync(basePath, 'utf8');
if (sourceContent === baseContent) {
matchCount++;
console.log(` ✓ ${component}`);
} else {
diffCount++;
console.log(` ✗ ${component} (diff)`);
}
}
console.log('');
console.log('--- Summary ---');
console.log(`Match: ${matchCount}`);
console.log(`Diff: ${diffCount}`);
if (missingSource.length) {
console.log(`Missing source CSS: ${missingSource.join(', ')}`);
}
if (missingBase.length) {
console.log(`Missing themes/base.css: ${missingBase.join(', ')}`);
}
console.log('');
const exitCode = diffCount > 0 || missingBase.length > 0 ? 1 : 0;
process.exit(exitCode);
}
console.log('Comparing component CSS vs themes/base.css:\n');
compare();
|