@openeuropa/bcl-builder 1.10.11 → 1.12.0

package/README.md

@@ -97,11 +97,11 @@ We've also added some new variables that overwrite and make use of extra classes
 Step 1:
 Depending on your package manager:
 
-Yarn:
+PNPM:
 
-- yarn add @openeuropa/bcl-builder --save
-- yarn add @openeuropa/bcl-bootstrap --save
-- yarn add @openeuropa/bcl-theme-default --save
+- pnpm add @openeuropa/bcl-builder
+- pnpm add @openeuropa/bcl-bootstrap
+- pnpm add @openeuropa/bcl-theme-default
 
 NPM:
 

package/package.json

@@ -2,40 +2,35 @@
   "name": "@openeuropa/bcl-builder",
   "author": "European Commission",
   "license": "EUPL-1.2",
-  "version": "1.10.11",
+  "version": "1.12.0",
   "description": "Bootstrap Component Library builder",
   "publishConfig": {
     "access": "public"
   },
   "bin": "./bin/build.js",
   "dependencies": {
-    "@babel/core": "7.28.4",
-    "@babel/preset-env": "7.28.3",
-    "@babel/runtime": "7.28.4",
+    "@babel/core": "7.29.0",
+    "@babel/preset-env": "7.29.0",
+    "@babel/runtime": "7.28.6",
     "@popperjs/core": "2.11.8",
     "@rollup/plugin-babel": "6.1.0",
-    "@rollup/plugin-commonjs": "28.0.7",
+    "@rollup/plugin-commonjs": "29.0.0",
     "@rollup/plugin-node-resolve": "16.0.3",
-    "@rollup/plugin-replace": "6.0.2",
-    "autoprefixer": "10.4.21",
-    "babel-eslint": "10.1.0",
-    "browser-sync": "3.0.4",
-    "commander": "14.0.1",
+    "@rollup/plugin-replace": "6.0.3",
+    "@rollup/plugin-terser": "1.0.0",
+    "autoprefixer": "10.4.24",
+    "commander": "14.0.3",
     "copyfiles": "2.4.1",
     "cross-env": "10.1.0",
-    "cssnano": "7.1.1",
-    "eslint": "^9.37.0",
+    "cssnano": "7.1.2",
     "postcss": "8.5.6",
     "postcss-prefix-selector": "^2.1.1",
-    "rollup": "4.52.4",
-    "rollup-plugin-istanbul": "5.0.0",
-    "rollup-plugin-terser": "7.0.2",
-    "sass": "1.93.2",
-    "svg-sprite": "2.0.4",
-    "svgo": "4.0.0"
+    "rollup": "4.59.0",
+    "sass": "1.98.0",
+    "svg-sprite": "2.0.4"
   },
   "engines": {
-    "node": ">=14.0.0"
+    "node": ">=22.0.0"
   },
-  "gitHead": "82aecf2f60f8bd8f9afd447ea0d044396f085823"
+  "gitHead": "6d1138cf7e70db692c0aae7a598977de7004204e"
 }

package/scripts/colorScheme.js

@@ -22,6 +22,7 @@
 const sass = require("sass");
 const path = require("path");
 const fs = require("fs");
+const { pathToFileURL } = require("url");
 const postcss = require("postcss");
 const cssnano = require("cssnano");
 const prefixer = require("postcss-prefix-selector");
@@ -39,6 +40,19 @@ const getPlugins = (options) => {
   return plugins;
 };
 
