search

LeaVerou / css-almanac

Repo for planning & voting on which stats to study
https://projects.verou.me/mavoice/?repo=leaverou/css-almanac&labels=proposed%20stat
34 stars 3 forks source link

CSS-in-JS #44

Open LeaVerou opened 4 years ago

LeaVerou commented 4 years ago

It would be good to see how popular the various CSS-in-JS approaches are, potentially breaking it down by library.

List of libraries and how to detect:

Implemented Solution How Example
YES styled-components data-styled attribute in style tag https://officeworks.com.au
YES radium data-radium attribute https://pixboost.com/customer
YES react-jss data-jss attribute https://cssinjs.org/react-todo-mvc
YES Goober id=_goober
YES emotion data-emotion attribute https://emotion.sh/docs/introduction
YES merge-styles data-merge-styles attribute https://developer.microsoft.com/en-us/fluentui#/
YES styled-jsx style element with id that starts from __jsx- https://vercel.com
YES aphrodite data-aphrodite attribute in <style> https://www.khanacademy.org
YES fela data-fela-stylesheet attribute in <style> https://www.ninjaconcept.com
YES styletron data-styletron attribute in <style> or class _styletron_hydrate_ in <style>
YES react-native-web <style> withid="react-native-stylesheet"` https://matchcenter.mlssoccer.com
YES glamorous data-glamor attribute in <style> https://glamorous.rocks/getting-started
cxs
react-css
glam
rockey

TODO: Add libraries from here https://github.com/MicheleBertoli/css-in-js

LeaVerou commented 4 years ago

I'm not familiar enough with CSS-in-JS libraries to assess whether this will need custom metrics. @rviscomi @obto @dooman87 what do you think?

rviscomi commented 4 years ago

Same, not familiar enough to say. :/

LeaVerou commented 4 years ago

Should I tweet?

dooman87 commented 4 years ago

I did work with "Styled Components" and "Radium" before. With those two we would need access to DOM elements I think. The reason is Radium creates inline style attribute and "Styled Components" generates classes in <head>. What we can do is list the most popular libraries and see how to detect them. For instance with styled components it generates following style tag with data attribute:

<style data-styled="jpDqth AcqWF cYruNB eVPJMi pjOvZ bRSZlc hXVSob jGkoiX eXRVK gMOhKT dnfbdi bWNGdG bcCdtZ hGnAqD  kwAkhS hmJOiz ejcpqo yFAHC eYDLzO pzBFL kjRIIH hFaIwV gEPGsj eXdNcs KLKWV cZVdAu ddnfPC yEJoX iXnecp hDcBdJ iQFeMU elbZlH btFRMG hfWeTb eOCaiG eeHooE ljvkVS cZZDkE jALpBU jSwHNN jPtQPG  gijXMi cxYgaX iNikeS kFQhfT gQiCsx kJPNoD jyTCoW dULyiI aeDJY kIFgGX iTxAtc bZiNdu fmNFqz khEENm bfblMP fCOZbt kYsYSH kCJtqQ juspqu jAnqjS kkdiik hfOjSY fccAgw jTEsgs gXsNKr jdlvAT hMpPpj kMdNAy cgwPaU jLJRiB iMwskL iCCrnt fBhngm eYcdpC xyocK npzLe iMyHCe eoJjtM kghFUl" data-styled-version="4.2.0">

I suppose all the above would require custom metrics, isn't it? @LeaVerou @rviscomi

LeaVerou commented 4 years ago

If we detect it this way, yes, it would require custom metrics. Would it be sufficient to test for the presence of these attributes together, or should we also check that their values conform to this format? What about other CSS-in-JS frameworks?

FWIW if we miss the deadline for custom metrics, we can detect it based on the libraries used on the page, though I believe that's less reliable.

dfosco commented 4 years ago

Could you crawl public github repos for mentions of each project in package.json files?

Wouldn't give you a full picture of course, but I feel it can be a good enough proxy number.

mxstbr commented 4 years ago

styled-components author here! :wave:

styled-components always attaches a style tag with the data-styled attribute. (that's how we find out which sites use it for our showcase :wink:) Old versions (pre-v4 I think) used data-styled-components, so if you check for data-styled(-components)? you should be able to cover all sites using it!

I'm not sure how you can detect other CSS-in-JS libraries unfortunately, as I'm not familiar with their internals.

I hope that helps!

itamark commented 4 years ago

data-styled is pretty reliable. But I see the author himself just wrote that 😂

LeaVerou commented 4 years ago

Could you crawl public github repos for mentions of each project in package.json files?

That would be an entirely different project. You can read a bit about the methodology of last year's Almanac here

eps1lon commented 4 years ago

Seems like JSS adds data-jss. /cc @kof

lunelson commented 4 years ago

I believe emotion does the same, data-emotion or similar; the exraction libs like astroturf and linaria may be harder to catch, unless maybe there's something characteristic about their scoped classname patterns

manuschillerdev commented 4 years ago

goober adds an <style id="_goober">...</style> element

dooman87 commented 4 years ago

I started putting code to detect libraries into our crawler here - https://github.com/HTTPArchive/legacy.httparchive.org/pull/175. Thanks everyone for the comments above - I'll add those in and if you know of any other libraries and how to detect it - please comment here :)

alex3683 commented 4 years ago

We use Microsoft Fluent UI as Frontend Library, which itself uses merge-styles. If I observed correctly, they add several elements like this to the head node of the HTML document:

<style data-merge-styles="true"></style>

OWA, which is AFAIK also based on Fluent UI, has those elements in the head as well.

sidorares commented 4 years ago

@LeaVerou some libraries also might add source maps ( mapping from compiled css back to original js / jsx ) - styled-jsx, emotion and https://github.com/atlassian-labs/compiled-css-in-js ( the latter also seems to always prefix generated class name with cc- )

rtsao commented 4 years ago

Heuristics for detecting styletron usage:

LeaVerou commented 4 years ago

@dooman87 This may be helpful in figuring out which libraries are the most popular: https://2019.stateofcss.com/technologies/

dooman87 commented 4 years ago

@LeaVerou @rviscomi I think we covered the most popular frameworks. I removed draft flag from the PR and it should be good to go.