@openeuropa/bcl-builder 1.3.0 → 1.4.0

package/README.md

@@ -40,3 +40,109 @@ 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
+ * Example config object: {
+ colorScheme: [
+  {
+    entry: path.resolve("resources/sass/color-scheme-variables.scss"),
+    dest: path.resolve(outputFolder, "assets/css/color_scheme.min.css"),
+    options: {
+      includePaths,
+      sourceMap: "file",
+    },
+  },
+],
+```
+
+This following example is the entry of the colorScheme. The scss file should look like this. It also support multiple color schemes.
+Example SCSS file of color-scheme.scss:
+
+```scss
+$colors-schemes: (
+  "ocean": (
+    "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)).
+
+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`).
+
+### Prerequisites
+
+- BCL-Builder version >= 1.2.1
+- BCL-Bootstrap version >= 1.2.1
+- BCL-Theme-Default >= 1.2.1
+
+### Setup Color Schema
+
+Step 1:
+Depending on your package manager:
+
+Yarn:
+
+- yarn add @openeuropa/bcl-builder --save
+- yarn add @openeuropa/bcl-bootstrap --save
+- yarn add @openeuropa/bcl-theme-default --save
+
+NPM:
+
+- npm install @openeuropa/bcl-builder --save
+- npm install @openeuropa/bcl-bootstrap --save
+- npm install @openeuropa/bcl-theme-default --save
+
+Step 2:
+Add the following bcl-builder.config.js file:
+
+```javascript
+  colorScheme: [
+    {
+      entry: path.resolve(outputFolder, "path to the color-scheme scss file"),
+      dest: path.resolve(outputFolder, "compiled "),
+      options: {
+        includePaths,
+        minify: true,
+        sourceMap: "file",
+      },
+    },
+  ],
+```
+
+Step 3:
+Add in your package.json the following command:
+
+```javascript
+  "build:color-scheme": "bcl-builder color-scheme",
+```
+
+Note: We are using ([npm-run-all package](https://www.npmjs.com/package/npm-run-all)) in BCL in order for all scripts for bcl-builder to be run at once:
+Example:
+
+```javascript
+    "build": "npm-run-all build:*",
+    "build:styles": "bcl-builder styles",
+    "build:color-scheme": "bcl-builder color-scheme",
+    "build:scripts": "bcl-builder scripts",
+    "build:copy": "bcl-builder copy",
+    "build:sprite": "bcl-builder sprite",
+```
+
+---

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/package.json

@@ -2,7 +2,7 @@
   "name": "@openeuropa/bcl-builder",
   "author": "European Commission",
   "license": "EUPL-1.2",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Bootstrap Component Library builder",
   "publishConfig": {
     "access": "public"
@@ -36,5 +36,5 @@
   "engines": {
     "node": ">=14.0.0"
   },
-  "gitHead": "965b58bc48d2c2ee183db317ff2dd43d2f3bec9e"
+  "gitHead": "0271b344c41999ea181851f229385df1d539047b"
 }

package/scripts/colorScheme.js

@@ -0,0 +1,127 @@
+/**
+ * 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("resources/sass/color-scheme-variables.scss"),
+ *     dest: path.resolve(outputFolder, "assets/css/color_scheme.min.css"),
+ *     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;
+
+  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,
+};