Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[v3] add auto-import-theme-style option in nextra configuration #3220

Merged
merged 4 commits into from
Sep 11, 2024
Merged

[v3] add auto-import-theme-style option in nextra configuration #3220

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4d04cfe
[v3] add auto-import-theme-style option in nextra configuration
87xie Sep 10, 2024
c737112
remove the style field in `package.json`
87xie Sep 11, 2024
585f8a8
Update .changeset/red-rockets-perform.md
87xie Sep 11, 2024
aa5d7f8
dry in styles.css swr-site example
dimaMachina Sep 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/red-rockets-perform.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'nextra-theme-docs': patch
'nextra': patch
---

Add the `autoImportThemeStyle` option to the Nextra configuration. This allows users to import the official Nextra theme CSS into a specific cascade layer.
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,3 +13,4 @@ out/

tsup.config.bundled*
tsconfig.tsbuildinfo
pagefind/
3 changes: 2 additions & 1 deletion examples/swr-site/next.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,8 @@ export function getStaticProps() {
}
return pageMap
},
latex: true
latex: true,
autoImportThemeStyle: false
})

const withBundleAnalyzer = bundleAnalyzer({
Expand Down
1 change: 1 addition & 0 deletions examples/swr-site/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@
"@next/bundle-analyzer": "^13.4.19",
"autoprefixer": "^10.4.16",
"postcss": "^8.4.33",
"postcss-import": "^16.0.0",
"tailwindcss": "^3.4.1"
},
"nextBundleAnalysis": {
Expand Down
1 change: 1 addition & 0 deletions examples/swr-site/postcss.config.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
/** @type {import('postcss').Postcss} */
module.exports = {
plugins: {
'postcss-import': {},
tailwindcss: {},
autoprefixer: {}
}
Expand Down
29 changes: 12 additions & 17 deletions examples/swr-site/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,22 @@
@import 'nextra-theme-docs/dist/style.css' layer(nextra-base);

@tailwind utilities;

.dark .invert-on-dark {
filter: invert(1) brightness(1.8);
}

body {
background:
linear-gradient(
to bottom,
rgba(255, 255, 255, 0) 0%,
rgb(var(--nextra-bg)) 300px
),
fixed 0 0 / 20px 20px radial-gradient(#d1d1d1 1px, transparent 0),
fixed 10px 10px / 20px 20px radial-gradient(#d1d1d1 1px, transparent 0);
}
--bg-dot-color: #d1d1d1;

.dark & {
--bg-dot-color: #313131;
}

.dark body {
background:
linear-gradient(
to bottom,
rgba(0, 0, 0, 0) 0%,
rgb(var(--nextra-bg)) 300px
),
fixed 0 0 / 20px 20px radial-gradient(#313131 1px, transparent 0),
fixed 10px 10px / 20px 20px radial-gradient(#313131 1px, transparent 0);
linear-gradient(to bottom, transparent, rgb(var(--nextra-bg)) 300px),
fixed 0 0 / 20px 20px
radial-gradient(var(--bg-dot-color) 1px, transparent 0),
fixed 10px 10px / 20px 20px
radial-gradient(var(--bg-dot-color) 1px, transparent 0);
}
3 changes: 2 additions & 1 deletion packages/nextra/src/server/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,8 @@ export const DEFAULT_CONFIG = {
search: {
codeblocks: true
},
codeHighlight: true
codeHighlight: true,
autoImportThemeStyle: true
} satisfies Partial<NextraConfig>

export const OFFICIAL_THEMES = ['nextra-theme-docs', 'nextra-theme-blog']
Expand Down
5 changes: 3 additions & 2 deletions packages/nextra/src/server/loader.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,8 @@ export async function loader(
codeHighlight,
transform,
mdxOptions,
locales
locales,
autoImportThemeStyle
} = this.getOptions()

const mdxPath = this._module?.resourceResolveData
Expand Down Expand Up @@ -106,7 +107,7 @@ export const getStaticProps = () => ({ notFound: true })`

const cssImports = `
${latex ? "import 'katex/dist/katex.min.css'" : ''}
${OFFICIAL_THEMES.includes(theme) ? `import '${theme}/style.css'` : ''}`
${OFFICIAL_THEMES.includes(theme) && autoImportThemeStyle ? `import '${theme}/style.css'` : ''}`

if (currentPath.includes('/pages/_app.')) {
isAppFileFromNodeModules = currentPath.includes('/node_modules/')
Expand Down
3 changes: 2 additions & 1 deletion packages/nextra/src/server/schemas.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,8 @@ export const nextraConfigSchema = z
recmaPlugins: z.custom<ProcessorOptions['recmaPlugins']>(),
format: z.enum(['detect', 'mdx', 'md']),
rehypePrettyCodeOptions: z.custom<RehypePrettyCodeOptions>()
})
}),
autoImportThemeStyle: z.boolean()
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we should use Zod's .default(true)? And for other properties declared in DEFAULT_CONFIG object, so this object can be removed?

Copy link
Contributor Author

@87xie 87xie Sep 11, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems that we need to remove .deepPartial() for the expected default values to work. This might lead to many unintended changes beyond this PR, and I'm worried about potentially breaking something 😰

Copy link
Collaborator

@dimaMachina dimaMachina Sep 11, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you are right, no worries! I did this refactor in #2569 PR

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The nextraConfigSchema in #2569 looks way better!

})
// eslint-disable-next-line deprecation/deprecation -- fixme
.deepPartial()
Expand Down
54 changes: 25 additions & 29 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading