Frontend Configs from Digital Element

A set of configs for TypeScript, Webpack, PostCSS, SVGO, CommitLint, and Markdownlint. Also includes browser polyfills for testing environments. Tree-shakable and ESM-only. Requires Node.js 24.x or 26+.

Example of usage

TypeScript config (exported by default)

In tsconfig.json file:

{
  "extends": "@delement/configs"
}

Webpack config

In webpack.config.ts, override only the options your project needs:

// webpack.config.ts
import { defineFrontendConfig } from "@delement/configs/webpack";

// All other settings come from the frontend preset. Nested objects are merged; arrays replace the corresponding defaults entirely.
export default defineFrontendConfig({
  plugins: {
    htmlValidation: { requestTimeoutMs: 10_000, maxAttempts: 2 },
    banner: false,
  },
  loaders: {
    esbuild: { target: "es2022" },
    cssModules: { modules: { localIdentName: "[name]__[local]__[hash:base64:5]" } },
    thread: false,
  },
  webpack: {
    devServer: { port: 3000 },
  },
});

SVGO config

In svgo.config.mjs file:

// svgo.config.mjs
import defaultConfig from "@delement/configs/svgo";

const Configuration = {
  ...defaultConfig,
};

export default Configuration;

CommitLint config

In commitlint.config.ts file:

// commitlint.config.ts
import type { UserConfig } from "@commitlint/types";
import commitLintConfig from "@delement/configs/commitlint";

const Configuration: UserConfig = {
  ...commitLintConfig
};

export default Configuration;

Markdownlint config

In .markdownlint-cli2.jsonc:

{
  "config": {
    "extends": "@delement/configs/markdownlint"
  },
  "globs": [
    "**/*.md"
  ],
  "ignores": [
    "node_modules/**",
    ".git/**",
    ".husky/**",
    ".temp/**",
    "dist/**",
    "build/**",
    "CHANGELOG.md"
  ]
}

Polyfills

In your test file:

import Polyfills from "@delement/configs/polyfills";

new Polyfills([ "fetch", "TextEncoder", "TextDecoder" ]);

// your test code...

PostCSS

In your pipeline file:

// Get default plugins
const postCSSConfig = await import("@delement/configs/postcss")
  .then(((module) => module.default));

// Modify plugins
const postCSSPlugins = await postCSSConfig.utils.getPlugins({
  names: postCSSConfig.defaultData.pluginList,
  modify: {
    ...postCSSConfig.defaultData.modify,
    "postcss-preset-env": {
      // plugin customisations...
    },
  },
});

// Pass to PostCSS
const options = {
  config: false,
  plugins: postCSSPlugins,
}

For developers

The installed npm package does not contain src/, test/ or repository development scripts and cannot be rebuilt on its own.