@openedx/paragon 23.21.1 → 23.21.3

package/bin/paragon-scripts.js

@@ -192,7 +192,10 @@ const COMMANDS = {
       },
       {
         name: '--defaultThemeVariants',
-        description: `Specifies default theme variants. Defaults to a single 'light' theme variant.
+        description: `Specifies which theme variants are marked as defaults in the generated theme-urls.json.
+          Consuming applications (Open edX micro-frontends) use theme-urls.json to determine
+          which theme CSS files to load; variants listed here are loaded automatically without
+          requiring explicit configuration.
           You can provide multiple default theme variants by passing multiple values, for
           example: \`--defaultThemeVariants light dark\`
         `,
@@ -262,6 +265,10 @@ const COMMANDS = {
  * @function executeParagonCommand
  */
 (async () => {
+  process.on('SIGINT', () => {
+    process.exit(130);
+  });
+
   const [command, ...commandArgs] = process.argv.slice(2);
   const resolvedCommand = commandAliases[command] || command;
   const executor = COMMANDS[resolvedCommand];

package/lib/__tests__/build-scss.test.js

@@ -1,4 +1,7 @@
 const fs = require('fs');
+const path = require('path');
+const { spawn } = require('child_process');
+const os = require('os');
 const sass = require('sass');
 
 const buildScssCommand = require('../build-scss');
@@ -135,8 +138,8 @@ describe('buildScssCommand', () => {
     );
   });
 
-  it('should use default arguments when none provided', () => {
-    buildScssCommand([]);
+  it('should use default arguments when none provided', async () => {
+    await buildScssCommand([]);
 
     expect(sass.compile).toHaveBeenCalledWith(
       expect.stringContaining('core.scss'),
@@ -144,8 +147,8 @@ describe('buildScssCommand', () => {
     );
   });
 
-  it('should exclude core properly', () => {
-    buildScssCommand(['--excludeCore']);
+  it('should exclude core properly', async () => {
+    await buildScssCommand(['--excludeCore']);
 
     expect(sass.compile).not.toHaveBeenCalledWith(
       expect.stringContaining('core.scss'),
@@ -158,3 +161,25 @@ describe('buildScssCommand', () => {
     );
   });
 });
+
+describe('SIGINT handling', () => {
+  it('should exit with code 130 when SIGINT is received during build', async () => {
+    const child = spawn(process.execPath, [
+      path.resolve(__dirname, '../../bin/paragon-scripts.js'),
+      'build-scss',
+      `--outDir=${path.join(os.tmpdir(), 'build-scss-sigint-test')}`,
+    ], {
+      cwd: path.resolve(__dirname, '../..'),
+      stdio: 'ignore',
+    });
+
+    const { code, signal } = await new Promise((resolve) => {
+      child.on('exit', (exitCode, exitSignal) => resolve({ code: exitCode, signal: exitSignal }));
+      setTimeout(() => child.kill('SIGINT'), 500);
+    });
+
+    // Process was terminated by SIGINT — either our handler called process.exit(130)
+    // or default signal handling killed it before the handler was registered
+    expect(code === 130 || signal === 'SIGINT').toBe(true);
+  }, 30000);
+});

package/lib/__tests__/help.test.js

@@ -135,7 +135,15 @@ describe('helpCommand', () => {
     expect(console.log).toHaveBeenCalledWith(
       expect.stringContaining(`${chalk.yellow.bold('--defaultThemeVariants')} ${chalk.grey('Default: light')}`),
     );
-    expect(console.log).toHaveBeenCalledWith(expect.stringContaining('Specifies default theme variants'));
+    expect(console.log).toHaveBeenCalledWith(
+      expect.stringContaining('Specifies which theme variants are marked as defaults in the generated theme-urls.json.'),
+    );
+    expect(console.log).toHaveBeenCalledWith(
+      expect.stringContaining('Consuming applications (Open edX micro-frontends) use theme-urls.json'),
+    );
+    expect(console.log).toHaveBeenCalledWith(
+      expect.stringContaining('variants listed here are loaded automatically without'),
+    );
     expect(console.log).toHaveBeenCalledWith(expect.stringContaining('You can provide multiple default theme variants'));
     expect(console.log).toHaveBeenCalledWith(expect.stringContaining('example: `--defaultThemeVariants light dark`'));
     /* eslint-enable no-console */

package/lib/build-scss.js

@@ -177,18 +177,19 @@ function buildScssCommand(commandArgs) {
     });
   }
 
-  // Theme Variants CSS
-  fs.readdirSync(themesPath, { withFileTypes: true })
-    .filter((item) => item.isDirectory())
-    .forEach((themeDir) => {
-      compileAndWriteStyleSheets({
-        name: themeDir.name,
-        stylesPath: `${themesPath}/${themeDir.name}/index.css`,
-        outDir,
-        isThemeVariant: true,
-        isDefaultThemeVariant: defaultThemeVariants.includes(themeDir.name),
-      });
+  // Theme variants CSS
+  const themeDirs = fs.readdirSync(themesPath, { withFileTypes: true })
+    .filter((item) => item.isDirectory());
+
+  for (const themeDir of themeDirs) {
+    compileAndWriteStyleSheets({
+      name: themeDir.name,
+      stylesPath: `${themesPath}/${themeDir.name}/index.css`,
+      outDir,
+      isThemeVariant: true,
+      isDefaultThemeVariant: defaultThemeVariants.includes(themeDir.name),
     });
+  }
 }
 
 module.exports = buildScssCommand;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openedx/paragon",
-  "version": "23.21.1",
+  "version": "23.21.3",
   "description": "Accessible, responsive UI component library based on Bootstrap.",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/tokens/style-dictionary.js

@@ -311,10 +311,9 @@ const initializeStyleDictionary = async ({ themes }) => {
     format: async ({ dictionary, file, options = {} }) => {
       const { fileHeader } = await getStyleDictionaryUtils();
       const { formatting } = options;
-      const { breakpoint } = dictionary.tokens.size;
 
       let customMediaVariables = '';
-      const breakpoints = Object.values(breakpoint || {});
+      const breakpoints = Object.values(dictionary.tokens?.size?.breakpoint || {});
 
       for (let i = 0; i < breakpoints.length; i++) {
         const [currentBreakpoint, nextBreakpoint] = [breakpoints[i], breakpoints[i + 1]];