Error updating from 2.15.1 to 2.16.0 : Unused classes found in LinkButton.module.css

[kuole-o]

Describe the Bug

When I upgraded from 2.15.1 to 2.16.1, it worked fine locally. But when I did git commit, I got an error:

D:\src\umami\src\components\common\LinkButton.tsx
  5:8  error  Unused classes found in LinkButton.module.css: disabled, primary, secondary, quiet, danger, size-sm, size-md, size-lg  css-modules/no-unused-class

I promise that I have not modified LinkButton.tsx and LinkButton.module.css and their related codes. I just added a separate /api/main-metrics endpoint to return data on the website overview, visitor device, visitor browser, and visitor country or region at once. I did not modify other source code content, only added a new file.

Database

PostgreSQL

Relevant log output

D:\src\umami\src\components\common\LinkButton.tsx
  5:8  error  Unused classes found in LinkButton.module.css: disabled, primary, secondary, quiet, danger, size-sm, size-md, size-lg  css-modules/no-unused-class

Which Umami version are you using? (if relevant)

2.16.1

Which browser are you using? (if relevant)

Chrome

How are you deploying your application? (if relevant)

vercel

[ddennis]

I have same issue after merging, when trying to do new commit the husky precommit hook breaks with that error.

[kuole-o]

I have same issue after merging, when trying to do new commit the husky precommit hook breaks with that error.

My current temporary solution is to comment out the unused class styles in LinkButton.module.css.

.button {
  display: flex;
  align-items: center;
  align-self: flex-start;
  white-space: nowrap;
  gap: var(--size200);
  font-family: inherit;
  color: var(--base900);
  background: var(--base100);
  border: 1px solid transparent;
  border-radius: var(--border-radius);
  min-height: var(--base-height);
  padding: 0 var(--size600);
  position: relative;
  cursor: pointer;
}

.button:hover {
  background: var(--base200);
}

.button:active {
  background: var(--base300);
}

.button:visited {
  color: var(--base900);
}

/* .button.disabled {
  color: var(--disabled-color) !important;
  background-color: var(--disabled-background) !important;
  border-color: transparent !important;
  pointer-events: none;
}

.button.primary {
  color: var(--light50);
  background: var(--primary400);
}

.button.primary:hover {
  color: var(--light50);
  background: var(--primary500);
}

.button.primary:active {
  color: var(--light50);
  background: var(--primary600);
}

.button.secondary {
  border: 1px solid var(--border-color);
  background: var(--base50);
}

.button.secondary:hover {
  background: var(--base75);
}

.button.secondary:active {
  background: var(--base100);
}

.button.quiet {
  color: var(--base900);
  background: transparent;
}

.button.quiet:hover {
  background: var(--base100);
}

.button.quiet:active {
  background: var(--base200);
}

.button.danger {
  color: var(--light50);
  background: var(--red800);
}

.button.danger:hover {
  color: var(--light50);
  background: var(--red900);
}

.button.danger:active {
  color: var(--light50);
  background: var(--red1000);
}

.button.size-sm {
  font-size: var(--font-size-sm);
  height: calc(var(--base-height) * 0.75);
  padding: 0 calc(var(--size600) * 0.75);
}

.button.size-md {
  font-size: var(--font-size-md);
}

.button.size-lg {
  font-size: var(--font-size-lg);
  height: calc(var(--base-height) * 1.25);
  padding: 0 calc(var(--size600) * 1.25);
} */