diff --git a/res/css/_sc/README.md b/res/css/_sc/README.md index 8491c8956c9..6c81993124e 100644 --- a/res/css/_sc/README.md +++ b/res/css/_sc/README.md @@ -24,4 +24,4 @@ Even if the properties are styled with `!important` by the upstream to cover reg 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. -**Warning: running `rethemendex` breaks cascading!** Manual editing is required for now. +**Please do not forget to update `_customization.pcss`** if you have added other CSS files for customization. Please mind where to import the files as it affects how styles cascade. Never import them alphabetically. diff --git a/res/css/_sc/_customization.pcss b/res/css/_sc/_customization.pcss index 9806176c51b..4ac7dc0644c 100644 --- a/res/css/_sc/_customization.pcss +++ b/res/css/_sc/_customization.pcss @@ -15,5 +15,7 @@ limitations under the License. */ /* TODO: replace @import with @mixin once multiple CSS files are created for customization in order to keep styling modular */ +/* Please mind where to import CSS files as it affects how styles cascade. */ + @import "./views/rooms/_EventTile.pcss"; @import "./views/rooms/_IRClayout.pcss"; diff --git a/res/css/rethemendex.sh b/res/css/rethemendex.sh index 37090b96d8f..1bfcaa521d2 100755 --- a/res/css/rethemendex.sh +++ b/res/css/rethemendex.sh @@ -8,8 +8,17 @@ cd `dirname $0` # we used to have exclude /themes from the find at this point. # as themes are no longer a spurious subdirectory of css/, we don't # need it any more. - find . -iname _\*.pcss | fgrep -v _components.pcss | LC_ALL=C sort | + # + # Exclude "_sc" folder dedicated for our custom CSS files from being included + # to alphabetic sorting which causes cascading mess. Please note that CSS files + # inside the folder are imported at the end. + find . -iname _\*.pcss -not -path "./_sc/*" | fgrep -v _components.pcss | LC_ALL=C sort | while read i; do echo "@import \"$i\";" done + + # Import the CSS file dedicated for customization to let our declarations + # inside it override the styles specified by the upstream project. + echo "\n/* Customization for SchildiChat */"; + echo "@import \"./_sc/_customization.pcss\";"; } > _components.pcss