Add nx- tailwind prefix (#911)

* add nx- tailwind prefix * update * fix dark mode * add changeset
shuding · Oct 20, 2022 · 580c433 · 580c433
1 parent 2533a6c
commit 580c433
Show file tree

Hide file tree

Showing 45 changed files with 438 additions and 387 deletions.
diff --git a/.changeset/hot-rockets-sip.md b/.changeset/hot-rockets-sip.md
@@ -0,0 +1,7 @@
+---
+'nextra': patch
+'nextra-theme-blog': patch
+'nextra-theme-docs': patch
+---
+
+add nx- to all tailwind classes for style isolation
diff --git a/docs/components/table/index.tsx b/docs/components/table/index.tsx
@@ -1,27 +1,29 @@
 export function OptionTable({ options }: { options: [string, string, any] }) {
   return (
-    <div className="mt-6 mb-4 pb-4 overflow-x-auto overscroll-x-contain">
-      <table className="border-collapse w-full text-sm">
+    <div className="nx-mt-6 nx-mb-4 nx-pb-4 nx-overflow-x-auto nx-overscroll-x-contain">
+      <table className="nx-border-collapse nx-w-full nx-text-sm">
         <thead>
-          <tr className="border-b text-left py-4 dark:border-primary-100/10">
-            <th className="py-2 font-semibold">Option</th>
-            <th className="py-2 pl-6 font-semibold">Type</th>
-            <th className="py-2 pl-6 pr-6 font-semibold">Description</th>
+          <tr className="nx-border-b nx-text-left nx-py-4 dark:nx-border-primary-100/10">
+            <th className="nx-py-2 nx-font-semibold">Option</th>
+            <th className="nx-py-2 nx-pl-6 nx-font-semibold">Type</th>
+            <th className="nx-py-2 nx-pl-6 nx-pr-6 nx-font-semibold">
+              Description
+            </th>
           </tr>
         </thead>
-        <tbody className="text-gray-900 dark:text-gray-100 align-baseline">
+        <tbody className="nx-text-gray-900 dark:nx-text-gray-100 nx-align-baseline">
           {options.map(([option, type, description]) => (
             <tr
               key={option}
-              className="border-b border-gray-100 dark:border-zinc-800/50"
+              className="nx-border-b nx-border-gray-100 dark:nx-border-zinc-800/50"
             >
-              <td className="py-2 font-mono font-semibold text-xs leading-6 text-violet-600 whitespace-pre dark:text-violet-500">
+              <td className="nx-py-2 nx-font-mono nx-font-semibold nx-text-xs nx-leading-6 nx-text-violet-600 nx-whitespace-pre dark:nx-text-violet-500">
                 {option}
               </td>
-              <td className="py-2 pl-6 font-mono font-semibold text-xs leading-6 text-slate-500 whitespace-pre dark:text-slate-400">
+              <td className="nx-py-2 nx-pl-6 nx-font-mono nx-font-semibold nx-text-xs nx-leading-6 nx-text-slate-500 nx-whitespace-pre dark:nx-text-slate-400">
                 {type}
               </td>
-              <td className="py-2 pl-6">{description}</td>
+              <td className="nx-py-2 nx-pl-6">{description}</td>
             </tr>
           ))}
         </tbody>

diff --git a/examples/swr-site/components/authors.js b/examples/swr-site/components/authors.js
@@ -1,19 +1,19 @@
 export default function Authors({ date, children }) {
   return (
-    <div className="mt-8 mb-16 text-gray-400 text-sm">
+    <div className="nx-mt-8 nx-mb-16 nx-text-gray-400 nx-text-sm">
       {date} by {children}
     </div>
   );
 }
 
 export function Author({ name, link }) {
   return (
-    <span className="after:content-[','] last:after:content-['']">
+    <span className="after:nx-content-[','] last:after:nx-content-['']">
       <a
         key={name}
         href={link}
         target="_blank"
-        className="mx-1 text-gray-800 dark:text-gray-100"
+        className="nx-mx-1 nx-text-gray-800 dark:nx-text-gray-100"
       >
         {name}
       </a>

diff --git a/packages/nextra-theme-blog/src/constants.tsx b/packages/nextra-theme-blog/src/constants.tsx
@@ -4,9 +4,9 @@ import { NextraBlogTheme } from './types'
 
 export const DEFAULT_THEME: NextraBlogTheme = {
   footer: (
-    <small className="block mt-32">
+    <small className="nx-block nx-mt-32">
       CC BY-NC 4.0 {new Date().getFullYear()} © Shu Ding.
     </small>
   ),
-  readMore: 'Read More →',
+  readMore: 'Read More →'
 }
diff --git a/packages/nextra-theme-blog/src/mdx-theme.tsx b/packages/nextra-theme-blog/src/mdx-theme.tsx
@@ -37,7 +37,7 @@ const createHeaderLink =
     return (
       <Tag className={`subheading-${Tag}`} {...props}>
         {children}
-        <span className="absolute -mt-7" id={id} />
+        <span className="nx-absolute -nx-mt-7" id={id} />
         <a href={`#${id}`} className="subheading-anchor" />
       </Tag>
     )
@@ -70,15 +70,15 @@ const components = {
   h6: createHeaderLink('h6'),
   a: A,
   pre: ({ children, ...props }: ComponentProps<'pre'>) => (
-    <div className="not-prose">
+    <div className="nx-not-prose">
       <Pre {...props}>{children}</Pre>
     </div>
   ),
   tr: Tr,
   th: Th,
   td: Td,
   table: (props: ComponentProps<'table'>) => (
-    <Table className="not-prose" {...props} />
+    <Table className="nx-not-prose" {...props} />
   ),
   code: Code
 }

diff --git a/packages/nextra-theme-blog/src/meta.tsx b/packages/nextra-theme-blog/src/meta.tsx
@@ -15,19 +15,19 @@ export default function Meta(): ReactElement {
     <Link key={t} href="/tags/[tag]" as={`/tags/${t}`} passHref>
       <a
         className="
-          select-none
-          rounded-md
-          px-1
-          transition-colors
-          text-sm
-          text-gray-400
-          hover:text-gray-500
-          dark:text-gray-300
-          dark:hover:text-gray-200
-          bg-gray-200
-          hover:bg-gray-300
-          dark:bg-gray-600
-          dark:hover:bg-gray-700
+          nx-select-none
+          nx-rounded-md
+          nx-px-1
+          nx-transition-colors
+          nx-text-sm
+          nx-text-gray-400
+          hover:nx-text-gray-500
+          dark:nx-text-gray-300
+          dark:hover:nx-text-gray-200
+          nx-bg-gray-200
+          hover:nx-bg-gray-300
+          dark:nx-bg-gray-600
+          dark:hover:nx-bg-gray-700
         "
       >
         {t}
@@ -40,11 +40,12 @@ export default function Meta(): ReactElement {
   return (
     <div
       className={
-        'mb-8 flex gap-3 ' + (readingTime ? 'items-start' : 'items-center')
+        'nx-mb-8 nx-flex nx-gap-3 ' +
+        (readingTime ? 'nx-items-start' : 'nx-items-center')
       }
     >
-      <div className="grow text-gray-400">
-        <div className="flex flex-wrap items-center gap-1 not-prose">
+      <div className="nx-grow nx-text-gray-400">
+        <div className="nx-flex nx-flex-wrap nx-items-center nx-gap-1 nx-not-prose">
           {author}
           {author && date && ','}
           {date && (
@@ -56,10 +57,12 @@ export default function Meta(): ReactElement {
           {readingTime || tagsEl}
         </div>
         {readingTime && (
-          <div className="flex flex-wrap items-center gap-1 mt-1 not-prose">{tagsEl}</div>
+          <div className="nx-flex nx-flex-wrap nx-items-center nx-gap-1 nx-mt-1 nx-not-prose">
+            {tagsEl}
+          </div>
         )}
       </div>
-      <div className="flex items-center gap-3">
+      <div className="nx-flex nx-items-center nx-gap-3">
         {back && (
           <Link href={back} passHref>
             <a>Back</a>

diff --git a/packages/nextra-theme-blog/src/nav.tsx b/packages/nextra-theme-blog/src/nav.tsx
@@ -8,12 +8,15 @@ export default function Nav(): ReactElement {
   const { opts, config } = useBlogContext()
   const { navPages } = collectPostsAndNavs({ opts, config })
   return (
-    <div className="mb-8 flex items-center gap-3">
-      <div className="flex grow flex-wrap items-center justify-end gap-3">
+    <div className="nx-mb-8 nx-flex nx-items-center nx-gap-3">
+      <div className="nx-flex grow nx-flex-wrap nx-items-center nx-justify-end nx-gap-3">
         {navPages.map(page => {
           if (page.active) {
             return (
-              <span key={page.route} className="cursor-default text-gray-400">
+              <span
+                key={page.route}
+                className="nx-cursor-default nx-text-gray-400"
+              >
                 {page.frontMatter?.title || page.name}
               </span>
             )

diff --git a/packages/nextra-theme-blog/src/styles.css b/packages/nextra-theme-blog/src/styles.css
@@ -6,15 +6,15 @@
 @import 'nextra/styles/subheading-anchor.css';
 
 body {
-  @apply px-4;
+  @apply nx-px-4;
 }
 
 article {
-  @apply mx-auto block pt-20 pb-32;
+  @apply nx-mx-auto nx-block nx-pt-20 nx-pb-32;
 }
 
 article img {
-  @apply mx-auto;
+  @apply nx-mx-auto;
 }
 
 h1 {
@@ -24,9 +24,9 @@ h1 {
 .prose code {
   &:before,
   &:after {
-    @apply hidden;
+    @apply nx-hidden;
   }
   .line {
-    @apply font-normal;
+    @apply nx-font-normal;
   }
 }
diff --git a/packages/nextra-theme-blog/tailwind.config.js b/packages/nextra-theme-blog/tailwind.config.js
@@ -1,5 +1,7 @@
 const colors = require('tailwindcss/colors')
+
 module.exports = {
+  prefix: 'nx-',
   content: ['./src/**/*.{js,tsx,jsx}', '../nextra/src/components/*.tsx'],
   theme: {
     colors: {
@@ -55,5 +57,5 @@ module.exports = {
     }
   },
   plugins: [require('@tailwindcss/typography')],
-  darkMode: 'class'
+  darkMode: ['class', 'html[class~="dark"]']
 }
diff --git a/packages/nextra-theme-docs/css/hamburger.css b/packages/nextra-theme-docs/css/hamburger.css
@@ -1,34 +1,36 @@
 .nextra-hamburger svg {
   g {
-    @apply origin-center;
-    transition: transform 0.2s cubic-bezier(.25, 1, .5, 1);
+    @apply nx-origin-center;
+    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
   }
   path {
     opacity: 1;
-    transition: transform 0.2s cubic-bezier(.25, 1, .5, 1) 0.2s, opacity .2s ease .2s;
+    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1) 0.2s,
+      opacity 0.2s ease 0.2s;
   }
 
   &.open {
     path {
-      transition: transform 0.2s cubic-bezier(.25, 1, .5, 1), opacity 0s ease .2s;
+      transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1),
+        opacity 0s ease 0.2s;
     }
     g {
-      transition: transform 0.2s cubic-bezier(.25, 1, .5, 1) .2s;
+      transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1) 0.2s;
     }
   }
 
   &.open > {
     path {
-      @apply opacity-0
+      @apply nx-opacity-0;
     }
     g:nth-of-type(1) {
-      @apply rotate-45;
+      @apply nx-rotate-45;
       path {
         transform: translate3d(0, 6px, 0);
       }
     }
     g:nth-of-type(2) {
-      @apply -rotate-45;
+      @apply -nx-rotate-45;
       path {
         transform: translate3d(0, -6px, 0);
       }

diff --git a/packages/nextra-theme-docs/css/scrollbar.css b/packages/nextra-theme-docs/css/scrollbar.css
@@ -1,20 +1,20 @@
 .nextra-scrollbar {
   scrollbar-width: thin; /* Firefox */
   scrollbar-color: rgba(115, 115, 115, 0.4) transparent; /* Firefox */
-  
+
   scrollbar-gutter: stable;
   &::-webkit-scrollbar {
-    @apply w-1.5 h-1.5;
+    @apply nx-w-1.5 nx-h-1.5;
   }
   &::-webkit-scrollbar-track {
-    @apply bg-transparent;
+    @apply nx-bg-transparent;
   }
   &::-webkit-scrollbar-thumb {
-    @apply rounded-[20px];
+    @apply nx-rounded-[20px];
   }
   &:hover::-webkit-scrollbar-thumb {
-    @apply shadow-[inset_0_0_0_5px_var(--tw-shadow-color)];
-    @apply shadow-neutral-500/20 hover:shadow-neutral-500/40;
+    @apply nx-shadow-[inset_0_0_0_5px_var(--tw-shadow-color)];
+    @apply nx-shadow-neutral-500/20 hover:nx-shadow-neutral-500/40;
   }
 
   @media (max-width: 767px) {
@@ -30,6 +30,6 @@
   -ms-overflow-style: none; /* IE and Edge */
 
   &::-webkit-scrollbar {
-    @apply hidden; /* Chrome, Safari and Opera */
+    @apply nx-hidden; /* Chrome, Safari and Opera */
   }
 }