@openeuropa/bcl-builder 0.28.0 → 0.313.202403151055

package/README.md

@@ -40,3 +40,78 @@ commands which all supports multiple operations as items in an array.
 #### Sprite
 
 `sprite: [ { entry: (string), dest: (string), options: (object) { file: (string) (defaut: bcl-icons.svg), list: (array of file names) (optional), }, }, ],`
+
+---
+
+#### Color Scheme
+
+```javascript
+color-scheme: [
+  {
+    entry (ex: ../path/to/your-colour-scheme.scss),
+    dest (ex: ../path/to/compiled.css),
+    options (object with plugins for postcss) {
+      minify (includes css nano for minification)
+    }
+  },
+],
+
+ * Example config object: {
+ color-scheme: [
+  {
+    entry: [path.resolve(nodeModules, "color-scheme.scss")],
+    dest: path.resolve(outputFolder, "css"),
+    options: {
+      includePaths,
+      sourceMap: "file",
+    },
+  },
+],
+```
+
+Example SCSS color-scheme:
+
+```scss
+$colors-schemes: (
+  "pixy-pink": (
+    "primary": #4eac00,
+    "secondary": #fbff00,
+    "danger": #ff8800,
+    "success": #4dff00,
+    "text": #294d26,
+    "background": #ffdfb0,
+    "link": #7b00ff,
+  ),
+);
+```
+
+You can find multiple plugins here:
+[Postcss Plugins](https://github.com/postcss/postcss/blob/main/docs/plugins.md)
+
+The color-scheme enables the possibility to theme the colors used in BCL. It overrides the variables `$theme-colors` used by Bootstrap ([Bootstrap Theme Colors](https://getbootstrap.com/docs/5.0/customize/color/#theme-colors)).
+
+### Prerequisites
+
+- BCL-Builder version >= 1.2.1
+- BCL-Theme-Default >= 1.2.1
+
+We've also added some new variables that overwrite and make use of extra classes:
+
+- `.text-color-default`: Text color is changed based on the 'text' variable, overriding all text colors inside a component.
+- `.bg-default`: Background color is changed based on the 'background' variable. It adds a background for the component but does not override if it already has a `bg` class (e.g., `bg-primary`).
+
+### Files Inside the Theme Default
+
+- `scss/color_scheme/alert`: Mixin that changes the colors of alerts
+- `scss/color_scheme/background`: Mixin that adds the `bg-default` class
+- `scss/color_scheme/badge`: Mixin that changes the colors of badges
+- `scss/color_scheme/buttons`: Mixin that changes the colors of buttons
+- `scss/color_scheme/link`: Mixin that changes the color of links
+- `scss/color_scheme/list_group`: Mixin that changes the colors of list groups
+- `scss/color_scheme/text`: Mixin that adds the `text-color-default` class
+- `scss/color_scheme/utilities`: Mixin that changes the utilities: `bg-{color}` (e.g., `bg-primary`), `text-bg-{color}` (e.g., `text-bg-primary`), and `link-{color}` (e.g., `link-primary`)
+- `scss/color_scheme/generator`: This includes all the mentioned mixins and calls them. It also adds the CSS variables on the color scheme class.
+
+- `scss/color-scheme.scss`: This is the starting imports needed.
+
+---

package/bin/build.js

@@ -5,6 +5,7 @@ const program = require("commander");
 const buildScript = require("../scripts/scripts");
 const browserslist = require("browserslist");
 const { buildStyles } = require("../scripts/styles");
+const { buildColorScheme } = require("../scripts/colorScheme");
 const rename = require("../scripts/rename");
 const copyFiles = require("../scripts/copy");
 const makeSprite = require("../scripts/sprite");
@@ -57,6 +58,16 @@ program
     );
   });
 
+program
+  .command("color-scheme")
+  .description("compile Color scheme SCSS to CSS")
+  .action(() => {
+    const config = loadConfig(program.config);
+    config.colorScheme.forEach((conf) =>
+      buildColorScheme(conf.entry, conf.dest, conf.options)
+    );
+  });
+
 program
   .command("sprite")
   .description("make svg sprites")

package/conf/svgoDefaultPlugins.js

