Migrate from infix to prefix

[mdo]

Credit due where credit is due—Tailwind's prefix syntax is better. This migrates us to use it all over the project. One thing I've realized is our responsive utilities having an infix is confusing for where the infix appears and what not. Infix also being buried within the class is annoying for parsing classes IMO.

• Replace the breakpoint infix pattern (e.g., .d-md-none, .col-lg-6) with a prefix pattern using an escaped colon (e.g., .md\:d-none, .lg\:col-6),
• Rename breakpoint-infix() to breakpoint-prefix() and add css-escape-ident() for leading-digit breakpoints like 2xl
• Update generate-utility(), grid, and all component/helper loops
• Update containers, navbar, offcanvas, tables, list-group, stepper, dialog, sticky, and stacks responsive classes
• Update SCSS and JS tests
• Update all docs

[pricop]

This change is amazing, especially since using breakpoints with utility classes that use semantic values (e.g: shadow-lg-sm) was pretty confusing. I had this issue with several utilities. Thank you!

[pricop]

Not sure if this is possible, but any chance of states getting the same treatment? breakpoint:state:selector, having it separated by colon is so much cleaner, e.g: hover:selector.

[coliff]

woah. big change, will take a little bit of getting used to, but I think I like it. One query though, you said:

a prefix pattern using an escaped colon (e.g., .md:d-none, .lg:col-6),

but it's actually like md:d-none, lg:col-6. so what did you mean about the 'escaped colon'?

[pricop]

woah. big change, will take a little bit of getting used to, but I think I like it. One query though, you said:

a prefix pattern using an escaped colon (e.g., .md:d-none, .lg:col-6),

but it's actually like md:d-none, lg:col-6. so what did you mean about the 'escaped colon'?

He meant it in the sense that the generated CSS classes will use an escaped colon, otheriwse the colon would act as a pseudo-class, for example defining .md:d-none in CSS would not work as md:d-none in HTML, as in this case "d-none" would become an invalid pseudo-class selector (think of a:hover as an example, where d-none would act like hover or any other pseudo-selector), so by escaping the colon, we can now use "breakpoint:class in HTML.

As a long term, side bonus... since AI agents tend to generate HTML templates using Tailwind syntax, this will make it much easier to port code from Tailwind to Bootstrap.

I'd go a step forward, and do the same with the states, so we can do breakpoint:state:class... much easier to see each concern, compared to breakpoint:class-state.