New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
docs: explicit stylelint color related rules #16465
Conversation
✅ Deploy Preview for docs-eslint ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
docs/src/assets/scss/carbon-ads.scss
Outdated
@@ -19,7 +19,7 @@ | |||
background-color: var(--body-background-color); | |||
border: 1px solid var(--border-color); | |||
border-radius: var(--border-radius); | |||
box-shadow: 0 1px 4px 1px hsla(0, 0%, 0%, 0.1); | |||
box-shadow: 0 1px 4px 1px hsl(0 0% 0% / 0.1); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
we are using hsla
for legacy reasons as some browsers dont support space syntax in hsl
or rgb
.
more at https://stylelint.io/user-guide/rules/color-function-notation/
Note
Modern color-functions use a comma-free syntax because functions in CSS are used to group/name a syntax chunk. They should work by the same rules that CSS grammar does in general: values are optional and re-orderable when possible, space-separated, and commas are used to separate repetitions only.
For legacy reasons, rgb() and hsl() also supports an alternate syntax that separates all of its arguments with commas. Also for legacy reasons, the rgba() and hsla() functions exist using the same comma-based syntax.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
May be instead of removing it we can force option legacy? for all colors to use the comma syntax?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
OK, I forced the legacy option. I also when and made the other colour function rules explicit based on the current style
c5d5d6d
to
1fc4f3b
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM. Thanks.
This PR contains the following updates: | Package | Type | Update | Change | |---|---|---|---| | [eslint](https://eslint.org) ([source](https://github.com/eslint/eslint)) | devDependencies | minor | [`8.26.0` -> `8.27.0`](https://renovatebot.com/diffs/npm/eslint/8.26.0/8.27.0) | --- ### Release Notes <details> <summary>eslint/eslint</summary> ### [`v8.27.0`](https://github.com/eslint/eslint/releases/tag/v8.27.0) [Compare Source](eslint/eslint@v8.26.0...v8.27.0) #### Features - [`f14587c`](eslint/eslint@f14587c) feat: new `no-new-native-nonconstructor` rule ([#​16368](eslint/eslint#16368)) (Sosuke Suzuki) - [`978799b`](eslint/eslint@978799b) feat: add new rule `no-empty-static-block` ([#​16325](eslint/eslint#16325)) (Sosuke Suzuki) - [`69216ee`](eslint/eslint@69216ee) feat: no-empty suggest to add comment in empty BlockStatement ([#​16470](eslint/eslint#16470)) (Nitin Kumar) - [`319f0a5`](eslint/eslint@319f0a5) feat: use `context.languageOptions.ecmaVersion` in core rules ([#​16458](eslint/eslint#16458)) (Milos Djermanovic) #### Bug Fixes - [`c3ce521`](eslint/eslint@c3ce521) fix: Ensure unmatched glob patterns throw an error ([#​16462](eslint/eslint#16462)) (Nicholas C. Zakas) - [`886a038`](eslint/eslint@886a038) fix: handle files with unspecified path in `getRulesMetaForResults` ([#​16437](eslint/eslint#16437)) (Francesco Trotta) #### Documentation - [`ce93b42`](eslint/eslint@ce93b42) docs: Stylelint property-no-unknown ([#​16497](eslint/eslint#16497)) (Nick Schonning) - [`d2cecb4`](eslint/eslint@d2cecb4) docs: Stylelint declaration-block-no-shorthand-property-overrides ([#​16498](eslint/eslint#16498)) (Nick Schonning) - [`0a92805`](eslint/eslint@0a92805) docs: stylelint color-hex-case ([#​16496](eslint/eslint#16496)) (Nick Schonning) - [`74a5af4`](eslint/eslint@74a5af4) docs: fix stylelint error ([#​16491](eslint/eslint#16491)) (Milos Djermanovic) - [`324db1a`](eslint/eslint@324db1a) docs: explicit stylelint color related rules ([#​16465](eslint/eslint#16465)) (Nick Schonning) - [`94dc4f1`](eslint/eslint@94dc4f1) docs: use Stylelint for HTML files ([#​16468](eslint/eslint#16468)) (Nick Schonning) - [`cc6128d`](eslint/eslint@cc6128d) docs: enable stylelint declaration-block-no-duplicate-properties ([#​16466](eslint/eslint#16466)) (Nick Schonning) - [`d03a8bf`](eslint/eslint@d03a8bf) docs: Add heading to justification explanation ([#​16430](eslint/eslint#16430)) (Maritaria) - [`8a15968`](eslint/eslint@8a15968) docs: add Stylelint configuration and cleanup ([#​16379](eslint/eslint#16379)) (Nick Schonning) - [`9b0a469`](eslint/eslint@9b0a469) docs: note commit messages don't support scope ([#​16435](eslint/eslint#16435)) (Andy Edwards) - [`1581405`](eslint/eslint@1581405) docs: improve context.getScope() docs ([#​16417](eslint/eslint#16417)) (Ben Perlmutter) - [`b797149`](eslint/eslint@b797149) docs: update formatters template ([#​16454](eslint/eslint#16454)) (Milos Djermanovic) - [`5ac4de9`](eslint/eslint@5ac4de9) docs: fix link to formatters on the Core Concepts page ([#​16455](eslint/eslint#16455)) (Vladislav) - [`33313ef`](eslint/eslint@33313ef) docs: core-concepts: fix link to semi rule ([#​16453](eslint/eslint#16453)) (coderaiser) </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNC4xOS4wIiwidXBkYXRlZEluVmVyIjoiMzQuMjEuMiJ9--> Co-authored-by: cabr2-bot <cabr2.help@gmail.com> Reviewed-on: https://codeberg.org/Calciumdibromid/CaBr2/pulls/1628 Reviewed-by: Epsilon_02 <epsilon_02@noreply.codeberg.org> Co-authored-by: Calciumdibromid Bot <cabr2_bot@noreply.codeberg.org> Co-committed-by: Calciumdibromid Bot <cabr2_bot@noreply.codeberg.org>
Prerequisites checklist
What is the purpose of this pull request? (put an "X" next to an item)
[ ] Documentation update
[ ] Bug fix (template)
[ ] New rule (template)
[ ] Changes an existing rule (template)
[ ] Add autofix to a rule
[ ] Add a CLI option
[ ] Add something to the core
[x] Other, please explain:
What changes did you make? (Give an overview)
Enabled the stylelint rule enforce modern colour function notation and auto-fixed with
npm run lint:fix:scss
Is there anything you'd like reviewers to focus on?