@@ -1,118 +1,22 @@
 module.exports = [
   {
-    cleanupAttrs: true,
-  },
-  {
-    cleanupEnableBackground: true,
-  },
-  {
-    cleanupIDs: true,
-  },
-  {
-    cleanupListOfValues: true,
-  },
-  {
-    cleanupNumericValues: true,
-  },
-  {
-    collapseGroups: true,
-  },
-  {
-    convertColors: true,
-  },
-  {
-    convertPathData: {
-      noSpaceAfterFlags: false,
+    name: "preset-default",
+    params: {
+      overrides: {
+        removeUnknownsAndDefaults: {
+          keepRoleAttr: true,
+        },
+        removeViewBox: false,
+      },
     },
   },
+  "cleanupListOfValues",
+  "removeXMLNS",
+  "sortAttrs",
   {
-    convertShapeToPath: true,
-  },
-  {
-    convertStyleToAttrs: true,
-  },
-  {
-    convertTransform: true,
-  },
-  {
-    inlineStyles: true,
-  },
-  {
-    mergePaths: {
-      noSpaceAfterFlags: false,
-    },
-  },
-  {
-    minifyStyles: true,
-  },
-  {
-    moveElemsAttrsToGroup: true,
-  },
-  {
-    moveGroupAttrsToElems: true,
-  },
-  {
-    removeAttrs: {
-      attrs: ["data-name", "fill", "clip-rule"],
-    },
-  },
-  {
-    removeComments: true,
-  },
-  {
-    removeDesc: true,
-  },
-  {
-    removeDoctype: true,
-  },
-  {
-    removeEditorsNSData: true,
-  },
-  {
-    removeEmptyAttrs: true,
-  },
-  {
-    removeEmptyContainers: true,
-  },
-  {
-    removeEmptyText: true,
-  },
-  {
-    removeHiddenElems: true,
-  },
-  {
-    removeMetadata: true,
-  },
-  {
-    removeNonInheritableGroupAttrs: true,
-  },
-  {
-    removeTitle: true,
-  },
-  {
-    removeUnknownsAndDefaults: {
-      keepRoleAttr: true,
+    name: "removeAttrs",
+    params: {
+      attrs: ["clip-rule", "data-name", "fill"],
     },
   },
-  {
-    removeUnusedNS: true,
-  },
-  {
-    removeUselessDefs: true,
-  },
-  {
-    removeUselessStrokeAndFill: true,
-  },
-  {
-    removeViewBox: false,
-  },
-  {
-    removeXMLNS: true,
-  },
-  {
-    removeXMLProcInst: true,
-  },
-  {
-    sortAttrs: true,
-  },
 ];

package/package.json

@@ -2,7 +2,7 @@
   "name": "@openeuropa/bcl-builder",
   "author": "European Commission",
   "license": "EUPL-1.2",
-  "version": "0.28.0",
+  "version": "0.313.202403151055",
   "description": "Bootstrap Component Library builder",
   "publishConfig": {
     "access": "public"
@@ -11,31 +11,32 @@
     "bcl-builder": "./bin/build.js"
   },
   "dependencies": {
-    "@babel/core": "7.19.1",
-    "@babel/preset-env": "7.19.1",
-    "@babel/runtime": "7.19.0",
-    "@popperjs/core": "2.11.6",
-    "@rollup/plugin-babel": "5.3.1",
-    "@rollup/plugin-commonjs": "22.0.2",
-    "@rollup/plugin-node-resolve": "14.1.0",
-    "@rollup/plugin-replace": "4.0.0",
-    "autoprefixer": "10.4.12",
+    "@babel/core": "7.22.9",
+    "@babel/preset-env": "7.22.9",
+    "@babel/runtime": "7.22.6",
+    "@popperjs/core": "2.11.8",
+    "@rollup/plugin-babel": "6.0.3",
+    "@rollup/plugin-commonjs": "25.0.3",
+    "@rollup/plugin-node-resolve": "15.1.0",
+    "@rollup/plugin-replace": "5.0.2",
+    "autoprefixer": "10.4.14",
     "babel-eslint": "10.1.0",
-    "browser-sync": "2.27.10",
-    "commander": "9.4.0",
+    "browser-sync": "2.29.3",
+    "commander": "11.0.0",
     "copyfiles": "2.4.1",
     "cross-env": "7.0.3",
-    "cssnano": "5.1.13",
-    "postcss": "8.4.16",
-    "rollup": "2.79.1",
-    "rollup-plugin-istanbul": "3.0.0",
+    "cssnano": "6.0.1",
+    "postcss": "8.4.31",
+    "postcss-prefix-selector": "^1.16.0",
+    "rollup": "3.27.0",
+    "rollup-plugin-istanbul": "4.0.0",
     "rollup-plugin-terser": "7.0.2",
-    "sass": "1.55.0",
-    "svg-sprite": "1.5.4",
-    "svgo": "2.8.0"
+    "sass": "1.64.2",
+    "svg-sprite": "2.0.2",
+    "svgo": "3.0.2"
   },
   "engines": {
-    "node": ">=12.0.0"
+    "node": ">=14.0.0"
   },
-  "gitHead": "9ceb916258c8c7331f37bbb7c4380a2121440e12"
+  "gitHead": "604a6149ce90e748b26cdcccc9c8fdc93fa431d9"
 }

package/scripts/colorScheme.js

@@ -0,0 +1,129 @@
+/**
+ * Compile scss files.
+ *
+ * @param {string} from - Path to a folder or file.
+ * @param {string} to - String to prefix, suffix or replace the current file name.
+ * @param {object} options - Object
+ *
+ * Example config object: {
+ *
+ *  color-scheme: [
+ *   {
+ *     entry: [path.resolve(nodeModules, "myfile.js")],
+ *     dest: path.resolve(outputFolder, "js"),
+ *     options: {
+ *       includePaths,
+ *       sourceMap: "file",
+ *     },
+ *   },
+ * ],
+ */
+
+const sass = require("sass");
+const path = require("path");
+const fs = require("fs");
+const postcss = require("postcss");
+const cssnano = require("cssnano");
+const prefixer = require("postcss-prefix-selector");
+const autoprefixer = require("autoprefixer");
+
+const getPlugins = (options) => {
+  const plugins = [];
+
+  plugins.push(autoprefixer({ grid: "no-autoplace" }));
+
+  if (options.minify) {
+    plugins.push(cssnano({ safe: true }));
+  }
+
+  return plugins;
+};
+
+const buildColorScheme = (entry, dest, options) => {
+  const plugins = getPlugins(options);
+
+  let postcssSourceMap = false;
+  if (options.sourceMap === true) {
+    postcssSourceMap = true; // inline
+  } else if (options.sourceMap === "file") {
+    postcssSourceMap = options.sourceMap; // as a file
+  }
+
+  // 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 generator = fs.readFileSync(
+    path.resolve(
+      ...(options.includePaths || []),
+      "@openeuropa/bcl-theme-default/src/scss/color_scheme/generator.scss"
+    ),
+    "utf8"
+  );
+
+  // Concatenate the contents
+  const scssContent = imports + "\n" + entryVariables + "\n" + generator;
+
+  console.log(scssContent);
+
+  const sassResult = sass.renderSync({
+    data: scssContent,
+    outFile: dest,
+    noErrorCss: true,
+    outputStyle: "expanded",
+    sourceMap: options.sourceMap !== false,
+    sourceMapContents: options.sourceMap === true,
+    sourceMapEmbed: options.sourceMap === true,
+    includePaths: [
+      path.resolve(process.cwd(), "node_modules"),
+      ...(options.includePaths || []),
+    ],
+  });
+
+  postcss(plugins)
+    .use(
+      prefixer({
+        prefix: options.prefix ? options.prefix : "",
+
+        transform: function (
+          prefix,
+          selector,
+          prefixedSelector,
+          filePath,
+          rule
+        ) {
+          if (prefix) {
+            return prefixedSelector;
+          } else {
+            return selector;
+          }
+        },
+      })
+    )
+    .process(sassResult.css, {
+      map:
+        postcssSourceMap === "file"
+          ? { inline: false, prev: sassResult.map.toString() }
+          : postcssSourceMap,
+      from: entry,
+      to: dest,
+    })
+    .then((postcssResult) => {
+      fs.mkdirSync(path.dirname(dest), { recursive: true });
+      fs.writeFileSync(dest, postcssResult.css);
+
+      if (postcssResult.map) {
+        fs.writeFileSync(`${dest}.map`, postcssResult.map.toString());
+      }
+    });
+};
+
+module.exports = {
+  getPlugins,
+  buildColorScheme,
+};

