ant-design/static-style-extract

Static-Style-Extract

Provide a lib like @ant-design/static-style-extract to support generate static css for SSR usage to generate raw css file for caching.

Install

npm install @ant-design/static-style-extract

Usage

import extractStyle from `@ant-design/static-style-extract`;

const cssText = extractStyle(); // :where(.css-bAMboOo).ant-btn ...

use with custom theme

import extractStyle from `@ant-design/static-style-extract`;

const cssText = extractStyle(); // :where(.css-bAMboOo).ant-btn ...

const cssText = extractStyle((node) => (
  <ConfigProvider theme={theme}>
    {node}
  </ConfigProvider>
));

Example

http://localhost:8000

online example: http://react-component.github.io/static-style-extract/

Development

npm install
npm start

Test Case

npm test

Coverage

npm run coverage

open coverage/ dir

License

static-style-extract is released under the MIT license.

static-style-extract's Issues

A warning is displayed when executing extractStyle() in Antd5

Hello.

Currently, when I proceeded with the implementation using the official procedure to make Antd5 work with SSR, the following warning is displayed when I execute extractStyle().

npm run dev

> predev
> ts-node --project ./tsconfig.node.json --esm ./scripts/genAntdCss.tsx

Warning: `children` of ResizeObserver is empty. Nothing is in observe.
Warning: [antd: BackTop] `BackTop` is deprecated. Please use `FloatButton.BackTop` instead.
Warning: [antd: Menu] `children` is deprecated. Please use `items` instead.
Warning: [antd: QRCode] need to receive `value` props
Warning: `children` of Tree is deprecated. Please use `treeData` instead.

Is there a way to solve this?

The environment and related code are as follows.

library	version
React	18.2.0
ts-node	10.9.2
antd	5.14.2
@ant-design/static-style-extract	1.0.2

genAntdCss.tsx

import React from 'react';
import fs from 'fs';
import { extractStyle } from "@ant-design/static-style-extract";
import { ConfigProvider } from "antd";
import { customTheme } from "../app/theme.js";

const outputPath = "./public/antd.min.css";

// ↓ Code that displays the warning
const css = extractStyle((node) => (
  <ConfigProvider theme={{ token: customTheme }} >
    {node}
  </ConfigProvider>
));

fs.writeFileSync(outputPath, css);

Ant Design Vue Equivalent

Can you work on an equivalent in Ant Design Vue. Much apprecitated

empty antd.min.css

when runing predev script to load the styles of antd.min.css empty

I am using nextjs with the help of the function
import fs from 'fs';
import { extractStyle } from '@ant-design/static-style-extract';
// import { ConfigProvider } from "antd";
// import React from "react";

const outputPath = './public/antd.min.css';

const css = extractStyle();

console.log(css.length);

fs.writeFileSync(outputPath, css);

console.log(🎉 Antd CSS generated at ${outputPath});

and the CSS is not generated

The full export isn't working as expected

The full export isn't working as expected, because selectors like :where(.css-190m0jy) are not applied without @ant-design/cssinjs.
Why is it important?
I can use @ant-design/cssinjs, but the initial server request time for each user will be approximately 2.7-3 seconds. This is unacceptable for modern applications. It's needed a way to include styles without specifying pseudo-classes to include styles using the link element.

Example with renderToPipeableStream

Can it be used together with React 18 streaming? If so, could you please provide an example of how to use it together with renderToPipeableStream

Antd version needs to match project antd version

Currently the package specifies the antd version in the dependencies as ^5.3.0. When using yarn as package manager, when upgrading the antd dependency in a project, yarn wants to keep the version previously installed for each dependency and copies the previously installed version to node_modules inside @ant-design/static-style-extract directory in node_modules. This causes two different versions of antd to be installed, which makes the themes not work when extracting the css. Instead of the current way of specifying the antd dependency, it would be better to put it inside peerDependencies, as is suggested in the documentation.

antd.min.css doesn't contain animations

The generated CSS file doesn't contain any animation which causes some problems when disabling the hashed option.

eg.: Dropdown Menus open when they should close and close when they should open.

ant-design/ant-design#41777

Issue with CSS Export Using "<StyleProvider hashPriority='high'>" in Antd5 Next.js

I am currently using the Antd5 with Next.js example repository available at https://github.com/ant-design/create-next-app-antd for my project.

I have added the <StyleProvider hashPriority="high"> component in order to maintain compatibility with older browsers, as recommended in the Antd documentation and the unit tests within this repository. According to these sources, using this configuration should result in CSS export without the :where tag.

However, even after implementing this change, I am still observing that the CSS is being exported with the :where tag.

I would greatly appreciate any guidance