css-almanac
css-almanac copied to clipboard
LeaVerou
CSS-in-JS
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> with id="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
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?
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
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.
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.
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!
data-styled is pretty reliable. But I see the author himself just wrote that 😂
Could you crawl public github repos for mentions of each project in
package.jsonfiles?
That would be an entirely different project. You can read a bit about the methodology of last year's Almanac here
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
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 :)
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.
@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- )
Heuristics for detecting styletron usage:
- Older versions:
<style data-styletron> - Newer versions:
<style class="_styletron_hydrate_">(this is the default, but the class name is technically configurable)
@dooman87 This may be helpful in figuring out which libraries are the most popular: https://2019.stateofcss.com/technologies/
@LeaVerou @rviscomi I think we covered the most popular frameworks. I removed draft flag from the PR and it should be good to go.