package/scripts/rename.js

@@ -23,7 +23,7 @@
  */
 
 const path = require("path");
-const glob = require("glob");
+const { globSync } = require("glob");
 const { rename } = require("fs");
 
 module.exports = (from, to, options) => {
@@ -32,15 +32,15 @@ module.exports = (from, to, options) => {
 
     if (options.glob) {
       if (options.search) {
-        files = glob.sync(path.join(from, options.glob, options.search));
+        files = globSync(path.join(from, options.glob, options.search));
       } else {
-        files = glob.sync(path.join(from, options.glob));
+        files = globSync(path.join(from, options.glob));
       }
     } else {
       if (options.search) {
-        files = glob.sync(path.join(from, options.search));
+        files = globSync(path.join(from, options.search));
       } else {
-        files = glob.sync(from);
+        files = globSync(from);
       }
     }
 

package/scripts/sprite.js

@@ -1,7 +1,7 @@
 /**
  * Generate svg sprites.
  *
- * @param {string} entry - Path to a folder or file.
+ * @param {string} entry - array of paths to a folder or file.
  * @param {string} dest - Output folder path
  * @param {object} options - Object
  *
@@ -9,7 +9,10 @@
  *
  * sprite: [
  *   {
- *     entry: path.resolve(nodeModules, "bootstrap-icons/icons/"),
+ *     entry: [
+ *       path.resolve(nodeModules, "bootstrap-icons/icons/"),
+ *       path.resolve(__dirname, "src/icons/custom-icons")
+ *     ],
  *     dest: path.resolve(outputFolder, "icons/"),
  *     options: {
  *       file: "bcl-default-icons.svg",
@@ -21,17 +24,20 @@
  */
 
 const fs = require("fs");
-const glob = require("glob");
+const { globSync } = require("glob");
 const mkdirp = require("mkdirp");
 const path = require("path");
 const defaultPlugins = require("../conf/svgoDefaultPlugins");
 const SVGSpriter = require("svg-sprite");
 
 module.exports = (entry, dest, options) => {
+  const iconList = Array.isArray(options.list)
+    ? options.list.flat(1)
+    : options.list;
   const outputFile = options.file
     ? `${dest}/${options.file}`
     : `${dest}/bcl-default-icons.svg`;
-  const files = options.list || glob.sync("*.svg", { cwd: entry });
+  const files = iconList || globSync("*.svg", { cwd: entry });
 
   const plugins = options.transformPlugins || defaultPlugins;
 
@@ -42,7 +48,7 @@ module.exports = (entry, dest, options) => {
         {
           svgo: {
             multipass: true,
-            plugins: plugins,
+            plugins: defaultPlugins,
           },
         },
       ],
@@ -60,7 +66,15 @@ module.exports = (entry, dest, options) => {
   });
 
   files.forEach((file) => {
-    const filePath = path.resolve(entry, 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);
+    }
     spriter.add(
       filePath,
       file,

package/scripts/styles.js

@@ -24,6 +24,7 @@ const path = require("path");
 const fs = require("fs");
 const postcss = require("postcss");
 const cssnano = require("cssnano");
+const prefixer = require("postcss-prefix-selector");
 const autoprefixer = require("autoprefixer");
 
 const getPlugins = (options) => {
@@ -63,6 +64,25 @@ const buildStyles = (entry, dest, options) => {
   });
 
   postcss(plugins)
+    .use(
+      prefixer({
+        prefix: options.prefix ? options.prefix : "",
+
+        transform: function (
+          prefix,
+          selector,
+          prefixedSelector,
+          filePath,
+          rule
+        ) {
+          if (prefix) {
+            return prefixedSelector;
+          } else {
+            return selector;
+          }
+        },
+      })
+    )
     .process(sassResult.css, {
       map:
         postcssSourceMap === "file"