feat: add hx- prefix to Hextra Tailwind CSS classes (#300)

* feat: add prefix to tailwind css classes

* fix: remove unnecessary prefixes

* fix: add missing prefix in other places

* chore: regenerate hugo_stats.json

* chore: run `npm run build:css`

* chore: add `hx-` prefix to _index.fa.md

* fix: lang switcher display issue

* fix: add `hx-` prefix to showcase/index.fa.md

* fix: lang switch param mistake

Author: imfing

assets/css/compiled/main.css

@@ -2,6 +2,6 @@
   (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))
 ) {
   .code-copy-btn {
-    @apply backdrop-blur-md bg-opacity-[.85] dark:bg-opacity-80;
+    @apply hx-backdrop-blur-md hx-bg-opacity-[.85] dark:hx-bg-opacity-80;
   }
 }

assets/css/components/code-copy.css

@@ -1,20 +1,20 @@
 nav {
   .search-wrapper {
-    @apply hidden md:inline-block;
+    @apply hx-hidden md:hx-inline-block;
   }
 }
 
 @supports (
   (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))
 ) {
   .nav-container-blur {
-    @apply backdrop-blur-md bg-white/[.85] dark:!bg-dark/80;
+    @apply hx-backdrop-blur-md hx-bg-white/[.85] dark:!hx-bg-dark/80;
   }
 }
 
 .hamburger-menu svg {
   g {
-    @apply origin-center;
+    @apply hx-origin-center;
     transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
   }
   path {
@@ -37,16 +37,16 @@ nav {
 
   &.open > {
     path {
-      @apply opacity-0;
+      @apply hx-opacity-0;
     }
     g:nth-of-type(1) {
-      @apply rotate-45;
+      @apply hx-rotate-45;
       path {
         transform: translate3d(0, 4px, 0);
       }
     }
     g:nth-of-type(2) {
-      @apply -rotate-45;
+      @apply -hx-rotate-45;
       path {
         transform: translate3d(0, -4px, 0);
       }

assets/css/components/navbar.css

@@ -4,18 +4,18 @@
 
   scrollbar-gutter: stable;
   &::-webkit-scrollbar {
-    @apply w-3 h-3;
+    @apply hx-w-3 hx-h-3;
   }
   &::-webkit-scrollbar-track {
-    @apply bg-transparent;
+    @apply hx-bg-transparent;
   }
   &::-webkit-scrollbar-thumb {
-    @apply rounded-[10px];
+    @apply hx-rounded-[10px];
   }
   &:hover::-webkit-scrollbar-thumb {
     border: 3px solid transparent;
     background-color: var(--tw-shadow-color);
     background-clip: content-box;
-    @apply shadow-neutral-500/20 hover:shadow-neutral-500/40;
+    @apply hx-shadow-neutral-500/20 hover:hx-shadow-neutral-500/40;
   }
 }

assets/css/components/scrollbar.css

@@ -1,38 +1,38 @@
 .search-wrapper {
   li {
-    @apply mx-2.5 break-words rounded-md contrast-more:border text-gray-800 contrast-more:border-transparent dark:text-gray-300;
+    @apply hx-mx-2.5 hx-break-words hx-rounded-md contrast-more:hx-border hx-text-gray-800 contrast-more:hx-border-transparent dark:hx-text-gray-300;
     a {
-      @apply block scroll-m-12 px-2.5 py-2;
+      @apply hx-block hx-scroll-m-12 hx-px-2.5 hx-py-2;
     }
 
     .title {
-      @apply text-base font-semibold leading-5;
+      @apply hx-text-base hx-font-semibold hx-leading-5;
     }
 
     .active {
-      @apply rounded-md bg-primary-500/10 contrast-more:border-primary-500;
+      @apply hx-rounded-md hx-bg-primary-500/10 contrast-more:hx-border-primary-500;
     }
   }
 
   .no-result {
-    @apply block select-none p-8 text-center text-sm text-gray-400;
+    @apply hx-block hx-select-none hx-p-8 hx-text-center hx-text-sm hx-text-gray-400;
   }
 
   .prefix {
-    @apply mx-2.5 mb-2 mt-6 select-none border-b border-black/10 px-2.5 pb-1.5 text-xs font-semibold
-    uppercase text-gray-500 first:mt-0 dark:border-white/20 dark:text-gray-300 contrast-more:border-gray-600
-    contrast-more:text-gray-900 contrast-more:dark:border-gray-50 contrast-more:dark:text-gray-50;
+    @apply hx-mx-2.5 hx-mb-2 hx-mt-6 hx-select-none hx-border-b hx-border-black/10 hx-px-2.5 hx-pb-1.5 hx-text-xs hx-font-semibold
+    hx-uppercase hx-text-gray-500 first:hx-mt-0 dark:hx-border-white/20 dark:hx-text-gray-300 contrast-more:hx-border-gray-600
+    contrast-more:hx-text-gray-900 contrast-more:dark:hx-border-gray-50 contrast-more:dark:hx-text-gray-50;
   }
 
   .excerpt {
-    @apply overflow-hidden text-ellipsis mt-1 text-sm leading-[1.35rem] text-gray-600 dark:text-gray-400 contrast-more:dark:text-gray-50;
+    @apply hx-overflow-hidden hx-text-ellipsis hx-mt-1 hx-text-sm hx-leading-[1.35rem] hx-text-gray-600 dark:hx-text-gray-400 contrast-more:dark:hx-text-gray-50;
     display: -webkit-box;
     line-clamp: 1;
     -webkit-line-clamp: 1;
     -webkit-box-orient: vertical;
   }
 
   .match {
-    @apply text-primary-600;
+    @apply hx-text-primary-600;
   }
 }

assets/css/components/search.css

@@ -1,6 +1,6 @@
 @media (max-width: 767px) {
   .sidebar-container {
-    @apply fixed pt-[calc(var(--navbar-height))] top-0 w-full bottom-0 z-[15] overscroll-contain bg-white dark:bg-dark;
+    @apply hx-fixed hx-pt-[calc(var(--navbar-height))] hx-top-0 hx-w-full hx-bottom-0 hx-z-[15] hx-overscroll-contain hx-bg-white dark:hx-bg-dark;
     transition: transform 0.8s cubic-bezier(0.52, 0.16, 0.04, 1);
     will-change: transform, opacity;
     contain: layout style;
@@ -10,12 +10,12 @@
 
 .sidebar-container {
   li > div {
-    @apply h-0;
+    @apply hx-h-0;
   }
   li.open > div {
-    @apply h-auto pt-1;
+    @apply hx-h-auto hx-pt-1;
   }
   li.open > a > span > svg > path {
-    @apply rotate-90;
+    @apply hx-rotate-90;
   }
 }

assets/css/components/sidebar.css

@@ -2,10 +2,10 @@
   counter-increment: step;
 
   &:before {
-    @apply absolute w-[33px] h-[33px];
-    @apply border-4 border-white bg-gray-100 dark:border-dark dark:bg-neutral-800;
-    @apply rounded-full text-neutral-400 text-base font-normal text-center -indent-px;
-    @apply mt-[3px] ml-[-41px];
+    @apply hx-absolute hx-w-[33px] hx-h-[33px];
+    @apply hx-border-4 hx-border-white hx-bg-gray-100 dark:hx-border-dark dark:hx-bg-neutral-800;
+    @apply hx-rounded-full hx-text-neutral-400 hx-text-base hx-font-normal hx-text-center -hx-indent-px;
+    @apply hx-mt-[3px] hx-ml-[-41px];
     content: counter(step);
   }
 }

assets/css/components/steps.css

@@ -3,51 +3,51 @@
 @import "chroma/dark.css";
 
 .code-block {
-  @apply text-[.9em] leading-5;
+  @apply hx-text-[.9em] hx-leading-5;
 
   pre {
-    @apply text-[.9em] bg-primary-700/5 overflow-x-auto font-medium subpixel-antialiased dark:bg-primary-300/10 contrast-more:border contrast-more:border-primary-900/20 contrast-more:contrast-150 contrast-more:dark:border-primary-100/40;
+    @apply hx-text-[.9em] hx-bg-primary-700/5 hx-overflow-x-auto hx-font-medium hx-subpixel-antialiased dark:hx-bg-primary-300/10 contrast-more:hx-border contrast-more:hx-border-primary-900/20 contrast-more:hx-contrast-150 contrast-more:dark:hx-border-primary-100/40;
   }
 
   .filename {
-    @apply absolute top-0 z-[1] w-full truncate rounded-t-xl bg-primary-700/5 py-2 px-4 text-xs text-gray-700 dark:bg-primary-300/10 dark:text-gray-200;
+    @apply hx-absolute hx-top-0 hx-z-[1] hx-w-full hx-truncate hx-rounded-t-xl hx-bg-primary-700/5 hx-py-2 hx-px-4 hx-text-xs hx-text-gray-700 dark:hx-bg-primary-300/10 dark:hx-text-gray-200;
   }
 
   .filename + pre:not(.lntable pre) {
     /* Override padding for code blocks with filename but no highlight */
-    @apply pt-12;
+    @apply hx-pt-12;
   }
 }
 
 .code-block pre:not(.lntable pre) {
-  @apply px-4 mb-4 py-4 rounded-xl;
+  @apply hx-px-4 hx-mb-4 hx-py-4 hx-rounded-xl;
 }
 
 .code-block div:nth-of-type(2) pre {
-  @apply pt-12 pb-4;
+  @apply hx-pt-12 hx-pb-4;
 }
 
 .chroma {
   .lntable {
-    @apply m-0 block w-auto overflow-auto rounded-xl;
+    @apply hx-m-0 hx-block hx-w-auto hx-overflow-auto hx-rounded-xl;
 
     pre {
-      @apply pt-4 pb-4;
+      @apply hx-pt-4 hx-pb-4;
     }
   }
   .ln,
   .lnt:not(.hl > .lnt),
   .hl:not(.line) {
-    @apply pl-4 pr-4 min-w-[2.6rem] text-neutral-600 dark:text-neutral-300;
+    @apply hx-pl-4 hx-pr-4 hx-min-w-[2.6rem] hx-text-neutral-600 dark:hx-text-neutral-300;
   }
   .lntd {
-    @apply p-0 align-top;
+    @apply hx-p-0 hx-align-top;
   }
   .lntd:last-of-type {
-    @apply w-full;
+    @apply hx-w-full;
   }
   /* LineHighlight */
   .hl {
-    @apply block w-full bg-primary-800/10;
+    @apply hx-block hx-w-full hx-bg-primary-800/10;
   }
 }

assets/css/highlight.css

@@ -11,13 +11,13 @@
 @import "components/code-copy.css";
 
 html {
-  @apply text-base antialiased;
+  @apply hx-text-base hx-antialiased;
   font-feature-settings: "rlig" 1, "calt" 1, "ss01" 1;
   -webkit-tap-highlight-color: transparent;
 }
 
 body {
-  @apply w-full bg-white dark:bg-dark dark:text-gray-100;
+  @apply hx-w-full hx-bg-white dark:hx-bg-dark dark:hx-text-gray-100;
 }
 
 :root {

assets/css/styles.css

@@ -1,117 +1,117 @@
 .content {
   :where(h1):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply mt-2 text-4xl font-bold tracking-tight text-slate-900 dark:text-slate-100;
+    @apply hx-mt-2 hx-text-4xl hx-font-bold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100;
   }
   :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply font-semibold tracking-tight text-slate-900 dark:text-slate-100 mt-10 border-b pb-1 text-3xl border-neutral-200/70 contrast-more:border-neutral-400 dark:border-primary-100/10 contrast-more:dark:border-neutral-400;
+    @apply hx-font-semibold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100 hx-mt-10 hx-border-b hx-pb-1 hx-text-3xl hx-border-neutral-200/70 contrast-more:hx-border-neutral-400 dark:hx-border-primary-100/10 contrast-more:dark:hx-border-neutral-400;
   }
   :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply font-semibold tracking-tight text-slate-900 dark:text-slate-100 mt-8 text-2xl;
+    @apply hx-font-semibold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100 hx-mt-8 hx-text-2xl;
   }
   :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply font-semibold tracking-tight text-slate-900 dark:text-slate-100 mt-8 text-xl;
+    @apply hx-font-semibold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100 hx-mt-8 hx-text-xl;
   }
   :where(h5):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply font-semibold tracking-tight text-slate-900 dark:text-slate-100 mt-8 text-lg;
+    @apply hx-font-semibold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100 hx-mt-8 hx-text-lg;
   }
   :where(h6):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply font-semibold tracking-tight text-slate-900 dark:text-slate-100 mt-8 text-base;
+    @apply hx-font-semibold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100 hx-mt-8 hx-text-base;
   }
   :where(p):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply mt-6 leading-7 first:mt-0;
+    @apply hx-mt-6 hx-leading-7 first:hx-mt-0;
   }
   :where(a):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply text-primary-600 underline decoration-from-font [text-underline-position:from-font];
