chore(css): Add grunttask to fix content-server Tailwind selectors

Because:
* Our content-server CSS minification build task is stripping a space between brackets and asterisks, invalidating the selector and causing some styles to not apply. See comment included in commit for more details

This commit:
* Adds a grunttask to add the whitespace back

fixes FXA-9167, fixes FXA-9170

packages/fxa-content-server/grunttasks/build.js

@@ -48,6 +48,15 @@ module.exports = function (grunt) {
     // Update leaf node font and image URLs in the CSS bundle.
     'usemin:css',
 
+    // Tailwind 3.4.1 changed ltr: and rtl: classes to use a `:where... &` selector
+    // that can output an asterisk selector, e.g. `:where([dir="rtl"] *)`. Our `cssmin`
+    // grunttask minifies this to `:where([dir="rtl"]*)`, removing the space, which
+    // causes the style not to load. clean-css does not offer any formatting options
+    // to fix this for us, and since we plan to sunset content-server anyway and this
+    // is not a problem in our minification process for Settings, this is a temp hack
+    // that replaces `]*` with `] *` in our content-server Tailwind CSS file.
+    'replace:cssSelectorFix',
+
     // URLs inside the resources with children have been updated
     // and SRI hashes added to the main JS bundle. These files
     // are in their final state and can now be revved.

packages/fxa-content-server/grunttasks/replace.js

@@ -0,0 +1,18 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+module.exports = function (grunt) {
+  grunt.config('replace', {
+    cssSelectorFix: {
+      src: ['<%= yeoman.dist %>/styles/tailwind.out.css'],
+      overwrite: true,
+      replacements: [
+        {
+          from: /](?=\*)/g,
+          to: '] ',
+        },
+      ],
+    },
+  });
+};