Skip to content

Commit b70d9d9

Browse files
nolannbironnolannbiron
committed
Lazy load OpenAPI styles and remove Tailwind Typography
1 parent f478ddc commit b70d9d9

File tree

11 files changed

+920
-49
lines changed

11 files changed

+920
-49
lines changed

‎bun.lock‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,6 @@
135135
"@radix-ui/react-tooltip": "^1.1.8",
136136
"@sindresorhus/fnv1a": "^3.1.0",
137137
"@tailwindcss/container-queries": "^0.1.1",
138-
"@tailwindcss/typography": "^0.5.16",
139138
"@tusbar/cache-control": "^1.0.2",
140139
"ai": "^4.2.2",
141140
"assert-never": "catalog:",
@@ -1479,8 +1478,6 @@
14791478

14801479
"@tailwindcss/postcss": ["@tailwindcss/postcss@4.1.11", "", { "dependencies": { "@alloc/quick-lru": "^5.2.0", "@tailwindcss/node": "4.1.11", "@tailwindcss/oxide": "4.1.11", "postcss": "^8.4.41", "tailwindcss": "4.1.11" } }, "sha512-q/EAIIpF6WpLhKEuQSEVMZNMIY8KhWoAemZ9eylNAih9jxMGAYPPWBn3I9QL/2jZ+e7OEz/tZkX5HwbBR4HohA=="],
14811480

1482-
"@tailwindcss/typography": ["@tailwindcss/typography@0.5.16", "", { "dependencies": { "lodash.castarray": "^4.4.0", "lodash.isplainobject": "^4.0.6", "lodash.merge": "^4.6.2", "postcss-selector-parser": "6.0.10" }, "peerDependencies": { "tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1" } }, "sha512-0wDLwCVF5V3x3b1SGXPCDcdsbDHMBe+lkFzBRaHeLvNi+nrrnZ1lA18u+OTWO8iSWU2GxUOCvlXtDuqftc1oiA=="],
1483-
14841481
"@tanstack/virtual-core": ["@tanstack/virtual-core@3.10.8", "", {}, "sha512-PBu00mtt95jbKFi6Llk9aik8bnR3tR/oQP1o3TSi+iG//+Q2RTIzCEgKkHG8BB86kxMNW6O8wku+Lmi+QFR6jA=="],
14851482

14861483
"@tanstack/vue-virtual": ["@tanstack/vue-virtual@3.10.8", "", { "dependencies": { "@tanstack/virtual-core": "3.10.8" }, "peerDependencies": { "vue": "^2.7.0 || ^3.0.0" } }, "sha512-DB5QA8c/LfqOqIUCpSs3RdOTVroRRdqeHMqBkYrcashSZtOzIv8xbiqHgg7RYxDfkH5F3Y+e0MkuuyGNDVB0BQ=="],
@@ -2323,8 +2320,6 @@
23232320

23242321
"locate-path": ["locate-path@5.0.0", "", { "dependencies": { "p-locate": "^4.1.0" } }, "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g=="],
23252322

2326-
"lodash.castarray": ["lodash.castarray@4.4.0", "", {}, "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q=="],
2327-
23282323
"lodash.clonedeep": ["lodash.clonedeep@4.5.0", "", {}, "sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ=="],
23292324

23302325
"lodash.debounce": ["lodash.debounce@4.0.8", "", {}, "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="],
@@ -2341,8 +2336,6 @@
23412336

23422337
"lodash.isstring": ["lodash.isstring@4.0.1", "", {}, "sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw=="],
23432338

2344-
"lodash.merge": ["lodash.merge@4.6.2", "", {}, "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="],
2345-
23462339
"lodash.once": ["lodash.once@4.1.1", "", {}, "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg=="],
23472340

23482341
"lodash.startcase": ["lodash.startcase@4.4.0", "", {}, "sha512-+WKqsK294HMSc2jEbNgpHpd0JfIBhp7rEV4aqXWqFr6AlXov+SlcgB1Fv01y2kGe3Gc8nMW7VA0SrGuSkRfIEg=="],
@@ -4021,8 +4014,6 @@
40214014

