Opens profile photo
Follow
Click to Follow markdalgleish
πŸŽ„πŸ§ Mark Dalgleish
@markdalgleish
πŸ¦„ CSS Modules co-creator / 🧁 Vanilla Extract / πŸ’Ώ at / organiser / dad x4
Melbourne, AustraliaJoined February 2011

πŸŽ„πŸ§ Mark Dalgleish’s Tweets

I've wanted this feature in TypeScript for so long. This is a really great video explaining why.
Quote Tweet
The `satisfies` operator in TypeScript 4.9 is a game changer Here is a quick overview of how it compares to a couple alternative ways of annotating types Learn more about the `satisfies` operator here: typescriptlang.org/docs/handbook/
Show this thread
Embedded video
1:53
70.2K views
1
160
Here's the trick. I'm using Babel to transform these: import "./styles.css"; require("./styles.css"); Into these: import "./styles.css?__remix_sideEffect__"; require("./styles.css?__remix_sideEffect__"); This allows them to be treated differently from existing CSS semantics.
4
11
Show this thread
Native support for leading trim coming to Figma! This is amazing news. Even though this has been addressed via plugins, including my own "Leading Trim", it's a bit awkward that trimming text requires a separate step. Having it natively built into Figma is obviously the ideal.
Quote Tweet
#Figma is working on β€œVertical trim” for texts!
Image
2
44
Screenshots look so boring. Photos of your screen are just way more ο½ο½…ο½“ο½”ο½ˆο½…ο½”ο½‰ο½ƒ.
Quote Tweet
I think I'm officially the first person to see a react-spectrum component rendering in @remix_run. cc @devongovettπŸ‘‡
Screenshot of a button labeled "Hello from Spectrum" highlighted in dev tools showing it's use of react-spectrum class names
1
24
vanilla extract’s API is so good! Building my first UI library with it, and making use of all the goodies like sprinkles for utility classes and recipes for variants feels like cheating. All the component styling logic now has become a single js object!
Image
12
I'm currently looking into CSS import side effects support in and it's already looking pretty promising. If you've had trouble trying to use npm packages that import CSS files from JS, we should hopefully have a solution for you soon!
2
86
Me: Hey Glen I'm in Melbourne, want to hang out? : Oh no, what have I signed up for : Yeah I'm not so sure about this guy either Well, hopefully I can make it worthwhile tomorrow at πŸ˜„ Come find out!
Taz pointing at Glen who's clearly not to blame
Taz disappointing Mark who's now reconsidering why he agreed to let Taz speak at MelbJS
Quote Tweet
πŸŽ‰ Only 1 day to go! Join us tomorrow night, 6pm at Culture Amp. Building 3D Websites and Apps using ThreeJS β€”@dr1337 Durable Objects for Dummies... Like Me β€”@evanderkoogh React Native Everywhere β€”@tazsingh ✍️ Register now at melbjs.com
1
13
Here's how I avoid the dreaded Flash of Light Modeβ„’ β€” while also supporting user toggling + local storage. Don't use media queries! Instead, use root-level selectors like html.dark. Then, add a tiny inline script tag before any visible content that applies the correct class.
10
262
Show this thread
This looks interesting. Optimizing compiler for Sprinkles πŸ¨πŸ‘€
Quote Tweet
[a month later] done βœ… I made a vite plugin to only generate & inject CSS that you actually use, even outside of css.ts (meaning even at runtime πŸ€“) this works no matter the size of your vanilla-extract/sprinkles config, tested with a config generating 177k CSS rules 1/n twitter.com/astahmer_dev/s…
Show this thread
2
30
My favourite thing about the codebase so far is that there's a script that generates a new playground app which runs against the local dev version of Remix. This is super handy if you're working on compiler features, like I am right now.
2
33
One challenge with CSS Modules is that CSS can get new custom identifiers at any time (e.g. grid line names, container names) which ideally get scoped automatically, but this is a huge change to the semantics of your CSS. Vanilla Extract fixes this since all scoping is explicit.
1
18
The test suite is pretty fun to work in. There's a test helper for generating an entire Remix app with all files defined via a JS object, then it spins up a server and lets you run Playwright tests against it. Super slick.
3
81
Someone needs to start a CSS dinner party. - Olive - Tomato - Wheat - Salmon - Bisque - BlanchedAlmond - Orange - Plum - Lime - HoneyDew - PapayaWhip - LemonChiffon - MintCream - PeachPuff
5
41
An underappreciated benefit of Vanilla Extract over CSS Modules is that dependencies between .css.ts files follow the semantics of JavaScript imports rather than CSS imports. This solves an entire class of potential ordering issues.
2
68
Hyped to be speaking at the legendary alongside this lineup, and to hang out with good friends 😍 What a way to end the year! See you soon, Melbourne! πŸ‘‹πŸ½
Quote Tweet
πŸŽ‰ Only 1 week to go! Join us next Wednesday, 6pm at Culture Amp for our last event of 2022! React Native Everywhere. β€”@tazsingh Building 3D Websites and Apps using ThreeJS. β€”@dr1337 Durable Objects for Dummies... Like Me. β€”@evanderkoogh ✍️ Register at melbjs.com
10
Almost 3 years later, I’m thankful to hang out with my brother once again while enjoying his content here at summit. He’s looking at β€œwhat actually makes it to your user’s browser” with vanilla-extract, which is very much the right question.
Mark presenting
Quote Tweet
Embedded video
GIF
πŸ”₯ Playroom is BLOWING MY MIND. This is a new level of UI and prototype development. Hot dang. I tip my hat, @markdalgleish! Check it out, I know I will! πŸ‘‡πŸΎ github.com/seek-oss/playr
Show this thread
12