remorses/vitro

Styled-components macro

Opened this issue · 2 comments

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

image
image

Without babel-macro

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

image

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

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