feat: add a sample styled components migration workflow (#174)

Author: morgante

.grit/workflows/styled.ts

@@ -0,0 +1,50 @@
+import * as grit from '@getgrit/api';
+
+export async function execute(options: grit.WorkflowOptions) {
+  const transformResult = await grit.stdlib.transform(
+    {
+      objective: `You are an expert software engineer working on a migration from styled-components to Tailwind CSS.
+      Given a styled component, you must migrate it a simple component with appropriate Tailwind classes.`,
+      principles: ['Use the twMerge library to conditionally combine classes.'],
+      model: 'slow',
+      query: 'or { js"styled.$_`$_`", js"styled($_)`$_`" }',
+      examples: [
+        {
+          input: `const StyledComponent = styled(({ backgroundColor, ...otherProps }) => (
+  <MyContainer {...otherProps} />
+))\`
+  position: relative;
+  background-color: \${({ backgroundColor }) => backgroundColor};
+\`;`,
+          replacements: [
+            `({backgroundColor, ...otherProps}) => {
+  const bgColorClass = backgroundColor ? \`bg-\${backgroundColor}\` : '';
+  const className = twMerge(\`relative \${bgColorClass}\`);
+  return (
+    <MyContainer className={className} {...otherProps} />
+  );
+}`,
+          ],
+        },
+      ],
+    },
+    {},
+  );
+  if (!transformResult.success) return transformResult;
+  await grit.stdlib.apply(
+    {
+      query: `js"twMerge" as $mg where { $mg <: ensure_import_from(source=js"'tailwind-merge'") }`,
+    },
+    { paths: transformResult.paths },
+  );
+  await grit.stdlib.apply(
+    {
+      query: `js"import $_ from 'styled-components'" => .`,
+    },
+    { paths: transformResult.paths },
+  );
+  return {
+    success: true,
+    message: `Successfully migrated ${transformResult.paths.length} files.`,
+  };
+}

samples/styled.in.tsx

@@ -0,0 +1,17 @@
+import styled, { css } from 'styled-components';
+
+export const Button = styled.a<{ $primary?: boolean }>`
+  background: transparent;
+  border-radius: 3px;
+
+  &:hover {
+    filter: brightness(0.85);
+  }
+
+  ${(props) =>
+    props.$primary &&
+    css`
+    background: red;
+    color: black;
+  `}
+`;