@swissquote/crafty-preset-lightningcss 1.22.0-alpha.1

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@swissquote/crafty-preset-lightningcss",
+  "version": "1.22.0-alpha.1",
+  "license": "Apache-2.0",
+  "repository": "https://github.com/swissquote/crafty.git",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "main": "src/index.js",
+  "scripts": {
+    "lint": "node ../crafty-preset-eslint/src/commands/jsLint.js --preset recommended --preset node src",
+    "build": "node ../../utils/build.js"
+  },
+  "dependencies": {
+    "@swissquote/crafty": "1.22.0-alpha.1",
+    "@swissquote/crafty-commons": "1.22.0-alpha.1",
+    "@swissquote/crafty-preset-stylelint": "1.22.0-alpha.1",
+    "lightningcss": "1.18.0",
+    "mini-css-extract-plugin": "2.7.2"
+  },
+  "devDependencies": {
+    "css-loader": "6.7.3",
+    "lightningcss-loader": "2.1.0",
+    "style-loader": "3.3.1"
+  },
+  "engines": {
+    "node": ">=16"
+  }
+}

package/packages/css-loader.js

@@ -0,0 +1,2 @@
+//module.exports = require("css-loader");
+module.exports = require("../dist/webpack-packages/bundled.js").cssLoader();

package/packages/lightningcss-loader.js

@@ -0,0 +1,2 @@
+//module.exports = require("lightningcss-loader");
+module.exports = require("../dist/webpack-packages/bundled.js").lightningcssLoader();

package/packages/style-loader.js

@@ -0,0 +1,2 @@
+//module.exports = require("style-loader");
+module.exports = require("../dist/webpack-packages/bundled.js").styleLoader();

package/src/ModuleFilenameHelpers.js

@@ -0,0 +1,39 @@
+function asRegExp(test) {
+  if (typeof test === "string") {
+    return new RegExp(`^${test.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&")}`);
+  }
+  return test;
+}
+
+function matchPart(str, testStr) {
+  if (!testStr) return true;
+  const test = asRegExp(testStr);
+  if (Array.isArray(test)) {
+    return test.map(asRegExp).some(regExp => regExp.test(str));
+  } else {
+    return test.test(str);
+  }
+}
+
+function matchObject(obj, str) {
+  if (obj.test) {
+    if (!matchPart(str, obj.test)) {
+      return false;
+    }
+  }
+  if (obj.include) {
+    if (!matchPart(str, obj.include)) {
+      return false;
+    }
+  }
+  if (obj.exclude) {
+    if (matchPart(str, obj.exclude)) {
+      return false;
+    }
+  }
+  return true;
+}
+
+module.exports = {
+  matchObject
+};

package/src/index.js

@@ -0,0 +1,59 @@
+const path = require("path");
+
+const { createGlobalRule, createModuleRule } = require("./webpack-utils");
+
+const MODULES = path.join(__dirname, "..", "node_modules");
+const hasOwnProperty = Object.prototype.hasOwnProperty;
+
+module.exports = {
+  presets: [require.resolve("@swissquote/crafty-preset-stylelint")],
+  defaultConfig() {
+    return {
+      bundleTypes: { css: "css" }
+    };
+  },
+  config(config) {
+    // Add missing informations to CSS configurations
+    for (const i in config.css) {
+      if (!hasOwnProperty.call(config.css, i)) {
+        continue;
+      }
+
+      // Store the taskname inside
+      config.css[i].name = i;
+
+      // use destination and not filename
+      if (config.css[i].filename) {
+        config.css[i].destination = config.css[i].filename;
+      }
+
+      // Infer default destination if it's not specified
+      if (!config.css[i].destination) {
+        config.css[i].destination = `${i}.min.css`;
+      }
+    }
+
+    return config;
+  },
+  webpack(crafty, bundle, chain) {
+    chain.resolve.extensions.add(".css").add(".scss");
+    chain.resolve.modules.add(MODULES);
+    chain.resolveLoader.modules.add(MODULES);
+
+    createGlobalRule(crafty, bundle, chain);
+    createModuleRule(crafty, bundle, chain);
+
+    // ADD Minify plugin
+    chain.optimization
+      .minimizer("css")
+      .use(path.resolve(__dirname, "minify.js"), [
+        {
+          targets: crafty.config.browsers,
+          drafts: {
+            customMedia: true
+          },
+          implementation: require("lightningcss")
+        }
+      ]);
+  }
+};

package/src/minify.js

@@ -0,0 +1 @@
+module.exports = require("../packages/lightningcss-loader.js").LightningCssMinifyPlugin;

package/src/webpack-sources.js

@@ -0,0 +1 @@
+module.exports = require("@swissquote/crafty-runner-webpack/packages/webpack").sources;

package/src/webpack-utils.js

