Switch CSS to using postcss, and implement a dark theme. #2973

ara4n · 2017-01-17T19:17:52Z

I know this doesn't merge yet, but wanted to get the PR started for initial review.
The rationale for switching to postcss is to get imports, variable expansion & autoprefixing. Originally this was SASS, but SASS doesn't give you autoprefixing and is a bit less flexible than postcss.
Themes are done using ye olde rel="alternate stylesheet".

SVGs are all broken, and some of the more exotic colours haven't been updated. There's been no attempt to use SASS to remove duplication from the CSS yet. no attempt to switch it at runtime yet.

richvdh · 2017-01-17T22:51:48Z

package.json

@@ -112,8 +113,17 @@
    "minimist": "^1.2.0",
    "mkdirp": "^0.5.1",
    "mocha": "^2.4.5",
+    "node-sass": "^4.1.1",


if we're not using SASS, let's not drag it in.

We can lose catw too I think.

ooops, thanks.

richvdh · 2017-01-17T22:55:31Z

src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss

@@ -15,13 +15,8 @@ limitations under the License.
 */

 .mx_FilePanel {
-    -webkit-box-ordinal-group: 2;


it'd probably be good to keep refactoring the CSS separate from cleaning it up as much as possible, if nothing else to give an easier way to point blame if it starts doing something weird.

oh, I might have misunderstood what's going on here - these are now automatically added by postcss?

I still wonder if we can have separate PRs: (1) start using postcss; (2) make use of it. But I can see it may not be worth it.

Ideally yes, the postcss transition would be separate PR to the factoring out colours, and stripping out vendor prefixes, and theming. Unfortunately they all grew organically at the same time and I'm not convinced it's worth the faff to untangle them now. Future changes should be more reviewable.

richvdh · 2017-01-17T22:57:27Z

src/skins/vector/css/rethemendex.sh

+
+echo "// autogenerated by rethemendex.sh" > _components.scss
+
+for i in `find . -iname _\*.scss | fgrep -v _components.scss`;


need more sort, please

richvdh · 2017-01-17T23:00:10Z

src/vector/index.js

@@ -30,7 +30,6 @@ require('babel-polyfill');

 // CSS requires: just putting them here for now as CSS is going to be


could do with a better explanation of what's going on here.

i have absolutely no idea what's going on there; it predates me.

Not sure that's an excuse for making it worse: for a start I think it is no longer the case that CSS is going to be refactored soon, since I think this is the refactoring alluded to.

Perhaps @dbkr can clarify, but I think you could getting rid of this comment and replace it with:

"Require common CSS here; this will make webpack process it into bundle.css. Our own CSS (which is themed) is imported via separate webpack entry points in webpack.config.js"

happy to change the comment, but would defn prefer to understand what @dbkr had in mind in the first place

This was pulling in all the CSS: components.css is the catted-together bundle of all the components' CSS and the others were various other ones we used. Requiring them here pulled them in to webpack's build process which pulled them through the extract text plugin, eventually getting the end CSS bundle out the other end.

The comment was me putting the CSS requires in the vector index file rather than working out if there was a better place to put them, as at the time there was a refactor on the horizon of how vector's CSS worked (although that never came to pass).

TL;DR yes, I agree with @richvdh 's new comment

See Dave's comment at https://github.com/vector-im/riot-web/pull/2973/files/0cd895b417bdc1163511d993c6b24ba1fe0910f3#r96646314.

richvdh

generally looks pretty sane to me. A few minor nits.

ara4n · 2017-01-18T14:10:00Z

@richvdh ptal

richvdh · 2017-01-18T14:43:39Z

src/vector/index.html

-        if (file.match(/^theme-(?!light\.)/)) {
+        var match = file.match(/^bundles\/.*?\/theme-((?!light\.).*)\.css$/);
+        if (match) {
+            var title = match[1].charAt(0).toUpperCase() + match[1].slice(1);


Not convinced that this is anything to do with my webpack changes, but I won't split hairs.

richvdh

LGTM apart from complaining about comments

ara4n added 20 commits December 28, 2016 02:01

basic jig for SASS-based themed CSS (one bundle per theme)

bacb284

autogenerate the _components.scss index

c5fa84c

autogen _components.css

33f0eaa

initial stab at an official dark theme via the magic of SASS.

c6beaa1

SVGs are all broken, and some of the more exotic colours haven't been updated. There's been no attempt to use SASS to remove duplication from the CSS yet. no attempt to switch it at runtime yet.

fix up a few more colours

35b3013

experimental postcss

691fe61

postcss experiment

c1d4a0d

merge package.json

8b38a32

factor out some more colours

002339f

make autoprefixer work by reordering it

906d426

strip out unneeded webkit prefixes now we're using autoprefixer

dc1563d

strip out unneeded -moz- prefixes

c305b72

strip out unneeded -ms- prefixes

d74dfc9

fix a lone lost opera vendor prefix

cab5bf8

factor out remaining # colours

87fd136

more factoring

4f8d3b0

cheeky hack to get the ctxt menu colors right

3bdb330

fix up the contextual menu button

c9c58ab

use ye olde rel='alternate stylesheets' for theming

6c88201

kill the moofle

0cd895b

ara4n changed the title ~~Switch CSS to using the postcss, and implement a dark theme.~~ Switch CSS to using postcss, and implement a dark theme. Jan 17, 2017

ara4n assigned richvdh Jan 17, 2017

ara4n mentioned this pull request Jan 17, 2017

Implement theming via alternate stylesheets matrix-org/matrix-react-sdk#624

Merged

richvdh reviewed Jan 17, 2017

View reviewed changes

richvdh requested changes Jan 17, 2017

View reviewed changes

richvdh assigned ara4n and unassigned richvdh Jan 17, 2017

ara4n added 3 commits January 18, 2017 12:42

review feedback

69bedf0

Merge branch 'develop' into matthew/postcss

14eec6d

unbreak switching after vdh's webpack changes

708fd64

ara4n assigned richvdh and unassigned ara4n Jan 18, 2017

richvdh reviewed Jan 18, 2017

View reviewed changes

richvdh approved these changes Jan 18, 2017

View reviewed changes

richvdh assigned ara4n and unassigned richvdh Jan 18, 2017

f1x0r CSS comment

acb85b7

ara4n merged commit c0e5a1b into develop Jan 18, 2017

bernedef mentioned this pull request Mar 2, 2017

Dark theme and per-room color scheming support element-hq/riot-android#992

Closed

t3chguy deleted the matthew/postcss branch May 12, 2022 08:56

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Switch CSS to using postcss, and implement a dark theme. #2973

Switch CSS to using postcss, and implement a dark theme. #2973

ara4n commented Jan 17, 2017

richvdh Jan 17, 2017

ara4n Jan 18, 2017

richvdh Jan 17, 2017

richvdh Jan 17, 2017

ara4n Jan 18, 2017

richvdh Jan 17, 2017

ara4n Jan 18, 2017

richvdh Jan 17, 2017

ara4n Jan 18, 2017

richvdh Jan 18, 2017 •

edited

Loading

ara4n Jan 18, 2017

dbkr Jan 18, 2017

dbkr Jan 18, 2017

richvdh Jan 18, 2017

richvdh left a comment

ara4n commented Jan 18, 2017

richvdh Jan 18, 2017

richvdh left a comment


		echo "// autogenerated by rethemendex.sh" > _components.scss

		for i in `find . -iname _\*.scss \| fgrep -v _components.scss`;

		@@ -30,7 +30,6 @@ require('babel-polyfill');

		// CSS requires: just putting them here for now as CSS is going to be

Switch CSS to using postcss, and implement a dark theme. #2973

Switch CSS to using postcss, and implement a dark theme. #2973

Conversation

ara4n commented Jan 17, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

richvdh Jan 18, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

richvdh left a comment

Choose a reason for hiding this comment

ara4n commented Jan 18, 2017

Choose a reason for hiding this comment

richvdh left a comment

Choose a reason for hiding this comment

richvdh Jan 18, 2017 •

edited

Loading