+    @apply hx-text-primary-600 hx-underline hx-decoration-from-font [text-underline-position:from-font];
   }
   :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply mt-6 border-gray-300 italic text-gray-700 dark:border-gray-700 dark:text-gray-400 first:mt-0 ltr:border-l-2 ltr:pl-6 rtl:border-r-2 rtl:pr-6;
+    @apply hx-mt-6 hx-border-gray-300 hx-italic hx-text-gray-700 dark:hx-border-gray-700 dark:hx-text-gray-400 first:hx-mt-0 ltr:hx-border-l-2 ltr:hx-pl-6 rtl:hx-border-r-2 rtl:hx-pr-6;
   }
   :where(pre):not(:where(.code-block pre, [class~=not-prose],[class~=not-prose] *)) {
-    @apply bg-primary-700/5 mb-4 overflow-x-auto rounded-xl font-medium subpixel-antialiased dark:bg-primary-300/10 text-[.9em] contrast-more:border contrast-more:border-primary-900/20 contrast-more:contrast-150 contrast-more:dark:border-primary-100/40 py-4;
+    @apply hx-bg-primary-700/5 hx-mb-4 hx-overflow-x-auto hx-rounded-xl hx-font-medium hx-subpixel-antialiased dark:hx-bg-primary-300/10 hx-text-[.9em] contrast-more:hx-border contrast-more:hx-border-primary-900/20 contrast-more:hx-contrast-150 contrast-more:dark:hx-border-primary-100/40 hx-py-4;
   }
   :where(code):not(:where(.code-block code, [class~=not-prose],[class~=not-prose] *)) {
-    @apply border-black border-opacity-[0.04] bg-opacity-[0.03] bg-black break-words rounded-md border py-0.5 px-[.25em] text-[.9em] dark:border-white/10 dark:bg-white/10;
+    @apply hx-border-black hx-border-opacity-[0.04] hx-bg-opacity-[0.03] hx-bg-black hx-break-words hx-rounded-md hx-border hx-py-0.5 hx-px-[.25em] hx-text-[.9em] dark:hx-border-white/10 dark:hx-bg-white/10;
   }
   :where(table):not(:where(.code-block table, [class~=not-prose],[class~=not-prose] *)) {
-    @apply block overflow-x-auto mt-6 p-0 first:mt-0;
+    @apply hx-block hx-overflow-x-auto hx-mt-6 hx-p-0 first:hx-mt-0;
 
     tr {
-      @apply m-0 border-t border-gray-300 p-0 dark:border-gray-600 even:bg-gray-100 even:dark:bg-gray-600/20;
+      @apply hx-m-0 hx-border-t hx-border-gray-300 hx-p-0 dark:hx-border-gray-600 even:hx-bg-gray-100 even:dark:hx-bg-gray-600/20;
     }
     th {
-      @apply m-0 border border-gray-300 px-4 py-2 font-semibold dark:border-gray-600;
+      @apply hx-m-0 hx-border hx-border-gray-300 hx-px-4 hx-py-2 hx-font-semibold dark:hx-border-gray-600;
     }
     td {
-      @apply m-0 border border-gray-300 px-4 py-2 dark:border-gray-600;
+      @apply hx-m-0 hx-border hx-border-gray-300 hx-px-4 hx-py-2 dark:hx-border-gray-600;
     }
   }
   :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply mt-6 list-decimal first:mt-0 ltr:ml-6 rtl:mr-6;
