# clsx changelog > Tiny utility for constructing class-name strings conditionally. - Vendor: Luke Edwards - Category: Frameworks & Libraries - Official site: https://github.com/lukeed/clsx - Tracked by: What's New (https://whatsnew.fyi/product/clsx) - Harvested from: GitHub (lukeed/clsx) - Entries below: 10 (newest first) What's New is an index, not a publisher: every entry below links to the vendor's own release notes, which are the authoritative source. Entries are labelled where they are hand-curated sample data, pre-releases, or drawn from a secondary source such as a developer blog. Reuse: the summaries, labels and curation here are © What's New. Quote freely with attribution and a link back; wholesale republication of the corpus is not permitted — terms: https://whatsnew.fyi/terms. The vendors' own release notes remain their publishers'. ## Releases ### v2.1.1 - Date: 2024-04-23 - Version: v2.1.1 - Original notes: https://github.com/lukeed/clsx/releases/tag/v2.1.1 - Permalink: https://whatsnew.fyi/product/clsx/releases/v2.1.1 ##### Patches * (types) Include `bigint` in `ClassValue` type: (#96): 3d960ab _Accommodates recent `@types/react` changes to `ReactNode`._ _Thank you @ViliamKopecky~!_ ##### Chores - Add [`licenses.dev`](https://licenses.dev) badge: 684509c _This service recursively analyzes entire dependency graphs to ensure that a package (or your project) is using permissive licenses. For example, here's a results table for [`polka@next`](https://licenses.dev/npm/polka/1.0.0-next.24) and a larger [`astro`](https://licenses.dev/npm/astro) example._ --- > **Full Changelog**: https://github.com/lukeed/clsx/compare/v2.1.0...v2.1.1 ### v2.1.0 - Date: 2023-12-29 - Version: v2.1.0 - Original notes: https://github.com/lukeed/clsx/releases/tag/v2.1.0 - Permalink: https://whatsnew.fyi/product/clsx/releases/v2.1.0 ##### Features - Add new `clsx/lite` submodule for `string`-only usage: 1a49142 _This is a **140b** version of `clsx` that is ideal for Tailwind and/or React contexts, which typically follow this `clsx` usage pattern:_ ```js clsx('foo bar', props.maybe && 'conditional classes', props.className); ``` > **Important:** This `clsx/lite` module **ignores all non-string arguments** and is therefore not a 1:1 replacement for `clsx` itself! ```js import { clsx } from 'clsx'; import { clsx as lite } from 'clsx/lite'; // strings-only usage is identical clsx('foo', null, 'bar', true && 'baz'); //=> "foo bar baz" lite('foo', null, 'bar', true && 'baz'); //=> "foo bar baz" // clsx/lite ignores all non-strings clsx('foo', { a: true, b: false, c: true }); //=> "foo a c" lite('foo', { a: true, b: false, c: true }); //=> "foo" ``` --- > **Full Changelog**: https://github.com/lukeed/clsx/compare/v2.0.1...v2.1.0 ### v2.0.1 - Date: 2023-12-29 - Version: v2.0.1 - Original notes: https://github.com/lukeed/clsx/releases/tag/v2.0.1 - Permalink: https://whatsnew.fyi/product/clsx/releases/v2.0.1 ##### Patches - (perf) Cache `arguments.length` & `array.length` for 6% performance gain (#26): deff09b _Adds 5 bytes (+2%) for ~3% avg performance gain_ _Thank you @jalalazimi_ ##### Chores - Update module size: bf64e71 - Update benchmark results: 855eec2, 6e3b2b9, - Replace `nyc` with `c8` in CI: 6e2468e - Update Node CI matrix: 308a238 - Fix readme typos (#76, #82): 42354d3, 4c9a55d _Thank you @andipaetzold and @acusti_ --- > **Full Changelog**: https://github.com/lukeed/clsx/compare/v2.0.0...v2.0.1 ### v2.0.0 - Date: 2023-07-16 - Version: v2.0.0 - Original notes: https://github.com/lukeed/clsx/releases/tag/v2.0.0 - Permalink: https://whatsnew.fyi/product/clsx/releases/v2.0.0 ##### Breaking - Add `"exports"` map for native ESM support (#57): 3ec8e9f, 0949868 _Also supports TypeScript's `node16`/`nodenext` module resolution_ _Maintains CommonJS support (with fixed TS definitions)_ _Thank you @remcohaszing~!_ ##### Chores * Add [Tailwind Support](https://github.com/lukeed/clsx#tailwind-support) section to README (#65, #68): 496db1d, 4a4eadd _Thank you @kevinlowe0x3F7 & @kevinlowe0x3F7_ * Add tests for numbers & variadic number arguments: c520353 * Update package module size: 03e1cf9 --- > **Full Changelog**: https://github.com/lukeed/clsx/compare/v1.2.1...v2.0.0 ### v1.2.1 - Date: 2022-07-06 - Version: v1.2.1 - Original notes: https://github.com/lukeed/clsx/releases/tag/v1.2.1 - Permalink: https://whatsnew.fyi/product/clsx/releases/v1.2.1 ##### Patches - Ensure CommonJS and UMD entrypoints have the named `clsx` export too ##### Chores - Build CJS & UMD files manually (#50): 3712966, 2114f5b --- > **Full Changelog**: https://github.com/lukeed/clsx/compare/v1.2.0...v1.2.1 ### v1.2.0 - Date: 2022-07-02 - Version: v1.2.0 - Original notes: https://github.com/lukeed/clsx/releases/tag/v1.2.0 - Permalink: https://whatsnew.fyi/product/clsx/releases/v1.2.0 ##### Features - Add named `clsx` export alias (#43, #44): 56ab81f _Thank you @danikaze~!_
This is purely an alias for the default export so that TypeScript users can avoid the `esModuleInterop` setting. In other words, the follow `import` statements are effectively identical, but the latter is preferred by TypeScript: ```js import clsx from 'clsx'; // or import { clsx } from 'clsx'; ``` > **Important:** Just to reiterate, both still work! ##### Chores - Migrate from `tape` to [`uvu`](https://github.com/lukeed/uvu) for tests: 1c36d10 - Add Node 14 and Node 16 to CI test matrix: bc4f827 - Update "string variadic" tests (#30): 74cefa6 _Thank you @gingerrific~!_ - Enable [GitHub Sponsors](https://github.com/sponsors/lukeed) button: 400b848 --- > **Full Changelog**: https://github.com/lukeed/clsx/compare/v1.1.1...v1.2.0 ### v1.1.1 - Date: 2020-05-30 - Version: v1.1.1 - Original notes: https://github.com/lukeed/clsx/releases/tag/v1.1.1 - Permalink: https://whatsnew.fyi/product/clsx/releases/v1.1.1 > **Note:** This is a performance-related patch only!
Across all benchmarks, this version of `clsx` is ~1M ops/sec _faster_ than `clsx@1.1.0`.
...It also happens to be 1 byte (gzip) smaller 😅🎉 ##### Patches - fix: Remove needless spacer on string/number condition: ff11464 - fix: Remove unnecessary recursive caller for object keys: f43dd23 - perf: Guard all `toVal` calls with truthy assertions: 4fa8811, 019ec02 - perf: Reorder `typeof` checks for common case: 08a5a7f ##### Chores - Run [CI](https://github.com/lukeed/clsx/actions?query=workflow%3ACI) via GitHub Actions: 64af363, 883363b, 866620d, 768ffab, 5e92fdf - Report code coverage within CI script: 0fb6d98 - Use `esm` hook with tests: 0287e40 - Update module size (-1 byte): 7e8c75e - Update benchmark results: 75053c0 - Lock all dev-deps: 3c6aa3f - Update badges: fd1533f ##### Benchmarks > Run on Node.js v10.13.0.
You may find updated browser benchmarks [here](https://github.com/lukeed/clsx/tree/master/bench). The snippet below is comparing `clsx@1.1.1` (this version) to the previous version, and to `classnames` for ballpark comparison. All candidates are functionally identical! ``` #### Strings classnames x 3,992,284 ops/sec ±1.64% (94 runs sampled) clsx@1.1.0 x 11,253,372 ops/sec ±0.35% (96 runs sampled) clsx@1.1.1 x 12,784,134 ops/sec ±0.42% (97 runs sampled) #### Objects classnames x 3,772,978 ops/sec ±0.46% (96 runs sampled) clsx@1.1.0 x 7,288,178 ops/sec ±0.31% (96 runs sampled) clsx@1.1.1 x 9,412,010 ops/sec ±0.42% (95 runs sampled) #### Arrays classnames x 1,665,275 ops/sec ±1.83% (93 runs sampled) clsx@1.1.0 x 8,340,174 ops/sec ±0.53% (96 runs sampled) clsx@1.1.1 x 9,141,916 ops/sec ±0.42% (95 runs sampled) #### Nested Arrays classnames x 1,164,706 ops/sec ±1.60% (95 runs sampled) clsx@1.1.0 x 6,284,485 ops/sec ±0.58% (90 runs sampled) clsx@1.1.1 x 7,165,151 ops/sec ±0.47% (91 runs sampled) #### Nested Arrays w/ Objects classnames x 1,597,180 ops/sec ±1.49% (93 runs sampled) clsx@1.1.0 x 6,345,248 ops/sec ±0.21% (95 runs sampled) clsx@1.1.1 x 7,651,411 ops/sec ±0.56% (95 runs sampled) #### Mixed classnames x 2,129,199 ops/sec ±1.46% (94 runs sampled) clsx@1.1.0 x 6,557,515 ops/sec ±0.73% (91 runs sampled) clsx@1.1.1 x 8,119,210 ops/sec ±0.42% (93 runs sampled) #### Mixed (Bad Data) classnames x 1,166,577 ops/sec ±0.84% (94 runs sampled) clsx@1.1.0 x 2,018,654 ops/sec ±0.15% (98 runs sampled) clsx@1.1.1 x 2,238,939 ops/sec ±0.34% (95 runs sampled) ``` ### v1.1.0 - Date: 2020-02-03 - Version: v1.1.0 - Original notes: https://github.com/lukeed/clsx/releases/tag/v1.1.0 - Permalink: https://whatsnew.fyi/product/clsx/releases/v1.1.0 ##### Minor / Patch * Use `Array.isArray` for proper `Array` type-checking (#17): 0d6023a This prevents an object with a truthy `push` key from being treated as an Array. While (likely) rare, this produced an incorrect result. > **Important:** Because of this change, Internet Explorer 8 (and older) are no longer supported.
If you happen to require support for these browsers, please continue to use the `1.0.x` version range. ##### Chores * Updated benchmark results: 3cfb6c3 Because `Array.isArray` is highly optimized in all modern JS engines, we received a bit of a speed boost! Below is `clsx@1.0.4` versus this release, running in Node.js 10.13.0 ``` # Strings clsx (prev) x 10,336,101 ops/sec ±1.45% (90 runs sampled) clsx x 11,191,101 ops/sec ±0.51% (97 runs sampled) # Objects clsx (prev) x 7,195,049 ops/sec ±0.35% (92 runs sampled) clsx x 7,133,215 ops/sec ±0.31% (93 runs sampled) # Arrays clsx (prev) x 8,265,223 ops/sec ±0.32% (94 runs sampled) clsx x 8,346,704 ops/sec ±0.29% (98 runs sampled) # Nested Arrays clsx (prev) x 6,244,513 ops/sec ±1.41% (94 runs sampled) clsx x 6,324,445 ops/sec ±0.38% (95 runs sampled) # Nested Arrays w/ Objects clsx (prev) x 5,157,630 ops/sec ±0.34% (92 runs sampled) clsx x 6,349,877 ops/sec ±0.26% (97 runs sampled) # Mixed clsx (prev) x 5,751,180 ops/sec ±0.38% (95 runs sampled) clsx x 6,722,160 ops/sec ±0.36% (98 runs sampled) # Mixed (Bad Data) clsx (prev) x 1,935,973 ops/sec ±0.19% (97 runs sampled) clsx x 2,053,230 ops/sec ±0.27% (95 runs sampled) ``` ### v1.0.4 - Date: 2019-04-06 - Version: v1.0.4 - Original notes: https://github.com/lukeed/clsx/releases/tag/v1.0.4 - Permalink: https://whatsnew.fyi/product/clsx/releases/v1.0.4 ##### Patches - Ignore function arguments: 4aff569 - Separate Array and Object loops: 91f5e68 While this did add ~20 bytes to the package (which is a 10% size increase), it made _any_ Array interactions 200% to 600% faster! 🎉 Below is a performance comparison between `clsx@1.0.3` and `clsx@1.0.4` running on Node v10.13.0: ``` # Strings clsx (prev) x 10,661,038 ops/sec ±0.46% (92 runs sampled) clsx x 11,066,632 ops/sec ±0.23% (96 runs sampled) # Objects clsx (prev) x 6,934,269 ops/sec ±0.23% (94 runs sampled) clsx x 7,147,168 ops/sec ±0.30% (95 runs sampled) # Arrays clsx (prev) x 1,681,568 ops/sec ±0.32% (97 runs sampled) clsx x 7,922,225 ops/sec ±0.18% (95 runs sampled) # Nested Arrays clsx (prev) x 940,741 ops/sec ±0.33% (96 runs sampled) clsx x 6,132,222 ops/sec ±0.49% (95 runs sampled) # Nested Arrays w/ Objects clsx (prev) x 1,428,975 ops/sec ±0.15% (95 runs sampled) clsx x 5,156,844 ops/sec ±0.22% (95 runs sampled) # Mixed clsx (prev) x 2,198,907 ops/sec ±0.34% (98 runs sampled) clsx x 5,577,715 ops/sec ±0.20% (93 runs sampled) # Mixed (Bad Data) clsx (prev) x 1,038,752 ops/sec ±0.32% (94 runs sampled) clsx x 1,887,010 ops/sec ±0.14% (96 runs sampled) ``` ##### Chores - Include Node.js benchmarks: b7c3973 - Update benchmark results: 8d5a2f7, e85c5be - Fix README typos: ead41a3, 4a4413d - Update size: a0fd98a ### v1.0.3 - Date: 2019-02-18 - Version: v1.0.3 - Original notes: https://github.com/lukeed/clsx/releases/tag/v1.0.3 - Permalink: https://whatsnew.fyi/product/clsx/releases/v1.0.3 ##### Patches - Changed `"module"` entry file to `.js` extension (#7): 29b2fce _Unfortunately, webpack changed how they treat `.mjs` files somewhat recently. This is a huge step backwards and hopefully they revert this change soon. See https://github.com/dmtrKovalenko/material-ui-pickers/issues/894_