@@ -0,0 +1,166 @@
+const path = require("path");
+
+const regexLikeIndexModule = /index\.module\.s?css$/;
+
+function getExtractConfig(bundle) {
+  let extractCSSConfig = bundle.extractCSS;
+  if (extractCSSConfig === true) {
+    extractCSSConfig = {
+      filename: "[bundle]-[name].min.css"
+    };
+  } else if (typeof extractCSSConfig === "string") {
+    extractCSSConfig = {
+      filename: extractCSSConfig
+    };
+  }
+
+  // Allow to template [bundle] with the bundle name
+  if (typeof extractCSSConfig.filename === "string") {
+    extractCSSConfig.filename = extractCSSConfig.filename.replace(
+      "[bundle]",
+      bundle.name
+    );
+  }
+
+  return extractCSSConfig;
+}
+
+function getCssModuleLocalIdent(context, _, exportName, options) {
+  const loaderUtils = require("loader-utils");
+
+  const relativePath = path
+    .relative(context.rootContext, context.resourcePath)
+    .replace(/\\+/g, "/");
+
+  // Generate a more meaningful name (parent folder) when the user names the
+  // file `index.module.css`.
+  const fileNameOrFolder = regexLikeIndexModule.test(relativePath)
+    ? "[folder]"
+    : "[name]";
+
+  // Generate a hash to make the class name unique.
+  const hash = loaderUtils.getHashDigest(
+    Buffer.from(`filePath:${relativePath}#className:${exportName}`),
+    "md5",
+    "base64",
+    5
+  );
+
+  // Have webpack interpolate the `[folder]` or `[name]` to its real value.
+  return (
+    loaderUtils
+      .interpolateName(
+        context,
+        `${fileNameOrFolder}_${exportName}__${hash}`,
+        options
+      )
+      .replace(
+        // Webpack name interpolation returns `about.module_root__2oFM9` for
+        // `.root {}` inside a file named `about.module.css`. Let's simplify
+        // this.
+        /\.module_/,
+        "_"
+      )
+      // Replace invalid symbols with underscores instead of escaping
+      // https://mathiasbynens.be/notes/css-escapes#identifiers-strings
+      .replace(/[^a-zA-Z0-9-_]/g, "_")
+      // "they cannot start with a digit, two hyphens, or a hyphen followed by a digit [sic]"
+      // https://www.w3.org/TR/CSS21/syndata.html#characters
+      .replace(/^(\d|--|-\d)/, "__$1")
+  );
+}
+
+function extractCss(bundle, chain, styleRule) {
+  // Add this only once per bundle
+  if (bundle.extractCSSConfigured) {
+    return;
+  }
+  bundle.extractCSSConfigured = true;
+
+  // Initialize extraction plugin
+  const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+
+  // Create a list of loaders that also contains the extraction loader
+  styleRule.use("style-loader").loader(MiniCssExtractPlugin.loader);
+
+  chain
+    .plugin("extractCSS")
+    .use(MiniCssExtractPlugin, [getExtractConfig(bundle)]);
+}
+
+function createRule(crafty, bundle, chain, styleRule, options) {
+  // "lightningcss" loader applies autoprefixer to our CSS.
+  // "css" loader resolves paths in CSS and adds assets as dependencies.
+  // "style" loader turns CSS into JS modules that inject <style> tags.
+  // The "style" loader enables hot editing of CSS.
+
+  if (crafty.getEnvironment() === "production" && bundle.extractCSS) {
+    extractCss(bundle, chain, styleRule);
+  } else {
+    styleRule
+      .use("style-loader")
+      .loader(require.resolve("../packages/style-loader.js"));
+  }
+
+  styleRule
+    .use("css-loader")
+    .loader(require.resolve("../packages/css-loader.js"))
+    .options({
+      importLoaders: 1,
+      sourceMap:
+        crafty.getEnvironment() === "production" && !!bundle.extractCSS,
+      ...(options.cssLoader || {})
+    });
+
+  styleRule
+    .use("lightningcss-loader")
+    .loader(require.resolve("../packages/lightningcss-loader.js"))
+    .options({
+      implementation: require("lightningcss"),
+      targets: crafty.config.browsers
+    });
+}
+
+function createGlobalRule(crafty, bundle, chain) {
+  createRule(
+    crafty,
+    bundle,
+    chain,
+    chain.module
+      .rule("styles")
+      .test(/(?<!\.module)\.s?css$/i)
+      .sideEffects(true),
+    {
+      cssLoader: {
+        modules: false
+      }
+    }
+  );
+}
+
+function createModuleRule(crafty, bundle, chain) {
+  createRule(
+    crafty,
+    bundle,
+    chain,
+    chain.module
+      .rule("styles-modules")
+      .test(/\.module\.s?css$/i)
+      .sideEffects(false),
+    {
+      cssLoader: {
+        modules: {
+          exportLocalsConvention: "asIs",
+          mode: "pure",
+          getLocalIdent: getCssModuleLocalIdent
+        }
+      }
+    }
+  );
+}
+
+module.exports = {
+  getCssModuleLocalIdent,
+  createGlobalRule,
+  createModuleRule
+};