Update to Tailwind 3; support normal tailwind usage without twin.macro

.babel-plugin-macrosrc.js

@@ -1,11 +0,0 @@
-module.exports = {
-    twin: {
-        preset: 'styled-components',
-        autoCssProp: true,
-    },
-    styledComponents: {
-        pure: true,
-        displayName: true,
-        fileName: true,
-    },
-};

package.json

@@ -4,7 +4,7 @@
         "@fortawesome/fontawesome-svg-core": "^1.2.32",
         "@fortawesome/free-solid-svg-icons": "^5.15.1",
         "@fortawesome/react-fontawesome": "^0.1.11",
-        "@tailwindcss/forms": "^0.2.1",
+        "@tailwindcss/forms": "^0.5.2",
         "axios": "^0.21.1",
         "chart.js": "^2.8.0",
         "codemirror": "^5.57.0",
@@ -34,7 +34,7 @@
         "styled-components": "^5.2.1",
         "styled-components-breakpoint": "^3.0.0-preview.20",
         "swr": "^0.2.3",
-        "tailwindcss": "^2.0.2",
+        "tailwindcss": "^3.0.24",
         "uuid": "^3.3.2",
         "xterm": "^4.15.0",
         "xterm-addon-attach": "^0.6.0",
@@ -78,11 +78,11 @@
         "@types/yup": "^0.29.3",
         "@typescript-eslint/eslint-plugin": "^4.25.0",
         "@typescript-eslint/parser": "^4.25.0",
-        "autoprefixer": "^10.1.0",
+        "autoprefixer": "^10.4.7",
-        "babel-loader": "^8.0.6",
+        "babel-loader": "^8.2.5",
-        "babel-plugin-styled-components": "^1.12.0",
+        "babel-plugin-styled-components": "^2.0.7",
         "cross-env": "^7.0.2",
-        "css-loader": "^3.2.1",
+        "css-loader": "^5.2.7",
         "eslint": "^7.27.0",
         "eslint-config-standard": "^16.0.3",
         "eslint-plugin-import": "^2.23.3",
@@ -91,14 +91,18 @@
         "eslint-plugin-react": "^7.23.2",
         "eslint-plugin-react-hooks": "^4.2.0",
         "fork-ts-checker-webpack-plugin": "^6.2.10",
-        "postcss": "^8.2.1",
+        "postcss": "^8.4.14",
+        "postcss-import": "^14.1.0",
+        "postcss-loader": "^4.0.0",
+        "postcss-nesting": "^10.1.8",
+        "postcss-preset-env": "^7.7.1",
         "redux-devtools-extension": "^2.13.8",
-        "source-map-loader": "^1.0.1",
+        "source-map-loader": "^1.1.3",
-        "style-loader": "^1.2.1",
+        "style-loader": "^2.0.0",
-        "svg-url-loader": "^6.0.0",
+        "svg-url-loader": "^7.1.1",
-        "terser-webpack-plugin": "^3.0.6",
+        "terser-webpack-plugin": "^4.2.3",
         "ts-essentials": "^9.1.2",
-        "twin.macro": "^2.0.7",
+        "twin.macro": "^2.8.2",
         "typescript": "^4.2.4",
         "webpack": "^4.43.0",
         "webpack-assets-manifest": "^3.1.1",
@@ -120,5 +124,15 @@
         "last 2 versions",
         "firefox esr",
         "not dead"
-    ]
+    ],
+    "babelMacros": {
+        "twin": {
+            "preset": "styled-components"
+        },
+        "styledComponents": {
+            "pure": true,
+            "displayName": true,
+            "fileName": true
+        }
+    }
 }

postcss.config.js

@@ -0,0 +1,17 @@
+module.exports = {
+    plugins: [
+        require('postcss-import'),
+        // We want to make use of nesting following the CSS Nesting spec, and not the
+        // SASS style nesting.
+        //
+        // @see https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting
+        require('tailwindcss/nesting')(require('postcss-nesting')),
+        require('tailwindcss'),
+        require('autoprefixer'),
+        require('postcss-preset-env')({
+            features: {
+                'nesting-rules': false,
+            },
+        }),
+    ],
+};

