fix(css): remove Stylelint multiline comments from built CSS files

[julien-deramond]

Related issues

#1924 (comment)

Description

Our CSS files contain multiline Stylelint comments that are useless for the end-user.

For example:

Orange-Boosted-Bootstrap/dist/css/boosted-grid.css

Lines 11 to 19 in c307115

	/* stylelint-disable-line function-disallowed-list */
	/* stylelint-disable-line function-disallowed-list */
	/* stylelint-disable-line function-disallowed-list */
	/* stylelint-disable-line function-disallowed-list */
	/* stylelint-disable-line function-disallowed-list */
	/* stylelint-disable-line function-disallowed-list */
	/* stylelint-disable-line function-disallowed-list */
	/* stylelint-disable-line function-disallowed-list */
	/* stylelint-disable-line function-disallowed-list */

As explained in https://sass-lang.com/documentation/syntax/comments#in-sass, multiline comments will remain when compiled by Sass and will be included in the final CSS file.

This PR removes those useless comments but also adds an automatic check to prevent them from being added again.

This check only check that the built CSS files don't contain any multiline comments starting with /* stylelint as other comments are useful like the header of the file and the RTL comments for RTLCSS.

For more context, most of them were added in when we want to disable Stylelint rules for a specific line, but also when we want to add Boosted mod comment on this same line.

So when we had the following code:

color: calc(whatever); /* stylelint-disable-line function-disallowed-list */ // Boosted mod

it must be replaced with:

// stylelint-disable-next-line function-disallowed-list
width: calc(whatever); // Boosted mod

Tasks:

• Check in the CI that the built CSS files don't contain any multiline comments starting with /* stylelint
  • Without any fix, CI is red (https:/Orange-OpenSource/Orange-Boosted-Bootstrap/actions/runs/4565121565/jobs/8055791034?pr=1935)
  • With the fix, CI is green
• Remove useless Stylelint multiline comments in the CSS files
• Double-check that no other useless multiline comments exist in our built CSS files

Motivation & Context

Lighten the CSS files.

Types of change

• Enhancement (non-breaking change which adds functionality)

Checklist

Contribution

• I have read the contributing guidelines

Accessibility

• (N/A) My change follows accessibility good practices; I have at least run axe

Design

• (N/A) My change respects the design guidelines defined in Orange Design System
• (N/A) My change is compatible with responsive display

Development

• My change follows the developer guide
• (N/A) I have added JavaScript unit tests to cover my changes
• (N/A) I have added SCSS unit tests to cover my changes

Documentation

• (N/A) My change introduces changes to the documentation and/or I have updated the documentation accordingly

Checklist (for Core Team only)

• (N/A) My change introduces changes to the migration guide
• (N/A) My new component is added in Storybook
• (N/A) My new component is compatible with RTL
• (N/A) Manually run BrowserStack tests
• (N/A) Manually test browser compatibility with BrowserStack (Chrome >= 60, Firefox >= 60 (+ ESR), Edge, Safari >= 12, iOS Safari, Chrome & Firefox on Android)
• (N/A) Code review
• (N/A) Design review
• (N/A) A11y review

After the merge

• (N/A) Manually launch Percy tests

[netlify]

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	be1a1f1
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/642c0770198a8400094de46a
😎 Deploy Preview	https://deploy-preview-1935--boosted.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication