postcss: Cleanly import flatpickr dark theme.

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>

package.json

@@ -55,9 +55,11 @@
     "postcss": "^8.0.3",
     "postcss-calc": "^8.0.0",
     "postcss-extend-rule": "^3.0.0",
+    "postcss-import": "^14.0.2",
     "postcss-loader": "^4.0.2",
     "postcss-media-minmax": "https://github.com/andersk/postcss-media-minmax.git#01239f17f4a9872ace1dd133cee526a7de4ac9f5",
     "postcss-nested": "^5.0.0",
+    "postcss-prefixwrap": "^1.24.0",
     "postcss-simple-vars": "^6.0.0",
     "regenerator-runtime": "^0.13.3",
     "shebang-loader": "^0.0.1",

postcss.config.js

@@ -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"),
     ],
-};
+});

static/styles/night_mode.css

@@ -1,4 +1,11 @@
+@import "flatpickr/dist/themes/dark.css";
+
 body.night-mode {
+    /* the following block(s) are generated by the import statements.
+       See postcss.config.js for details.
+     */
+    @extend %night-mode-block;
+
     background-color: hsl(212, 28%, 18%);
     color: hsl(236, 33%, 90%);
 

version.py

@@ -48,4 +48,4 @@ API_FEATURE_LEVEL = 97
 #   historical commits sharing the same major version, in which case a
 #   minor version bump suffices.
 
-PROVISION_VERSION = "159.1"
+PROVISION_VERSION = "159.2"

yarn.lock

@@ -10367,6 +10367,11 @@ picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3:
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.0.tgz#f1f061de8f6a4bf022892e2d128234fb98302972"
   integrity sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==
 
+pify@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
+  integrity sha1-7RQaasBDqEnqWISY59yosVMw6Qw=
+
 pify@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
@@ -10658,6 +10663,15 @@ postcss-html@^0.36.0:
   dependencies:
     htmlparser2 "^3.10.0"
 
+postcss-import@^14.0.2:
+  version "14.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-14.0.2.tgz#60eff77e6be92e7b67fe469ec797d9424cae1aa1"
+  integrity sha512-BJ2pVK4KhUyMcqjuKs9RijV5tatNzNa73e/32aBVE/ejYPe37iH+6vAu9WvqUkB5OAYgLHzbSvzHnorybJCm9g==
+  dependencies:
+    postcss-value-parser "^4.0.0"
+    read-cache "^1.0.0"
+    resolve "^1.1.7"
+
 postcss-less@^3.1.4:
   version "3.1.4"
   resolved "https://registry.yarnpkg.com/postcss-less/-/postcss-less-3.1.4.tgz#369f58642b5928ef898ffbc1a6e93c958304c5ad"
@@ -10893,6 +10907,11 @@ postcss-ordered-values@^4.1.2:
     postcss "^7.0.0"
     postcss-value-parser "^3.0.0"
 
+postcss-prefixwrap@^1.24.0:
+  version "1.24.0"
+  resolved "https://registry.yarnpkg.com/postcss-prefixwrap/-/postcss-prefixwrap-1.24.0.tgz#2335876280cc2a8b666b6bbc6cdcea88424b81f8"
+  integrity sha512-v8pE8p8IhQDwLCkZJDd88OA2MYLeXvK+bSlGdwqpEZhX2FLkIM+LrFCpqG7L1QQc6VoV6cnzzJzXmTLXubagyA==
+
 postcss-reduce-initial@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/postcss-reduce-initial/-/postcss-reduce-initial-4.0.3.tgz#7fd42ebea5e9c814609639e2c2e84ae270ba48df"
@@ -10995,7 +11014,7 @@ postcss-value-parser@^3.0.0:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
   integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
 
-postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0:
+postcss-value-parser@^4.0.0, postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
   integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
@@ -11336,6 +11355,13 @@ raw-body@2.4.0:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
+read-cache@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
+  integrity sha1-5mTvMRYRZsl1HNvo28+GtftY93Q=
+  dependencies:
+    pify "^2.3.0"
+
 read-pkg-up@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-3.0.0.tgz#3ed496685dba0f8fe118d0691dc51f4a1ff96f07"
@@ -11791,7 +11817,7 @@ resolve@^0.6.1:
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-0.6.3.tgz#dd957982e7e736debdf53b58a4dd91754575dd46"
   integrity sha1-3ZV5gufnNt699TtYpN2RdUV13UY=
 
-resolve@^1.0.0, resolve@^1.1.10, resolve@^1.1.5, resolve@^1.10.0, resolve@^1.12.0, resolve@^1.14.2, resolve@^1.20.0, resolve@^1.9.0:
+resolve@^1.0.0, resolve@^1.1.10, resolve@^1.1.5, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.12.0, resolve@^1.14.2, resolve@^1.20.0, resolve@^1.9.0:
   version "1.20.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"
   integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==