feat(tailwind): remove all important styles (#909)

* feat(tailwind): remove all `important` styles * fix(tailwind): rectify broken tailwind styles Keep tracking on vercel/next.js#16630.
sabertazimi · Jun 12, 2022 · 2ccb388 · 2ccb388 · vercel · Jun 12, 2022
1 parent 064a920
commit 2ccb388
Show file tree

Hide file tree

Showing 48 changed files with 363 additions and 269 deletions.
diff --git a/components/Article/ArticleHeader.module.css b/components/Article/ArticleHeader.module.css
@@ -1,7 +1,7 @@
 .header {
-  @apply bg-gradient-primary w-full bg-cover bg-center bg-no-repeat p-3 md:px-32 md:pt-48 md:pb-40 !important;
+  @apply bg-gradient-primary w-full bg-cover bg-center bg-no-repeat p-3 md:px-32 md:pt-48 md:pb-40;
 }
 
-.title {
-  @apply my-12 text-6xl text-light md:my-24 md:text-8xl !important;
+h1.title {
+  @apply my-12 text-6xl text-light md:my-24 md:text-8xl;
 }
diff --git a/components/Article/__snapshots__/Article.test.tsx.snap b/components/Article/__snapshots__/Article.test.tsx.snap
@@ -40,7 +40,7 @@ exports[`Article should render correctly (snapshot) 1`] = `
           </a>
         </span>
         <h1
-          class="ant-typography mdx-heading mb-6 dark:text-light title mt-48"
+          class="ant-typography mdx-heading dark:text-light heading title h1"
         >
           1 Basic Notes
         </h1>
@@ -169,13 +169,13 @@ exports[`Article should render correctly (snapshot) 1`] = `
     >
       <article>
         <h2
-          class="ant-typography mdx-heading mb-6 dark:text-light mt-24"
+          class="ant-typography mdx-heading dark:text-light heading h2"
         >
           1 Basic Notes
         </h2>
       </article>
       <div
-        class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-center mx-0 my-12 leading-relaxed tracking-wide font-extrabold dark:border-light dark:text-light"
+        class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-center divider dark:border-light dark:text-light"
         role="separator"
       >
         <span
@@ -249,7 +249,7 @@ exports[`Article should render correctly (snapshot) 1`] = `
         </div>
       </div>
       <div
-        class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-center mx-0 my-12 leading-relaxed tracking-wide font-extrabold dark:border-light dark:text-light"
+        class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-center divider dark:border-light dark:text-light"
         role="separator"
       >
         <span
@@ -295,14 +295,14 @@ exports[`Article should render correctly (snapshot) 1`] = `
             style="opacity: 0; transform: translateX(20px) translateZ(0);"
           >
             <a
-              class="ant-btn ant-btn-link ant-btn-lg ant-btn-icon-only rounded-none text-center text-light"
+              class="ant-btn ant-btn-link ant-btn-lg ant-btn-icon-only button"
               href="https://twitter.com/intent/tweet?url=https://blog.tazimi.dev/post/1BasicNotes"
               role="link"
               style="background-color: rgb(29, 161, 242);"
             >
               <span
                 aria-label="twitter"
-                class="anticon anticon-twitter text-4xl"
+                class="anticon anticon-twitter icon"
                 role="img"
               >
                 <svg
@@ -331,14 +331,14 @@ exports[`Article should render correctly (snapshot) 1`] = `
             style="opacity: 0; transform: translateX(20px) translateZ(0);"
           >
             <a
-              class="ant-btn ant-btn-link ant-btn-lg ant-btn-icon-only rounded-none text-center text-light"
+              class="ant-btn ant-btn-link ant-btn-lg ant-btn-icon-only button"
               href="https://www.facebook.com/sharer.php?u=https://blog.tazimi.dev/post/1BasicNotes"
               role="link"
               style="background-color: rgb(24, 119, 242);"
             >
               <span
                 aria-label="facebook"
-                class="anticon anticon-facebook text-4xl"
+                class="anticon anticon-facebook icon"
                 role="img"
               >
                 <svg
@@ -367,14 +367,14 @@ exports[`Article should render correctly (snapshot) 1`] = `
             style="opacity: 0; transform: translateX(20px) translateZ(0);"
           >
             <a
-              class="ant-btn ant-btn-link ant-btn-lg ant-btn-icon-only rounded-none text-center text-light"
+              class="ant-btn ant-btn-link ant-btn-lg ant-btn-icon-only button"
               href="https://www.linkedin.com/shareArticle?mini=true&url=https://blog.tazimi.dev/post/1BasicNotes"
               role="link"
               style="background-color: rgb(10, 102, 194);"
             >
               <span
                 aria-label="linkedin"
-                class="anticon anticon-linkedin text-4xl"
+                class="anticon anticon-linkedin icon"
                 role="img"
               >
                 <svg
@@ -402,14 +402,14 @@ exports[`Article should render correctly (snapshot) 1`] = `
             style="opacity: 0; transform: translateX(20px) translateZ(0);"
           >
             <a
-              class="ant-btn ant-btn-link ant-btn-lg ant-btn-icon-only rounded-none text-center text-light"
+              class="ant-btn ant-btn-link ant-btn-lg ant-btn-icon-only button"
               href="https://service.weibo.com/share/share.php?url=https://blog.tazimi.dev/post/1BasicNotes"
               role="link"
               style="background-color: rgb(230, 22, 45);"
             >
               <span
                 aria-label="weibo"
-                class="anticon anticon-weibo text-4xl"
+                class="anticon anticon-weibo icon"
                 role="img"
               >
                 <svg
@@ -455,7 +455,7 @@ exports[`Article should render correctly with partial data (snapshot) 1`] = `
           </a>
         </span>
         <h1
-          class="ant-typography mdx-heading mb-6 dark:text-light title mt-48"
+          class="ant-typography mdx-heading dark:text-light heading title h1"
         >
           1 Basic Notes
         </h1>
@@ -584,13 +584,13 @@ exports[`Article should render correctly with partial data (snapshot) 1`] = `
     >
       <article>
         <h2
-          class="ant-typography mdx-heading mb-6 dark:text-light mt-24"
+          class="ant-typography mdx-heading dark:text-light heading h2"
         >
           1 Basic Notes
         </h2>
       </article>
       <div
-        class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-center mx-0 my-12 leading-relaxed tracking-wide font-extrabold dark:border-light dark:text-light"
+        class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-center divider dark:border-light dark:text-light"
         role="separator"
       >
         <span
@@ -664,7 +664,7 @@ exports[`Article should render correctly with partial data (snapshot) 1`] = `
         </div>
       </div>
       <div
-        class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-center mx-0 my-12 leading-relaxed tracking-wide font-extrabold dark:border-light dark:text-light"
+        class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-center divider dark:border-light dark:text-light"
         role="separator"
       >
         <span
@@ -710,14 +710,14 @@ exports[`Article should render correctly with partial data (snapshot) 1`] = `
             style="opacity: 0; transform: translateX(20px) translateZ(0);"
           >
             <a
-              class="ant-btn ant-btn-link ant-btn-lg ant-btn-icon-only rounded-none text-center text-light"
+              class="ant-btn ant-btn-link ant-btn-lg ant-btn-icon-only button"
               href="https://twitter.com/intent/tweet?url=https://blog.tazimi.dev/post/1BasicNotes"
               role="link"
               style="background-color: rgb(29, 161, 242);"
             >
               <span
                 aria-label="twitter"
-                class="anticon anticon-twitter text-4xl"
+                class="anticon anticon-twitter icon"
                 role="img"
               >
                 <svg
@@ -746,14 +746,14 @@ exports[`Article should render correctly with partial data (snapshot) 1`] = `
             style="opacity: 0; transform: translateX(20px) translateZ(0);"
           >
             <a
-              class="ant-btn ant-btn-link ant-btn-lg ant-btn-icon-only rounded-none text-center text-light"
+              class="ant-btn ant-btn-link ant-btn-lg ant-btn-icon-only button"
               href="https://www.facebook.com/sharer.php?u=https://blog.tazimi.dev/post/1BasicNotes"
               role="link"
               style="background-color: rgb(24, 119, 242);"
             >
               <span
                 aria-label="facebook"
-                class="anticon anticon-facebook text-4xl"
+                class="anticon anticon-facebook icon"
                 role="img"
               >
                 <svg
@@ -782,14 +782,14 @@ exports[`Article should render correctly with partial data (snapshot) 1`] = `
             style="opacity: 0; transform: translateX(20px) translateZ(0);"
           >
             <a
-              class="ant-btn ant-btn-link ant-btn-lg ant-btn-icon-only rounded-none text-center text-light"
+              class="ant-btn ant-btn-link ant-btn-lg ant-btn-icon-only button"
               href="https://www.linkedin.com/shareArticle?mini=true&url=https://blog.tazimi.dev/post/1BasicNotes"
               role="link"
               style="background-color: rgb(10, 102, 194);"
             >
               <span
                 aria-label="linkedin"
-                class="anticon anticon-linkedin text-4xl"
+                class="anticon anticon-linkedin icon"
                 role="img"
               >
                 <svg
@@ -817,14 +817,14 @@ exports[`Article should render correctly with partial data (snapshot) 1`] = `
             style="opacity: 0; transform: translateX(20px) translateZ(0);"
           >
             <a
-              class="ant-btn ant-btn-link ant-btn-lg ant-btn-icon-only rounded-none text-center text-light"
+              class="ant-btn ant-btn-link ant-btn-lg ant-btn-icon-only button"
               href="https://service.weibo.com/share/share.php?url=https://blog.tazimi.dev/post/1BasicNotes"
               role="link"
               style="background-color: rgb(230, 22, 45);"
             >
               <span
                 aria-label="weibo"
-                class="anticon anticon-weibo text-4xl"
+                class="anticon anticon-weibo icon"
                 role="img"
               >
                 <svg

diff --git a/components/Aside/Aside.module.css b/components/Aside/Aside.module.css
@@ -2,23 +2,23 @@
   @apply mt-0 mb-9;
 }
 
-.admonition div,
+.admonition[role='alert'] div,
 .admonition ol,
 .admonition ul {
-  @apply mb-3 !important;
+  @apply mb-3;
 }
 
 .admonition ol li::before {
-  @apply mr-1 !important;
+  @apply mr-1;
 }
 
 .admonition div:last-child,
 .admonition ol:last-child,
 .admonition ul:last-child,
-.admonition li {
-  @apply my-0 !important;
+.admonition[role='alert'] li {
+  @apply my-0;
 }
 
-.admonition code {
-  @apply text-sm !important;
+.admonition[role='alert'] code {
+  @apply text-sm;
 }
diff --git a/components/Button/Button.css b/components/Button/Button.css
@@ -2,3 +2,13 @@
 .ant-btn-text {
   @apply dark:text-light;
 }
+
+.ant-btn-default,
+.ant-btn-dashed {
+  @apply bg-transparent hover:bg-transparent dark:text-light dark:hover:text-secondary;
+}
+
+/* Remove tailwind button reset styles */
+.ant-btn-primary {
+  @apply bg-primary;
+}
diff --git a/components/CodeBlocks/InlineCode.module.css b/components/CodeBlocks/InlineCode.module.css
@@ -1,7 +1,6 @@
-.code {
-  /* Add `!important` to override `antd` styles */
-  @apply break-words border border-solid border-secondary bg-transparent box-decoration-clone px-1.5 py-px !important;
-  @apply font-mono font-normal leading-6 text-dark shadow-xl !important;
+code.code {
+  @apply break-words border border-solid border-secondary bg-transparent box-decoration-clone px-1.5 py-px;
+  @apply font-mono font-normal leading-6 text-dark shadow-xl;
 
-  font-size: var(--font-size) !important;
+  font-size: var(--font-size);
 }
diff --git a/components/Divider/Divider.module.css b/components/Divider/Divider.module.css
@@ -0,0 +1,7 @@
+.divider {
+  @apply leading-relaxed tracking-wide;
+}
+
+.divider[role='separator'] {
+  @apply mx-0 my-12 font-extrabold;
+}
diff --git a/components/Divider/Divider.tsx b/components/Divider/Divider.tsx
@@ -1,14 +1,23 @@
+import { cx } from '@components/utils';
 import type { DividerProps } from 'antd';
 import { Divider as AntDivider } from 'antd';
+import styles from './Divider.module.css';
 
 interface Props extends DividerProps {}
 
 const Divider = ({
   type = 'horizontal',
-  className = 'mx-0 my-12 leading-relaxed tracking-wide font-extrabold dark:border-light dark:text-light',
+  className,
   children,
 }: Props): JSX.Element => (
-  <AntDivider type={type} className={className}>
+  <AntDivider
+    type={type}
+    className={cx(
+      styles.divider,
+      className,
+      'dark:border-light dark:text-light'
+    )}
+  >
     {children}
   </AntDivider>
 );

diff --git a/components/ErrorBoundary/__snapshots__/ErrorBoundary.test.tsx.snap b/components/ErrorBoundary/__snapshots__/ErrorBoundary.test.tsx.snap
@@ -40,7 +40,7 @@ exports[`ErrorBoundary should render alert message correctly (snapshot) 1`] = `
         role="alert"
       >
         <div
-          class="ant-typography mt-0 mb-9 leading-relaxed tracking-wide dark:text-light"
+          class="ant-typography p dark:text-light"
         >
           <span
             class="ant-typography text-xl font-extrabold dark:text-light"
@@ -49,7 +49,7 @@ exports[`ErrorBoundary should render alert message correctly (snapshot) 1`] = `
           </span>
         </div>
         <div
-          class="ant-typography mt-0 mb-9 leading-relaxed tracking-wide dark:text-light"
+          class="ant-typography p dark:text-light"
         >
           <span
             class="ant-typography dark:text-light"
@@ -58,7 +58,7 @@ exports[`ErrorBoundary should render alert message correctly (snapshot) 1`] = `
           </span>
         </div>
         <div
-          class="ant-typography mt-0 mb-9 leading-relaxed tracking-wide dark:text-light"
+          class="ant-typography p dark:text-light"
         >
           <span
             class="ant-typography dark:text-light"
@@ -67,7 +67,7 @@ exports[`ErrorBoundary should render alert message correctly (snapshot) 1`] = `
           </span>
         </div>
         <div
-          class="ant-typography mt-0 mb-9 leading-relaxed tracking-wide dark:text-light"
+          class="ant-typography p dark:text-light"
         >
           <span
             class="ant-typography dark:text-light"

diff --git a/components/Footer/Footer.tsx b/components/Footer/Footer.tsx
@@ -33,19 +33,21 @@ const Footer = ({
         ))}
       </Col>
     </Row>
-    <Divider className="my-12 border-light" />
+    <Divider className="border-light" />
     <Row align="middle" justify="center">
-      <Col span={24}>
+      <Col className="mx-6">
         <span>
           Copyright &copy;{' '}
           <a href={`https://github.com/${socials.github}`}>{author}</a>{' '}
         </span>
-        <Divider type="vertical" className="border-light" />
+      </Col>
+      <Col className="mx-6">
         <span>
           Built with <a href="https://reactjs.org">React</a> and{' '}
           <a href="https://nextjs.org">Next</a>
         </span>
-        <Divider type="vertical" className="border-light" />
+      </Col>
+      <Col className="mx-6">
         <span>
           Last Built Time{' '}
           <a href="https://www.google.com/search?q=time">