re export styled from styled components macro not working

Question

I want to export styled-components/macro from my own .ts file but it is not working.

custom-styled.ts

import styled  from 'styled-components/macro'
import * as styledComponents from 'styled-components' 


import { ThemeInterface } from './theme'

const {
  css,
  createGlobalStyle,
  keyframes,
  withTheme,
  ThemeProvider,
} = styledComponents as styledComponents.ThemedStyledComponentsModule<ThemeInterface>


export { css, createGlobalStyle, keyframes, ThemeProvider, withTheme }
export default styled

App.tsx: when I import it directly from import styled from 'styled-components/macro' it gives intended debugging features. But when I try from my own file, there is a problem. Thank you beforehand.

I tried with export { css, createGlobalStyle, keyframes, ThemeProvider, withTheme, styled }. But without success.

import React from 'react';
import styled from './custom-styled'

const StyledContainer = styled.div`
background: black;
`
const StyledSpan = styled.span`
  color: white;
  font-size: 20px;
`

function App() {
    return (
        <StyledContainer>
            <StyledSpan>
                Test
            </StyledSpan>
        </StyledContainer>
    );
}

export default App;

Expected result should be:

Answer 1

If you are using typescript you must import @types/styled-components:

npm i @types/styled-components

Also needs babel-plugin-styled-components:

npm install --save-dev babel-plugin-styled-components

And create a .babelrc config file in the root derictory.

.babelrc

{
  "plugins": [
    [
      "babel-plugin-styled-components",
      {
        "ssr": true,
        "minify": true,
        "transpileTemplateLiterals": false,
        "pure": false,
        "displayName": false, // generate another classname
        "fileName": false, // generate another classname
        "preprocess": false
      }
    ]
  ]
}

App.tsx

import styled, {
  Thing,
  GlobalStyle,
  StyledContainer,
  StyledSpan
} from "./custom-styled";
import Reusable from "./Reusable";

const StyledContainer2 = styled(StyledContainer)``;
const StyledSpan2 = styled(StyledSpan)``;
const StyledSpan3 = styled(StyledSpan)`
  color: orange;
  font-weight: bold;
  font-size: 1.5em;
`;

function App() {
  return (
    <StyledContainer2>
      <GlobalStyle />
      <Thing>Thing from suctom-styled</Thing>
      <StyledSpan2>StyledSpan</StyledSpan2>
      <StyledSpan3>Extend StyledSpan</StyledSpan3>
      <Reusable />
    </StyledContainer2>
  );
}

export default App;

custom-styled.ts

import styled, {
  css,
  createGlobalStyle,
  keyframes,
  ThemeProvider
} from "styled-components/macro";

export const GlobalStyle = createGlobalStyle`
  body {
    overflow: hidden;
    background-color: lightcoral;
  }
`;
export const Thing = styled.div`
  color: red;
`;

const move = keyframes`
  50%{ transform: translateX(100px)}
`;

export const StyledContainer = styled.div`
  display: flex;
  flex-flow: column;
  background: black;
`;
export const StyledSpan = styled.span`
  color: white;
  font-size: 20px;
  animation: ${move} 2s linear infinite;
`;

export { css, createGlobalStyle, keyframes, ThemeProvider };
export default styled;

Reusable.tsx

import { Thing, StyledContainer, StyledSpan } from "./custom-styled";

function Reusable() {
  return (
    <StyledContainer>
      <Thing>Reusable Thing</Thing>
      <StyledSpan>Reusable StyledSpan</StyledSpan>
    </StyledContainer>
  );
}

export default Reusable;

DOM inspector local

React DevTool local