Order of imports affects styling for checkboxes and radio labels

[mikemonteith]

Bug Report

What is the issue?

We found an issue recently which was caused by <label class="nhsuk-label nhsuk-radios__label"> having display: block style.
It turns out that when importing individual sass components, the order of imports matters.

Correct styles:

@import 'node_modules/nhsuk-frontend/packages/components/label/label';
@import 'node_modules/nhsuk-frontend/packages/components/radios/radios';

Incorrect styles:

@import 'node_modules/nhsuk-frontend/packages/components/radios/radios';
@import 'node_modules/nhsuk-frontend/packages/components/label/label';

This is because the display rules in label.scss and radios.scss (and also checkboxes.scss) have the same specificity.

Solution

I think the specificity of the display rule for the label in radios.scss and checkboxes.scss should be increased so that it always takes precedence over the rule in labels.scss.

[edwardhorsford]

Any idea what govuk-frontend does in this situation?