Usage of named lines syntax when creating grid tracks

[rachelandrew]

Are people naming lines? Anecdotally I didn't see a lot of use of this until the last year, I'm getting more questions about it recently and it feels as if it was something people found an extra complexity but now they are using grid more they find it is useful. I'd be interested to know if the stats bear that out.

[LeaVerou]

How would the algorithm for measuring that look like @rachelandrew? What kinds of properties and values would we be looking for?

[rachelandrew]

square brackets in the track listing, so anything like:

grid-template-columns: [foo-start] 1fr [foo-end];

If the track listing has square brackets in it they are using named lines.

[LeaVerou]

Ok, then the algorithm seems simple.

1. Traverse declarations where the property is grid-template-columns, grid-template-rows, grid-template, or grid
2. Extract named grid lines by matching on /\[([\w-]+)\]/ so we can find most popular names overall
3. Count usage without named grid lines and usage with named grid lines so we can calculate % of usage that uses named grid lines.

Does that sound good, Rachel?

[rachelandrew]

that should work I think.

[LeaVerou]

JS:

This will count usage for named grid lines (returns an object literal with property names as keys and usage count as values):

countProperties(ast.stylesheet.rules, {properties: /^grid($|\-)/, values: /\[([\w-]+)\]/})

and this without, in case we want to compare:

countProperties(ast.stylesheet.rules, {properties: /^grid($|\-)/, values: /\[([\w-]+)\]/})