The dream that turned into nightmare !
 ..and how we wake up Radoslav Stankov

!

Radoslav Stankov @rstankov rstankov.com

https://tips.rstankov.com

No content

No content

... in a start up

... far far way

... in Silicon Valley

No content

No content

No content

"Dream" is short for "the dream to not write custom CSS". Let's hope v2 is not named "Nightmare" ! Goals - Have consistent UI on the website - Make it easier to build new pages - Implement Product Hunt v6 design - Fully type safe What - Foundational utilities - Core UI components

"Dream" is short for "the dream to not write custom CSS". Let's hope v2 is not named "Nightmare" ! Goals - Have consistent UI on the website - Make it easier to build new pages - Implement Product Hunt v6 design - Fully type safe What - Foundational utilities - Core UI components !

Core Design System - 4px grid - font size - font weights - color tokens - layouts

No content

No content

No content

No content

No content

No content

The core components part

No content

No content

import { Flex } from 'ph/components/dream'

No content

import { Layout } from 'ph/components/dream'

No content

import { Button } from 'ph/components/dream'

import { Button } from 'ph/components/dream'

const onClick = useOnClick(props);

No content

No content

import { Form } from 'ph/components/dream'

No content

No content

No content

import { Text } from '~/components/dream' Title Subtile Bold

{content} {content} {content} {content} {content}

{content} {content} {content} {content} {content}

{content} {content} {content} {content} {content}

{content} {content} {content} {content} {content}

{content} {content} {content} {content} {content}

No content

No content

interface IProps extends ITextCSSProps { children: React.ReactNode; className?: string; as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'strong' | 'p' | 'div' | 'i' | 'legend' | 'details' | 'footer' | 'summary'; id?: string; onClick?: React.MouseEventHandler; format?: boolean; noOfLines?: INoOfLines; center?: boolean; target?: '_blank' | '_self'; 'data-test'?: string; 'aria-label'?: string; ellipsis?: boolean; } export default function Text({ children, className, as, id, color = 'darker-grey', fontSize = 16, fontWeight = 400, format = false, center = false, noOfLines, 'data-test': dataTest, onClick, ellipsis, ...otherProps }: IProps) { const finalClassName = classNames( dreamCSSClasses({ ...otherProps, color, fontSize, fontWeight, noOfLines }), className, format && styles.format, center && styles.center, ellipsis && styles.ellipsis, ); const Component = as ?? 'div'; return ( {children} ); }

dreamCSSClasses(props)

