chore: reinstate TW layer directives, remove JSX CSS imports

.storybook/styles.css

@@ -5,6 +5,14 @@
 @import "../src/core/fonts/jetBrains-mono.css";
 @import "../src/core/fonts/manrope.css";
 @import "../src/core/styles.css";
+@import "../src/core/ContactFooter/component.css";
+@import "../src/core/CookieMessage/component.css";
+@import "../src/core/Flash/component.css";
+@import "../src/core/Footer/component.css";
+@import "../src/core/Meganav/component.css";
+@import "../src/core/Notice/component.css";
+@import "../src/core/Slider/component.css";
+@import "../src/core/utils/syntax-highlighter.css";
 @import "../src/reset/styles.css";
 
 @import "./application.css";

postcss.config.js

@@ -1,6 +1,7 @@
 export default {
   plugins: {
     "postcss-import": {},
+    "tailwindcss/nesting": {},
     tailwindcss: {},
     autoprefixer: {},
   },

src/core/ContactFooter.tsx

@@ -3,7 +3,6 @@ import React, { useEffect } from "react";
 import Icon from "./Icon";
 import _absUrl from "./url-base.js";
 import toggleChatWidget from "./hubspot-chat-toggle";
-import "./ContactFooter/component.css";
 
 type ContactFooterProps = {
   urlBase: string;

src/core/ContactFooter/component.css

@@ -1,9 +1,11 @@
-.ui-contact-footer {
-  background-size: 100% 100%;
-  background-position: right center;
-  @apply w-full bg-gradient-active-orange;
-}
+@layer components {
+  .ui-contact-footer {
+    background-size: 100% 100%;
+    background-position: right center;
+    @apply w-full bg-gradient-active-orange;
+  }
 
-.ui-contact-footer-box {
-  @apply p-24 sm:p-32 xl:p-40 bg-white flex flex-col justify-between rounded-sm;
+  .ui-contact-footer-box {
+    @apply p-24 sm:p-32 xl:p-40 bg-white flex flex-col justify-between rounded-sm;
+  }
 }

src/core/CookieMessage.tsx

@@ -1,7 +1,6 @@
 import React, { useRef, useEffect, useState } from "react";
 import Cookie from "js-cookie";
 
-import "./CookieMessage/component.css";
 import _absUrl from "./url-base";
 
 const COOKIE_EXPIRY = 365;

src/core/CookieMessage/component.css

@@ -1,11 +1,13 @@
-.ui-cookie-message {
-  @apply rounded-lg bg-white font-sans;
-  @apply justify-between items-center;
-  @apply opacity-100 z-50 bottom-0 fixed sm:flex;
-  @apply p-16 mb-16 ml-16;
-  max-width: 70vw;
-  box-shadow: 0px 24px 32px 0px #0000000d;
-  border: 1px solid var(--color-mid-grey);
-  border-left: 0.5rem solid var(--color-electric-cyan);
-  transition: bottom 250ms ease-out, opacity 150ms ease-out;
+@layer components {
+  .ui-cookie-message {
+    @apply rounded-lg bg-white font-sans;
+    @apply justify-between items-center;
+    @apply opacity-100 z-50 bottom-0 fixed sm:flex;
+    @apply p-16 mb-16 ml-16;
+    max-width: 70vw;
+    box-shadow: 0px 24px 32px 0px #0000000d;
+    border: 1px solid var(--color-mid-grey);
+    border-left: 0.5rem solid var(--color-electric-cyan);
+    transition: bottom 250ms ease-out, opacity 150ms ease-out;
+  }
 }

src/core/Flash.tsx

@@ -5,7 +5,6 @@ import { nanoid } from "nanoid/non-secure";
 import { getRemoteDataStore } from "./remote-data-store.js";
 import ConnectStateWrapper from "./ConnectStateWrapper";
 import Icon from "./Icon";
-import "./Flash/component.css";
 
 type FlashProps = {
   id: string;

src/core/Flash/component.css

@@ -1,23 +1,25 @@
-.ui-flash {
-  @apply w-full fixed;
-  top: 5.5rem;
-  z-index: calc(var(--stacking-context-page-meganav) - 10);
-  transition: margin-top 200ms;
-}
+@layer components {
+  .ui-flash {
+    @apply w-full fixed;
+    top: 5.5rem;
+    z-index: calc(var(--stacking-context-page-meganav) - 10);
+    transition: margin-top 200ms;
+  }
 
-.ui-flash-message {
-  @apply font-sans font-light antialiased max-w-screen-xl mx-auto mt-8 opacity-0 relative;
-  transition: opacity 200ms, transform 200ms, height 200ms 200ms,
-    margin-top 200ms 200ms;
-  transform: translateY(-200%) rotateX(-90deg);
-}
+  .ui-flash-message {
+    @apply font-sans font-light antialiased max-w-screen-xl mx-auto mt-8 opacity-0 relative;
+    transition: opacity 200ms, transform 200ms, height 200ms 200ms,
+      margin-top 200ms 200ms;
+    transform: translateY(-200%) rotateX(-90deg);
+  }
 
-/* dynamic content inside flash, can't add classes */
-.ui-flash-text a {
-  @apply underline;
-}
+  /* dynamic content inside flash, can't add classes */
+  .ui-flash-text a {
+    @apply underline;
+  }
 
-.ui-flash-message-enter {
-  @apply opacity-100;
-  transform: translateY(0) rotateX(0);
+  .ui-flash-message-enter {
+    @apply opacity-100;
+    transform: translateY(0) rotateX(0);
+  }
 }

src/core/Footer.tsx

@@ -2,7 +2,6 @@ import React from "react";
 
 import Icon from "./Icon";
 import _absUrl from "./url-base.js";
-import "./Footer/component.css";
 
 type FooterProps = {
   paths: {

src/core/Footer/component.css

@@ -1,31 +1,33 @@
-.ui-footer-col-title {
-  @apply font-mono text-overline2 p-menu-row-title font-medium uppercase tracking-widen-0.16;
-}
+@layer components {
+  .ui-footer-col-title {
+    @apply font-mono text-overline2 p-menu-row-title font-medium uppercase tracking-widen-0.16;
+  }
 
-.ui-footer-menu-row-link {
-  @apply text-menu3 text-cool-black font-sans font-medium hover:text-gui-hover block;
-}
+  .ui-footer-menu-row-link {
+    @apply text-menu3 text-cool-black font-sans font-medium hover:text-gui-hover block;
+  }
 
-.ui-footer-link {
-  @apply text-gui-default hover:text-gui-hover text-menu3 font-sans font-medium;
-}
+  .ui-footer-link {
+    @apply text-gui-default hover:text-gui-hover text-menu3 font-sans font-medium;
+  }
 
-.ui-footer-compliance-text {
-  font-size: 12px;
-}
+  .ui-footer-compliance-text {
+    font-size: 12px;
+  }
 
-.ui-footer-tick-icon {
-  min-width: 1.5rem;
-}
+  .ui-footer-tick-icon {
+    min-width: 1.5rem;
+  }
 
-@media (max-width: 1040px) {
-  .ui-footer-bottom-links {
-    @apply pb-40;
+  @media (max-width: 1040px) {
+    .ui-footer-bottom-links {
+      @apply pb-40;
+    }
   }
-}
 
-@media screen {
-  .ui-footer-glassdoor {
-    display: none;
+  @media screen {
+    .ui-footer-glassdoor {
+      display: none;
+    }
   }
 }

src/core/Meganav.tsx

@@ -4,7 +4,6 @@ import { connectState } from "./remote-data-store.js";
 import { selectSessionData } from "./remote-session-data.js";
 
 import Logo from "./Logo";
-import "./Meganav/component.css";
 import MeganavData from "./Meganav/component.json";
 import MeganavScripts from "./Meganav/component.js";
 import MeganavItemsDesktop from "./MeganavItemsDesktop";