Create a dedicated CSS file for customization #23
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
1 task
luixxiul
force-pushed
the
customization_base
branch
3 times, most recently
from
530253c
to
4e9ffbf
Compare
1 task
luixxiul
commented
Mar 3, 2024
|
|
||
| For customization, import a custom CSS file on `res/css/_sc/_customization.pcss` and put anything such as custom CSS declarations and variables in it to let them override the values inherited from the upstream. | ||
|
|
||
| Please mind where to import a new CSS file. **Never sort the files alphabetically as it breaks how styles cascade.** |
There was a problem hiding this comment.
The general rule would be:
- the less
@import, the better - Import CSS files for general rules at first, then for specific ones later. Mind the order of specificity as much as possible
- Add a detailed comment for each
@importabout the reason why it should be imported at the specific place, unless the reason is very clear.
When it comes to custom styling, basically we could just import a custom CSS file after the last existing `@import` on _components.pcss and put every custom stuff like CSS declarations and variables in it to let them override the inherited values in the way which the concept of CSS expects. In order to achieve it, this commit updates rethemendex.sh, so that any CSS files in _sc/ folder are excluded from being included to alphabetic sorting which causes cascading mess, ensuring _customization.pcss is imported at the end of the file. The obvious merit of doing so is that it will remove the burden of applying customization directly on the upstream CSS codebase fixing conflicts. Separating custom styles from the upstream codebase should also greatly reduce the manpower to rebase, without being worried about possible regressions. Doing so will also make it easier to fix the regressions on our codebase which the upstream project has not fixed yet. Additionally, it will make contributing easier for those who would like to contribute but are not familiar with the style codebase for SchildiChat, like me. Even if declarations are flagged with !important by the upstream to cover a new regression, it will be possible to override them with ours flagged with !important on our custom CSS files. The way in which the upstream project generates concatenated CSS files has been very stable (essentially same since at least 2018. See: https://github.com/matrix-org/matrix-react-sdk/commits/develop/res/css/rethemendex.sh), so we should be able to depend on the current way how it works for a reasonable time. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
luixxiul
force-pushed
the
customization_base
branch
from
4e9ffbf
to
13d6622
Compare
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.
When it comes to custom styling, basically we could just import a custom CSS file after the last existing
@importon_components.pcssand put every custom stuff like CSS declarations and variables in it to let them override the inherited values in the way which the concept of CSS expects. In order to achieve it, the commit of this PR updatesrethemendex.sh, so that any CSS files in_sc/folder are excluded from being included to alphabetic sorting which causes cascading mess, ensuring_customization.pcssis imported at the end of the file.The obvious merit of doing so is that it will remove the burden of applying customization directly on the upstream CSS codebase fixing conflicts. Separating custom styles from the upstream codebase should also greatly reduce the manpower to rebase, without using screenshot tests and without being worried about possible visual regressions which may be prone to be caused due to the upstream's CSS codebase structure. Doing so will also make it easier to fix the regressions on our codebase which the upstream project has not fixed yet. Additionally, it will make contributing easier for those who would like to contribute but are not familiar with the style codebase for SchildiChat, like me.
Even if declarations are flagged with
!importantby the upstream to cover a new regression, it will be possible to override them with ours flagged with!importanton our custom CSS files.The way in which the upstream project generates concatenated CSS files has been very stable (essentially same since at least 2018. See: https://github.com/matrix-org/matrix-react-sdk/commits/develop/res/css/rethemendex.sh), so we should be able to depend on the current way how it works for a reasonable time.
Signed-off-by: Suguru Hirahara luixxiul@users.noreply.github.com