From 580c4336dca12facd1abd668fff4285b460b89d1 Mon Sep 17 00:00:00 2001 From: Shu Ding Date: Fri, 21 Oct 2022 00:58:38 +0200 Subject: [PATCH] Add `nx-` tailwind prefix (#911) * add nx- tailwind prefix * update * fix dark mode * add changeset --- .changeset/hot-rockets-sip.md | 7 ++ docs/components/table/index.tsx | 24 ++--- examples/swr-site/components/authors.js | 6 +- packages/nextra-theme-blog/src/constants.tsx | 4 +- packages/nextra-theme-blog/src/mdx-theme.tsx | 6 +- packages/nextra-theme-blog/src/meta.tsx | 39 ++++---- packages/nextra-theme-blog/src/nav.tsx | 9 +- packages/nextra-theme-blog/src/styles.css | 10 +- packages/nextra-theme-blog/tailwind.config.js | 4 +- packages/nextra-theme-docs/css/hamburger.css | 18 ++-- packages/nextra-theme-docs/css/scrollbar.css | 14 +-- packages/nextra-theme-docs/css/styles.css | 43 +++++---- .../css/typesetting-article.css | 14 +-- .../src/components/banner.tsx | 16 ++-- .../src/components/bleed.tsx | 8 +- .../src/components/breadcrumb.tsx | 13 +-- .../src/components/callout.tsx | 18 ++-- .../src/components/collapse.tsx | 14 +-- .../src/components/flexsearch.tsx | 10 +- .../src/components/footer.tsx | 12 +-- .../src/components/highlight-matches.tsx | 7 +- .../src/components/input.tsx | 14 +-- .../src/components/locale-switch.tsx | 4 +- .../src/components/match-sorter-search.tsx | 2 +- .../src/components/nav-links.tsx | 16 ++-- .../src/components/navbar.tsx | 50 +++++----- .../src/components/not-found.tsx | 4 +- .../src/components/search.tsx | 67 ++++++------- .../src/components/select.tsx | 24 ++--- .../src/components/server-side-error.tsx | 4 +- .../src/components/sidebar.tsx | 95 ++++++++++--------- .../nextra-theme-docs/src/components/tabs.tsx | 18 ++-- .../src/components/theme-switch.tsx | 40 ++++---- .../nextra-theme-docs/src/components/toc.tsx | 36 +++---- packages/nextra-theme-docs/src/constants.tsx | 4 +- packages/nextra-theme-docs/src/index.tsx | 26 ++--- .../nextra-theme-docs/src/mdx-components.tsx | 54 +++++++---- packages/nextra-theme-docs/tailwind.config.js | 3 +- packages/nextra/src/components/button.tsx | 6 +- packages/nextra/src/components/code.tsx | 4 +- .../src/components/copy-to-clipboard.tsx | 2 +- packages/nextra/src/components/pre.tsx | 18 ++-- packages/nextra/src/components/td.tsx | 2 +- packages/nextra/styles/code-block.css | 24 ++--- packages/nextra/styles/subheading-anchor.css | 12 +-- 45 files changed, 438 insertions(+), 387 deletions(-) create mode 100644 .changeset/hot-rockets-sip.md diff --git a/.changeset/hot-rockets-sip.md b/.changeset/hot-rockets-sip.md new file mode 100644 index 0000000000..5564e032e2 --- /dev/null +++ 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 index 922c483cf6..40934aabb1 100644 --- 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 ( -
- +
+
- - - - + + + + - + {options.map(([option, type, description]) => ( - - - + ))} diff --git a/examples/swr-site/components/authors.js b/examples/swr-site/components/authors.js index f39eaac43c..97bcba5ee9 100644 --- a/examples/swr-site/components/authors.js +++ b/examples/swr-site/components/authors.js @@ -1,6 +1,6 @@ export default function Authors({ date, children }) { return ( -
+
{date} by {children}
); @@ -8,12 +8,12 @@ export default function Authors({ date, children }) { export function Author({ name, link }) { return ( - + {name} diff --git a/packages/nextra-theme-blog/src/constants.tsx b/packages/nextra-theme-blog/src/constants.tsx index e93951dd50..e7462525cc 100644 --- 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: ( - + CC BY-NC 4.0 {new Date().getFullYear()} © Shu Ding. ), - 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 index b7958e2e0f..df57949c24 100644 --- 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 ( {children} - + ) @@ -70,7 +70,7 @@ const components = { h6: createHeaderLink('h6'), a: A, pre: ({ children, ...props }: ComponentProps<'pre'>) => ( -
+ 
{children}
), @@ -78,7 +78,7 @@ const components = { th: Th, td: Td, table: (props: ComponentProps<'table'>) => ( -
OptionTypeDescription
OptionType + Description +
+ {option} + {type} {description}{description}
+
), code: Code } diff --git a/packages/nextra-theme-blog/src/meta.tsx b/packages/nextra-theme-blog/src/meta.tsx index da6a42cc2d..b2abeb1e0d 100644 --- 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 { {t} @@ -40,11 +40,12 @@ export default function Meta(): ReactElement { return (
-
-
+
+
{author} {author && date && ','} {date && ( @@ -56,10 +57,12 @@ export default function Meta(): ReactElement { {readingTime || tagsEl}
{readingTime && ( -
{tagsEl}
+
+ {tagsEl} +
)}
-
+
{back && ( Back diff --git a/packages/nextra-theme-blog/src/nav.tsx b/packages/nextra-theme-blog/src/nav.tsx index a1283aa206..5c5714ee24 100644 --- 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 ( -
-
+
+
{navPages.map(page => { if (page.active) { return ( - + {page.frontMatter?.title || page.name} ) diff --git a/packages/nextra-theme-blog/src/styles.css b/packages/nextra-theme-blog/src/styles.css index 1a90e676fe..f85d0593f5 100644 --- 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 index 3b79e53cc1..eb835a2142 100644 --- 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 index 00593c4ebe..c7be3c33d1 100644 --- 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 index e0970e8a1e..3e7047a25e 100644 --- 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 */ } } diff --git a/packages/nextra-theme-docs/css/styles.css b/packages/nextra-theme-docs/css/styles.css index f2e0e7e907..3a3b2f57b9 100644 --- a/packages/nextra-theme-docs/css/styles.css +++ b/packages/nextra-theme-docs/css/styles.css @@ -9,13 +9,13 @@ @import './typesetting-article.css'; html { - @apply antialiased text-base; + @apply nx-antialiased nx-text-base; font-feature-settings: 'rlig' 1, 'calt' 1, 'ss01' 1, 'ss06' 1; -webkit-tap-highlight-color: transparent; } body { - @apply w-full bg-white dark:bg-dark dark:text-gray-100; + @apply nx-w-full nx-bg-white dark:nx-bg-dark dark:nx-text-gray-100; } a, @@ -23,42 +23,43 @@ summary, button, input, [tabindex]:not([tabindex='-1']) { - @apply outline-none; + @apply nx-outline-none; &:focus-visible { - @apply ring-2 ring-primary-200 ring-offset-1 ring-offset-primary-300; + @apply nx-ring-2 nx-ring-primary-200 nx-ring-offset-1 nx-ring-offset-primary-300; } } -a, summary { - @apply rounded; +a, +summary { + @apply nx-rounded; } @media (max-width: 767px) { .nextra-sidebar-container { - @apply fixed pt-[calc(var(--nextra-navbar-height))] top-0 w-full bottom-24 z-[15] overscroll-contain bg-white dark:bg-dark; - transition: transform .8s cubic-bezier(.52, .16, .04, 1); + @apply nx-fixed nx-pt-[calc(var(--nextra-navbar-height))] nx-top-0 nx-w-full nx-bottom-24 nx-z-[15] nx-overscroll-contain nx-bg-white dark:nx-bg-dark; + transition: transform 0.8s cubic-bezier(0.52, 0.16, 0.04, 1); will-change: transform, opacity; contain: layout style; backface-visibility: hidden; } .nextra-banner-container ~ div { .nextra-sidebar-container { - @apply pt-[6.5rem]; + @apply nx-pt-[6.5rem]; } &.nextra-nav-container { - @apply top-10 md:top-0; + @apply nx-top-10 md:nx-top-0; } } .nextra-banner-hidden { .nextra-banner-container ~ div .nextra-sidebar-container { - @apply pt-16; + @apply nx-pt-16; } .nextra-nav-container { - @apply !top-0; + @apply !nx-top-0; } } .nextra-search .excerpt { - @apply overflow-hidden text-ellipsis; + @apply nx-overflow-hidden nx-text-ellipsis; display: -webkit-box; line-clamp: 1; -webkit-line-clamp: 1; @@ -71,14 +72,14 @@ a, summary { .nextra-sidebar-container, .nextra-sidebar-container.open, body.resizing .nextra-sidebar-container { - @apply transition-none; + @apply nx-transition-none; } } /* Content Typography */ article details > summary { &::-webkit-details-marker { - @apply hidden; + @apply nx-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"); @@ -92,7 +93,7 @@ article details > summary { .nextra-toc > .div, .nextra-sidebar-container { mask-image: linear-gradient(to bottom, transparent, #000 20px), - linear-gradient(to left, #000 10px, transparent 10px); + linear-gradient(to left, #000 10px, transparent 10px); } } @@ -100,10 +101,10 @@ article details > summary { (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px)) ) { .nextra-search ul { - @apply backdrop-blur-lg bg-white/70 dark:bg-dark/80; + @apply nx-backdrop-blur-lg nx-bg-white/70 dark:nx-bg-dark/80; } .nextra-nav-container-blur { - @apply backdrop-blur-md bg-white/[.85] dark:!bg-dark/80; + @apply nx-backdrop-blur-md nx-bg-white/[.85] dark:!nx-bg-dark/80; } } @@ -117,12 +118,12 @@ input[type='search'] { } .contains-task-list { - @apply ml-0 list-none; + @apply nx-ml-0 nx-list-none; input[type='checkbox'] { - @apply mr-1; + @apply nx-mr-1; } } .nextra-banner-hidden .nextra-banner-container { - @apply hidden; + @apply nx-hidden; } diff --git a/packages/nextra-theme-docs/css/typesetting-article.css b/packages/nextra-theme-docs/css/typesetting-article.css index e50a3db17e..2bb2950fd6 100644 --- a/packages/nextra-theme-docs/css/typesetting-article.css +++ b/packages/nextra-theme-docs/css/typesetting-article.css @@ -2,25 +2,25 @@ article.nextra-body-typesetting-article { font-size: 17px; font-feature-settings: 'rlig' 1, 'calt' 1; h1 { - @apply mt-6 mb-4 text-center; + @apply nx-mt-6 nx-mb-4 nx-text-center; font-size: 2.5rem; } h2 { - @apply border-none; + @apply nx-border-none; } a { - @apply no-underline hover:underline; + @apply nx-no-underline hover:nx-underline; } p { - @apply leading-8; + @apply nx-leading-8; } code { - @apply border-none dark:bg-neutral-700; + @apply nx-border-none dark:nx-bg-neutral-700; } pre code { - @apply dark:bg-transparent; + @apply dark:nx-bg-transparent; } .subheading-anchor + a { - @apply no-underline hover:no-underline after:hidden; + @apply nx-no-underline hover:nx-no-underline after:nx-hidden; } } diff --git a/packages/nextra-theme-docs/src/components/banner.tsx b/packages/nextra-theme-docs/src/components/banner.tsx index 2154a0297e..95000932fc 100644 --- a/packages/nextra-theme-docs/src/components/banner.tsx +++ b/packages/nextra-theme-docs/src/components/banner.tsx @@ -18,19 +18,19 @@ export function Banner(): ReactElement | null {