RSS FeedTwitterMastodonBlueskyShare IconHeart IconGithub IconArrow IconClock IconGUI Challenges IconHome IconNote IconBlog IconCSS IconJS IconHTML IconShows IconGit IconSpeaking IconTools Icon
A series of images of an avatar doing a bunch of skateboard tricks.

TcsS - Typed Cascade Style Sheets

Why hasn't this been made yet? CSS has all the type information needed to create a comparable experience to TypeScript.

The TS logo and the CSS logo combine into a TcsS logo

Join the conversation on

  • Elly Loel ✨🌱
  • Jordan Dingle
  • Oliver
  • Erik J Brown
  • unpunnyfuns
  • ユイト
  • David
  • Wagner 💎⚡️👨‍💻
  • Alberto Silva
  • Wade Hammes
  • Vi Pro
  • NekoChan 🌸
  • Fynn Becker
  • Fynn Becker
  • mmurden
  • Ari Palo
  • Florian Geierstanger
  • Bruce B Anderson
  • bLaCkwEw
  • Osama BCK
  • Mapl3.eth | zildine.hi
  • ⁠꒪⁠꒳⁠꒪
  • priya joseph
  • Tanner Hodges
  • Cory Etzkorn
  • CNine
  • techie quickhatch ⚛ 🐾 (Айті Росомаха)

@ppk could be overlooked by the "real programmers" ya

Adam ArgyleAdam Argyle

@argyleink Preface: I haven't read your article yet.

Would something like typed CSS solve a commonly had issue?


@jerryD sure! here's a couple examples

place-contant: center - would have a red squiggly under the type in place-content

display: gird - invalid value

width: red - <color> not a valid <length>

font-size: clamp(1rem, fit-content, 3rem) - fit-content isn't a valid <length> in this function

stuff like this!

Adam ArgyleAdam Argyle

@argyleink vanilla-extract is probably the closest thing, but like, it's not CSS at that point. it's TS.

someone needs to make a superset of CSS (like SCSS) with types and autocomplete, especially for things like gradients and shadows.

it could also be built into CSS maybe. i've also asked for this multiple times in surveys. the closest thing we might have is `@property` but that's only for custom properties

Mayank :verified:Mayank :verified:

@hi_mayank yep exactly, vanilla extract is still TS providing the DX. there's room for this superset! and if it produced an AST that things like Vite and other bundlers could use, you may get to pull some of JS's fingers out of CSS's business, since now the bundlers can pull it into the graph without JS.

Adam ArgyleAdam Argyle

@argyleink ...because "it's not a programming language" ... ?

ppk 🇪🇺ppk 🇪🇺

@argyleink More seriously, that actually makes perfect sense: you can literally type-check syntax & values


@argyleink If there was ever a moment that was ripe for such an intervention, this is certainly it!

What would be the mechanism for such a check do you think? What would a validator query against?


@oliverturner all the specs! they've already outlined what types can go where, what params functions take and their types, and much much more.

Adam ArgyleAdam Argyle

@hi_mayank TSCSS ooooOOOoooo, rad name combo right there. cc @mia

Adam ArgyleAdam Argyle

@argyleink I’m kind of shocked that it never occurred to me to wonder about this. I suspect that back in the day I simply internalised browsers’ *application* of CSS as a black box that one reasons about indirectly?


@oliverturner perhaps!?

this is like the 4th time I've rang this gong lol. as TS gets more popular I get more antsy to help get similar DX for CSS.

Adam ArgyleAdam Argyle

@argyleink That would certainly be a spicy way to hold vendors to account for their implementations 😀


@oliverturner the CSSOM is already a manifestation of types and the ability to crawl through the map 🤓

Adam ArgyleAdam Argyle

@argyleink please no. We are *just* getting to where CSS has absorbed enough from SCSS that we can finally get rid of pre-processors.

Half of the measure of progress of core web tech is being able to finally bin the bullshit stack required to compile “how we write it” into “what we wrote”.

Hard pass.

Matt WilcoxMatt Wilcox

@argyleink I think it's a pretty difficult lift when you get into details. Do we need to know the unique syntax of 700+ properties? How do we keep that up to date? Do we track browser support? Are we only checking value types, or also valid values? Both 'grid' and 'gord' are the same 'ident' type, but only one is a value for display.

And after solving all that, you're still limited to parse-time errors, unless you implement DOM & cascade. At which point you have a full browser… with dev tools.

Miriam SuzanneMiriam Suzanne

@alvaromontoro @jerryD @argyleink Yeah, there are very few issues where you'd need to add custom typing to CSS. Only if you want to add extra restrictions for a design system, like to only use your declared variables for colours or something.

For most cases, the issue is that the tools people are using to edit CSS aren't giving feedback about errors. However, the in-browser Dev tools are starting to add that. And maybe that's where it needs to stay, so it can stay up to date?

Amelia Bellamy-RoydsAmelia Bellamy-Royds

@argyleink Pre-processors & linters do some of these things that don't require maintaining a database of all possible properties/values. And it might be reasonable to write a Sass library with validation wrappers for CSS functions. Sass core does that with eg CSS color functions. But that all falls apart once custom properties/currentColor get the cascade involved.

PostCSS might be able to validate custom prop syntax against against `@property`? Again, that only gets you part way.

Miriam SuzanneMiriam Suzanne

@cobra_winfrey @argyleink If we slip it into a spec, will anyone notice?

Miriam SuzanneMiriam Suzanne

@mia @argyleink all I really want now is stroke-linecap: gord

Adam KuhnAdam Kuhn

@argyleink I dislike this idea a lot tbh. CSS needn’t try to appeal to „Programmers“, it’s beauty is that it appeals to other demographics. It should remain this beacon. CSS shouldn’t be more programmer friendly.

Thomas Michael SemmlerThomas Michael Semmler

@argyleink Is there something like JS doc for CSS?

Florian GeierstangerFlorian Geierstanger

@AmeliaBR would the `color()` function cover the color case?

Alvaro MontoroAlvaro Montoro

Crawl the CSS Webring?

previous sitenext site
a random site