mirror of
https://github.com/hanzo-docs/docs.git
synced 2026-10-25 04:20:02 +00:00
UI: optimize Tailwind CSS Scan
This commit is contained in:
Fuma Nama
@@ -0,0 +1,7 @@
|
||||
---
|
||||
'fumadocs-ui': patch
|
||||
'@fumadocs/base-ui': patch
|
||||
'fumadocs-openapi': patch
|
||||
---
|
||||
|
||||
Pre-scan class names to optimize Tailwind CSS compilation performance
|
||||
+5
-1
@@ -40,4 +40,8 @@ yarn-error.log*
|
||||
|
||||
# typescript
|
||||
*.tsbuildinfo
|
||||
next-env.d.ts
|
||||
next-env.d.ts
|
||||
|
||||
packages/radix-ui/css/generated/*.css
|
||||
packages/base-ui/css/generated/*.css
|
||||
packages/openapi/css/generated/*.css
|
||||
@@ -4,7 +4,7 @@ import { fileURLToPath } from 'node:url';
|
||||
import * as path from 'node:path';
|
||||
import { resolveFromRemote } from '@fumadocs/cli/build';
|
||||
|
||||
const baseDir = path.join(path.dirname(fileURLToPath(import.meta.url)), '../');
|
||||
const baseDir = path.join(path.dirname(fileURLToPath(import.meta.url)), '../../');
|
||||
|
||||
export const registry: Registry = {
|
||||
dir: baseDir,
|
||||
@@ -18,6 +18,14 @@ export const registry: Registry = {
|
||||
if (filePath.startsWith('lib/source/')) return false;
|
||||
},
|
||||
onResolve(ref) {
|
||||
if (ref.type === 'file') {
|
||||
const file = path.relative(baseDir, ref.file);
|
||||
|
||||
if (file === 'lib/cn.ts') {
|
||||
return resolveFromRemote(radixUi.registry, 'cn', () => true)!;
|
||||
}
|
||||
}
|
||||
|
||||
if (ref.type === 'dependency' && ref.dep === 'fumadocs-ui') {
|
||||
const match = /fumadocs-ui\/components\/ui\/(.*)/.exec(ref.specifier);
|
||||
if (match) {
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
@source '../../dist/layouts/docs/**/*.js';
|
||||
@@ -1 +0,0 @@
|
||||
@source '../../dist/layouts/flux/**/*.js';
|
||||
@@ -1 +0,0 @@
|
||||
@source '../../dist/layouts/home/**/*.js';
|
||||
@@ -1 +0,0 @@
|
||||
@source '../../dist/layouts/notebook/**/*.js';
|
||||
@@ -1,11 +1,9 @@
|
||||
@import './lib/base.css';
|
||||
|
||||
/* TODO: remove them on next major */
|
||||
@import './layouts/flux.css';
|
||||
@import './layouts/docs.css';
|
||||
@import './layouts/home.css';
|
||||
@import './layouts/notebook.css';
|
||||
@import './generated/flux.css';
|
||||
@import './generated/docs.css';
|
||||
@import './generated/home.css';
|
||||
@import './generated/notebook.css';
|
||||
|
||||
@source '../dist/*.js';
|
||||
@source '../dist/{components,contexts,provider,utils}/**/*.js';
|
||||
@source '../dist/layouts/shared/**/*.js';
|
||||
@import './generated/shared.css';
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
import { compileInline } from './compile-inline.utils';
|
||||
|
||||
void compileInline();
|
||||
@@ -0,0 +1,44 @@
|
||||
import { compile } from '@fumadocs/tailwind/compile';
|
||||
import { mkdir, writeFile } from 'node:fs/promises';
|
||||
import path from 'node:path';
|
||||
|
||||
export async function compileInline() {
|
||||
await mkdir('css/generated', { recursive: true });
|
||||
await writeFile(
|
||||
'css/generated/shared.css',
|
||||
compile([
|
||||
{
|
||||
base: path.resolve('src'),
|
||||
pattern: '{components,contexts,provider,utils}/**/*.{ts,tsx}',
|
||||
negated: false,
|
||||
},
|
||||
{
|
||||
base: path.resolve('src'),
|
||||
pattern: 'layouts/shared/**/*.{ts,tsx}',
|
||||
negated: false,
|
||||
},
|
||||
{
|
||||
base: path.resolve('src'),
|
||||
pattern: '*.{ts,tsx}',
|
||||
negated: false,
|
||||
},
|
||||
]),
|
||||
);
|
||||
|
||||
const layouts = ['flux', 'notebook', 'home', 'docs'];
|
||||
|
||||
for (const layout of layouts) {
|
||||
await writeFile(
|
||||
`css/generated/${layout}.css`,
|
||||
compile([
|
||||
{
|
||||
base: path.resolve('src'),
|
||||
pattern: `layouts/${layout}/**/*.{ts,tsx}`,
|
||||
negated: false,
|
||||
},
|
||||
]),
|
||||
);
|
||||
}
|
||||
|
||||
console.log('generated CSS files');
|
||||
}
|
||||
@@ -327,6 +327,7 @@ export const registry: Registry = {
|
||||
dependencies: {
|
||||
'fumadocs-core': null,
|
||||
'@fumadocs/base-ui': null,
|
||||
'fumadocs-ui': 'npm:@fumadocs/base-ui',
|
||||
react: null,
|
||||
},
|
||||
};
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { defineConfig } from 'tsdown';
|
||||
import fs from 'node:fs/promises';
|
||||
import { compileInline } from './scripts/compile-inline.utils';
|
||||
|
||||
export default defineConfig({
|
||||
format: 'esm',
|
||||
@@ -13,6 +14,7 @@ export default defineConfig({
|
||||
unbundle: true,
|
||||
dts: true,
|
||||
async onSuccess() {
|
||||
await compileInline();
|
||||
// wait until https://github.com/rolldown/tsdown/issues/472
|
||||
let content = (await fs.readFile('dist/components/image-zoom.js')).toString();
|
||||
content = content.replaceAll(`import "./image-zoom2.js";`, `import "./image-zoom.css";`);
|
||||
|
||||
@@ -1 +1 @@
|
||||
@source '../dist/**/*.js';
|
||||
@import './generated/shared.css';
|
||||
|
||||
@@ -86,6 +86,7 @@
|
||||
"xml-js": "^1.6.11"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@fumadocs/tailwind": "workspace:*",
|
||||
"@scalar/api-client-react": "^1.3.82",
|
||||
"@types/js-yaml": "^4.0.9",
|
||||
"@types/node": "25.1.0",
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
import { compileInline } from './compile-inline.utils';
|
||||
|
||||
void compileInline();
|
||||
@@ -0,0 +1,24 @@
|
||||
import { compile } from '@fumadocs/tailwind/compile';
|
||||
import { mkdir, writeFile } from 'node:fs/promises';
|
||||
import path from 'node:path';
|
||||
|
||||
export async function compileInline() {
|
||||
await mkdir('css/generated', { recursive: true });
|
||||
await writeFile(
|
||||
'css/generated/shared.css',
|
||||
compile([
|
||||
{
|
||||
base: path.resolve('src'),
|
||||
pattern: '{playground,scalar,ui}/**/*.{ts,tsx}',
|
||||
negated: false,
|
||||
},
|
||||
{
|
||||
base: path.resolve('src'),
|
||||
pattern: 'server/**/*.tsx',
|
||||
negated: false,
|
||||
},
|
||||
]),
|
||||
);
|
||||
|
||||
console.log('generated CSS files');
|
||||
}
|
||||
@@ -1,4 +1,5 @@
|
||||
import { defineConfig } from 'tsdown';
|
||||
import { compileInline } from './scripts/compile-inline.utils';
|
||||
|
||||
export default defineConfig({
|
||||
format: 'esm',
|
||||
@@ -17,5 +18,8 @@ export default defineConfig({
|
||||
dts: {
|
||||
sourcemap: false,
|
||||
},
|
||||
async onSuccess() {
|
||||
await compileInline();
|
||||
},
|
||||
external: [/json-schema-typed/, 'openapi-types'],
|
||||
});
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
@source '../../dist/layouts/docs/**/*.js';
|
||||
@@ -1 +0,0 @@
|
||||
@source '../../dist/layouts/flux/**/*.js';
|
||||
@@ -1 +0,0 @@
|
||||
@source '../../dist/layouts/home/**/*.js';
|
||||
@@ -1 +0,0 @@
|
||||
@source '../../dist/layouts/notebook/**/*.js';
|
||||
@@ -1,14 +1,12 @@
|
||||
@import './lib/base.css';
|
||||
|
||||
/* TODO: remove them on next major */
|
||||
@import './layouts/docs.css';
|
||||
@import './layouts/home.css';
|
||||
@import './layouts/notebook.css';
|
||||
@import './layouts/flux.css';
|
||||
@import './generated/docs.css';
|
||||
@import './generated/home.css';
|
||||
@import './generated/notebook.css';
|
||||
@import './generated/flux.css';
|
||||
|
||||
@source '../dist/*.js';
|
||||
@source '../dist/{components,contexts,provider,utils}/**/*.js';
|
||||
@source '../dist/layouts/shared/**/*.js';
|
||||
@import './generated/shared.css';
|
||||
|
||||
@theme {
|
||||
--animate-fd-collapsible-down: fd-collapsible-down 150ms cubic-bezier(0.45, 0, 0.55, 1);
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
import { compileInline } from './compile-inline.utils';
|
||||
|
||||
void compileInline();
|
||||
@@ -0,0 +1,44 @@
|
||||
import { compile } from '@fumadocs/tailwind/compile';
|
||||
import { mkdir, writeFile } from 'node:fs/promises';
|
||||
import path from 'node:path';
|
||||
|
||||
export async function compileInline() {
|
||||
await mkdir('css/generated', { recursive: true });
|
||||
await writeFile(
|
||||
'css/generated/shared.css',
|
||||
compile([
|
||||
{
|
||||
base: path.resolve('src'),
|
||||
pattern: '{components,contexts,provider,utils}/**/*.{ts,tsx}',
|
||||
negated: false,
|
||||
},
|
||||
{
|
||||
base: path.resolve('src'),
|
||||
pattern: 'layouts/shared/**/*.{ts,tsx}',
|
||||
negated: false,
|
||||
},
|
||||
{
|
||||
base: path.resolve('src'),
|
||||
pattern: '*.{ts,tsx}',
|
||||
negated: false,
|
||||
},
|
||||
]),
|
||||
);
|
||||
|
||||
const layouts = ['flux', 'notebook', 'home', 'docs'];
|
||||
|
||||
for (const layout of layouts) {
|
||||
await writeFile(
|
||||
`css/generated/${layout}.css`,
|
||||
compile([
|
||||
{
|
||||
base: path.resolve('src'),
|
||||
pattern: `layouts/${layout}/**/*.{ts,tsx}`,
|
||||
negated: false,
|
||||
},
|
||||
]),
|
||||
);
|
||||
}
|
||||
|
||||
console.log('generated CSS files');
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
import { defineConfig } from 'tsdown';
|
||||
import fs from 'node:fs/promises';
|
||||
import { compileInline } from './scripts/compile-inline.utils';
|
||||
|
||||
export default defineConfig({
|
||||
format: 'esm',
|
||||
@@ -14,8 +15,8 @@ export default defineConfig({
|
||||
dts: {
|
||||
sourcemap: false,
|
||||
},
|
||||
clean: false,
|
||||
async onSuccess() {
|
||||
await compileInline();
|
||||
// wait until https://github.com/rolldown/tsdown/issues/472
|
||||
let content = (await fs.readFile('dist/components/image-zoom.js')).toString();
|
||||
content = content.replaceAll(`import "./image-zoom2.js";`, `import "./image-zoom.css";`);
|
||||
|
||||
@@ -1 +1 @@
|
||||
@source '../dist/**/*.js';
|
||||
@source '../dist/client/**/*.js';
|
||||
|
||||
@@ -8,6 +8,7 @@ export default defineConfig({
|
||||
'./src/client/{index,with-control}.tsx',
|
||||
'./src/type-tree/index.ts',
|
||||
],
|
||||
unbundle: true,
|
||||
fixedExtension: false,
|
||||
dts: {
|
||||
sourcemap: false,
|
||||
|
||||
@@ -15,6 +15,10 @@
|
||||
],
|
||||
"type": "module",
|
||||
"exports": {
|
||||
"./compile": {
|
||||
"types": "./dist/compile.d.ts",
|
||||
"import": "./dist/compile.js"
|
||||
},
|
||||
"./typography": {
|
||||
"types": "./dist/typography/index.d.ts",
|
||||
"import": "./dist/typography/index.js"
|
||||
@@ -34,6 +38,7 @@
|
||||
"postcss-selector-parser": "^7.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/oxide": "^4.1.18",
|
||||
"@types/lodash.merge": "^4.6.9",
|
||||
"@types/node": "^25.1.0",
|
||||
"eslint-config-custom": "workspace:*",
|
||||
|
||||
@@ -1 +1,14 @@
|
||||
export function compile() {}
|
||||
import { Scanner, SourceEntry } from '@tailwindcss/oxide';
|
||||
|
||||
export function compile(sources: SourceEntry[]) {
|
||||
const scanner = new Scanner({
|
||||
sources,
|
||||
});
|
||||
|
||||
const lines: string[] = [];
|
||||
const names = scanner.scan();
|
||||
for (const name of names) {
|
||||
lines.push(`@source inline(${JSON.stringify(name)});`);
|
||||
}
|
||||
return lines.join('\n');
|
||||
}
|
||||
|
||||
@@ -8,4 +8,5 @@ export default defineConfig({
|
||||
dts: {
|
||||
sourcemap: false,
|
||||
},
|
||||
external: ['@tailwindcss/oxide'],
|
||||
});
|
||||
|
||||
Generated
+11
-6
Reference in New Issue
Block a user