SSR style conflict will makes DatePicker dropdown flick in Firefox

[zombieJ]

Reproduction link

https://preview-38540-ant-design.surge.sh/~demos/components-date-picker-demo-range-picker/

Multiple @keyframe with same name will makes animation not work as expect in Firefox. The dumi plugin extracts the <style /> as css file which makes parse issue. We should provide a static way for handle this in @ant-design/cssinjs.

Steps to reproduce

Open week range picker.

What is expected?

No flick

What is actually happening?

Flick

Environment	Info
antd	5.0.0-beta.2
React	latest
System	IOS
Browser	Firefox

[zombieJ]

keyframes 那个还不够，reopen。

[zombieJ]

Wait for dumi node_modules runtime compile function. This seems related with React 18 but need more dig.

[xianghongai]

在 next.js 中报错：

error - /root/workspace/projects/feature/node_modules/antd/es/skeleton/style/index.js:1
import { Keyframes } from '@ant-design/cssinjs';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1088:15)
    at Module._compile (node:internal/modules/cjs/loader:1123:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
    at Module.load (node:internal/modules/cjs/loader:1037:32)
    at Module._load (node:internal/modules/cjs/loader:878:12)
    at Module.require (node:internal/modules/cjs/loader:1061:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at Object.<anonymous> (/root/workspace/projects/feature/node_modules/@ant-design/pro-skeleton/lib/index.js:61:1)
    at Module._compile (node:internal/modules/cjs/loader:1159:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
    at Module.load (node:internal/modules/cjs/loader:1037:32)
    at Module._load (node:internal/modules/cjs/loader:878:12)
    at Module.require (node:internal/modules/cjs/loader:1061:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at Object.<anonymous> (/root/workspace/projects/feature/node_modules/@ant-design/pro-descriptions/lib/index.js:18:43)
    at Module._compile (node:internal/modules/cjs/loader:1159:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
    at Module.load (node:internal/modules/cjs/loader:1037:32)
    at Module._load (node:internal/modules/cjs/loader:878:12)
    at Module.require (node:internal/modules/cjs/loader:1061:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at Object.<anonymous> (/root/workspace/projects/feature/node_modules/@ant-design/pro-components/lib/index.js:17:24)
    at Module._compile (node:internal/modules/cjs/loader:1159:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
    at Module.load (node:internal/modules/cjs/loader:1037:32)
    at Module._load (node:internal/modules/cjs/loader:878:12)
    at Module.require (node:internal/modules/cjs/loader:1061:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at @ant-design/pro-components (/root/workspace/projects/feature/.next/server/pages/pro-components.js:32:18)
    at __webpack_require__ (/root/workspace/projects/feature/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./pages/pro-components/index.jsx:9:84)
    at ./pages/pro-components/index.jsx (/root/workspace/projects/feature/.next/server/pages/pro-components.js:22:1)
    at __webpack_require__ (/root/workspace/projects/feature/.next/server/webpack-runtime.js:33:42)
    at __webpack_exec__ (/root/workspace/projects/feature/.next/server/pages/pro-components.js:62:39)
    at /root/workspace/projects/feature/.next/server/pages/pro-components.js:63:28
    at Object.<anonymous> (/root/workspace/projects/feature/.next/server/pages/pro-components.js:66:3)
    at Module._compile (node:internal/modules/cjs/loader:1159:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
    at Module.load (node:internal/modules/cjs/loader:1037:32)
    at Module._load (node:internal/modules/cjs/loader:878:12)
    at Module.require (node:internal/modules/cjs/loader:1061:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at Object.requirePage (/root/workspace/projects/feature/node_modules/next/dist/server/require.js:88:12)
    at /root/workspace/projects/feature/node_modules/next/dist/server/load-components.js:37:73
    at async Object.loadComponents (/root/workspace/projects/feature/node_modules/next/dist/server/load-components.js:37:26)
    at async DevServer.findPageComponents (/root/workspace/projects/feature/node_modules/next/dist/server/next-server.js:561:36)
    at async DevServer.renderPageComponent (/root/workspace/projects/feature/node_modules/next/dist/server/base-server.js:942:24)
    at async DevServer.renderToResponse (/root/workspace/projects/feature/node_modules/next/dist/server/base-server.js:971:32)
    at async DevServer.pipe (/root/workspace/projects/feature/node_modules/next/dist/server/base-server.js:407:25) {
  page: '/pro-components'

[UnkAtreus]

I have same issue when I import @ant-design/pro-components

[ciodc]

same problem in remix:

/root/remix-app/node_modules/antd/es/skeleton/style/index.js:1
import { Keyframes } from '@ant-design/cssinjs';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1159:20)
    at Module._compile (node:internal/modules/cjs/loader:1203:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1293:10)
    at Module.load (node:internal/modules/cjs/loader:1096:32)
    at Function.Module._load (node:internal/modules/cjs/loader:935:12)
    at Module.require (node:internal/modules/cjs/loader:1120:19)
    at require (node:internal/modules/helpers:112:18)
    at Object.<anonymous> (/root/remix-app/node_modules/@ant-design/pro-skeleton/lib/index.js:61:1)
    at Module._compile (node:internal/modules/cjs/loader:1239:14)