Styled-components macro

[drianoaz]

For a better debbuging expirence, it was necessary to import the package styled-components/macro because of the my project uses create-react-app.

When I try to write stories for this component, the following errors are happening:

The example of the code

// src/Heading/Heading.ts
import styled from 'styled-components/macro';

const Heading = styled.h1`
  font-size: 2rem;
  color: red;
`;

export default Heading;

// src/Heading/Heading.vitro.tsx
import React from 'react';
import Heading from './Heading';

export const Simple = ({}) => {
  return <Heading>adriano</Heading>;
};

The errors and warnings

Without babel-macro

When I don't use import styled-components / macro everything works perfectly:

[remorses]

i think styled-components/macro requires the babel plugin macros to work, currently it is not possible to add custom babel plugins but it will be possible soon

[remorses]

This is now possible with the bundless babel plugin

// vitro.config.js
const { BabelPlugin } = require('@bundless/plugin-babel')
/** @type {import('@vitro/cli').VitroConfig} */
module.exports = {
    globs: ['./**/*.vitro.js', './**/*.vitro.jsx', './**/*.vitro.tsx'],
    // backend: 'vite',
    bundlessConfig: {
        plugins: [
            BabelPlugin({
                babelOptions: {
                    plugins: [require('babel-plugin-macros')],
                },
            }),
        ],
    },
}

However, keep in mind that this becomes much slower because babel has to transpile the styled components bundle