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.

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

[zero] Move extendTheme to its own subpath #41204

Merged
merged 1 commit into from
Feb 21, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
3 changes: 3 additions & 0 deletions packages/zero-next-plugin/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import type { NextConfig } from 'next';
import { findPagesDir } from 'next/dist/lib/find-pages-dir';
import {
webpack as zeroWebpackPlugin,
extendTheme,
type PluginOptions as BaseZeroPluginConfig,
} from '@mui/zero-unplugin';

Expand Down Expand Up @@ -81,3 +82,5 @@ export function withZeroPlugin(nextConfig: NextConfig, zeroConfig: ZeroPluginCon
webpack,
};
}

export { extendTheme };
Copy link
Member

Choose a reason for hiding this comment

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

Why do we need to reexport it from the plugin? I am afraid that it might be confusing for users especially with auto import/autocomplete in IDE.

Copy link
Contributor Author

@brijeshb42 brijeshb42 Feb 21, 2024

Choose a reason for hiding this comment

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

It'll reduce the mental overhead for users trying to import this.
Ideally, they should only think of @mui/zero-runtime imports to be imported only in their source code, not in the config files outside the source.
They should only use bundler specific package in their config and zero runtime in source code.
That's why in the main export of zero runtime, I've only added what you could similarly import from emotion.
Other exports are in subpaths mainly to share same logic across different bundler plugins that we'll support.

Copy link
Member

Choose a reason for hiding this comment

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

Got it. What's your thought @mnajdova ?

Copy link
Member

Choose a reason for hiding this comment

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

They should only use bundler specific package in their config and zero runtime in source code.

In general this makes sense to me 👍

1 change: 1 addition & 0 deletions packages/zero-runtime/.gitignore
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
/processors/
/utils/
/extendTheme/
2 changes: 1 addition & 1 deletion packages/zero-runtime/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -319,7 +319,7 @@ const { withZeroPlugin, extendTheme } = require('@mui/zero-next-plugin');

module.exports = withZeroPlugin(
{
// ...other nextConfig
// ...nextConfig
},
{
theme: extendTheme({
Expand Down
12 changes: 11 additions & 1 deletion packages/zero-runtime/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,8 @@
"utils",
"package.json",
"styles.css",
"theme"
"theme",
"extendTheme"
],
"exports": {
".": {
Expand All @@ -83,6 +84,15 @@
"require": "./theme/index.js",
"default": "./theme/index.js"
},
"./extendTheme": {
"types": "./extendTheme/index.d.ts",
"import": {
"default": "./extendTheme/index.mjs",
"types": "./extendTheme/index.d.mts"
},
"require": "./extendTheme/index.js",
"default": "./extendTheme/index.js"
},
"./styles.css": {
"default": "./styles.css"
},
Expand Down
2 changes: 1 addition & 1 deletion packages/zero-runtime/src/extendTheme.ts
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ export type Theme = ExtendTheme;
/**
* A utility to tell zero-runtime to generate CSS variables for the theme.
*/
export default function extendTheme<
export function extendTheme<
Options extends {
colorScheme: string;
tokens: Record<string, any>;
Expand Down
2 changes: 0 additions & 2 deletions packages/zero-runtime/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,3 @@ export { default as keyframes } from './keyframes';
export { generateAtomics, atomics } from './generateAtomics';
export { default as css } from './css';
export { default as createUseThemeProps } from './createUseThemeProps';
export { default as extendTheme } from './extendTheme';
export type { Theme, ExtendTheme } from './extendTheme';
7 changes: 7 additions & 0 deletions packages/zero-runtime/tsup.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,13 @@ export default defineConfig([
...baseConfig,
entry: ['./src/index.ts', './src/theme.ts'],
},
{
...baseConfig,
entry: {
index: './src/extendTheme.ts',
},
outDir: 'extendTheme',
},
{
...baseConfig,
entry: processors.map((fn) => `./src/processors/${fn}.ts`),
Expand Down
5 changes: 4 additions & 1 deletion packages/zero-unplugin/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,8 @@ import {
generateTokenCss,
generateThemeTokens,
} from '@mui/zero-runtime/utils';
import type { Theme as BaseTheme } from '@mui/zero-runtime';
import type { Theme as BaseTheme } from '@mui/zero-runtime/extendTheme';
import { extendTheme } from '@mui/zero-runtime/extendTheme';

type NextMeta = {
type: 'next';
Expand Down Expand Up @@ -341,3 +342,5 @@ export const webpack = plugin.webpack as unknown as UnpluginFactoryOutput<
PluginOptions,
WebpackPluginInstance
>;

export { extendTheme };
2 changes: 1 addition & 1 deletion packages/zero-vite-plugin/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import {
generateTokenCss,
generateThemeTokens,
} from '@mui/zero-runtime/utils';
import type { Theme } from '@mui/zero-runtime';
import type { Theme } from '@mui/zero-runtime/extendTheme';
import { transformAsync } from '@babel/core';
import baseZeroVitePlugin, { type VitePluginOptions } from './zero-vite-plugin';

Expand Down
Loading