tailwind-merge - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

dist/index.js

@@ -59,4 +59,4 @@ import HLRU from 'hashlru';
 function processStandaloneClasses(config, classMap) {
-  config.standaloneClasses.forEach((classGroup, index) => {
-    const classGroupId = `standaloneClasses.${index}`;
+  Object.entries(config.standaloneClasses).forEach(([classGroupKey, classGroup]) => {
+    const classGroupId = `standaloneClasses.${classGroupKey}`;
     classGroup.forEach(className => {
@@ -83,4 +83,4 @@ addToClassPart({
     const classPartObject = getNextPart(classMap, key);
-    dynamicClasses[key].forEach((classGroup, index) => {
-      processClassesRecursively(classGroup, classPartObject, `dynamicClasses.${key}.${index}`);
+    Object.entries(dynamicClasses[key]).forEach(([classGroupKey, classGroup]) => {
+      processClassesRecursively(classGroup, classPartObject, `dynamicClasses.${key}.${classGroupKey}`);
     });
@@ -87,0 +87,0 @@ };

dist/index.module.js

@@ -60,4 +60,6 @@ import HLRU from 'hashlru';
 function processStandaloneClasses(config, classMap) {
-  config.standaloneClasses.forEach(function (classGroup, index) {
-    var classGroupId = "standaloneClasses." + index;
+  Object.entries(config.standaloneClasses).forEach(function (_ref2) {
+    var classGroupKey = _ref2[0],
+        classGroup = _ref2[1];
+    var classGroupId = "standaloneClasses." + classGroupKey;
     classGroup.forEach(function (className) {
@@ -82,4 +84,6 @@ addToClassPart({
     var classPartObject = getNextPart(classMap, key);
-    dynamicClasses[key].forEach(function (classGroup, index) {
-      processClassesRecursively(classGroup, classPartObject, "dynamicClasses." + key + "." + index);
+    Object.entries(dynamicClasses[key]).forEach(function (_ref3) {
+      var classGroupKey = _ref3[0],
+          classGroup = _ref3[1];
+      processClassesRecursively(classGroup, classPartObject, "dynamicClasses." + key + "." + classGroupKey);
     });
@@ -107,5 +111,5 @@ };
     } else {
-      Object.entries(classDefinition).forEach(function (_ref2) {
-        var key = _ref2[0],
-            classGroup = _ref2[1];
+      Object.entries(classDefinition).forEach(function (_ref4) {
+        var key = _ref4[0],
+            classGroup = _ref4[1];
         processClassesRecursively(classGroup, getNextPart(classPartObject, key), classGroupId);
@@ -117,7 +121,7 @@ });
 
-function addToClassPart(_ref3) {
-  var path = _ref3.path,
-      classPartObject = _ref3.classPartObject,
-      validator = _ref3.validator,
-      classGroupId = _ref3.classGroupId;
+function addToClassPart(_ref5) {
+  var path = _ref5.path,
+      classPartObject = _ref5.classPartObject,
+      validator = _ref5.validator,
+      classGroupId = _ref5.classGroupId;
   var currentClassPartObject = classPartObject;
@@ -124,0 +128,0 @@ path == null ? void 0 : path.split(CLASS_PART_SEPARATOR).forEach(function (pathPart) {

dist/types/config/types.d.ts

@@ -15,3 +15,3 @@ export interface Config {
      * Object with groups of dynamic classes like `mx-auto` or `grid-cols-2`.
-     * Keys must be part of class until first `-`-character.
+     * Keys on first level must be part of class until first `-`-character.
      * @example
@@ -28,3 +28,3 @@ * {
      */
-    dynamicClasses: Record<string, readonly DynamicClassGroup[]>;
+    dynamicClasses: Record<string, ObjectOrArray<DynamicClassGroup>>;
     /**
@@ -34,3 +34,3 @@ * Groups of classes that don't have any common starting characters
      */
-    standaloneClasses: readonly StandaloneClassGroup[];
+    standaloneClasses: ObjectOrArray<StandaloneClassGroup>;
     /**
@@ -50,2 +50,3 @@ * Conflicting classes across groups.
 }
+declare type ObjectOrArray<T> = Readonly<Record<string, T> | Record<number, T>>;
 export declare type DynamicClassGroup = readonly DynamicClassDefinition[];
@@ -56,3 +57,3 @@ declare type DynamicClassDefinition = string | DynamicClassValidator | DynamicClassObject;
 declare type StandaloneClassGroup = readonly string[];
-export declare type ClassGroupId = `dynamicClasses.${string}.${number}` | `standaloneClasses.${number}`;
+export declare type ClassGroupId = `dynamicClasses.${string}.${string}` | `standaloneClasses.${string}`;
 export {};

package.json

 {
     "name": "tailwind-merge",
-    "version": "0.2.0",
+    "version": "0.3.0",
     "description": "Merge Tailwind CSS classes without style conflicts",
@@ -38,5 +38,7 @@ "keywords": [
         "build": "rm -rf dist/* && microbundle --strict --no-compress --format modern,esm,cjs",
+        "build:min": "rm -rf dist/* && microbundle --strict --format modern",
         "test": "jest",
         "type-check": "tsc --build",
-        "lint": "eslint --max-warnings 0 '**'"
+        "lint": "eslint --max-warnings 0 '**'",
+        "version": "yarn build && node scripts/package-build-stats && git add README.md"
     },
@@ -55,2 +57,3 @@ "dependencies": {
         "microbundle": "^0.13.3",
+        "package-build-stats": "^7.2.4",
         "prettier": "^2.3.2",
@@ -57,0 +60,0 @@ "ts-jest": "^27.0.3",

README.md

@@ -0,1 +1,8 @@
+<div align="center">
+    <br />
+    <a href="https://github.com/dcastil/tailwind-merge">
+        <img src="https://github.com/dcastil/tailwind-merge/blob/main/assets/logo.svg?raw=true" alt="tailwind-merge" width="221px" />
+    </a>
+</div>
+
 # tailwind-merge
@@ -15,3 +22,3 @@
 -   Fully typed
--   [3.9 kB minified + gzipped](https://bundlephobia.com/package/tailwind-merge)
+-   [<!-- AUTOGENERATED START package-build-stats:gzipSize -->4.2 kB<!-- AUTOGENERATED END --> minified + gzipped](https://bundlephobia.com/package/tailwind-merge) (<!-- AUTOGENERATED START package-build-stats:composition -->95.7% self, 4.3% hashlru<!-- AUTOGENERATED END -->)
 
@@ -51,3 +58,3 @@ ## What is it for
 
-tailwind-merge makes sure to override conflicting classes and keeps everything else untouched. In the case of hte `MySlightlyModifiedInput`, the input now only renders the class `p-3`.
+tailwind-merge makes sure to override conflicting classes and keeps everything else untouched. In the case of the `MySlightlyModifiedInput`, the input now only renders the class `p-3`.
 
@@ -60,3 +67,3 @@ ## Features
 
--   Results get cached by default, so you don't need to worry about wasteful rerenders. The library uses a [LRU cache](<https://en.wikipedia.org/wiki/Cache_replacement_policies#Least_recently_used_(LRU)>) which stores 500 different results. The cache size can be modified or being opt-out of by using `createTailwinfMerge()`.
+-   Results get cached by default, so you don't need to worry about wasteful rerenders. The library uses a [LRU cache](<https://en.wikipedia.org/wiki/Cache_replacement_policies#Least_recently_used_(LRU)>) which stores 500 different results. The cache size can be modified or being opt-out of by using [`createTailwindMerge()`](#createtailwindmerge).
 -   Expensive computations of data structures happen on demand.
@@ -70,2 +77,9 @@
 
+### Allows refinements
+
+```ts
+twMerge('p-3 px-5') // → 'p-3 px-5'
+twMerge('inset-x-4 right-4') // → 'inset-x-4 right-4'
+```
+
 ### Resolves non-trivial conflicts
@@ -129,3 +143,3 @@
 
-If some of these points don't apply to you, it makes sense to test whether `twMerge()` still works as intended with your custom classes. Otherwise, you can create your own custom merge function with `createTailwindMerge()`.
+If some of these points don't apply to you, it makes sense to test whether `twMerge()` still works as intended with your custom classes. Otherwise, you can create your own custom merge function with [`createTailwindMerge()`](#createtailwindmerge).
 
@@ -161,6 +175,7 @@ ### `createTailwindMerge`
             ],
-            bar: [
+            bar: {
                 // ↓ Another group with classes bar-auto, bar-1000, bar-1001, …
-                ['auto', (value) => Number(value) > 1000],
-            ],
+                //   Groups can be named to make referencing in conflictingGroups easier
+                namedGroup: ['auto', (value) => Number(value) > 1000],
+            },
         },
@@ -179,3 +194,3 @@ // ↓ Same like `dynamicClasses`, just for classes with no common starting characters
                 // ↓ … classes from group at this path
-                'dynamicClasses.bar.0',
+                'dynamicClasses.bar.namedGroup',
             ],
@@ -186,1 +201,17 @@ },
 ```
+
+## Versioning
+
+This package follows the [SemVer](https://semver.org) versioning rules. More specifically:
+
+-   Patch version gets incremented when unintended behaviour is fixed which doesn't break any existing API. Note that bug fixes can still alter which styles are applied. E.g. a bug gets fixed in which the conflicting classes `inline` and `block` weren't merged correctly so that both would end up in the result.
+
+-   Minor version gets incremented when additional features are added which don't break any existing API. However, a minor version update might still alter which styles are applied if you use Tailwind features not yet supported by tailwind-merge. E.g. a new Tailwind prefix `magic` gets added to this package which changes the result of `twMerge('magic:px-1 magic:p-3')` from `magic:px-1 magic:p-3` to `magic:p-3`.
+
+-   Major version gets incremented when breaking changes are introduced to the package API. E.g. the return type of `twMerge()` changes.
+
+-   `alpha` releases might introduce breaking changes on any update. Whereas `beta` releases only introduce new features or bug fixes.
+
+-   Releases with major version 0 might introduce breaking changes on a minor version update.
+
+-   All changes are documented in [GitHub Releases](https://github.com/dcastil/tailwind-merge/releases). If a release can alter styles being applied, a warning is issued in the release description.

src/config/class-utils.ts

@@ -77,4 +77,4 @@ import { ClassGroupId, Config, DynamicClassGroup, DynamicClassValidator } from './types'
 function processStandaloneClasses(config: Config, classMap: ClassPartObject) {
-    config.standaloneClasses.forEach((classGroup, index) => {
-        const classGroupId: ClassGroupId = `standaloneClasses.${index}`
+    Object.entries(config.standaloneClasses).forEach(([classGroupKey, classGroup]) => {
+        const classGroupId: ClassGroupId = `standaloneClasses.${classGroupKey}`
 
@@ -102,4 +102,8 @@ classGroup.forEach((className) => {
 
-        dynamicClasses[key]!.forEach((classGroup, index) => {
-            processClassesRecursively(classGroup, classPartObject, `dynamicClasses.${key}.${index}`)
+        Object.entries(dynamicClasses[key]!).forEach(([classGroupKey, classGroup]) => {
+            processClassesRecursively(
+                classGroup,
+                classPartObject,
+                `dynamicClasses.${key}.${classGroupKey}`
+            )
         })
@@ -106,0 +110,0 @@ }

src/config/types.ts

@@ -15,3 +15,3 @@ export interface Config {
      * Object with groups of dynamic classes like `mx-auto` or `grid-cols-2`.
-     * Keys must be part of class until first `-`-character.
+     * Keys on first level must be part of class until first `-`-character.
      * @example
@@ -28,3 +28,3 @@ * {
      */
-    dynamicClasses: Record<string, readonly DynamicClassGroup[]>
+    dynamicClasses: Record<string, ObjectOrArray<DynamicClassGroup>>
     /**
@@ -34,3 +34,3 @@ * Groups of classes that don't have any common starting characters
      */
-    standaloneClasses: readonly StandaloneClassGroup[]
+    standaloneClasses: ObjectOrArray<StandaloneClassGroup>
     /**
@@ -51,2 +51,3 @@ * Conflicting classes across groups.
 
+type ObjectOrArray<T> = Readonly<Record<string, T> | Record<number, T>>
 export type DynamicClassGroup = readonly DynamicClassDefinition[]
@@ -58,2 +59,2 @@ type DynamicClassDefinition = string | DynamicClassValidator | DynamicClassObject
 
-export type ClassGroupId = `dynamicClasses.${string}.${number}` | `standaloneClasses.${number}`
+export type ClassGroupId = `dynamicClasses.${string}.${string}` | `standaloneClasses.${string}`

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

519407

increased by0.71%

Lines of code

7350

increased by0.19%

Number of lines in readme file

210

increased by17.32%

Worsened metrics

Dev dependency count

12

increased by9.09%

No dependency changes