mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-27 20:49:53 +08:00
Code Issues Actions 39 Packages Projects Releases Wiki Activity

chore: use cssinjs adv mode (#35370)

Browse Source
This commit is contained in:
二货机器人 2022-05-03 21:34:30 +08:00 committed by GitHub
parent 61141cc52c
commit 6e2eff2836
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 88 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -191,7 +191,7 @@
"antd-img-crop": "^4.0.0",
"array-move": "^4.0.0",
"babel-plugin-add-react-displayname": "^0.0.5",
"bisheng": "^3.2.1",
"bisheng": "^3.4.0",
"bisheng-plugin-description": "^0.1.4",
"bisheng-plugin-react": "^1.2.0",
"bisheng-plugin-toc": "^0.4.4",

22
site/bisheng.config.js
View File

@ -1,7 +1,9 @@
const path = require('path');
const replaceLib = require('@ant-design/tools/lib/replaceLib');
const { extractStyle } = require('@ant-design/cssinjs');
const getWebpackConfig = require('@ant-design/tools/lib/getWebpackConfig');
const { ESBuildMinifyPlugin } = require('esbuild-loader');
const fs = require('fs-extra');
const { version } = require('../package.json');
const themeConfig = require('./themeConfig');
@ -27,6 +29,8 @@ function alertBabelConfig(rules) {
});
}
const ssrCssFileName = `ssr-${Date.now()}.css`;
module.exports = {
port: 8001,
hash: true,
@ -175,6 +179,24 @@ module.exports = {
disableHostCheck: !!process.env.DEV_HOST,
},
postManifest: origin => {
const clone = {
...origin,
css: [...origin.css, ssrCssFileName],
};
return clone;
},
postBuild: () => {
const styleText = extractStyle(global.styleCache);
const styleTextWithoutStyleTag = styleText
.replace(/<style\s[^>]*>/g, '')
.replace(/<\/style>/g, '');
fs.writeFileSync(`./_site/${ssrCssFileName}`, styleTextWithoutStyleTag, 'utf8');
},
htmlTemplateExtraData: {
isDev,
},

121
site/theme/template/Layout/index.jsx
View File

@ -5,6 +5,7 @@ import { IntlProvider } from 'react-intl';
import { presetPalettes, presetDarkPalettes } from '@ant-design/colors';
import themeSwitcher from 'theme-switcher';
import { setTwoToneColor } from '@ant-design/icons';
import { StyleProvider, createCache } from '@ant-design/cssinjs';
import { Helmet, HelmetProvider } from 'react-helmet-async';
import 'moment/locale/zh-cn';
import { ConfigProvider } from 'antd';
@ -65,6 +66,12 @@ const themeConfig = {
};
const { switcher } = themeSwitcher(themeConfig);
// Pass to global since bisheng do not have the process for wrapper
const styleCache = createCache();
if (typeof global !== 'undefined') {
global.styleCache = styleCache;
}
export default class Layout extends React.Component {
static contextType = SiteContext;
@ -246,65 +253,67 @@ export default class Layout extends React.Component {
? '基于 Ant Design 设计体系的 React UI 组件库，用于研发企业级中后台产品。'
: 'An enterprise-class UI design language and React UI library with a set of high-quality React components, one of best React UI library for enterprises';
return (
<SiteContext.Provider value={{ isMobile, direction, theme, setTheme, setIframeTheme }}>
<HelmetProvider context={helmetContext}>
<Helmet encodeSpecialCharacters={false}>
<html
lang={appLocale.locale === 'zh-CN' ? 'zh' : 'en'}
data-direction={direction}
className={classNames({
[`rtl`]: direction === 'rtl',
})}
/>
<title>{title}</title>
<link
rel="apple-touch-icon-precomposed"
sizes="144x144"
href="https://gw.alipayobjects.com/zos/antfincdn/UmVnt3t4T0/antd.png"
/>
<meta name="description" content={description} />
<meta property="og:title" content={title} />
<meta property="og:type" content="website" />
<meta
property="og:image"
content="https://gw.alipayobjects.com/zos/rmsportal/rlpTLlbMzTNYuZGGCVYM.png"
/>
</Helmet>
<IntlProvider
locale={appLocale.locale}
messages={appLocale.messages}
defaultLocale="en-US"
>
<ConfigProvider
locale={appLocale.locale === 'zh-CN' ? zhCN : null}
direction={direction}
theme={{
token: designToken,
hashed: hashedStyle,
}}
<StyleProvider cache={styleCache}>
<SiteContext.Provider value={{ isMobile, direction, theme, setTheme, setIframeTheme }}>
<HelmetProvider context={helmetContext}>
<Helmet encodeSpecialCharacters={false}>
<html
lang={appLocale.locale === 'zh-CN' ? 'zh' : 'en'}
data-direction={direction}
className={classNames({
[`rtl`]: direction === 'rtl',
})}
/>
<title>{title}</title>
<link
rel="apple-touch-icon-precomposed"
sizes="144x144"
href="https://gw.alipayobjects.com/zos/antfincdn/UmVnt3t4T0/antd.png"
/>
<meta name="description" content={description} />
<meta property="og:title" content={title} />
<meta property="og:type" content="website" />
<meta
property="og:image"
content="https://gw.alipayobjects.com/zos/rmsportal/rlpTLlbMzTNYuZGGCVYM.png"
/>
</Helmet>
<IntlProvider
locale={appLocale.locale}
messages={appLocale.messages}
defaultLocale="en-US"
>
<Header {...restProps} changeDirection={this.changeDirection} />
{children}
<DynamicTheme
componentName={this.props.params?.children?.replace('-cn', '')}
defaultToken={{
...designToken,
<ConfigProvider
locale={appLocale.locale === 'zh-CN' ? zhCN : null}
direction={direction}
theme={{
token: designToken,
hashed: hashedStyle,
}}
onChangeTheme={newToken => {
console.log('Change Theme:', newToken);
const { hashed, ...restToken } = newToken;
this.setState({
designToken: restToken,
hashedStyle: hashed,
});
}}
/>
</ConfigProvider>
</IntlProvider>
</HelmetProvider>
</SiteContext.Provider>
>
<Header {...restProps} changeDirection={this.changeDirection} />
{children}
<DynamicTheme
componentName={this.props.params?.children?.replace('-cn', '')}
defaultToken={{
...designToken,
hashed: hashedStyle,
}}
onChangeTheme={newToken => {
console.log('Change Theme:', newToken);
const { hashed, ...restToken } = newToken;
this.setState({
designToken: restToken,
hashedStyle: hashed,
});
}}
/>
</ConfigProvider>
</IntlProvider>
</HelmetProvider>
</SiteContext.Provider>
</StyleProvider>
);
}
}