40224015
"@tailwindcss/postcss/postcss": ["postcss@8.5.3", "", { "dependencies": { "nanoid": "^3.3.8", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A=="],
40234016

4024-
"@tailwindcss/typography/postcss-selector-parser": ["postcss-selector-parser@6.0.10", "", { "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" } }, "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w=="],
4025-
40264017
"@ts-morph/common/fast-glob": ["fast-glob@3.3.2", "", { "dependencies": { "@nodelib/fs.stat": "^2.0.2", "@nodelib/fs.walk": "^1.2.3", "glob-parent": "^5.1.2", "merge2": "^1.3.0", "micromatch": "^4.0.4" } }, "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow=="],
40274018

40284019
"@ts-morph/common/minimatch": ["minimatch@3.1.2", "", { "dependencies": { "brace-expansion": "^1.1.7" } }, "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw=="],

‎packages/gitbook/package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,6 @@
2828
"@radix-ui/react-tooltip": "^1.1.8",
2929
"@sindresorhus/fnv1a": "^3.1.0",
3030
"@tailwindcss/container-queries": "^0.1.1",
31-
"@tailwindcss/typography": "^0.5.16",
3231
"@tusbar/cache-control": "^1.0.2",
3332
"ai": "^4.2.2",
3433
"assert-never": "catalog:",

‎packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPIOperation.tsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,7 @@ import { tcls } from '@/lib/tailwind';
55

66
import type { BlockProps } from '../Block';
77

8-
import './scalar.css';
9-
import './style.css';
8+
import OpenAPIStyles from '@/components/DocumentView/OpenAPI/OpenAPIStyles';
109
import type { AnyOpenAPIOperationsBlock } from '@/lib/openapi/types';
1110
import { getOpenAPIContext } from './context';
1211

@@ -47,10 +46,13 @@ async function OpenAPIOperationBody(props: BlockProps<AnyOpenAPIOperationsBlock>
4746
}
4847

4948
return (
50-
<BaseOpenAPIOperation
51-
data={data}
52-
context={getOpenAPIContext({ props, specUrl, context: context.contentContext })}
53-
className="openapi-block"
54-
/>
49+
<>
50+
<OpenAPIStyles />
51+
<BaseOpenAPIOperation
52+
data={data}
53+
context={getOpenAPIContext({ props, specUrl, context: context.contentContext })}
54+
className="openapi-block"
55+
/>
56+
</>
5557
);
5658
}

‎packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPISchemas.tsx‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,7 @@ import { OpenAPISchemas as BaseOpenAPISchemas } from '@gitbook/react-openapi';
44

55
import type { BlockProps } from '../Block';
66

7-
import './scalar.css';
8-
import './style.css';
7+
import OpenAPIStyles from '@/components/DocumentView/OpenAPI/OpenAPIStyles';
98
import type { OpenAPISchemasBlock } from '@/lib/openapi/types';
109
import { getOpenAPIContext } from './context';
1110

@@ -48,11 +47,14 @@ async function OpenAPISchemasBody(props: BlockProps<OpenAPISchemasBlock>) {
4847
}
4948

5049
return (
51-
<BaseOpenAPISchemas
52-
schemas={data.schemas}
53-
grouped={block.data.grouped}
54-
context={getOpenAPIContext({ props, specUrl, context: context.contentContext })}
55-
className="openapi-block"
56-
/>
50+
<>
51+
<OpenAPIStyles />
52+
<BaseOpenAPISchemas
53+
schemas={data.schemas}
54+
grouped={block.data.grouped}
55+
context={getOpenAPIContext({ props, specUrl, context: context.contentContext })}
56+
className="openapi-block"
57+
/>
58+
</>
5759
);
5860
}

‎packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPIStyles.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
'use client';
2+
3+
/**
4+
* Dummy component to lazy load the OpenAPI CSS.
5+
*/
6+
export default function OpenAPIStyles() {
7+
// Load the CSS as soon as possible (this is why we don't use an effect hook here)
8+
// We lazy load the CSS to avoidNext bundling it in the main bundle
9+
loadCSS();
10+
11+
return null;
12+
}
13+
14+
let loaded = false;
15+
16+
function loadCSS() {
17+
if (loaded || typeof window === 'undefined') {
18+
return;
19+
}
20+
21+
loaded = true;
22+
23+
// @ts-ignore
24+
import('./style.css').then(() => {
25+
document.body.classList.add('openapi-styles-loaded');
26+
});
27+
}

‎packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPIWebhook.tsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,7 @@ import { tcls } from '@/lib/tailwind';
55

66
import type { BlockProps } from '../Block';
77

8-
import './scalar.css';
9-
import './style.css';
8+
import OpenAPIStyles from '@/components/DocumentView/OpenAPI/OpenAPIStyles';
109
import type { OpenAPIWebhookBlock } from '@/lib/openapi/types';
1110
import { getOpenAPIContext } from './context';
1211

@@ -49,10 +48,13 @@ async function OpenAPIWebhookBody(props: BlockProps<OpenAPIWebhookBlock>) {
4948
}
5049

5150
return (
52-
<BaseOpenAPIWebhook
53-
data={data}
54-
context={getOpenAPIContext({ props, specUrl, context: context.contentContext })}
55-
className="openapi-block"
56-
/>
51+
<>
52+
<OpenAPIStyles />
53+
<BaseOpenAPIWebhook
54+
data={data}
55+
context={getOpenAPIContext({ props, specUrl, context: context.contentContext })}
56+
className="openapi-block"
57+
/>
58+
</>
5759
);
5860
}

