Use tailwindcss standalone cli

flake.nix

@@ -26,6 +26,7 @@
         yarn
         nodejs
         redocly-cli
+        tailwindcss
       ];
       devshellPkgs = ciPkgs ++ (with pkgs; [
         jq

modules/webapp/package.json

@@ -5,13 +5,6 @@
   "devDependencies": {
     "@fortawesome/fontawesome-free": "^6.0.0",
     "@tailwindcss/forms": "^0.5.0",
-    "autoprefixer": "^10.4.2",
+    "flag-icons": "^7.2.0"
-    "cssnano": "^6.0.0",
-    "flag-icon-css": "^3.5.0",
-    "postcss": "^8.4.7",
-    "postcss-cli": "^11.0.0",
-    "postcss-import": "^16.0.0",
-    "postcss-purgecss": "^5.0.0",
-    "tailwindcss": "^3.0.23"
   }
 }

modules/webapp/src/main/elm/Messages.elm

@@ -109,7 +109,7 @@ gb tz =
     , timeZone = tz
     , iso2 = "gb"
     , label = "English"
-    , flagIcon = "flag-icon flag-icon-gb"
+    , flagIcon = "fi fi-gb"
     , app = Messages.App.gb
     , collectiveSettings = Messages.Page.CollectiveSettings.gb tz
     , login = Messages.Page.Login.gb
@@ -133,7 +133,7 @@ de tz =
     , timeZone = tz
     , iso2 = "de"
     , label = "Deutsch"
-    , flagIcon = "flag-icon flag-icon-de"
+    , flagIcon = "fi fi-de"
     , app = Messages.App.de
     , collectiveSettings = Messages.Page.CollectiveSettings.de tz
     , login = Messages.Page.Login.de
@@ -157,7 +157,7 @@ fr tz =
     , timeZone = tz
     , iso2 = "fr"
     , label = "Français"
-    , flagIcon = "flag-icon flag-icon-fr"
+    , flagIcon = "fi fi-fr"
     , app = Messages.App.fr
     , collectiveSettings = Messages.Page.CollectiveSettings.fr tz
     , login = Messages.Page.Login.fr

modules/webapp/src/main/styles/index.css

@@ -1,5 +1,5 @@
 @import "@fortawesome/fontawesome-free/css/all";
-@import "flag-icon-css/css/flag-icon.min";
+@import "flag-icons/css/flag-icons.min";
 
 @import "tailwindcss/base";
 @import "tailwindcss/components";

modules/webapp/tailwind.config.js

@@ -28,5 +28,4 @@ module.exports = {
     plugins: [
         require('@tailwindcss/forms')
     ]
-//    prefix: 'tw-'
 }

project/StylesPlugin.scala

@@ -23,7 +23,7 @@ object StylesPlugin extends AutoPlugin {
     val stylesDirectory = settingKey[File]("The directory containing source styles")
     val stylesOutputDir = settingKey[File]("The directory to put the final outcome")
     val stylesMode = settingKey[StylesMode]("The compile mode, dev or production")
-    val stylesNpxCommand = settingKey[String]("The npx executable")
+    val stylesTwCommand = settingKey[String]("The tailwindcss executable")
     val stylesNpmCommand =
       settingKey[String]("The npm executable for installing dependencies")
 
@@ -40,19 +40,19 @@ object StylesPlugin extends AutoPlugin {
       stylesDirectory := (Compile / sourceDirectory).value / "styles",
       stylesOutputDir := (Compile / resourceManaged).value /
         "META-INF" / "resources" / "webjars" / name.value / version.value,
-      stylesNpxCommand := "npx",
+      stylesTwCommand := "tailwindcss",
       stylesNpmCommand := "npm",
       stylesMode := StylesMode.Dev,
       stylesBuild := {
         val logger = streams.value.log
-        val npx = stylesNpxCommand.value
+        val tw = stylesTwCommand.value
         val npm = stylesNpmCommand.value
         val inDir = stylesDirectory.value
         val outDir = stylesOutputDir.value
         val wd = (Compile / baseDirectory).value
         val mode = stylesMode.value
         npmInstall(npm, wd, logger)
-        val files = postCss(npx, inDir, outDir, wd, mode, logger) ++
+        val files = runTailwind(tw, inDir, outDir, wd, mode, logger) ++
           copyWebfonts(wd, outDir, logger) ++
           copyFlags(wd, outDir, logger)
         logger.info(s"Styles built at $outDir")
@@ -77,8 +77,8 @@ object StylesPlugin extends AutoPlugin {
     }
   }
 
-  def postCss(
+  def runTailwind(
-      npx: String,
+      tailwind: String,
       inDir: File,
       outDir: File,
       wd: File,
@@ -86,25 +86,20 @@ object StylesPlugin extends AutoPlugin {
       logger: Logger
   ): Seq[File] = {
     val env = mode match {
-      case StylesMode.Dev  => "development"
+      case StylesMode.Dev  => Seq.empty
-      case StylesMode.Prod => "production"
+      case StylesMode.Prod => Seq("--minify")
     }
     val target = outDir / "css" / "styles.css"
     IO.createDirectory(target.getParentFile)
     logger.info("Compiling css stylesheets…")
-    Cmd.run(
+    val cmd = Seq(
-      Seq(
+      tailwind,
-        npx,
+      "--input",
-        "postcss",
+      s"$inDir/index.css",
-        s"$inDir/index.css",
+      "-o",
-        "-o",
+      target.absolutePath
-        target.absolutePath,
+    ) ++ env
-        "--env",
+    Cmd.run(cmd, wd, logger)
-        env
-      ),
-      wd,
-      logger
-    )
     val gz = file(target.toString + ".gz")
     IO.gzip(target, gz)
     Seq(target, gz)
@@ -121,7 +116,7 @@ object StylesPlugin extends AutoPlugin {
 
   def copyFlags(baseDir: File, outDir: File, logger: Logger): Seq[File] = {
     val flagDir =
-      baseDir / "node_modules" / "flag-icon-css" / "flags"
+      baseDir / "node_modules" / "flag-icons" / "flags"
     val targetDir = outDir / "flags"
     IO.createDirectory(targetDir)
 

project/dev-ui-build.sh

@@ -23,7 +23,7 @@ compile_css() {
     echo "Building css …"
     local srcs="$wdir/modules/webapp/src/main/styles/index.css"
     local target="$targetbase/css/styles.css"
-    cd $wdir/modules/webapp && npx tailwindcss --input "$srcs" -o "$target" --config ./tailwind.config.js --postcss ./postcss.config.js  --env development && cd -
+    cd $wdir/modules/webapp && tailwindcss --input "$srcs" -o "$target" --config ./tailwind.config.js --postcss ./postcss.config.js  --env development && cd -
     cat "$target" | gzip > "$targetbase/css/styles.css.gz"
     cp "$targetbase/css/styles.css" "$resourcebase/css/"
     cp "$targetbase/css/styles.css.gz" "$resourcebase/css/"
@@ -47,7 +47,7 @@ watch_css() {
     local srcs="$wdir/modules/webapp/src/main/styles/index.css"
     local target="$targetbase/css/styles.css"
     cd $wdir/modules/webapp && \
-        npx tailwindcss --input "$srcs" \
+        tailwindcss --input "$srcs" \
             -o "$target" -m \
             --config ./tailwind.config.js \
             --postcss ./postcss.config.js --watch