From 691fe611d6141f6c43f9e966ab135a721f248482 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Tue, 10 Jan 2017 11:06:09 +0000 Subject: [PATCH] experimental postcss --- package.json | 14 ++- src/skins/vector/css/_components.scss | 145 +++++++++++++------------ src/skins/vector/css/rethemendex.sh | 2 +- src/skins/vector/css/themes/dark.scss | 76 +------------ src/skins/vector/css/themes/light.scss | 4 +- src/vector/index.js | 2 +- webpack.config.js | 4 +- 7 files changed, 94 insertions(+), 153 deletions(-) diff --git a/package.json b/package.json index c657aad641..8eb562d3c1 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,7 @@ "build:config": "cpx config.json webapp/", "build:emojione": "cpx \"node_modules/emojione/assets/svg/*\" webapp/emojione/svg/", "build:modernizr": "modernizr -c .modernizr.json -d src/vector/modernizr.js", - "build:css": "mkdirp build && node-sass --recursive --source-map true --output build \"src/skins/vector/css\"", + "build:css": "mkdirp build && postcss -c postcss.config.json", "build:compile": "babel --source-maps -d lib src", "build:bundle": "NODE_ENV=production webpack -p --progress", "build:bundle:dev": "webpack --optimize-occurence-order --progress", @@ -44,7 +44,7 @@ "start:emojione": "cpx \"node_modules/emojione/assets/svg/*\" webapp/emojione/svg/ -w", "start:js": "webpack-dev-server -w --progress", "start:js:prod": "NODE_ENV=production webpack-dev-server -w --progress", - "start:skins:css": "mkdirp build && node-sass --recursive --watch --source-map true --output build \"src/skins/vector/css\"", + "start:skins:css": "mkdirp build && postcss -c postcss.config.json -w", "start": "node scripts/babelcheck.js && parallelshell \"npm run start:emojione\" \"npm run start:res\" \"npm run start:config\" \"npm run start:js\" \"npm run start:skins:css\"", "start:prod": "parallelshell \"npm run start:emojione\" \"npm run start:js:prod\" \"npm run start:skins:css\"", "clean": "rimraf build lib webapp electron/dist", @@ -80,6 +80,7 @@ "url": "^0.11.0" }, "devDependencies": { + "autoprefixer": "^6.6.0", "babel-cli": "^6.5.2", "babel-core": "^6.14.0", "babel-eslint": "^6.1.0", @@ -116,10 +117,17 @@ "node-sass": "^4.1.1", "parallelshell": "^1.2.0", "phantomjs-prebuilt": "^2.1.7", + "postcss-cli": "^2.6.0", + "postcss-extend": "^1.0.5", + "postcss-import": "^9.0.0", + "postcss-mixins": "^5.4.1", + "postcss-nested": "^1.0.0", + "postcss-scss": "^0.4.0", + "postcss-simple-vars": "^3.0.0", + "postcss-strip-inline-comments": "^0.1.5", "react-addons-perf": "^15.4.0", "react-addons-test-utils": "^15.4.0", "rimraf": "^2.4.3", - "sass-loader": "^4.1.1", "source-map-loader": "^0.1.5", "webpack": "^1.12.14", "webpack-dev-server": "^1.16.2" diff --git a/src/skins/vector/css/_components.scss b/src/skins/vector/css/_components.scss index 532e0a3657..884352366e 100644 --- a/src/skins/vector/css/_components.scss +++ b/src/skins/vector/css/_components.scss @@ -1,73 +1,74 @@ // autogenerated by rethemendex.sh -@import "_common"; -@import "matrix-react-sdk/structures/_ContextualMenu"; -@import "matrix-react-sdk/structures/_CreateRoom"; -@import "matrix-react-sdk/structures/_FilePanel"; -@import "matrix-react-sdk/structures/_MatrixChat"; -@import "matrix-react-sdk/structures/_NotificationPanel"; -@import "matrix-react-sdk/structures/_RoomStatusBar"; -@import "matrix-react-sdk/structures/_RoomView"; -@import "matrix-react-sdk/structures/_SearchBox"; -@import "matrix-react-sdk/structures/_UploadBar"; -@import "matrix-react-sdk/structures/_UserSettings"; -@import "matrix-react-sdk/structures/login/_Login"; -@import "matrix-react-sdk/views/avatars/_BaseAvatar"; -@import "matrix-react-sdk/views/dialogs/_ChatInviteDialog"; -@import "matrix-react-sdk/views/dialogs/_EncryptedEventDialog"; -@import "matrix-react-sdk/views/dialogs/_SetDisplayNameDialog"; -@import "matrix-react-sdk/views/elements/_AddressSelector"; -@import "matrix-react-sdk/views/elements/_AddressTile"; -@import "matrix-react-sdk/views/elements/_DirectorySearchBox"; -@import "matrix-react-sdk/views/elements/_MemberEventListSummary"; -@import "matrix-react-sdk/views/elements/_ProgressBar"; -@import "matrix-react-sdk/views/elements/_RichText"; -@import "matrix-react-sdk/views/login/_ServerConfig"; -@import "matrix-react-sdk/views/messages/_MImageBody"; -@import "matrix-react-sdk/views/messages/_MNoticeBody"; -@import "matrix-react-sdk/views/messages/_MTextBody"; -@import "matrix-react-sdk/views/messages/_TextualEvent"; -@import "matrix-react-sdk/views/messages/_UnknownBody"; -@import "matrix-react-sdk/views/rooms/_Autocomplete"; -@import "matrix-react-sdk/views/rooms/_EntityTile"; -@import "matrix-react-sdk/views/rooms/_EventTile"; -@import "matrix-react-sdk/views/rooms/_LinkPreviewWidget"; -@import "matrix-react-sdk/views/rooms/_MemberDeviceInfo"; -@import "matrix-react-sdk/views/rooms/_MemberInfo"; -@import "matrix-react-sdk/views/rooms/_MemberList"; -@import "matrix-react-sdk/views/rooms/_MessageComposer"; -@import "matrix-react-sdk/views/rooms/_PresenceLabel"; -@import "matrix-react-sdk/views/rooms/_RoomHeader"; -@import "matrix-react-sdk/views/rooms/_RoomList"; -@import "matrix-react-sdk/views/rooms/_RoomPreviewBar"; -@import "matrix-react-sdk/views/rooms/_RoomSettings"; -@import "matrix-react-sdk/views/rooms/_RoomTile"; -@import "matrix-react-sdk/views/rooms/_SearchableEntityList"; -@import "matrix-react-sdk/views/rooms/_TabCompleteBar"; -@import "matrix-react-sdk/views/rooms/_TopUnreadMessagesBar"; -@import "matrix-react-sdk/views/settings/_DevicesPanel"; -@import "matrix-react-sdk/views/settings/_IntegrationsManager"; -@import "matrix-react-sdk/views/voip/_CallView"; -@import "matrix-react-sdk/views/voip/_IncomingCallbox"; -@import "matrix-react-sdk/views/voip/_VideoView"; -@import "vector-web/_fonts"; -@import "vector-web/structures/_CompatibilityPage"; -@import "vector-web/structures/_LeftPanel"; -@import "vector-web/structures/_RightPanel"; -@import "vector-web/structures/_RoomDirectory"; -@import "vector-web/structures/_RoomSubList"; -@import "vector-web/structures/_ViewSource"; -@import "vector-web/views/context_menus/_MessageContextMenu"; -@import "vector-web/views/context_menus/_NotificationStateContextMenu"; -@import "vector-web/views/context_menus/_RoomTagContextMenu"; -@import "vector-web/views/dialogs/_ChangelogDialog"; -@import "vector-web/views/directory/_NetworkDropdown"; -@import "vector-web/views/elements/_ImageView"; -@import "vector-web/views/elements/_Spinner"; -@import "vector-web/views/globals/_GuestWarningBar"; -@import "vector-web/views/globals/_MatrixToolbar"; -@import "vector-web/views/messages/_MessageTimestamp"; -@import "vector-web/views/messages/_SenderProfile"; -@import "vector-web/views/rooms/_RoomDropTarget"; -@import "vector-web/views/rooms/_RoomTooltip"; -@import "vector-web/views/rooms/_SearchBar"; -@import "vector-web/views/settings/_Notifications"; +@import "./_common.scss"; +@import "./matrix-react-sdk/structures/_ContextualMenu.scss"; +@import "./matrix-react-sdk/structures/_CreateRoom.scss"; +@import "./matrix-react-sdk/structures/_FilePanel.scss"; +@import "./matrix-react-sdk/structures/_MatrixChat.scss"; +@import "./matrix-react-sdk/structures/_NotificationPanel.scss"; +@import "./matrix-react-sdk/structures/_RoomStatusBar.scss"; +@import "./matrix-react-sdk/structures/_RoomView.scss"; +@import "./matrix-react-sdk/structures/_SearchBox.scss"; +@import "./matrix-react-sdk/structures/_UploadBar.scss"; +@import "./matrix-react-sdk/structures/_UserSettings.scss"; +@import "./matrix-react-sdk/structures/login/_Login.scss"; +@import "./matrix-react-sdk/views/avatars/_BaseAvatar.scss"; +@import "./matrix-react-sdk/views/dialogs/_ChatInviteDialog.scss"; +@import "./matrix-react-sdk/views/dialogs/_EncryptedEventDialog.scss"; +@import "./matrix-react-sdk/views/dialogs/_SetDisplayNameDialog.scss"; +@import "./matrix-react-sdk/views/elements/_AddressSelector.scss"; +@import "./matrix-react-sdk/views/elements/_AddressTile.scss"; +@import "./matrix-react-sdk/views/elements/_DirectorySearchBox.scss"; +@import "./matrix-react-sdk/views/elements/_MemberEventListSummary.scss"; +@import "./matrix-react-sdk/views/elements/_ProgressBar.scss"; +@import "./matrix-react-sdk/views/elements/_RichText.scss"; +@import "./matrix-react-sdk/views/login/_ServerConfig.scss"; +@import "./matrix-react-sdk/views/messages/_MImageBody.scss"; +@import "./matrix-react-sdk/views/messages/_MNoticeBody.scss"; +@import "./matrix-react-sdk/views/messages/_MTextBody.scss"; +@import "./matrix-react-sdk/views/messages/_TextualEvent.scss"; +@import "./matrix-react-sdk/views/messages/_UnknownBody.scss"; +@import "./matrix-react-sdk/views/rooms/_Autocomplete.scss"; +@import "./matrix-react-sdk/views/rooms/_EntityTile.scss"; +@import "./matrix-react-sdk/views/rooms/_EventTile.scss"; +@import "./matrix-react-sdk/views/rooms/_LinkPreviewWidget.scss"; +@import "./matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss"; +@import "./matrix-react-sdk/views/rooms/_MemberInfo.scss"; +@import "./matrix-react-sdk/views/rooms/_MemberList.scss"; +@import "./matrix-react-sdk/views/rooms/_MessageComposer.scss"; +@import "./matrix-react-sdk/views/rooms/_PresenceLabel.scss"; +@import "./matrix-react-sdk/views/rooms/_RoomHeader.scss"; +@import "./matrix-react-sdk/views/rooms/_RoomList.scss"; +@import "./matrix-react-sdk/views/rooms/_RoomPreviewBar.scss"; +@import "./matrix-react-sdk/views/rooms/_RoomSettings.scss"; +@import "./matrix-react-sdk/views/rooms/_RoomTile.scss"; +@import "./matrix-react-sdk/views/rooms/_SearchableEntityList.scss"; +@import "./matrix-react-sdk/views/rooms/_TabCompleteBar.scss"; +@import "./matrix-react-sdk/views/rooms/_TopUnreadMessagesBar.scss"; +@import "./matrix-react-sdk/views/settings/_DevicesPanel.scss"; +@import "./matrix-react-sdk/views/settings/_IntegrationsManager.scss"; +@import "./matrix-react-sdk/views/voip/_CallView.scss"; +@import "./matrix-react-sdk/views/voip/_IncomingCallbox.scss"; +@import "./matrix-react-sdk/views/voip/_VideoView.scss"; +@import "./themes/_base.scss"; +@import "./vector-web/_fonts.scss"; +@import "./vector-web/structures/_CompatibilityPage.scss"; +@import "./vector-web/structures/_LeftPanel.scss"; +@import "./vector-web/structures/_RightPanel.scss"; +@import "./vector-web/structures/_RoomDirectory.scss"; +@import "./vector-web/structures/_RoomSubList.scss"; +@import "./vector-web/structures/_ViewSource.scss"; +@import "./vector-web/views/context_menus/_MessageContextMenu.scss"; +@import "./vector-web/views/context_menus/_NotificationStateContextMenu.scss"; +@import "./vector-web/views/context_menus/_RoomTagContextMenu.scss"; +@import "./vector-web/views/dialogs/_ChangelogDialog.scss"; +@import "./vector-web/views/directory/_NetworkDropdown.scss"; +@import "./vector-web/views/elements/_ImageView.scss"; +@import "./vector-web/views/elements/_Spinner.scss"; +@import "./vector-web/views/globals/_GuestWarningBar.scss"; +@import "./vector-web/views/globals/_MatrixToolbar.scss"; +@import "./vector-web/views/messages/_MessageTimestamp.scss"; +@import "./vector-web/views/messages/_SenderProfile.scss"; +@import "./vector-web/views/rooms/_RoomDropTarget.scss"; +@import "./vector-web/views/rooms/_RoomTooltip.scss"; +@import "./vector-web/views/rooms/_SearchBar.scss"; +@import "./vector-web/views/settings/_Notifications.scss"; diff --git a/src/skins/vector/css/rethemendex.sh b/src/skins/vector/css/rethemendex.sh index 29e3438208..915b235da0 100755 --- a/src/skins/vector/css/rethemendex.sh +++ b/src/skins/vector/css/rethemendex.sh @@ -4,5 +4,5 @@ echo "// autogenerated by rethemendex.sh" > _components.scss for i in `find . -iname _\*.scss | fgrep -v _components.scss`; do - echo "@import \"`dirname $i`/`basename $i .scss`\";" >> _components.scss + echo "@import \"$i\";" >> _components.scss done diff --git a/src/skins/vector/css/themes/dark.scss b/src/skins/vector/css/themes/dark.scss index 5449b90ed6..0c51486b57 100644 --- a/src/skins/vector/css/themes/dark.scss +++ b/src/skins/vector/css/themes/dark.scss @@ -1,72 +1,4 @@ -@import "_base"; - -// typical text (dark-on-white in light skin) -$primary-fg-color: #dddddd; -$primary-bg-color: #2d2d2d; - -// used for focusing form controls -$focus-bg-color: #101010; - -// used for dialog box text -$light-fg-color: #747474; - -// button UI (white-on-green in light skin) -$accent-fg-color: $primary-bg-color; -$accent-color: #76CFA6; - -// red warning colour -$warning-color: #ff0064; - -// left-panel style muted accent color -$secondary-accent-color: $primary-bg-color; - -// used by AddressSelector -$selected-color: #eaf5f0; - -// selected for hoverover & selected event tiles -$event-selected-color: #353535; - -// used for the hairline dividers in RoomView -$primary-hairline-color: #474747; - -// used for the border of input text fields -$input-border-color: #3a3a3a; - -// apart from login forms, which have stronger border -$strong-input-border-color: #656565; - -// context menus -$menu-border-color: rgba(187, 187, 187, 0.5); -$menu-bg-color: #373737; - -$avatar-initial-color: #2d2d2d; - -// ******************** - -$roomtile-name-color: rgba(186, 186, 186, 0.8); -$roomtile-selected-bg-color: rgba(0, 0, 0, 0.8); - -$roomsublist-label-fg-color: $primary-fg-color; -$roomsublist-label-bg-color: #454545; - -// ******************** - -// event tile lifecycle -$event-encrypting-color: #abddbc; -$event-sending-color: #ddd; -$event-notsent-color: #f44; - -// event timestamp -$event-timestamp-color: #acacac; - -// e2e -$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color -$e2e-unverified-color: #e8bf37; -$e2e-warning-color: #ba6363; - -/*** ImageView ***/ -$lightbox-bg-color: #454545; -$lightbox-fg-color: #ffffff; -$lightbox-border-color: #ffffff; - -@import "../_components"; \ No newline at end of file +@import "_base.scss"; +@import "_dark.scss"; +@import "../_components.scss"; +// moofleasdadsasdadsa \ No newline at end of file diff --git a/src/skins/vector/css/themes/light.scss b/src/skins/vector/css/themes/light.scss index 8b951e27e0..ea0f93d5a3 100644 --- a/src/skins/vector/css/themes/light.scss +++ b/src/skins/vector/css/themes/light.scss @@ -1,2 +1,2 @@ -@import "_base"; -@import "../_components"; \ No newline at end of file +@import "_base.scss"; +@import "../_components.scss"; \ No newline at end of file diff --git a/src/vector/index.js b/src/vector/index.js index 47509887b5..64b8769812 100644 --- a/src/vector/index.js +++ b/src/vector/index.js @@ -30,7 +30,7 @@ require('babel-polyfill'); // CSS requires: just putting them here for now as CSS is going to be // refactored "soon" anyway -require('../../build/themes/dark.css'); +require('../../build/dark.scss'); require('gemini-scrollbar/gemini-scrollbar.css'); require('gfm.css/gfm.css'); require('highlight.js/styles/github.css'); diff --git a/webpack.config.js b/webpack.config.js index 1c408b7068..1f2a8a60b1 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -24,8 +24,8 @@ module.exports = { { test: /\.json$/, loader: "json" }, { test: /\.js$/, loader: "babel", include: path.resolve('./src') }, // css-raw-loader loads CSS but doesn't try to treat url()s as require()s - { test: /\.css$/, loader: ExtractTextPlugin.extract("css-raw-loader") }, - { test: /\.scss$/, loaders: ["style-loader", "css-loader?sourceMap", "sass-loader?sourceMap"] }, + // we're assuming that postcss has already preprocessed SCSS by this point + { test: /\.s?css$/, loader: ExtractTextPlugin.extract("css-raw-loader") }, ], noParse: [ // don't parse the languages within highlight.js. They cause stack