‎packages/gitbook/src/components/DocumentView/OpenAPI/context.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,6 @@ import { PlainCodeBlock } from '../CodeBlock';
99
import { DocumentView } from '../DocumentView';
1010
import { Heading } from '../Heading';
1111

12-
import './scalar.css';
13-
import './style.css';
1412
import { DEFAULT_LOCALE, getSpaceLocale } from '@/intl/server';
1513
import type { GitBookAnyContext } from '@/lib/context';
1614
import type {

‎packages/gitbook/src/components/DocumentView/OpenAPI/style.css‎

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@reference "../../RootLayout/globals.css";
2+
@import './scalar.css';
23

34
/* Layout Components */
45
.openapi-operation,
@@ -53,11 +54,6 @@
5354
@apply font-semibold font-mono truncate;
5455
}
5556

56-
.openapi-description.openapi-markdown,
57-
.openapi-description.openapi-markdown code {
58-
@apply prose-sm;
59-
}
60-
6157
/* Markdown Elements */
6258
.openapi-markdown blockquote {
6359
@apply !ps-3;
@@ -81,7 +77,7 @@
8177

8278
/* Markdown Base */
8379
.openapi-markdown {
84-
@apply prose text-tint-strong prose-p:my-2! dark:prose-invert max-w-none whitespace-normal;
80+
@apply prose prose-sm text-tint-strong dark:prose-invert max-w-none whitespace-normal;
8581
}
8682

8783
.openapi-markdown > *:first-child {
@@ -160,7 +156,7 @@
160156
}
161157

162158
.openapi-schema-root-description.openapi-markdown {
163-
@apply prose-sm text-balance mt-1.5 text-[0.813rem]! text-tint overflow-hidden font-normal! select-text prose-strong:font-semibold prose-strong:text-inherit;
159+
@apply text-balance mt-1.5 text-[0.813rem]! text-tint overflow-hidden font-normal! select-text;
164160
}
165161

166162
.openapi-section-schemas > .openapi-section-body > .openapi-schema-root-description {
@@ -279,7 +275,7 @@
279275

280276
/* Schema Description */
281277
.openapi-schema-description.openapi-markdown {
282-
@apply prose-sm text-tint overflow-hidden text-pretty font-normal! select-text prose-strong:font-semibold prose-strong:text-inherit;
278+
@apply text-tint overflow-hidden text-pretty font-normal! select-text;
283279
}
284280

285281
.openapi-schema-description.openapi-markdown pre:has(code) {
@@ -301,7 +297,7 @@
301297
.openapi-schema-example,
302298
.openapi-schema-pattern,
303299
.openapi-schema-default {
304-
@apply prose-sm text-tint;
300+
@apply text-sm text-tint;
305301
}
306302

307303
.openapi-schema-example code,
@@ -322,7 +318,7 @@
322318

323319
.openapi-securities-oauth-content,
324320
.openapi-securities-scopes {
325-
@apply prose *:!prose-sm *:text-tint;
321+
@apply prose prose-sm text-sm *:text-tint;
326322
}
327323

328324
.openapi-securities-oauth-content {
@@ -346,7 +342,7 @@
346342
}
347343

348344
.openapi-securities-description.openapi-markdown {
349-
@apply prose-sm text-tint font-normal! select-text text-pretty prose-strong:font-semibold prose-strong:text-inherit;
345+
@apply text-tint font-normal! select-text text-pretty;
350346
}
351347

352348
.openapi-securities-label {
@@ -377,7 +373,7 @@
377373
}
378374

379375
.openapi-requestbody-description.openapi-markdown {
380-
@apply prose-sm text-tint font-normal! text-pretty select-text prose-strong:font-semibold prose-strong:text-inherit;
376+
@apply text-tint font-normal! text-pretty select-text;
381377
}
382378

383379
/* Responses */
@@ -395,7 +391,7 @@
395391
}
396392

397393
.openapi-response-description.openapi-markdown {
398-
@apply text-left prose-sm text-sm leading-tight text-tint select-text prose-strong:font-semibold prose-strong:text-inherit;
394+
@apply text-left leading-tight text-tint select-text;
399395
}
400396

401397
.openapi-disclosure-group-trigger[aria-expanded="false"] .openapi-response-description.openapi-markdown {

‎packages/gitbook/src/components/RootLayout/globals.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,13 @@
22

33
@config '../../../tailwind.config.ts';
44

5+
@import './prose.css';
6+
7+
/* Prevent flash of unstyled OpenAPI blocks while the OpenAPI styles are lazy-loaded. */
8+
body:not(.openapi-styles-loaded) .openapi-block {
9+
display: none;
10+
}
11+
512
/*
613
The default border color has changed to `currentcolor` in Tailwind CSS v4,
714
so we've added these compatibility styles to make sure everything still

0 commit comments

Comments
 (0)