From f01deb321834a93af905dcf9830dd47319750284 Mon Sep 17 00:00:00 2001 From: Hunter Tunnicliff Date: Thu, 2 Mar 2023 10:05:46 -0800 Subject: [PATCH 1/3] [mui-styled-engine] Add tagged template keys to `styled` --- packages/mui-styled-engine/src/index.d.ts | 4 ++-- packages/mui-styled-engine/src/index.js | 4 ++++ packages/mui-styled-engine/src/styled.test.js | 5 +++++ 3 files changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/mui-styled-engine/src/index.d.ts b/packages/mui-styled-engine/src/index.d.ts index 1130164844f7b0..36132ba2224bb7 100644 --- a/packages/mui-styled-engine/src/index.d.ts +++ b/packages/mui-styled-engine/src/index.d.ts @@ -1,5 +1,5 @@ import * as CSS from 'csstype'; -import { StyledComponent, StyledOptions } from '@emotion/styled'; +import { StyledComponent, StyledOptions, StyledTags } from '@emotion/styled'; import { PropsOf } from '@emotion/react'; export * from '@emotion/styled'; @@ -106,7 +106,7 @@ export interface CreateStyledComponent< SpecificComponentProps extends {} = {}, JSXProps extends {} = {}, T extends object = {}, -> { +> extends StyledTags { ( ...styles: Array> ): StyledComponent; diff --git a/packages/mui-styled-engine/src/index.js b/packages/mui-styled-engine/src/index.js index 2eb9a86b75674d..bb5c474726535a 100644 --- a/packages/mui-styled-engine/src/index.js +++ b/packages/mui-styled-engine/src/index.js @@ -26,6 +26,10 @@ export default function styled(tag, options) { return stylesFactory; } +Object.keys(emStyled).forEach((tag) => { + styled[tag] = emStyled[tag]; +}); + // eslint-disable-next-line @typescript-eslint/naming-convention export const internal_processStyles = (tag, processor) => { // Emotion attaches all the styles as `__emotion_styles`. diff --git a/packages/mui-styled-engine/src/styled.test.js b/packages/mui-styled-engine/src/styled.test.js index d7e51ee936932a..2fdbbcdbc3a2f8 100644 --- a/packages/mui-styled-engine/src/styled.test.js +++ b/packages/mui-styled-engine/src/styled.test.js @@ -1,4 +1,5 @@ import { expect } from 'chai'; +import emStyled from '@emotion/styled'; import styled from './index'; describe('styled', () => { @@ -11,4 +12,8 @@ describe('styled', () => { styled('span')(undefined, { color: 'red' }); }).toErrorDev('MUI: the styled("span")(...args) API requires all its args to be defined'); }); + + it('has primitive', () => { + expect(styled.div).to.equal(emStyled.div); + }); }); From f1f7fa1a05a28b109b5560ec184ee6650d0f8a65 Mon Sep 17 00:00:00 2001 From: Hunter Tunnicliff Date: Thu, 2 Mar 2023 10:22:09 -0800 Subject: [PATCH 2/3] [mui-styled-engine-sc] Add tagged template keys to `styled` --- packages/mui-styled-engine-sc/src/index.js | 4 ++++ packages/mui-styled-engine-sc/src/styled.test.js | 5 +++++ 2 files changed, 9 insertions(+) diff --git a/packages/mui-styled-engine-sc/src/index.js b/packages/mui-styled-engine-sc/src/index.js index c3abf854c79360..b08dd27847bdcf 100644 --- a/packages/mui-styled-engine-sc/src/index.js +++ b/packages/mui-styled-engine-sc/src/index.js @@ -36,6 +36,10 @@ export default function styled(tag, options) { return stylesFactory; } +Object.keys(scStyled).forEach((tag) => { + styled[tag] = scStyled[tag]; +}); + // eslint-disable-next-line @typescript-eslint/naming-convention export const internal_processStyles = (tag, processor) => { // Styled-components attaches an instance to `componentStyle`. diff --git a/packages/mui-styled-engine-sc/src/styled.test.js b/packages/mui-styled-engine-sc/src/styled.test.js index 959fb6a518d91b..6c5a08277ec1f0 100644 --- a/packages/mui-styled-engine-sc/src/styled.test.js +++ b/packages/mui-styled-engine-sc/src/styled.test.js @@ -1,5 +1,6 @@ import * as React from 'react'; import { expect } from 'chai'; +import scStyled from 'styled-components'; import { createRenderer } from 'test/utils'; import styled from '@mui/styled-engine-sc'; @@ -39,6 +40,10 @@ describe('styled', () => { expect(typeof styled('span').attrs).to.equal('undefined'); }); + it('has primitive', () => { + expect(styled.div).to.equal(scStyled.div); + }); + // The babel-plugin-styled-components depends on the withConfig option to be defined it("should allow styled-components's APIs: .withConfig", () => { expect(typeof styled('span').withConfig).to.equal('function'); From 600ca58825ef0bb2eb5645893447efd923521777 Mon Sep 17 00:00:00 2001 From: Hunter Tunnicliff Date: Fri, 3 Mar 2023 15:40:13 -0800 Subject: [PATCH 3/3] Fix use of StyledTags --- packages/mui-styled-engine/src/index.d.ts | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/packages/mui-styled-engine/src/index.d.ts b/packages/mui-styled-engine/src/index.d.ts index 36132ba2224bb7..2e24d2b6d4700f 100644 --- a/packages/mui-styled-engine/src/index.d.ts +++ b/packages/mui-styled-engine/src/index.d.ts @@ -1,5 +1,5 @@ import * as CSS from 'csstype'; -import { StyledComponent, StyledOptions, StyledTags } from '@emotion/styled'; +import { StyledComponent, StyledOptions, StyledTags as EmotionStyledTags } from '@emotion/styled'; import { PropsOf } from '@emotion/react'; export * from '@emotion/styled'; @@ -106,7 +106,7 @@ export interface CreateStyledComponent< SpecificComponentProps extends {} = {}, JSXProps extends {} = {}, T extends object = {}, -> extends StyledTags { +> { ( ...styles: Array> ): StyledComponent; @@ -136,11 +136,21 @@ export interface CreateStyledComponent< ): StyledComponent; } +export type StyledTags = { + [Tag in keyof JSX.IntrinsicElements]: CreateStyledComponent< + { + theme?: Theme; + as?: React.ElementType; + }, + JSX.IntrinsicElements[Tag] + >; +}; + export interface CreateMUIStyled< MUIStyledCommonProps extends {}, MuiStyledOptions, Theme extends object, -> { +> extends StyledTags { < C extends React.ComponentClass>, ForwardedProps extends keyof React.ComponentProps = keyof React.ComponentProps,