Change the order of responsive class generation #37
Conversation
Besides exposing (and fixing) a typo and a missing .sm:mb64 class, the only difference in the generated CSS here is the order of the top/right/bottom/left classes
….` classes come before all `.md:...` classes etc., so something like `<div class="md:d-none sm:d-block">` is guaranteed to work
|
I ran into an issue while looking at this locally, while running grunt continuously. It appears that our postcss operations are moving the |
|
shellscape/postcss-less#102 This is the relevant issue I'd found. |
# Conflicts: # docs/assets/css/stacks-documentation.min.css # lib/css/stacks.min.css
aaronshekey
changed the title
.lg:... classes come before all .md:... classes etc., so something like <div class="md:d-none sm:d-block"> is guaranteed to work
|
I've spent a good long while poking at this to try to find a workaround. I've tried moving the PostCSS offers us a lot of really nice functionality, both what's implemented today and what could be implemented. Autoprefixing is really nice today, and so is the properties re-ordering, though this is less important. I see 3 things we can do.
|
|
@aaronshekey As I said in Slack, I see no alternative to dropping postcss (specifically, postcss-less) for now. Until postcss-less gets support for detached rulesets, a LESS feature that we use a lot, there is bound to be breakage, even if we find a workaround for this particular issue. And even just for this issue: I've looked at the postcss-less code, and there is no acceptable workaround to prevent this !important moveage that doesn't make our LESS code very awkward to type (and brittle). What we can do is run the autoprefixer on the generated pure CSS files -- that wouldn't require postcss-less. But for that to work in projects that compile Stacks themselves, in particular Q&A and Talent, these projects would also need to include it, and that might add prohibitively to the build time. For what it's worth, I'm okay with manual prefixing. These days, vendor prefixes are rarely needed in the browsers we support. |
This PR changes the order of responsive class generation such that all
.lg:...classes come before all.md:...classes etc., so something like<div class="md:d-none sm:d-block">is guaranteed to work.