+    @apply hx-mt-6 hx-list-decimal first:hx-mt-0 ltr:hx-ml-6 rtl:hx-mr-6;
     li {
-      @apply my-2;
+      @apply hx-my-2;
     }
   }
   :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply mt-6 list-disc first:mt-0 ltr:ml-6 rtl:mr-6;
+    @apply hx-mt-6 hx-list-disc first:hx-mt-0 ltr:hx-ml-6 rtl:hx-mr-6;
     li {
-      @apply my-2;
+      @apply hx-my-2;
     }
   }
-  /* This CSS rule targets the first nested unordered (ul) or ordered (ol) list 
-     inside the list item (li) of any parent ul or ol. 
+  /* This CSS rule targets the first nested unordered (ul) or ordered (ol) list
+     inside the list item (li) of any parent ul or ol.
      The rule sets the top margin of the selected list to zero. */
   :where(ul, ol) > li > :where(ul, ol):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply mt-0;
+    @apply hx-mt-0;
   }
   :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply border-black border-opacity-[0.04] bg-opacity-[0.03] bg-black break-words rounded-md border py-0.5 px-[.25em] text-[.9em] dark:border-white/10 dark:bg-white/10;
+    @apply hx-border-black hx-border-opacity-[0.04] hx-bg-opacity-[0.03] hx-bg-black hx-break-words hx-rounded-md hx-border hx-py-0.5 hx-px-[.25em] hx-text-[.9em] dark:hx-border-white/10 dark:hx-bg-white/10;
   }
   :where(pre.mermaid):not(:where(.code-block pre, [class~=not-prose],[class~=not-prose] *)) {
-    @apply bg-transparent rounded-none dark:bg-transparent;
+    @apply hx-bg-transparent hx-rounded-none dark:hx-bg-transparent;
   }
   :where(img):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply mx-auto my-4 rounded-md;