+const resolveThemeSource = (includePaths, localPath, packagePath) => {
+  const candidates = [
+    ...(includePaths || []).map((basePath) =>
+      path.resolve(basePath, packagePath),
+    ),
+    // Keep installed package resolution first for compatibility, and only
+    // fall back to local workspace sources when building this monorepo.
+    path.resolve(process.cwd(), localPath),
+  ];
+
+  return candidates.find((candidate) => fs.existsSync(candidate));
+};
+
 const buildColorScheme = (entry, dest, options) => {
   const plugins = getPlugins(options);
 
@@ -51,37 +65,57 @@ const buildColorScheme = (entry, dest, options) => {
 
   // Read contents of the entry file and the base color scheme SCSS file
   const entryVariables = fs.readFileSync(entry, "utf8");
-  const imports = fs.readFileSync(
-    path.resolve(
-      ...(options.includePaths || []),
-      "@openeuropa/bcl-theme-default/src/scss/color-scheme.scss",
-    ),
-    "utf8",
+  const importsPath = resolveThemeSource(
+    options.includePaths,
+    "src/scss/color-scheme.scss",
+    "@openeuropa/bcl-theme-default/src/scss/color-scheme.scss",
   );
-  const generator = fs.readFileSync(
-    path.resolve(
-      ...(options.includePaths || []),
-      "@openeuropa/bcl-theme-default/src/scss/color_scheme/generator.scss",
-    ),
-    "utf8",
+  const generatorPath = resolveThemeSource(
+    options.includePaths,
+    "src/scss/color_scheme/generator.scss",
+    "@openeuropa/bcl-theme-default/src/scss/color_scheme/generator.scss",
   );
 
+  if (!importsPath || !generatorPath) {
+    throw new Error(
+      "Could not resolve the default theme color-scheme sources.",
+    );
+  }
+
+  const imports = fs.readFileSync(importsPath, "utf8");
+  const generator = fs.readFileSync(generatorPath, "utf8");
+
   // Concatenate the contents
   const scssContent = imports + "\n" + entryVariables + "\n" + generator;
 
-  const sassResult = sass.renderSync({
-    data: scssContent,
-    outFile: dest,
-    noErrorCss: true,
-    outputStyle: "expanded",
+  const compileOptions = {
+    style: "expanded",
     sourceMap: options.sourceMap !== false,
-    sourceMapContents: options.sourceMap === true,
-    sourceMapEmbed: options.sourceMap === true,
-    includePaths: [
+    sourceMapIncludeSources: options.sourceMap === true,
+    url: pathToFileURL(entry),
+    loadPaths: [
+      path.dirname(importsPath),
+      path.dirname(generatorPath),
       path.resolve(process.cwd(), "node_modules"),
       ...(options.includePaths || []),
     ],
-  });
+  };
+
+  const silencedDeprecations = Array.isArray(options.silenceDeprecations)
+    ? options.silenceDeprecations
+    : undefined;
+
+  if (silencedDeprecations && silencedDeprecations.length) {
+    compileOptions.silenceDeprecations = silencedDeprecations;
+  }
+
+  if (typeof options.quietDeps !== "undefined") {
+    compileOptions.quietDeps = options.quietDeps;
+  } else if (silencedDeprecations && silencedDeprecations.length) {
+    compileOptions.quietDeps = true;
+  }
+
+  const sassResult = sass.compileString(scssContent, compileOptions);
 
   postcss(plugins)
     .use(
@@ -106,7 +140,7 @@ const buildColorScheme = (entry, dest, options) => {
     .process(sassResult.css, {
       map:
         postcssSourceMap === "file"
-          ? { inline: false, prev: sassResult.map.toString() }
+          ? { inline: false, prev: JSON.stringify(sassResult.sourceMap) }
           : postcssSourceMap,
       from: entry,
       to: dest,

package/scripts/scripts.js

@@ -36,7 +36,7 @@ const { babel } = require("@rollup/plugin-babel");
 const { nodeResolve } = require("@rollup/plugin-node-resolve");
 const babelPresetEnv = require("@babel/preset-env");
 const rollup = require("rollup");
-const { terser } = require("rollup-plugin-terser");
+const terser = require("@rollup/plugin-terser");
 
 module.exports = (input, dest, options) => {
   const plugins = [

package/scripts/sprite.js

@@ -66,15 +66,17 @@ module.exports = (entry, dest, options) => {
   });
 
   files.forEach((file) => {
-    let filePath;
-    if (Array.isArray(entry)) {
-      filePath = path.resolve(entry[0], file);
-      if (!fs.existsSync(filePath)) {
-        filePath = path.resolve(entry[1], file);
-      }
-    } else {
-      filePath = path.resolve(entry, file);
+    const entryPaths = Array.isArray(entry) ? entry : [entry];
+    const filePath = entryPaths
+      .map((entryPath) => path.resolve(entryPath, file))
+      .find((resolvedPath) => fs.existsSync(resolvedPath));
+
+    if (!filePath) {
+      throw new Error(
+        `Could not resolve sprite source "${file}" from: ${entryPaths.join(", ")}`,
+      );
     }
+
     spriter.add(
       filePath,
       file,

package/scripts/styles.js

@@ -49,15 +49,10 @@ const buildStyles = (entry, dest, options) => {
     postcssSourceMap = options.sourceMap; // as a file
   }
 
-  const renderOptions = {
-    file: entry,
-    outFile: dest,
-    noErrorCss: true,
-    outputStyle: "expanded",
+  const compileOptions = {
+    style: "expanded",
     sourceMap: options.sourceMap !== false,
-    sourceMapContents: options.sourceMap === true,
-    sourceMapEmbed: options.sourceMap === true,
-    includePaths: [
+    loadPaths: [
       path.resolve(process.cwd(), "node_modules"),
       ...(options.includePaths || []),
     ],
@@ -68,16 +63,16 @@ const buildStyles = (entry, dest, options) => {
     : undefined;
 
   if (silencedDeprecations && silencedDeprecations.length) {
-    renderOptions.silenceDeprecations = silencedDeprecations;
+    compileOptions.silenceDeprecations = silencedDeprecations;
   }
 
   if (typeof options.quietDeps !== "undefined") {
-    renderOptions.quietDeps = options.quietDeps;
+    compileOptions.quietDeps = options.quietDeps;
   } else if (silencedDeprecations && silencedDeprecations.length) {
-    renderOptions.quietDeps = true;
+    compileOptions.quietDeps = true;
   }
 
-  const sassResult = sass.renderSync(renderOptions);
+  const sassResult = sass.compile(entry, compileOptions);
 
   const processor = postcss(plugins);
   if (options.prefix) {
@@ -93,7 +88,7 @@ const buildStyles = (entry, dest, options) => {
     .process(sassResult.css, {
       map:
         postcssSourceMap === "file"
-          ? { inline: false, prev: sassResult.map.toString() }
+          ? { inline: false, prev: JSON.stringify(sassResult.sourceMap) }
           : postcssSourceMap,
       from: entry,
       to: dest,