Using ChatGPT to convert styled-components to scss modules
We're currently in the process of migrating our homepage from gatsby and styled components to next.js and scss modules. I was curious if I could use chatgpt to do the conversion for me. I had to be pretty specific in my prompt but then after some trail and error it worked surprisingly well:
Prompt:
Result:
Full Prompt:
Convert and split the following code into a scss module and a tsx file, using the classes from the scss module in the new tsx file. Stop using styled-components. Import the classes like this: import styles from "./Author.module.scss". Use camelCase for class names and ignore the html element selector. To get the colors, use css variables, e.g. var(--color-platinum). Reply in a code block. Let me know if you have further questions!
import { Link } from 'gatsby';
import { GatsbyImage } from 'gatsby-plugin-image';
import React from 'react';
import styled from 'styled-components';
import { COLORS } from '../enums/colors';
const AuthorContainer = styled.div`
display: flex;
flex-flow: column nowrap;
align-items: center;
position: relative;
text-align: center;
padding-bottom: 0.75rem;
width: 100%;
h5 {
margin-bottom: 0.25rem;
}
:hover {
color: ${(props) => (props.id === 'newcubator' ? COLORS.BACKGROUND.BLUEGREY : COLORS.MAIN.TURQUOISE)};
}
`;
const AuthorImage = styled(GatsbyImage)`
width: 175px;
border-radius: 100%;
margin-bottom: 1rem;
aspect-ratio: 1 / 1;
object-fit: cover;
`;
const TeamInvisibleLink = styled(Link)`
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 1;
`;
const Author = ({ id, team }) => {
const member = team.find((member) => member.id === id);
return (
<AuthorContainer id={id}>
{id !== 'newcubator' && <TeamInvisibleLink to={`/team/#${id}`} />}
<AuthorImage image={{ ...member?.image?.childImageSharp?.gatsbyImageData, aspectRatio: 1 }} />
<div>
<h5>{member?.name}</h5>
<p>{member?.position}</p>
</div>
</AuthorContainer>
);
};
export default Author;
Standort Hannover
newcubator GmbH
Bödekerstraße 22
30161 Hannover
Standort Dortmund
newcubator GmbH
Westenhellweg 85-89
44137 Dortmund