Implement Stylelint linting of CSS logical properties #4023
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…y-one After discussing this with the FreeTube team, it seems that we are still undecided on which rules we want to be active, including ones currently enabled. As a stopgap fix, we disabled Stylelint checking in our pre-commit Git hook and our recommended > freetube@0.19.0 lint-fix > run-p eslint-fix lint-style-fix command. With this change, we will be using Stylelint in our > freetube@0.19.0 lint-fix > run-p eslint-fix lint-style-fix command, while giving us the flexibility to add in additional desired plugins and rules as separate efforts.
This is not enforced by the plugin at this time.
…input when .stylelintignore files are changed
github-actions
bot
added
PR: dependencies
…d-logical-property-linting
We want to avoid introducing directionality-specific properties that could muck up the video player.
|
This mostly has to do with changes that I added before this PR but I think these changes should be done here as we are enforcing stylelint now: (other than the following changes, the PR looks good to me) index 3e6ccdf5..cae7d2d8 100644
--- a/package.json
+++ b/package.json
@@ -33,18 +33,14 @@
"dev-runner": "node _scripts/dev-runner.js",
"get-instances": "node _scripts/getInstances.js",
"get-regions": "node _scripts/getRegions.mjs",
- "lint-all": "run-p lint lint-json lint-style",
+ "lint-all": "run-p lint lint-json",
"lint": "run-p eslint-lint lint-style",
"lint-fix": "run-p eslint-lint-fix lint-style-fix",
"eslint-lint": "eslint --ext .js,.vue ./",
"eslint-lint-fix": "eslint --fix --ext .js,.vue ./",
"lint-json": "eslint --ext .json ./",
- "lint-style": "run-p lint-style:scss lint-style:css",
- "lint-style:scss": "stylelint \"**/*.scss\"",
- "lint-style:css": "stylelint \"**/*.css\"",
- "lint-style-fix": "run-p lint-style-fix:scss lint-style-fix:css",
- "lint-style-fix:scss": "stylelint --fix \"**/*.scss\"",
- "lint-style-fix:css": "stylelint --fix \"**/*.css\"",
+ "lint-style": "stylelint \"**/*.{css,scss}\"",
+ "lint-style-fix": "stylelint --fix \"**/*.{css,scss}\"",
"lint-yml": "eslint --ext .yml,.yaml ./",
"pack": "run-p pack:main pack:renderer",
"pack:main": "webpack --mode=production --node-env=production --config _scripts/webpack.main.config.js", |
kommunarr
requested review from
PikachuEXE,
absidue,
efb4f5ff-1298-471a-8973-3d47447115dc,
ChunkyProgrammer and
MarmadileManteater
ChunkyProgrammer
approved these changes
Sep 12, 2023
absidue
approved these changes
Sep 13, 2023
PikachuEXE
approved these changes
Sep 14, 2023
github-actions
bot
removed
the
PR: waiting for review
PikachuEXE
added a commit
to PikachuEXE/FreeTube
that referenced
this pull request
Sep 14, 2023
* development: Implement Stylelint linting of CSS logical properties (FreeTubeApp#4023) Translated using Weblate (German) Translated using Weblate (French) Translated using Weblate (Arabic) Translated using Weblate (Chinese (Traditional)) Translated using Weblate (Italian) Translated using Weblate (Portuguese (Brazil)) # Conflicts: # src/renderer/components/ft-prompt/ft-prompt.css # src/renderer/components/playlist-info/playlist-info.scss # src/renderer/scss-partials/_ft-list-item.scss # src/renderer/views/Playlist/Playlist.scss # src/renderer/views/UserPlaylists/UserPlaylists.css
| @@ -66,6 +65,7 @@ | |||
| "marked": "^8.0.0", | |||
| "path-browserify": "^1.0.1", | |||
| "process": "^0.11.10", | |||
| "stylelint-use-logical-spec": "^5.0.0", | |||
There was a problem hiding this comment.
Just realized that this was added as a Dependency and not a DevDependency
There was a problem hiding this comment.
Darn, you're right
4 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Implement Stylelint linting of CSS logical properties
Pull Request Type
Related issue
See #3970 (comment)
Description
This change implements the Stylelint plugin stylelint-use-logical-spec with all rules enabled except for requiring
float: inline-startandfloat: inline-end, which as of today is still an experimental feature in Chrome.To prevent current issues blocking contributors going forward, this PR also enacts this rule throughout FreeTube. This mostly just changes all CSS properties with
heightandwidthto becomeblock-sizeandinline-sizerespectively, which is only functionally relevant for differentwriting-modes (note that the defaulthorizontal-tbis the onlywriting-modecurrently supported by FreeTube, but that is subject to change in the future).This PR enables Stylelint for
npm run lintandnpm run lint-fix, including minor modification of the other scripts to make space for this. This PR also runs Stylelint on pre-commit. This was never enabled beforehand due to concerns about which other rules should be needed. As a result, this PR removes the other plugins and rules, and they can be added back as necessary in their own tested PRs.Screenshots
Testing
padding-right: 55px) to a CSS file (e.g.,App.vue).npm run lintto see the same assessment as in 3.npm run lint-fixto see the issue automatically resolved by the linter.eslint-lint,eslint-lint-fix,lint-style-fix)Desktop
Additional context
Given that
transformandfloatare still vulnerable to introducing directionality concerns, code contributors and reviewers must take special care to use these CSS horizontal directionality variables going forward. We currently only care about the x-dimension for right-to-left language support. Code contributors and reviewers must also take care to use logical properties insidestyleblocks and properties in.jsand.vuefiles. Currently, the stylelint-use-logical-spec plugin is not capable of detecting these instances. We should probably add this note to the FreeTube Docs as well.