Styled-components macro
Opened this issue · 2 comments
drianoaz commented
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 commented
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 commented
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