✨ feat: styled 方法底层实现替换为 styled-component 以默认支持组件选择器

BREAKING CHANGES: 由于 emotion/react 版本的 styled 无法默认支持组件选择器。虽然可以用 babel-plugin 配置，但是太过于复杂，因此考虑直接替换为styled-components
ant-design · Feb 2, 2023 · 0ccbcaf · 0ccbcaf
1 parent 239158a
commit 0ccbcaf
Show file tree

Hide file tree

Showing 6 changed files with 169 additions and 37 deletions.
diff --git a/package.json b/package.json
@@ -73,6 +73,7 @@
     "@emotion/react": "^11",
     "@emotion/serialize": "^1",
     "@emotion/styled": "^11",
+    "styled-components": "beta",
     "use-merge-value": "^1"
   },
   "devDependencies": {
@@ -116,6 +117,7 @@
     "husky": "^8",
     "jest": "^29",
     "jest-environment-jsdom": "^29",
+    "jest-styled-components": "^7",
     "lint-staged": "^13",
     "lodash": "^4",
     "prettier": "^2",

diff --git a/src/containers/ThemeProvider/TokenContainer.tsx b/src/containers/ThemeProvider/TokenContainer.tsx
@@ -2,7 +2,7 @@ import { SerializedStyles } from '@emotion/serialize';
 import { ReactElement, useMemo } from 'react';
 
 import { useAntdTheme, useThemeMode } from '@/hooks';
-import { EmotionThemeProvider as Provider, reactCss } from '@/pedestal';
+import { PedestalProvider, reactCss } from '@/pedestal';
 import { convertStylishToString } from '@/utils/convertStylish';
 
 import { Theme } from '@/types';
@@ -62,7 +62,7 @@ const TokenContainer: <T, S>(props: TokenContainerProps<T, S>) => ReactElement |
     prefixCls,
   };
 
-  return <Provider theme={theme}>{children}</Provider>;
+  return <PedestalProvider theme={theme}>{children}</PedestalProvider>;
 };
 
 export default TokenContainer;
diff --git a/src/hooks/useTheme.ts b/src/hooks/useTheme.ts
@@ -16,7 +16,7 @@ export const useTheme = (): Theme => {
   );
 
   //  如果是个空值，说明没有套 Provider，返回 antdTheme 的默认值
-  if (Object.keys(defaultTheme).length === 0) {
+  if (!defaultTheme || Object.keys(defaultTheme).length === 0) {
     return initTheme;
   }
 

diff --git a/src/pedestal.ts b/src/pedestal.ts
@@ -1,11 +1,8 @@
-export {
-  css as reactCss,
-  ThemeProvider as EmotionThemeProvider,
-  useTheme,
-  withTheme,
-} from '@emotion/react';
+export { css as reactCss } from '@emotion/react';
+// styled 配套的
+export { ThemeProvider as PedestalProvider, useTheme, withTheme } from 'styled-components';
 
 //  styled 方法
 import type { CreateStyled } from '@/types';
-import _styled from '@emotion/styled';
-export const styled = _styled as CreateStyled;
+import _styled from 'styled-components';
+export const styled = _styled as unknown as CreateStyled;
diff --git a/tests/functions/__snapshots__/styled.test.tsx.snap b/tests/functions/__snapshots__/styled.test.tsx.snap
@@ -1,23 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`styled 使用 antd 主题样式 在 ThemeProvider 包裹下，能正常获得样式 1`] = `
-.emotion-0 {
+.c0 {
   width: 30px;
   color: #1677ff;
   background: #e6f4ff;
 }
 
 <div>
   <div
-    class="emotion-0"
+    class="c0"
   >
     自定义样式
   </div>
 </div>
 `;
 
 exports[`styled 使用 antd 主题样式 带有外部传参的方式 1`] = `
-.emotion-0 {
+.c0 {
   border-radius: 8px;
   padding: 24px;
   background: #ffffff;
@@ -26,15 +26,15 @@ exports[`styled 使用 antd 主题样式 带有外部传参的方式 1`] = `
 
 <div>
   <div
-    class="emotion-0"
+    class="c0"
   >
     卡片
   </div>
 </div>
 `;
 
 exports[`styled 使用 antd 主题样式 带有外部传参的方式 2`] = `