+    @apply hx-mx-auto hx-my-4 hx-rounded-md;
   }
   :where(figure):not(:where([class~=not-prose],[class~=not-prose] *)) {
     figcaption {
-      @apply text-sm text-gray-500 dark:text-gray-400 mt-2 block text-center;
+      @apply hx-text-sm hx-text-gray-500 dark:hx-text-gray-400 hx-mt-2 hx-block hx-text-center;
     }
   }
   .footnotes {
-    @apply mt-12 text-sm;
+    @apply hx-mt-12 hx-text-sm;
   }
 }
 
 .subheading-anchor {
-  @apply opacity-0 transition-opacity ltr:ml-1 rtl:mr-1;
+  @apply hx-opacity-0 hx-transition-opacity ltr:hx-ml-1 rtl:hx-mr-1;
 
   span:target + &,
   :hover > &,
   &:focus {
-    @apply opacity-100;
+    @apply hx-opacity-100;
   }
 
   span + &,
   :hover > & {
-    @apply !no-underline;
+    @apply !hx-no-underline;
   }
 
   &:after {
-    @apply content-['#'] px-1;
-    @apply text-gray-300 dark:text-neutral-700;
+    @apply hx-content-['#'] hx-px-1;
+    @apply hx-text-gray-300 dark:hx-text-neutral-700;
     span:target + & {
-      @apply text-gray-400;
-      @apply dark:text-neutral-500;
+      @apply hx-text-gray-400;
+      @apply dark:hx-text-neutral-500;
     }
   }
 }
 
 article details > summary {
   &::-webkit-details-marker {
-    @apply hidden;
+    @apply hx-hidden;
   }
   &::before {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z' clip-rule='evenodd' /%3E%3C/svg%3E");
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='hx-h-5 hx-w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z' clip-rule='evenodd' /%3E%3C/svg%3E");
     height: 1.2em;
     width: 1.2em;
     vertical-align: -4px;