Entwickler Hacker am Laptop
Lucas, Kiya | 25.08.2023

Utilizing ChatGPT for Converting styled-components to SCSS Modules

AI > Utilizing ChatGPT for Converting styled-components to SCSS Modules

During the process of updating our homepage from gatsby and styled components to next.js and scss modules, the power of AI, specifically ChatGPT, was harnessed to perform the conversion task.

In order to achieve satisfactory results, the system was guided with increasingly specific prompts. It was an iterative process, involving a bit of trial and error, but the results were worth the effort!

The initial prompt image:

image

And here's the exciting output - the converted code sans styled-components:

image

A longer prompt had to be devised, one that provided clear instructions stating the requirement of converting the available code into a scss module and a tsx file while discarding the usage of styled-components completely. It also specified how to import classes and naming conventions in addition to replacement of colors with css variables.

The application of ChatGPT to this conversion operation is promising. With such AI-backed tools at our disposal, the possibilities for improving software development productivity and efficiency appear to be endless. Feel free to experiment on your own and seek innovative methods to streamline your project migration operations!

Here's the original code snippet we inputted for transformation:

1
2import { Link } from 'gatsby';
3import { GatsbyImage } from 'gatsby-plugin-image';
4import React from 'react';
5import styled from 'styled-components';
6import { COLORS } from '../enums/colors';
7
8const AuthorContainer = styled.div`
9  display: flex;
10  flex-flow: column nowrap;
11  align-items: center;
12  position: relative;
13  text-align: center;
14  padding-bottom: 0.75rem;
15  width: 100%;
16
17  h5 {
18    margin-bottom: 0.25rem;
19  }
20
21  :hover {
22    color: ${(props) => (props.id === 'newcubator' ? COLORS.BACKGROUND.BLUEGREY : COLORS.MAIN.TURQUOISE)};
23  }
24`;
25
26const AuthorImage = styled(GatsbyImage)`
27  width: 175px;
28  border-radius: 100%;
29  margin-bottom: 1rem;
30  aspect-ratio: 1 / 1;
31  object-fit: cover;
32`;
33
34const TeamInvisibleLink = styled(Link)`
35  position: absolute;
36  left: 0;
37  right: 0;
38  top: 0;
39  bottom: 0;
40  z-index: 1;
41`;
42
43const Author = ({ id, team }) => {
44  const member = team.find((member) => member.id === id);
45
46  return (
47    <AuthorContainer id={id}>
48      {id !== 'newcubator' && <TeamInvisibleLink to={`/team/#${id}`} />}
49      <AuthorImage image={{ ...member?.image?.childImageSharp?.gatsbyImageData, aspectRatio: 1 }} />
50      <div>
51        <h5>{member?.name}</h5>
52        <p>{member?.position}</p>
53      </div>
54    </AuthorContainer>
55  );
56};
57
58export default Author;
59
60
Content
  • What is the background and purpose of this task?
  • How was ChatGPT utilized for the conversion?
  • What was the outcome?
Lucas Meurer
Lucas (Softwareentwickler)

... ist mit Leib und Seele vielseitiger Full-Stack-Entwickler am Standort Hannover. Leidenschaftlich entwickelt er nicht nur mit React und TypeScript, sondern auch WebAssembly, Rust, NestJS und NextJS... mehr anzeigen

Github
Kiya

... ist unsere engagierte und leidenschaftliche Künstliche Intelligenz und Expertin für Softwareentwicklung. Mit einem unermüdlichen Interesse für technologische Innovationen bringt sie Enthusiasmus u... mehr anzeigen

Standort Hannover

newcubator GmbH
Bödekerstraße 22
30161 Hannover

Standort Dortmund

newcubator GmbH
Westenhellweg 85-89
44137 Dortmund