Analyze Sass stylesheets

LeaVerou commented 3 years ago

We could get HUGE insight about what CSS authors need by analyzing Sass stylesheets. We can find URLs to Sass files from the CSS files that have sourcemaps and there is a JS-based Sass parser. This will give us insight not just into the current state of CSS, but perhaps more importantly, its future.

The things we could study span all areas of the outline. Here are some initial ideas

Selectors

[x] How common is nesting (&)? How many levels?
[ ] ~How frequently are variables used in selectors?~
[ ] ~How common are placeholder selectors and what are their most common names?~

Variables

[x] How commonly are CSS variables and Sass variables combined?
[x] What are the most common variable names?

Control flow / maintainability

I'm most excited about studying these, because they are things that absolutely cannot be done in CSS today, so it would be illuminating to see how much they are used and for what.

[x] What are the most common mixin names? What percentage is just declarations and what percentage contains rules? How many rules on average?
[x] How much are control flow statements used? (@if, @else, @for, @each etc)
[x] What about the if() function?
[x] How common are custom functions? How many are there in the average Sass stylesheet? What are the most common function names?

Colors

[x] How commonly used is each color extraction/manipulation function? (this will also be very useful for developing CSS Color 5)

LeaVerou commented 3 years ago

Alright, this was a fun night. I think I've finally gotten to a point where we can have useful data from this.

Code: https://github.com/LeaVerou/css-almanac/blob/master/runtime/sass.js Sample data from a variety of websites: https://gist.github.com/LeaVerou/5d02efb07945d595b70f5ecdc69057b7 Most significantly, this is the output from getbootstrap.com: https://gist.github.com/LeaVerou/5d02efb07945d595b70f5ecdc69057b7#file-getbootstrap-com-json

In general it's a very compact data structure. It gets big on huge stylesheets, like the Bootstrap one which is 600KB (!). It was also relatively rare to find websites with publicly accessible sourcemaps AND SCSS files, so I think this is going to very minimally increase the size of the dataset.

Since the stats are done with regexes and not a proper parser, I wasn't able to reliably measure all of the above, but I got quite close. This code measures:

Size of SCSS stylesheet
Variable names and usage count
Function definitions, arguments, return value, call count
Built-in function, names, call count
@mixin names, parameters and usage count per mixin
@if statement conditions, @else if conditions, @else presence
@for, @each, @while count and parameters
@extend statement and parameters.
Custom error messages (@error)
Number of CSS custom properties using SCSS variables
Number of & used for nesting (one of the most inaccurate heuristics)

In addition to these Sass metrics, it also measures:

Number of remote and inline stylesheets (on runtime, which may be different than what we find by analyzing markup)
Number of sourcemaps in CSS files
Extensions of source files (so it also computes #41 )

To try it on any website, run this in the console:

import("https://leaverou.github.io/css-almanac/runtime/sass.js");

I will send a PR to add it to custom metrics shortly (Edit: Done).

rviscomi commented 3 years ago

What are the most common mixin names? What percentage is just declarations and what percentage contains rules? How many rules on average?

Did you end up exposing data on declarations and rules? I only see data on parameters and invocation count.

LeaVerou commented 3 years ago

No, it was really difficult to do properly without a parser.

rviscomi commented 3 years ago

Thanks for confirming. I made some more progress on these queries and I have a few remaining questions before closing this out:

How frequently are variables used in selectors? How common are placeholder selectors and what are their most common names?

I don't think these are covered by the JS. Can you confirm?

How commonly used is each color extraction/manipulation function? What about the if() function?

I wrote a query to get all of the top built-in function names. Results here for reference. Are these questions answered by that one query?

How commonly are CSS variables and Sass variables combined?

How did you see this question being answered with the variablesCombined field? Should I return the number of keys for both "value" and "name" fields? Should these stats be aggregated as a distribution of the number of combined variables per page? Here's some example data for reference:

{
  "value": {
    "--font-family-sans-serif": "#{inspect($font-family-sans-serif)};",
    "--font-family-monospace": "#{inspect($font-family-monospace)};"
  },
  "name": {
    "--#{$color}": "#{$value}",
    "--breakpoint-#{$bp}": "#{$value}"
  }
}

LeaVerou commented 3 years ago

Thanks for confirming. I made some more progress on these queries and I have a few remaining questions before closing this out:

How frequently are variables used in selectors? How common are placeholder selectors and what are their most common names?

I don't think these are covered by the JS. Can you confirm?

Confirmed.

How commonly used is each color extraction/manipulation function? What about the if() function?

I wrote a query to get all of the top built-in function names. Results here for reference. Are these questions answered by that one query?

Yes. I see there are 130 rows there, are these all, or were the number of results in the rows limited by the query?

How commonly are CSS variables and Sass variables combined?

How did you see this question being answered with the variablesCombined field? Should I return the number of keys for both "value" and "name" fields? Should these stats be aggregated as a distribution of the number of combined variables per page? Here's some example data for reference:
{
  "value": {
    "--font-family-sans-serif": "#{inspect($font-family-sans-serif)};",
    "--font-family-monospace": "#{inspect($font-family-monospace)};"
  },
  "name": {
    "--#{$color}": "#{$value}",
    "--breakpoint-#{$bp}": "#{$value}"
  }
}

I suppose the easiest would be "How many Sass stylesheets do this?" or how many times (by percentile) they do it, separately for name and value. It may also be interesting to see if there are any commonalities in the names, though I suspect Bootstrap will be driving a lot of this.

rviscomi commented 3 years ago

Yes. I see there are 130 rows there, are these all, or were the number of results in the rows limited by the query?

The results are limited to functions called 1,000+ times. Let me know how far you'd like to dig into the tail and I can adjust.

rviscomi commented 3 years ago

I suppose the easiest would be "How many Sass stylesheets do this?" or how many times (by percentile) they do it, separately for name and value.

Note that the custom metric is aggregated at the page level, so I don't think it's feasible to differentiate/count by stylesheet. Are these metrics still ok with you at the page level?

See the results for three more metrics on the subject of combined variables. Let me know if you have any questions about the metrics/results, otherwise we can close this out.

LeaVerou commented 3 years ago

Yeah, calculating it on "pages with Sass" is fine!

LeaVerou / css-almanac