7.12.2022 |

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:

image

Result:

image

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;

Lucas
Zur Übersicht

Mehr vom DevSquad...

Jan Sauer

Please tell me that this is fake

Sophia Brandt

Spotify im Terminal auf MacOS