-.emotion-0 {
+.c0 {
   border-radius: 8px;
   padding: 24px;
   background: #1677ff;
@@ -43,23 +43,111 @@ exports[`styled 使用 antd 主题样式 带有外部传参的方式 2`] = `
 
 <div>
   <div
-    class="emotion-0"
+    class="c0"
   >
     卡片
   </div>
 </div>
 `;
 
 exports[`styled 使用 antd 主题样式 没有包裹 ThemeProvider 的情况下，找不到样式 1`] = `
-.emotion-0 {
+.c0 {
   width: 30px;
 }
 
 <div>
   <div
-    class="emotion-0"
+    class="c0"
   >
     自定义样式
   </div>
 </div>
 `;
+
+exports[`styled 嵌套组件选择 1`] = `
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  color: red;
+}
+
+.c2 {
+  background: dodgerblue;
+  color: white;
+  border: 0.4483809927850497px solid white;
+}
+
+.c2:focus,
+.c2:hover {
+  padding: 1em;
+}
+
+.c2 .otherClass {
+  margin: 0;
+}
+
+.c2 .c0 {
+  color: black;
+}
+
+<div>
+  <div>
+    <span
+      class="c0 c1"
+    >
+      <span
+        aria-label="smile"
+        class="anticon anticon-smile"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="smile"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
+          />
+        </svg>
+      </span>
+    </span>
+    <button
+      class="c2"
+    >
+      <span
+        class="c0 c1"
+      >
+        <span
+          aria-label="setting"
+          class="anticon anticon-setting"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="setting"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"
+            />
+          </svg>
+        </span>
+      </span>
+      按钮
+    </button>
+  </div>
+</div>
+`;
diff --git a/tests/functions/styled.test.tsx b/tests/functions/styled.test.tsx
@@ -1,5 +1,6 @@
 import { render } from '@testing-library/react';
 
+import { SettingOutlined, SmileOutlined } from '@ant-design/icons';
 import { styled, ThemeProvider } from 'antd-style';
 
 describe('styled', () => {
@@ -19,7 +20,10 @@ describe('styled', () => {
       `;
 
       const { container } = render(<App>自定义样式</App>);
-      expect(container).toHaveStyle({ color: undefined, background: undefined, width: 30 });
+
+      expect(container.firstChild).toHaveStyleRule('width', '30px');
+      expect(container.firstChild).toHaveStyleRule('color', undefined);
+      expect(container.firstChild).toHaveStyleRule('background', undefined);
       expect(container).toMatchSnapshot();
     });
 
@@ -31,12 +35,10 @@ describe('styled', () => {
       `;
 
       const { container } = render(<App>自定义样式</App>, { wrapper: ThemeProvider });
-      expect(container.firstChild).toHaveStyle({
-        width: '30px',
-        color: '#1677ff',
-        background: '#e6f4ff',
-      });
 
+      expect(container.firstChild).toHaveStyleRule('width', '30px');
+      expect(container.firstChild).toHaveStyleRule('color', '#1677ff');
+      expect(container.firstChild).toHaveStyleRule('background', '#e6f4ff');
       expect(container).toMatchSnapshot();
     });
 
@@ -50,25 +52,68 @@ describe('styled', () => {
       `;
       const { container, rerender } = render(<Card>卡片</Card>, { wrapper: ThemeProvider });
 
-      expect(container.firstChild).toHaveStyle({
-        borderRadius: '8px',
-        padding: '24px',
-        color: 'rgba(0,0,0,0.88)',
-        background: 'rgb(255, 255, 255)',
-      });
+      const content = container.firstChild;
+      expect(content).toHaveStyleRule('border-radius', '8px');
+      expect(content).toHaveStyleRule('padding', '24px');
+      expect(content).toHaveStyleRule('background', '#ffffff');
+      expect(content).toHaveStyleRule('color', 'rgba(0, 0, 0, 0.88)');
 
       expect(container).toMatchSnapshot();
 
       rerender(<Card primary>卡片</Card>);
 
-      expect(container.firstChild).toHaveStyle({
-        borderRadius: '8px',
-        padding: '24px',
-        background: '#1677ff',
-        color: 'rgb(255, 255, 255)',
-      });
+      expect(content).toHaveStyleRule('border-radius', '8px');
+      expect(content).toHaveStyleRule('padding', '24px');
+      expect(content).toHaveStyleRule('background', '#1677ff');
+      expect(content).toHaveStyleRule('color', '#fff');
 
       expect(container).toMatchSnapshot();
     });
   });
+
+  it('嵌套组件选择', () => {
+    const Icon = styled.span`
+      display: flex;
+      flex: 1;
+      color: red;
+    `;
+
+    const ButtonCtn = styled.button`
+      background: dodgerblue;
+      color: white;
+      border: ${Math.random()}px solid white;
+
+      &:focus,
+      &:hover {
+        padding: 1em;
+      }
+
+      .otherClass {
+        margin: 0;
+      }
+
+      ${Icon} {
+        color: black;
+      }
+    `;
+
+    const App = () => (
+      <div>
+        <Icon>
+          <SmileOutlined />
+        </Icon>
+
+        <ButtonCtn>
+          <Icon>
+            <SettingOutlined />
+          </Icon>
+          按钮
+        </ButtonCtn>
+      </div>
+    );
+
+    const { container } = render(<App />);
+
+    expect(container).toMatchSnapshot();
+  });
 });