export function deprecatedDreamCSSClasses(props: IDreamCSS) { let classes: string = ''; const propNames = Object.keys(props); for (const propName of propNames) { const propValue = props[propName]; if (!ALLOWED_PROPS[propName]) { continue; } if (typeof propValue === 'object') { classes = classesForObject(classes, propName, propValue); } else { classes = classesForProps(classes, propName, propValue); } } return classes.trim(); } function classesForObject(classes: string, prop: string, props: any) { if (isNotSet(props.widescreen) && props.desktop) { props.widescreen = props.desktop; }

function classesForObject(classes: string, prop: string, props: any) { if (isNotSet(props.widescreen) && props.desktop) { props.widescreen = props.desktop; } if (isNotSet(props.tablet) && props.mobile) { props.tablet = props.mobile; } const modifiers = Object.keys(props); for (const modifier of modifiers) { const propValue = props[modifier]; if (modifier === 'l') { classes = classesForProps(classes, prop, propValue); } else { classes = classesForProps(classes, `${prop}-${modifier}`, propValue); } } return classes; } function classesForProps(classes: string, propName: string, propValue: any) { if (typeof propValue === 'boolean' && propValue) { classes += `${propName}-default `; } else {

const modifiers = Object.keys(props); for (const modifier of modifiers) { const propValue = props[modifier]; if (modifier === 'l') { classes = classesForProps(classes, prop, propValue); } else { classes = classesForProps(classes, `${prop}-${modifier}`, propValue); } } return classes; } function classesForProps(classes: string, propName: string, propValue: any) { if (typeof propValue === 'boolean' && propValue) { classes += `${propName}-default `; } else { classes += `${propName}-${propValue} `; } return classes; } function isNotSet(value) { return typeof value === 'undefined' || value === null; }

No content

No content

! Problem #1 - CSS bundle size All possible class names must be pre-generated and included in the CSS bundle because they are generated dynamically.

! Problem #1 - CSS bundle size gap: 14 sizes * 5 variants = 46 margin: 7 props * 14 sizes * 5 variants = 350 padding: 7 props * 14 sizes * 5 variants = 350 colors: 2 props * 12 colors * 5 variants = 120 ... ... total: ~2000 class names !

No content

! Problem #2 - too many loops dreamCSSClasses was called for many components to build their class names. This results in loops and variable generation, resulting in many GCs and slowing rendering. Especially the initial rendering.

! Problem #2 - too many loops dreamCSSClasses was called for many components to build their class names. This results in loops and variable generation, resulting in many GCs and slowing rendering. Especially the initial rendering.

! Problem #2 - too many loops

! Problem #2 - too many loops 2000+ calls to dreamCSSClasses for single render

No content

! Problem #3 - too many props Core components like Text and Flex, accepted subsets of dreamCSSClasses props, leading to overcomplicated code.

No content

interface IProps extends ITextCSSProps { children: React.ReactNode; className?: string; as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'strong' | 'p' | 'div' | 'i' | 'legend' | 'details' | 'footer' | 'summary'; id?: string; onClick?: React.MouseEventHandler; format?: boolean; noOfLines?: INoOfLines; center?: boolean; target?: '_blank' | '_self'; 'data-test'?: string; 'aria-label'?: string; ellipsis?: boolean; } export default function Text({ children, className, as, id, color = 'darker-grey', fontSize = 16, fontWeight = 400, format = false, center = false, noOfLines, 'data-test': dataTest, onClick, ellipsis, ...otherProps }: IProps) { const finalClassName = classNames( dreamCSSClasses({ ...otherProps, color, fontSize, fontWeight, noOfLines }), className, format && styles.format, center && styles.center, ellipsis && styles.ellipsis, ); const Component = as ?? 'div'; return ( {children} ); }

No content

No content

No content

Project: Wakeup

Project: Wakeup

No content

- Button and useOnClick(prop) - Form components - interface of dream components was consistent - developers were able to build really fast ! The good

- CSS bundle size - performance - spacing props - very complicated core components - core components accepted a lot of props - still needed custom css for borders/shadows - a lot of nesting of core components like Text / Flex ! The bad

- a lot of "as=" props complicating everything - Flex component wasn't flexible enough - Text component was too complex - designers were constrained - dream was desktop first ! The ugly

- a lot of "as=" props complicating everything - Flex component wasn't flexible enough - Text component was too complex - designers were constrained - dream was desktop first ! The ugly pun intended !

dreamCSSClasses(props)

dreamCSSClasses(props)

https://tips.rstankov.com/p/tips-for-tailwind-css

No content

Step 1: Unify Dream and Tailwind class names Step 2: Replace dreamCSSClasses with "tw" helper Step 3: Inline "Flex" and "Text" Step 4: Switch to Tailwind Step 5: Replace "tw" with "eslint-plugin-tailwindcss" ⚔ Battle plan "

Step 1: Unify Dream and Tailwind class names Step 2: Replace dreamCSSClasses with "tw" helper Step 3: Inline "Flex" and "Text" Step 4: Switch to Tailwind Step 5: Replace "tw" with "eslint-plugin-tailwindcss" ⚔ Battle plan "

{content} {content} {content} {content}

! "

Step 1: Unify Dream and Tailwind class names Step 2: Replace dreamCSSClasses with "tw" helper Step 3: Inline "Flex" and "Text" Step 4: Switch to Tailwind Step 5: Replace "tw" with "eslint-plugin-tailwindcss" ⚔ Battle plan "

! "

! "

! " // NOTE(rstankov): List only what is being used // - All properties can be found here - https://tailwindcss.com/docs/utility-first // - PurgeCSS text searches the app, so if a value is in this list it is included in bundle, however interpolation makes sure we don't include all colors type ITailwindClassNames = | 'antialiased' | 'border' | 'cursor-pointer' | `m${IDirection}-${IDistanceWithAuto}` | `w-${IDistanceWithFull}` // ... list all classNames used in the system type IColors = 'brand' | 'gray-50' | 'gray-400' | 'gray-900' | 'white'; type IDirection = 'x' | 'y' | 't' | 'r' | 'b' | 'l'; type IDistance = 0 | 1 | '1.5' | 2 | 4 | 5 | 6 | 8 | 12 | 16 | 40; type IDistanceWithFull = 'full' | IDistance | '3xl'; type IDistanceWithAuto = 'auto' | IDistance; type ISize = 'lg' | 'xl' | '4xl'; type IBreakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl'; // NOTE(rstankov): Check if strings contains only Tailwind classes // Explanation how this works: // - https://www.kirillvasiltsov.com/writing/type-check-tailwind-css/ export type ITailwind = S extends `${infer Class} ${infer Rest}` ? Class extends ITailwindClassNames ? `${Class} ${ITailwind}` : never : S extends `${infer Class}` ? Class extends ITailwindClassNames ? S : never : never; // NOTE(rstankov): Helper to verify class names listed match available Tailwind class names export default function tw(classes: ITailwind) { return classes; }

! " https://jscodeshift.com/

import { Button, Text, dm } from 'ph/components/dream'; import { Text, dm } from 'ph/components/dream'; import Button from 'ph/components/dream/Button'; jscodeshift -t transform.js components/*.tsx

module.exports = function(fileInfo, api, options) { const j = api.jscodeshift; const root = j(fileInfo.source); // Find import declarations from 'ph/components/dream' root.find(j.ImportDeclaration, { source: { type: 'Literal', value: 'ph/components/dream', }, }) .forEach(path => { let buttonImportSpecifier = path.value.specifiers.find( specifier => specifier.imported && specifier.imported.name === 'Button' ); // If Button is imported from the package, modify the import statement if (buttonImportSpecifier) { // Remove Button from the original import path.value.specifiers = path.value.specifiers.filter(specifier => specifier.imported.name !== 'Button'); // If after removing Button there are no specifiers left, remove the whole import statement if (path.value.specifiers.length === 0) { j(path).remove(); } // Create a new import declaration for Button const newImportDeclaration = j.importDeclaration( [j.importDefaultSpecifier(j.identifier('Button'))], j.literal('ph/components/dream/Button') ); // Insert the new import declaration after the original one j(path).insertAfter(newImportDeclaration); } }); return root.toSource({quote: 'single'}); };

No content

! "

No content

No content

! May flow "

- add starting sample - provide a lot of examples - negative statement (like DON'T) don't work mostly - start new chat sessions often, LLMs are autoregressive - it will get you to 80% and will get stuck - stop using it when stuck ! Prompting Tips "

Step 1: Unify Dream and Tailwind class names Step 2: Replace dreamCSSClasses with "tw" helper Step 3: Inline "Flex" and "Text" Step 4: Switch to Tailwind Step 5: Replace "tw" with "eslint-plugin-tailwindcss" ⚔ Battle plan "

No content

April 2 ! (intentional)

Recap

https://tips.rstankov.com