Skip to content

Commit 148278c

Browse files
author
Dimitri POSTOLOV
authored
[v3] rename tailwind prefix nx- to _ to reduce bundle size (#2307)
1 parent 70ec639 commit 148278c

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

68 files changed

+637
-693
lines changed

‎.changeset/fuzzy-kids-flash.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
'nextra-theme-blog': major
3+
'nextra-theme-docs': major
4+
'nextra': major
5+
---
6+
7+
rename tailwind prefix `nx-` to `_` to reduce bundle size

‎docs/pages/docs/index.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export function FAQBox({ title, children }) {
4242
<summary>
4343
<strong className="text-lg">{title}</strong>
4444
</summary>
45-
<div className="nx-p-2">{children}</div>
45+
<div className="p-2">{children}</div>
4646
</details>
4747
)
4848
}

‎docs/pages/index.mdx

+3-3
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ export function I18n() {
6363
className={cn(
6464
'relative cursor-default select-none whitespace-nowrap px-4 py-1.5',
6565
active === 'en'
66-
? 'nx-text-primary-600 nx-bg-primary-50 dark:nx-bg-primary-500/10'
66+
? '_text-primary-600 _bg-primary-50 dark:_bg-primary-500/10'
6767
: 'text-gray-800 dark:text-gray-100 '
6868
)}
6969
onPointerOver={() => setActive('en')}
@@ -74,7 +74,7 @@ export function I18n() {
7474
className={cn(
7575
'relative cursor-default select-none whitespace-nowrap px-4 py-1.5',
7676
active === 'de'
77-
? 'nx-text-primary-600 nx-bg-primary-50 dark:nx-bg-primary-500/10'
77+
? '_text-primary-600 _bg-primary-50 dark:_bg-primary-500/10'
7878
: 'text-gray-800 dark:text-gray-100 '
7979
)}
8080
onPointerOver={() => setActive('de')}
@@ -85,7 +85,7 @@ export function I18n() {
8585
className={cn(
8686
'relative cursor-default select-none whitespace-nowrap px-4 py-1.5',
8787
active === 'ja'
88-
? 'nx-text-primary-600 nx-bg-primary-50 dark:nx-bg-primary-500/10'
88+
? '_text-primary-600 _bg-primary-50 dark:_bg-primary-500/10'
8989
: 'text-gray-800 dark:text-gray-100 '
9090
)}
9191
onPointerOver={() => setActive('ja')}

‎examples/swr-site/pages/en/docs/getting-started.mdx

+2-2
Original file line numberDiff line numberDiff line change
@@ -61,12 +61,12 @@ const fetcher = (...args) => fetch(...args).then(res => res.json())
6161

6262
<details>
6363
<summary>Renders properly</summary>
64-
<div className="nx-flex nx-justify-center">content</div>
64+
<div className="_flex _justify-center">content</div>
6565
</details>
6666

6767
<details>
6868
<summary>Renders on next line</summary>
69-
<div className="nx-flex nx-justify-center">content</div>
69+
<div className="_flex _justify-center">content</div>
7070
</details>
7171

7272
Then you can import `useSWR` and start using it inside any function components:

‎examples/swr-site/pages/es/_meta.ts

+3-4
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import meta from '../en/_meta.json'
2+
13
export default {
24
index: {
35
title: 'Introducción',
@@ -12,8 +14,5 @@ export default {
1214
title: 'Ejemplos',
1315
type: 'page'
1416
},
15-
blog: {
16-
title: 'Blog',
17-
type: 'page'
18-
}
17+
about: meta.about
1918
}

‎examples/swr-site/theme.config.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,9 @@ const config: DocsThemeConfig = {
6666
content: 'SWR 2.0 is out! Read more →',
6767
key: 'swr-2'
6868
},
69+
// chat: {
70+
// link: 'https://discord.com'
71+
// },
6972
darkMode: true,
7073
docsRepositoryBase:
7174
'https://github.com/shuding/nextra/blob/core/examples/swr-site',
@@ -158,7 +161,7 @@ const config: DocsThemeConfig = {
158161
<>
159162
<SWRLogo className="h-3" />
160163
<span
161-
className="hidden select-none font-extrabold ltr:ml-2 rtl:mr-2 md:inline"
164+
className="max-md:hidden select-none font-extrabold ltr:ml-2 rtl:mr-2"
162165
title={`SWR: ${TITLE[locale] || ''}`}
163166
>
164167
SWR

‎packages/nextra-theme-blog/package.json

+4-5
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
"author": "Shu Ding <[email protected]>",
77
"license": "MIT",
88
"exports": {
9-
"./style.css": "./style.css",
9+
"./style.css": "./dist/style.css",
1010
".": {
1111
"import": "./dist/index.js",
1212
"types": "./dist/index.d.mts"
@@ -32,17 +32,16 @@
3232
}
3333
},
3434
"files": [
35-
"dist",
36-
"style.css"
35+
"dist"
3736
],
3837
"scripts": {
3938
"build": "tsup",
4039
"build:all": "pnpm build && pnpm build:tailwind",
41-
"build:tailwind": "pnpm postcss src/styles.css -o style.css --verbose",
40+
"build:tailwind": "pnpm postcss src/styles.css -o dist/style.css --verbose",
4241
"clean": "rimraf ./dist ./style.css",
4342
"dev": "concurrently \"pnpm dev:layout\" \"pnpm dev:tailwind\"",
4443
"dev:layout": "tsup --watch",
45-
"dev:tailwind": "TAILWIND_MODE=watch pnpm postcss src/styles.css -o style.css --watch",
44+
"dev:tailwind": "TAILWIND_MODE=watch pnpm postcss src/styles.css -o dist/style.css --watch",
4645
"prepublishOnly": "pnpm build:all",
4746
"test": "vitest run",
4847
"types": "tsup --dts-only",

‎packages/nextra-theme-blog/src/basic-layout.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export const BasicLayout = ({ children }: { children: ReactNode }) => {
1010
const ref = useRef<HTMLHeadingElement>(null)
1111
return (
1212
<article
13-
className="nx-container nx-prose max-md:nx-prose-sm dark:nx-prose-dark"
13+
className="_container _prose max-md:_prose-sm dark:_prose-dark"
1414
dir="ltr"
1515
>
1616
<Head>

‎packages/nextra-theme-blog/src/constants.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import type { NextraBlogTheme } from './types'
33

44
export const DEFAULT_THEME: NextraBlogTheme = {
55
footer: (
6-
<small className="nx-mt-32 nx-block">
6+
<small className="_mt-32 _block">
77
CC BY-NC 4.0 {new Date().getFullYear()} © Shu Ding.
88
</small>
99
),

‎packages/nextra-theme-blog/src/mdx-theme.tsx

+4-6
Original file line numberDiff line numberDiff line change
@@ -40,9 +40,7 @@ function HeadingLink({
4040
<Tag
4141
className={
4242
// can be added by footnotes
43-
className === 'sr-only'
44-
? 'nx-sr-only'
45-
: `nx-not-prose subheading-${Tag}`
43+
className === 'sr-only' ? '_sr-only' : `_not-prose subheading-${Tag}`
4644
}
4745
{...props}
4846
>
@@ -66,7 +64,7 @@ const A = ({ children, href = '', ...props }: ComponentProps<'a'>) => {
6664
return (
6765
<a href={href} target="_blank" rel="noreferrer" {...props}>
6866
{children}
69-
<span className="nx-sr-only nx-select-none"> (opens in a new tab)</span>
67+
<span className="_sr-only _select-none"> (opens in a new tab)</span>
7068
</a>
7169
)
7270
}
@@ -89,14 +87,14 @@ const useComponents = (): Components => {
8987
h6: props => <HeadingLink tag="h6" {...props} />,
9088
a: A,
9189
pre: ({ children, ...props }) => (
92-
<div className="nx-not-prose">
90+
<div className="_not-prose">
9391
<Pre {...props}>{children}</Pre>
9492
</div>
9593
),
9694
tr: Tr,
9795
th: Th,
9896
td: Td,
99-
table: props => <Table className="nx-not-prose" {...props} />,
97+
table: props => <Table className="_not-prose" {...props} />,
10098
code: Code,
10199
...config.components
102100
}

‎packages/nextra-theme-blog/src/meta.tsx

+19-20
Original file line numberDiff line numberDiff line change
@@ -16,19 +16,19 @@ export default function Meta(): ReactElement {
1616
key={t}
1717
href={`/tags/${t}`}
1818
className="
19-
nx-select-none
20-
nx-rounded-md
21-
nx-bg-gray-200
22-
nx-px-1
23-
nx-text-sm
24-
nx-text-gray-400
25-
nx-transition-colors
26-
hover:nx-bg-gray-300
27-
hover:nx-text-gray-500
28-
dark:nx-bg-gray-600
29-
dark:nx-text-gray-300
30-
dark:hover:nx-bg-gray-700
31-
dark:hover:nx-text-gray-200
19+
_select-none
20+
_rounded-md
21+
_bg-gray-200
22+
_px-1
23+
_text-sm
24+
_text-gray-400
25+
_transition-colors
26+
hover:_bg-gray-300
27+
hover:_text-gray-500
28+
dark:_bg-gray-600
29+
dark:_text-gray-300
30+
dark:hover:_bg-gray-700
31+
dark:hover:_text-gray-200
3232
"
3333
>
3434
{t}
@@ -40,12 +40,11 @@ export default function Meta(): ReactElement {
4040
return (
4141
<div
4242
className={
43-
'nx-mb-8 nx-flex nx-gap-3 ' +
44-
(readingTime ? 'nx-items-start' : 'nx-items-center')
43+
'_mb-8 _flex _gap-3 ' + (readingTime ? '_items-start' : '_items-center')
4544
}
4645
>
47-
<div className="nx-grow dark:nx-text-gray-400 nx-text-gray-600">
48-
<div className="nx-not-prose nx-flex nx-flex-wrap nx-items-center nx-gap-1">
46+
<div className="_grow dark:_text-gray-400 _text-gray-600">
47+
<div className="_not-prose _flex _flex-wrap _items-center _gap-1">
4948
{author}
5049
{author && date && ','}
5150
{dateObj && (
@@ -54,17 +53,17 @@ export default function Meta(): ReactElement {
5453
</time>
5554
)}
5655
{(author || date) && (readingTime || tags.length > 0) && (
57-
<span className="nx-px-1">•</span>
56+
<span className="_px-1">•</span>
5857
)}
5958
{readingTime || tagsEl}
6059
</div>
6160
{readingTime && (
62-
<div className="nx-not-prose nx-mt-1 nx-flex nx-flex-wrap nx-items-center nx-gap-1">
61+
<div className="_not-prose _mt-1 _flex _flex-wrap _items-center _gap-1">
6362
{tagsEl}
6463
</div>
6564
)}
6665
</div>
67-
<div className="nx-flex nx-items-center nx-gap-3 print:nx-hidden">
66+
<div className="_flex _items-center _gap-3 print:_hidden">
6867
{back && <Link href={back}>Back</Link>}
6968
{config.darkMode && <ThemeSwitch />}
7069
</div>

‎packages/nextra-theme-blog/src/nav.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,15 @@ export default function Nav(): ReactElement {
99
const { navPages } = collectPostsAndNavs({ opts, config })
1010

1111
return (
12-
<div className="nx-mb-8 nx-flex nx-items-center nx-gap-3">
13-
<div className="nx-flex nx-grow nx-flex-wrap nx-items-center nx-justify-end nx-gap-3">
12+
<div className="_mb-8 _flex _items-center _gap-3">
13+
<div className="_flex _grow _flex-wrap _items-center _justify-end _gap-3">
1414
{navPages.map(page => {
1515
const name = page.frontMatter?.title || page.name
1616
if (page.active) {
1717
return (
1818
<span
1919
key={page.route}
20-
className="nx-cursor-default dark:nx-text-gray-400 nx-text-gray-600"
20+
className="_cursor-default dark:_text-gray-400 _text-gray-600"
2121
>
2222
{name}
2323
</span>

‎packages/nextra-theme-blog/src/posts-layout.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -38,23 +38,23 @@ export function PostsLayout({
3838
return (
3939
<div key={post.route} className="post-item">
4040
<h3>
41-
<Link href={post.route} className="!nx-no-underline">
41+
<Link href={post.route} className="!_no-underline">
4242
{postTitle}
4343
</Link>
4444
</h3>
4545
{description && (
46-
<p className="nx-mb-2 dark:nx-text-gray-400 nx-text-gray-600">
46+
<p className="_mb-2 dark:_text-gray-400 _text-gray-600">
4747
{description}
4848
{config.readMore && (
49-
<Link href={post.route} className="post-item-more nx-ml-2">
49+
<Link href={post.route} className="post-item-more _ml-2">
5050
{config.readMore}
5151
</Link>
5252
)}
5353
</p>
5454
)}
5555
{date && (
5656
<time
57-
className="nx-text-sm dark:nx-text-gray-400 nx-text-gray-600"
57+
className="_text-sm dark:_text-gray-400 _text-gray-600"
5858
dateTime={date.toISOString()}
5959
>
6060
{date.toDateString()}

‎packages/nextra-theme-blog/src/styles.css

+9-9
Original file line numberDiff line numberDiff line change
@@ -8,37 +8,37 @@
88
@import 'nextra/styles/cards.css';
99

1010
html {
11-
@apply nx-scroll-pt-5;
11+
@apply _scroll-pt-5;
1212
}
1313

1414
body {
15-
@apply nx-px-4;
15+
@apply _px-4;
1616
}
1717

1818
article {
19-
@apply nx-mx-auto nx-block nx-pt-20 nx-pb-32;
19+
@apply _mx-auto _block _pt-20 _pb-32;
2020
}
2121

2222
article img {
23-
@apply nx-mx-auto;
23+
@apply _mx-auto;
2424
}
2525

2626
h1 {
2727
letter-spacing: -0.03em;
2828
}
2929

30-
.nx-prose code {
30+
._prose code {
3131
&:before,
3232
&:after {
33-
@apply nx-hidden;
33+
@apply _hidden;
3434
}
3535
.line {
36-
@apply nx-font-normal;
36+
@apply _font-normal;
3737
}
3838
}
3939

40-
.nx-prose .nextra-callout p {
41-
@apply nx-m-0;
40+
._prose .nextra-callout p {
41+
@apply _m-0;
4242
}
4343

4444
.footnotes a[data-footnote-backref] {

‎packages/nextra-theme-blog/src/theme-switch.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export default function ThemeSwitch() {
1616
<span
1717
role="button"
1818
aria-label="Toggle Dark Mode"
19-
className="nx-cursor-pointer nx-p-2 nx-text-current"
19+
className="_cursor-pointer _p-2 _text-current"
2020
tabIndex={0}
2121
onClick={toggleTheme}
2222
onKeyDown={e => {

‎packages/nextra-theme-docs/css/hamburger.css

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.nextra-hamburger svg {
22
g {
3-
@apply nx-origin-center;
3+
@apply _origin-center;
44
transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
55
}
66
path {
@@ -23,16 +23,16 @@
2323

2424
&.open > {
2525
path {
26-
@apply nx-opacity-0;
26+
@apply _opacity-0;
2727
}
2828
g:nth-of-type(1) {
29-
@apply nx-rotate-45;
29+
@apply _rotate-45;
3030
path {
3131
transform: translate3d(0, 6px, 0);
3232
}
3333
}
3434
g:nth-of-type(2) {
35-
@apply -nx-rotate-45;
35+
@apply _-rotate-45;
3636
path {
3737
transform: translate3d(0, -6px, 0);
3838
}

0 commit comments

Comments
 (0)