Frontend Configs from Digital Element

A set of configs for TypeScript, Webpack, PostCSS, SVGO, CommitLint, and Markdownlint. Also includes browser polyfills for testing enviroment. Tree-shakable and ESM-only.

Example of usage

TypeScript config (exported by default)

In tsconfig.json file:

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

SVGO config

In svgo.config.mjs file:

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

export default {
  ...config
};

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,
}

The default plugin list contains PostCSS 8-compatible plugins only. The legacy postcss-for plugin has been replaced by postcss-advanced-variables, which continues to support @for rules.

For developers

If you want to contribute new features or need some changes, please open the src folder, run npm install, make your changes, and build the library with Rollup using npm run build.