Developer tools#

For AI assistance, see AI skills and MCP Universe.

Code Editor Extensions#

The Visual Studio Code Extension#

It supports:

• plain px to rem conversion.
• annotation for px and rem equivalent values.
• auto completion for the spacing system.
• auto completion for font-size and line-height.

Install the VSCode Extension or view the source code.

Screenshots#

1. Spacing System example

2. Equivalent to px or rem value example

3. font-size example

Lint Plugins#

Eufemia ships lint plugins as part of @dnb/eufemia, so you can import them directly from the main package.

Install eslint and/or stylelint in your application if you do not already use them.

ESLint#

Use the recommended flat config preset:

import eufemiaEslint from '@dnb/eufemia/plugins/eslint.js'

export default [eufemiaEslint.recommended]

If you need full control, register the plugin and configure the rules yourself:

import eufemiaEslint from '@dnb/eufemia/plugins/eslint.js'

export default [
  {
    plugins: {
      eufemia: eufemiaEslint,
    },
    rules: {
      // All rules
      ...eufemiaEslint.recommended.rules,

      // Or specific rules
      'eufemia/no-deprecated-color-variables': 'error',
    },
  },
]

Stylelint#

Use the recommended preset to enable all rules:

import eufemiaStylelint from '@dnb/eufemia/plugins/stylelint.js'

export default eufemiaStylelint.recommended

If you need full control, register individual plugins and configure the rules yourself:

import eufemiaStylelint from '@dnb/eufemia/plugins/stylelint.js'

export default {
  plugins: [eufemiaStylelint],
  rules: {
    'eufemia/no-deprecated-color-variables': [
      true,
      { severity: 'warning' },
    ],
    'eufemia/token-name-policy': [true, { themePrefixes: { ui: 'dnb' } }],
  },
}

Available rules:

• eufemia/no-deprecated-color-variables — Warns when deprecated --color-* CSS variables are used. Suggests design tokens instead.
• eufemia/token-name-policy — Validates --token-* naming conventions: prefix, category, color semantics, theme prefixes, cross-brand parity, and more. Accepts a themePrefixes option to map brand names to their CSS variable prefixes.

Review rule metadata#

Cross-tool review rules expose machine-readable metadata from the same source used by the lint plugins:

import reviewRules from '@dnb/eufemia/plugins/review-rules.js'

const deprecatedColors =
  reviewRules['eufemia/no-deprecated-color-variables']

Each entry identifies its classification, default severity, documentation, supported tools, and whether an automatic fix exists. Projects may override lint severity, but should preserve the rule's documented meaning. A recommendation or context-dependent migration should not be presented as an unsupported API or an automatic fix.

MCP clients can call review_rules to retrieve the same catalog with the stable rule IDs included in the response. The catalog currently covers the cross-tool rules that have published metadata; tool-specific rules can still be configured as documented above.

For SCSS files, configure Stylelint with postcss-scss as the custom syntax.

PostCSS (Style Isolation)#

If you use the style isolation PostCSS plugin, deprecation warnings for --color-* variables are enabled by default at build time:

import styleScopePlugin from '@dnb/eufemia/plugins/postcss-isolated-style-scope.js'

export default {
  plugins: [styleScopePlugin()],
}

To disable the warnings, set warnOnDeprecatedColorVariables: false:

export default {
  plugins: [styleScopePlugin({ warnOnDeprecatedColorVariables: false })],
}

Both plugins ship with one rule: no-deprecated-color-variables. It reports deprecated --color-* CSS variables and guides towards design tokens instead.