resources/scripts/assets/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

resources/scripts/components/App.tsx

@@ -9,12 +9,13 @@ import AuthenticationRouter from '@/routers/AuthenticationRouter';
 import { SiteSettings } from '@/state/settings';
 import ProgressBar from '@/components/elements/ProgressBar';
 import { NotFound } from '@/components/elements/ScreenBlock';
-import tw, { GlobalStyles as TailwindGlobalStyles } from 'twin.macro';
+import tw from 'twin.macro';
 import GlobalStylesheet from '@/assets/css/GlobalStylesheet';
 import { history } from '@/components/history';
 import { setupInterceptors } from '@/api/interceptors';
 import AuthenticatedRoute from '@/components/elements/AuthenticatedRoute';
 import { ServerContext } from '@/state/server';
+import '@/assets/tailwind.css';
 
 interface ExtendedWindow extends Window {
     SiteConfiguration?: SiteSettings;
@@ -56,7 +57,6 @@ const App = () => {
     return (
         <>
             <GlobalStylesheet/>
-            <TailwindGlobalStyles/>
             <StoreProvider store={store}>
                 <ProgressBar/>
                 <div css={tw`mx-auto w-auto`}>

resources/scripts/index.tsx

@@ -4,8 +4,6 @@ import App from '@/components/App';
 import './i18n';
 import { setConfig } from 'react-hot-loader';
 
-import 'tailwindcss/dist/base.min.css';
-
 // Prevents page reloads while making component changes which
 // also avoids triggering constant loading indicators all over
 // the place in development.

tailwind.config.js

@@ -1,88 +1,36 @@
+const colors = require('tailwindcss/colors');
+
+const gray = {
+    50: 'hsl(216, 33%, 97%)',
+    100: 'hsl(214, 15%, 91%)',
+    200: 'hsl(210, 16%, 82%)',
+    300: 'hsl(211, 13%, 65%)',
+    400: 'hsl(211, 10%, 53%)',
+    500: 'hsl(211, 12%, 43%)',
+    600: 'hsl(209, 14%, 37%)',
+    700: 'hsl(209, 18%, 30%)',
+    800: 'hsl(209, 20%, 25%)',
+    900: 'hsl(210, 24%, 16%)',
+};
+
 module.exports = {
+    content: [
+        './resources/scripts/**/*.{js,ts,tsx}',
+    ],
     theme: {
-        fontFamily: {
-            sans: [ 'Rubik', '-apple-system', 'BlinkMacSystemFont', '"Helvetica Neue"', '"Roboto"', 'system-ui', 'sans-serif' ],
-            header: [ '"IBM Plex Sans"', '"Roboto"', 'system-ui', 'sans-serif' ],
-            mono: [ '"IBM Plex Mono"', '"Source Code Pro"', 'SourceCodePro', 'Menlo', 'Monaco', 'Consolas', 'monospace' ],
-        },
-        colors: {
-            transparent: 'transparent',
-            black: 'hsl(210, 27%, 10%)',
-            white: '#ffffff',
-            primary: {
-                50: 'hsl(202, 100%, 95%)', // lightest
-                100: 'hsl(204, 100%, 86%)', // lighter
-                200: 'hsl(206, 93%, 73%)',
-                300: 'hsl(208, 88%, 62%)',
-                400: 'hsl(210, 83%, 53%)', // light
-                500: 'hsl(212, 92%, 43%)', // base
-                600: 'hsl(214, 95%, 36%)', // dark
-                700: 'hsl(215, 96%, 32%)',
-                800: 'hsl(216, 98%, 25%)', // darker
-                900: 'hsl(218, 100%, 17%)', // darkest
-            },
-            neutral: {
-                50: 'hsl(216, 33%, 97%)',
-                100: 'hsl(214, 15%, 91%)',
-                200: 'hsl(210, 16%, 82%)',
-                300: 'hsl(211, 13%, 65%)',
-                400: 'hsl(211, 10%, 53%)',
-                500: 'hsl(211, 12%, 43%)',
-                600: 'hsl(209, 14%, 37%)',
-                700: 'hsl(209, 18%, 30%)',
-                800: 'hsl(209, 20%, 25%)',
-                900: 'hsl(210, 24%, 16%)',
-            },
-            red: {
-                50: 'hsl(360, 100%, 95%)',
-                100: 'hsl(360, 100%, 87%)',
-                200: 'hsl(360, 100%, 80%)',
-                300: 'hsl(360, 91%, 69%)',
-                400: 'hsl(360, 83%, 62%)',
-                500: 'hsl(356, 75%, 53%)',
-                600: 'hsl(354, 85%, 44%)',
-                700: 'hsl(352, 90%, 35%)',
-                800: 'hsl(350, 94%, 28%)',
-                900: 'hsl(348, 94%, 20%)',
-            },
-            yellow: {
-                50: 'hsl(49, 100%, 96%)',
-                100: 'hsl(48, 100%, 88%)',
-                200: 'hsl(48, 95%, 76%)',
-                300: 'hsl(48, 94%, 68%)',
-                400: 'hsl(44, 92%, 63%)',
-                500: 'hsl(42, 87%, 55%)',
-                600: 'hsl(36, 77%, 49%)',
-                700: 'hsl(29, 80%, 44%)',
-                800: 'hsl(22, 82%, 39%)',
-                900: 'hsl(15, 86%, 30%)',
-            },
-            cyan: {
-                50: 'hsl(171, 82%, 94%)',
-                100: 'hsl(172, 97%, 88%)',
-                200: 'hsl(174, 96%, 78%)',
-                300: 'hsl(176, 87%, 67%)',
-                400: 'hsl(178, 78%, 57%)',
-                500: 'hsl(180, 77%, 47%)',
-                600: 'hsl(182, 85%, 39%)',
-                700: 'hsl(184, 90%, 34%)',
-                800: 'hsl(186, 91%, 29%)',
-                900: 'hsl(188, 91%, 23%)',
-            },
-            green: {
-                50: 'hsl(125, 65%, 93%)',
-                100: 'hsl(127, 65%, 85%)',
-                200: 'hsl(124, 63%, 74%)',
-                300: 'hsl(123, 53%, 55%)',
-                400: 'hsl(123, 57%, 45%)',
-                500: 'hsl(122, 73%, 35%)',
-                600: 'hsl(122, 80%, 29%)',
-                700: 'hsl(125, 79%, 26%)',
-                800: 'hsl(125, 86%, 20%)',
-                900: 'hsl(125, 97%, 14%)',
-            },
-        },
         extend: {
+            fontFamily: {
+                header: ['"IBM Plex Sans"', '"Roboto"', 'system-ui', 'sans-serif'],
+            },
+            colors: {
+                black: '#131a20',
+                // "primary" and "neutral" are deprecated, prefer the use of "blue" and "gray"
+                // in new code.
+                primary: colors.blue,
+                gray: gray,
+                neutral: gray,
+                cyan: colors.cyan,
+            },
             fontSize: {
                 '2xs': '0.625rem',
             },
@@ -95,6 +43,8 @@ module.exports = {
         },
     },
     plugins: [
-        require('@tailwindcss/forms'),
+        require('@tailwindcss/forms')({
+            strategy: 'class',
+        }),
     ]
 };

webpack.config.js

@@ -26,12 +26,30 @@ module.exports = {
         rules: [
             {
                 test: /\.tsx?$/,
-                exclude: /node_modules/,
+                exclude: /node_modules|\.spec\.tsx?$/,
                 loader: 'babel-loader',
             },
             {
                 test: /\.css$/,
-                use: [ 'style-loader', 'css-loader' ],
+                use: [
+                    { loader: 'style-loader' },
+                    {
+                        loader: 'css-loader',
+                        options: {
+                            modules: {
+                                auto: true,
+                                localIdentName: isProduction ? '[name]_[hash:base64:8]' : '[path][name]__[local]',
+                                localIdentContext: path.join(__dirname, 'resources/scripts/components'),
+                            },
+                            sourceMap: !isProduction,
+                            importLoaders: 1,
+                        },
+                    },
+                    {
+                        loader: 'postcss-loader',
+                        options: { sourceMap: !isProduction },
+                    },
+                ],
             },
             {
                 test: /\.(png|jp(e?)g|gif)$/,