alphagov / govuk-frontend

GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.
https://frontend.design-system.service.gov.uk/
MIT License
1.18k stars 325 forks source link

Improve our Sass workflow to check for compilation of variables and functions with LibSass and Ruby Sass #4783

Open romaricpascal opened 8 months ago

romaricpascal commented 8 months ago

What

Improve our Sass workflow to verify that Libsass and Ruby Sass correctly transform all the Sass variables and functions in our code.

Why

Our Sass code can still be imported with Libsass and Ruby Sass (as we've yet to move to Sass module system). However these older versions do not transform some newer syntaxes supported by dart Sass, outputting invalid CSS.

Who needs to work on this

Developers

Who needs to review this

Developers

Done when

romaricpascal commented 8 months ago

A possible way to achieve this could be to run a custom Stylelint plugin with two rules:

romaricpascal commented 8 months ago

4784 nicely finds the Sass variables using grep. If we can use grep to match the function calls as well, that would be ace. This may require us to use the -E or [-P](https://explainshell.com/explain?cmd=grep+-P+%27govuk-[\w-]%2B\(%27) flag for more complex regexp.

colinrotherham commented 8 months ago

Bit late now, but this would do it:

! grep --regexp "\$govuk-" --regexp "govuk\-\([a-z0-9-]\+\)(" .tmp/all.css