paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-10-27 18:13:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

postcss: Cleanly import flatpickr dark theme.

Browse Source 
We add postcss-import for night_mode.css only. This plugin inlines
the imports of external files, instead of letting the file go via
our usual webpack toolchain.

We do this so that we can use the postcss-prefixwrap plugin to scope
the third-party CSS properly and use it inside our night-mode class.

Fixes #10607.

[anders@zulip.com: Replace postcss-wrap with postcss-prefixwrap.]

Co-authored-by: Anders Kaseorg <anders@zulip.com>
Signed-off-by: Anders Kaseorg <anders@zulip.com>
This commit is contained in:
Rohitt Vashishtha
2021-08-10 14:38:42 +05:30
committed by Tim Abbott
parent 62188e8036
commit ddcea9c64b
5 changed files with 49 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
postcss.config.js
View File

@@ -1,9 +1,18 @@
"use strict";
const path = require("path");
const {media_breakpoints} = require("./static/js/css_variables");
module.exports = {
module.exports = ({file}) => ({
plugins: [
(file.basename ?? path.basename(file)) === "night_mode.css" &&
// Add postcss-import plugin with postcss-prefixwrap to handle
// the flatpickr dark theme. We do this because flatpickr themes
// are not scoped. See https://github.com/flatpickr/flatpickr/issues/2168.
require("postcss-import")({
plugins: [require("postcss-prefixwrap")("%night-mode-block")],
}),
require("postcss-nested"),
require("postcss-extend-rule"),
require("postcss-simple-vars")({variables: media_breakpoints}),
@@ -11,4 +20,4 @@ module.exports = {
require("postcss-media-minmax"),
require("autoprefixer"),
],
};
});