Skip to content

v4.0.0

Latest
Latest

Choose a tag to compare

View all tags
@github-actions github-actions released this 22 Oct 22:35
v4.0.0
6559821

Breaking changes

  • Node.js 22 or newer is required.
  • ESM and CommonJS builds: the package ships both with an exports map and types for each. require('postcss-replace-values') returns the plugin directly, remove .default if you used it. The TypeScript sources (lib/) are no longer published.
  • Whole token matching: keys only match whole values, not parts of them. red no longer turns darkred into darkblue, 5px no longer turns 15px into 19px.
  • Strings and url() are left untouched: content: "#000" and url(icons.svg#fab) keep their value (before, the URL fragment became #ffaabb). To replace a whole string or URL, use it as the key, including the quotes: '"Open Sans"': '"Inter"'.
  • Single pass: all keys are replaced in one pass instead of one after another, a replacement is never replaced again. { '#000': '#a00', '#a00': '#0a0' } now turns #000 into #a00 instead of #0a0. When two keys match at the same position, the first one wins.
  • Hex notation is kept: other hex colors in a changed declaration are no longer rewritten to their long, lowercase form. background: #FFF linear-gradient(#000, #ABC) with { '#000': '#a00' } gives background: #FFF linear-gradient(#a00, #ABC) instead of background: #ffffff linear-gradient(#a00, #aabbcc).
  • Selector values skip declarations outside of rules, like inside @font-face. Before, the selector was tested against the string "undefined".
  • Options are validated: an empty key, a replacement that is no string or { value: string }, or a selector that is no RegExp or string now throws when the plugin is created. Before, an invalid replacement wrote undefined into the CSS. Error messages are prefixed with postcss-replace-values:.

New

  • Swap values: { '#000': '#fff', '#fff': '#000' } swaps both colors, also within the same declaration.
  • ignoreCase option: match keys that are no hex color in any case, e.g. Arial also matches arial. Works for non-ASCII letters too (ä matches Ä).
  • Optional selector: { value: '#a00' } replaces everywhere, and selector is typed to accept a string as well as a RegExp.

Fixes

  • No more endless loops: the build no longer hangs when a replacement contains its key ({ 'Arial': 'Arial Black' }), contains $&, or when values are swapped.
  • Replacements are inserted literally: $& and other special replacement patterns in a value are not expanded.
  • Installs cleanly: 3.0.2 failed to load with Cannot find module 'hex-color-regex' unless that package happened to be installed.

Internal

  • No runtime dependencies anymore (color-shorthand-hex-to-six-digit, lodash.clonedeep, lodash.isplainobject and string.prototype.replaceall are removed). postcss stays a peer dependency (^8.0.0).
  • Built with tsdown, tested with vitest, linted with oxlint. CI tests on Node.js 22, 24 and 26.
  • Releases are published with npm trusted publishing and provenance.

See the upgrade guide in the README.

Full Changelog: v3.0.2...v4.0.0

Assets 2
Loading