netlify[bot]
commented
1 year ago Deploy Preview for bloom-guides-template ready!
| Name | Link |
|---|---|
| Latest commit | 8c614a20260577abfbd3cedd89982400a5a32474 |
| Latest deploy log | https://app.netlify.com/sites/bloom-guides-template/deploys/64a877242f7c210008fdbc8d |
| Deploy Preview | https://deploy-preview-46--bloom-guides-template.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 configuration.
This changes is related to the Setup Guides task. It adds linting functionality for CSS files. The linter can be run at any point during development. It is also added to the workflow process (from PR click checks tab in top-middle of screen, click Pull Request on left side of screen, click pr_checks on left-side or middle of screen, click Run Linter in middle of screen). Prior to this change the run linter option in PR Check was a print statement as a placeholder. The image below shows a screenshot of the workflow with stylelint running and passing during the PR check of this current PR.
To make it more consumable for review, I will split up all the linter work into PRs associated to each linter and language. This review will include all changes for stylelint and CSS code.
What was changed
How to check change
Checkout branch and build project
Verify all changes reported by linter did not disrupt the project by running
npm run serveVerify there are no existing linter errors by using the path on PR above to see if pr checks passed for linter
Verify there are no existing linter errors by manually running the linter in the code. Navigate to the base of the repo and run
sh ./ci/linter.sh. Below image shows an example of what the command line will look like when there are no errors.Verify linter is working and/or check any style fixes I made in other files. For this you will use the same command as above and choose any of the files that have changed and reverse any changes made. I have give two examples below, but feel free to check any of the changes using the same process.
Example 1: In the below screenshot, I have changed the capitalization of the letter 'm' in 'Min' on line 70 of the layout.css file and then run the linter. Note the linter now reports an error for _function-namecase with the message Expected "Min" to be "min".
Example 2: In the below screenshot, I have changed the numerical values from percentage to decimal (10% -> 0.1, 6% -> .06). Note the linter now reports two errors for alpha-value-notation with the message Expected ".1" to be "10%" and Expected ".06" to be "6%".
Notes
I have included the stdout used to make all CSS changes for easier reviewing:
_includes/css/base/base.css 27:21 ✖ Expected complex :not() pseudo-class notation selector-not-notation
_includes/css/base/layout.css 37:3 ✖ Expected empty line before declaration declaration-empty-line-before 61:3 ✖ Expected empty line before declaration declaration-empty-line-before 68:52 ✖ Expected "Min" to be "min" function-name-case 147:3 ✖ Expected empty line before comment comment-empty-line-before
_includes/css/base/normalize.css 366:1 ✖ Expected empty line before comment comment-empty-line-before
_includes/css/base/root.css 8:51 ✖ Expected whitespace before "*/" comment-whitespace-inside 39:3 ✖ Unexpected empty line before custom property custom-property-empty-line-before 42:3 ✖ Unexpected empty line before custom property custom-property-empty-line-before
_includes/css/base/typography.css 55:1 ✖ Unexpected duplicate selector "h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6", first used at line 50 no-duplicate-selectors 91:3 ✖ Expected empty line before custom property custom-property-empty-line-before 97:3 ✖ Expected empty line before custom property custom-property-empty-line-before 161:26 ✖ Expected modern color-function notation color-function-notation 177:1 ✖ Expected selector "figcaption" to come before selector "blockquote + figcaption" no-descending-specificity 184:3 ✖ Expected empty line before declaration declaration-empty-line-before
_includes/css/components/button.css 9:30 ✖ Expected modern color-function notation color-function-notation 9:44 ✖ Expected "0.1" to be "10%" alpha-value-notation 10:30 ✖ Expected modern color-function notation color-function-notation 10:44 ✖ Expected "0.06" to be "6%" alpha-value-notation 48:3 ✖ Expected empty line before custom property custom-property-empty-line-before
_includes/css/components/footer.css 28:1 ✖ Unexpected duplicate selector ".footer", first used at line 3 no-duplicate-selectors 40:1 ✖ Unexpected duplicate selector ".footer::before", first used at line 33 no-duplicate-selectors 96:1 ✖ Expected selector ".footer-icons a" to come before selector ".footer a:focus" no-descending-specificity 96:1 ✖ Expected selector ".footer-icons a" to come before selector ".footer a:hover" no-descending-specificity
_includes/css/components/pagination.css 18:3 ✖ Expected empty line before custom property custom-property-empty-line-before
_includes/css/components/resources.css 7:3 ✖ Expected empty line before declaration declaration-empty-line-before 30:3 ✖ Expected empty line before declaration declaration-empty-line-before 49:3 ✖ Unexpected duplicate "display" declaration-block-no-duplicate-properties 75:25 ✖ Expected modern color-function notation color-function-notation 75:39 ✖ Expected "0.06" to be "6%" alpha-value-notation 90:27 ✖ Expected modern color-function notation color-function-notation 90:41 ✖ Expected "0.1" to be "10%" alpha-value-notation
_includes/css/components/tables.css 29:19 ✖ Expected "context" media feature range notation media-feature-range-notation 83:19 ✖ Expected "context" media feature range notation media-feature-range-notation
34 problems (34 errors, 0 warnings)