Skip to content

Commit e35a79c

Browse files
Mil4n0rMil4n0r
authored
Merge pull request #2248 from dxc-technology/jialecl-emotion
emotion migration to remove styled components
2 parents e7da1f7 + 455b380 commit e35a79c

File tree

119 files changed

+3582
-3284
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

119 files changed

+3582
-3284
lines changed

‎apps/website/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@
1010
"dependencies": {
1111
"@cloudscape-design/components": "^3.0.706",
1212
"@dxc-technology/halstack-react": "*",
13+
"@emotion/react": "^11.14.0",
14+
"@emotion/styled": "^11.14.0",
1315
"@radix-ui/react-popover": "^1.0.7",
1416
"cross-env": "^7.0.3",
1517
"next": "^14.2.30",
@@ -21,16 +23,14 @@
2123
"react-live": "^4.1.7",
2224
"react-markdown": "^8.0.7",
2325
"sharp": "^0.33.3",
24-
"slugify": "^1.6.5",
25-
"styled-components": "^5.3.3"
26+
"slugify": "^1.6.5"
2627
},
2728
"devDependencies": {
2829
"@dxc-technology/typescript-config": "*",
2930
"@types/node": "^20",
3031
"@types/react": "^18",
3132
"@types/react-color": "^3.0.6",
3233
"@types/react-dom": "^18",
33-
"@types/styled-components": "5.1.29",
3434
"eslint": "^8",
3535
"eslint-config-next": "14.2.4",
3636
"typescript": "^5.6.3"

‎apps/website/pages/_document.tsx‎

Lines changed: 1 addition & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,6 @@
1-
import Document, { DocumentContext, Head, Html, Main, NextScript } from "next/document";
2-
import { ServerStyleSheet } from "styled-components";
1+
import Document, { Head, Html, Main, NextScript } from "next/document";
32

43
export default class MyDocument extends Document {
5-
static async getInitialProps(ctx: DocumentContext) {
6-
const sheet = new ServerStyleSheet();
7-
const originalRenderPage = ctx.renderPage;
8-
9-
try {
10-
ctx.renderPage = () =>
11-
originalRenderPage({
12-
enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),
13-
});
14-
15-
const initialProps = await Document.getInitialProps(ctx);
16-
return {
17-
...initialProps,
18-
styles: (
19-
<>
20-
{initialProps.styles}
21-
{sheet.getStyleElement()}
22-
</>
23-
),
24-
};
25-
} finally {
26-
sheet.seal();
27-
}
28-
}
29-
304
render() {
315
return (
326
<Html lang="en">

‎apps/website/screens/common/Code.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { ReactNode } from "react";
2-
import styled, { css } from "styled-components";
2+
import styled from "@emotion/styled";
3+
import { css } from "@emotion/react";
34

45
const codeStyles = css`
56
background-color: var(--color-bg-primary-lighter);

‎apps/website/screens/common/CodeBlock.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { ReactNode, useState } from "react";
22
import { DxcButton, DxcContainer, DxcFlex } from "@dxc-technology/halstack-react";
3-
import styled from "styled-components";
3+
import styled from "@emotion/styled";
44

55
const PreformattedText = styled.pre`
66
background-color: var(--color-bg-neutral-lighter);

‎apps/website/screens/common/Figure.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import styled from "styled-components";
1+
import styled from "@emotion/styled";
22
import { DxcFlex } from "@dxc-technology/halstack-react";
33
import { ReactNode } from "react";
44

‎apps/website/screens/common/HeaderDescriptionCell.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import styled from "styled-components";
1+
import styled from "@emotion/styled";
22

33
const HeaderDescriptionCell = styled.th`
44
min-width: 300px;

‎apps/website/screens/common/HeadingLink.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import styled from "styled-components";
1+
import styled from "@emotion/styled";
22
import slugify from "slugify";
33
import { DxcBleed, DxcHeading, DxcTooltip } from "@dxc-technology/halstack-react";
44
import { responsiveSizes } from "../common/variables";

‎apps/website/screens/common/MainContent.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useToast } from "@dxc-technology/halstack-react";
22
import { ReactNode, useState, useEffect } from "react";
3-
import styled from "styled-components";
3+
import styled from "@emotion/styled";
44
import { responsiveSizes } from "./variables";
55

66
const MainContainer = styled.div`

‎apps/website/screens/common/PageLayout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import styled from "styled-components";
1+
import styled from "@emotion/styled";
22
import { responsiveSizes } from "../common/variables";
33

44
const PageLayout = styled.div`

‎apps/website/screens/common/Placeholder.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import styled from "styled-components";
1+
import styled from "@emotion/styled";
22

33
/**
44
* Styled component used in the examples of the layout components:

0 commit comments

Comments
 (0)