Create styled-components to Tailwind converting flow #10
Conversation
src/CSStoTailwind.ts
Outdated
| let tailwindClasses = "" | ||
|
|
||
| cssRules.forEach((rule) => { | ||
| if (rule.includes("{")) { |
There was a problem hiding this comment.
not sure what "{" means in that context, could we extract it to a well named const variable? CASED_LIKE_THIS
src/CSStoTailwind.ts
Outdated
| @@ -0,0 +1,100 @@ | |||
| export function convertToTailwindCSS(cssCode: string): string { | |||
| const cssRules = cssCode.split("}").map((rule) => rule.trim()) | |||
There was a problem hiding this comment.
same as below remark ⬇️
src/CSStoTailwind.ts
Outdated
| const [selectors, declarations] = rule.split("{").map((part) => part.trim()) | ||
| const selectorClasses = getSelectorClasses(selectors) | ||
| const declarationClasses = getDeclarationClasses(declarations) | ||
| if (selectorClasses !== "") { |
There was a problem hiding this comment.
let's avoid if {} else statments, exit the function early instead of using else
src/CSStoTailwind.ts
Outdated
| if (selectorClasses !== "") { | ||
| tailwindClasses += `${selectorClasses} { ${declarationClasses} }\n\n` | ||
| } else { | ||
| tailwindClasses += `${declarationClasses}\n\n` |
There was a problem hiding this comment.
what's the reasoning behind adding \n\n? could we document it here? If it is possible to document it using only code then great, if it's not then use comments
|
|
||
| function getTailwindClass(property: string, value: string): string | null { | ||
| const propertyMappings: Record<string, Record<string, string>> = { | ||
| backgroundColor: { |
There was a problem hiding this comment.
looks awesome, good job 🖖🏻
| import { convertToTailwindCSS } from "../src/CSStoTailwind" | ||
| import { stripWhitespace } from "./test-utils" | ||
|
|
||
| describe("#convertToTailwind", () => { |
There was a problem hiding this comment.
let's add add a a few more tests:
- a one that converts invalid CSS property to tailwind
- a one that converts prefixed CSS property to tailwind (e.g. --webkit)
- a shorthand CSS property with spaces - tailwind doesn't support spaces in arbitrary values and you have to use
_instead AFAIK (e.g. padding: 1rem 3rem 3rem 2rem) - a CSS property with decimal
test/CSStoTailwind.test.js
Outdated
| const input = `.mzoqw { background-color: white; color: red; font-size: 1rem; margin: 4rem; }` | ||
| const result = convertToTailwindCSS(input) | ||
|
|
||
| expect(stripWhitespace(result)).toEqual(expect.stringContaining("{bg-whitetext-red-500text-basem-16}")) |
There was a problem hiding this comment.
I don't like the lack of spaces in the output, can't we use stripWhitespaces on input instead? (everywhere)
test/index.test.js
Outdated
| import { convertToTailwindCSS } from "../src/CSStoTailwind" | ||
|
|
||
| describe("styled-components to TailwindCSS converter flow", () => { | ||
| it("Should correctly transform valid JS input including styled-components into TailwindCSS utility classes", () => { |
There was a problem hiding this comment.
awesome, for the DEMO purposes you can add some timeouts in between each step
| \` | ||
| ` | ||
|
|
||
| expect(() => transformCodeToAST(input)).toThrowError(/^Input is not valid JavaScript code/) |
There was a problem hiding this comment.
let's also add expect here that confirm it doesn't throw any other error
expect(() => transformCodeToAST(input)).not.toThrowError(/^gugugaga/)
| }, | ||
| "include": ["src/**/*"] | ||
| "include": ["src", "dist/exampleInput.jsx", "dist/index.js"], |
There was a problem hiding this comment.
we probably don't need these files
|
Awesome work. I left some remarks, mainly about tests and foundations (that we haven't set up before) of the project. I think it would be best if we created a copy of that branch (locally) for tomorrows DEMO and kept working on this very branch |
No description provided.