Use placeholders when @extend'ing in prose scope #550
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-550
This updates the prose scope (and the things the prose scope depends on) such that we only ever @extend placeholder classes (classes starting with % which are not outputted into the CSS themselves) This abstraction gives us control over which occurrences of the selector are included by the @extend. Without this change, occurrences of e.g. the heading classes within the fieldset component are also ending up being ‘applied’ to the prose scope, leading to selectors like `.govuk-c-fieldset__legend .govuk-prose-scope h4` in the CSS. This makes no sense, as the prose scope should never be used within the fieldset legend. With this change, only occurrences of the placeholder class are included when @extend’ing. This means that we can define e.g. the typographic contextual adjustments at the placeholder level and these _will_ be applied to the prose scope, but other references to the concrete classes will have no effect on the prose scope.
36degrees
force-pushed
the
enforce-placeholders-for-extend
branch
from
d3b2c55
to
45630e0
Compare
|
@igloosi happy with the changelog entry? |
|
👍 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This updates the prose scope (and the things the prose scope depends on) such that we only ever @extend placeholder selectors.
This abstraction gives us control over which occurrences of the selector are included by the @extend. Without this change, occurrences of e.g. the heading classes within the fieldset component are also ending up being ‘applied’ to the prose scope, leading to selectors like
.govuk-c-fieldset__legend .govuk-prose-scope h4in the CSS. This makes no sense, as the prose scope should never be used within the fieldset legend.With this change, only occurrences of the placeholder selectors are 'included' when @extend’ing. This means that as we define e.g. the typographic contextual adjustments at the placeholder level and these will be applied to the prose scope, but other references to the concrete classes will have no effect on the prose scope.
It also changes the linting rules to enforce that
@extendscan only be used to extend placeholder classes.Difference in generated CSS
Reversal of simple selectors in compound .govuk-link / attribute selectors:
Change in whitespace around selectors:
Addition of
.govuk-prose-scopehr here now that it extends%govuk-section-break:Re-ordering of selectors:
Removal of non-sensical prose scope adjustments for fieldset component 🎉: