Use the recommended config to get Pluma's default lint policy for web applications. The package encodes Pluma Design System guidance as CI-enforced rules, so unsupported usage fails during linting instead of relying on docs or code review alone.

Installation

pnpm add -D @customerio/eslint-plugin-pluma

ESLint flat config

Use the flat config in projects with eslint.config.js or eslint.config.mjs.

import pluma from '@customerio/eslint-plugin-pluma';

export default [
	...pluma.configs.recommended,
];

The flat config enables every Pluma rule as an error with the pluma/* rule prefix.

export default [
	{
		rules: {
			'pluma/tooltip-custom-interactive': 'error',
			'pluma/no-banned-imports': 'error',
			'pluma/enforce-pluma-elements': 'error',
			'pluma/no-deprecated-apis': 'error',
			'pluma/no-deprecated-icons': 'error',
			'pluma/no-raw-pluma-classnames': 'error',
			'pluma/no-raw-pluma-css-variables': 'error',
			'pluma/require-form-control-label': 'error',
		},
	},
];

ESLint legacy config

Use the legacy config in projects with .eslintrc.js.

module.exports = {
	extends: ['plugin:@customerio/pluma/legacy-recommended'],
};

The legacy config enables every Pluma rule as an error with the @customerio/pluma/* rule prefix.

module.exports = {
	rules: {
		'@customerio/pluma/tooltip-custom-interactive': 'error',
		'@customerio/pluma/no-banned-imports': 'error',
		'@customerio/pluma/enforce-pluma-elements': 'error',
		'@customerio/pluma/no-deprecated-apis': 'error',
		'@customerio/pluma/no-deprecated-icons': 'error',
		'@customerio/pluma/no-raw-pluma-classnames': 'error',
		'@customerio/pluma/no-raw-pluma-css-variables': 'error',
		'@customerio/pluma/require-form-control-label': 'error',
	},
};

Oxlint

Use the Oxlint entrypoint as a JavaScript plugin.

import { defineConfig } from 'oxlint';

export default defineConfig({
	jsPlugins: [
		{
			name: 'pluma',
			specifier: '@customerio/eslint-plugin-pluma/oxlint',
		},
	],
	rules: {
		'pluma/tooltip-custom-interactive': 'error',
		'pluma/no-banned-imports': 'error',
		'pluma/enforce-pluma-elements': 'error',
		'pluma/no-deprecated-apis': 'error',
		'pluma/no-deprecated-icons': 'error',
		'pluma/no-raw-pluma-classnames': 'error',
		'pluma/no-raw-pluma-css-variables': 'error',
		'pluma/require-form-control-label': 'error',
	},
});

Rules

Pluma lint rules
Rule	What it enforces	Recommended	Fixable	Suggestions
`tooltip-custom-interactive`	Pluma Tooltip must use isCustom or @isCustom when its trigger child is interactive.	Yes	No	No
`no-banned-imports`	Consumers must import from supported Pluma public entrypoints, not private source or build output.	Yes	No	No
`enforce-pluma-elements`	Consumers must use Pluma components for native elements with prescribed Pluma equivalents.	Yes	No	No
`no-deprecated-apis`	Consumers must migrate deprecated Pluma components, props, and static prop values.	Yes	Yes	No
`no-deprecated-icons`	Consumers must migrate deprecated Pluma icon names.	Yes	Yes	No
`no-raw-pluma-classnames`	Consumers must use Pluma component CSS className exports instead of raw class name strings.	Yes	No	No
`no-raw-pluma-css-variables`	Consumers must use typed Pluma token exports instead of raw CSS variable strings.	Yes	No	No
`prefer-managed-modals`	Pluma Modal should be opened through the modal manager instead of a hand-rolled isOpen state.	Yes	No	No
`require-form-control-label`	Pluma form controls must have an accessible label.	Yes	No	No

Disable comments

Rules are errors by default. If a case needs an exception, add the standard ESLint or Oxlint disable comment at the smallest possible scope and explain why the exception is necessary.

// eslint-disable-next-line pluma/enforce-pluma-elements -- third-party script requires a real form element
<form action={externalUrl} method="post" />

Treat disable comments as migration inventory. A growing disable list usually means the design system needs a better component API or the application code should be moved onto the supported Pluma vocabulary.