build: extract used tw classes at build time

extract-selectors.js

@@ -0,0 +1,21 @@
+const listSelectors = require('list-selectors');
+const fs = require('fs');
+const { exec } = require('child_process');
+
+exec('tailwind build src/tailwind.css > build/tw.css', {}, () => {
+    listSelectors(
+        ['./build/tw.css'],
+        { include: ['classes'] },
+        ({ classes }) => {
+            fs.writeFileSync(
+                './build/usedCSSClasses.json',
+                JSON.stringify(
+                    classes.map((c) => c
+                        .substring(1)
+                        .split('\\')
+                        .join('')),
+                ),
+            );
+        },
+    );
+});

package.json

@@ -27,7 +27,9 @@
   "module": "build/index.esm.js",
   "types": "build/index.d.ts",
   "scripts": {
-    "build": "rollup -c",
+    "build:lib": "rollup -c",
+    "build:extract": "node extract-selectors.js",
+    "build": "npm run build:lib && npm run build:extract",
     "build:watch": "rollup -cw",
     "test": "jest",
     "test:watch": "jest --watch",
@@ -52,6 +54,7 @@
     "@flybywiresim/eslint-config": "~0.1.0",
     "@flybywiresim/tailwind-config": "~0.3.0",
     "@marfle/react-leaflet-nmscale": "^2.0.0",
+    "@react-leaflet/core": "~1.0.2",
     "@rollup/plugin-commonjs": "^17.1.0",
     "@rollup/plugin-image": "^2.0.6",
     "@rollup/plugin-node-resolve": "^11.1.1",
@@ -74,12 +77,12 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.6.3",
     "leaflet": "^1.7.1",
+    "list-selectors": "^2.0.0",
     "node-sass": "^5.0.0",
-    "postcss": "^8.2.4",
+    "postcss": "^7.0.35",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-leaflet": "^3.1.0",
-    "@react-leaflet/core": "~1.0.2",
     "rollup": "^2.38.4",
     "rollup-plugin-copy": "^3.3.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",

rollup.config.js

@@ -14,13 +14,13 @@ export default {
         {
             file: packageJson.main,
             format: 'cjs',
-            sourcemap: true
+            sourcemap: true,
         },
         {
             file: packageJson.module,
             format: 'esm',
-            sourcemap: true
-        }
+            sourcemap: true,
+        },
     ],
     plugins: [
         peerDepsExternal(),
@@ -38,18 +38,18 @@ export default {
                 {
                     src: 'src/variables.scss',
                     dest: 'build',
-                    rename: 'variables.scss'
+                    rename: 'variables.scss',
                 },
                 {
                     src: 'src/typography.scss',
                     dest: 'build',
-                    rename: 'typography.scss'
+                    rename: 'typography.scss',
                 },
                 {
                     src: 'node_modules/leaflet/dist/images',
-                    dest: 'build'
-                }
-            ]
-        })
-    ]
+                    dest: 'build',
+                },
+            ],
+        }),
+    ],
 };

tailwind.config.js

@@ -1,20 +1,13 @@
 module.exports = {
-    purge: [
-        './src/**/*.html',
-        './src/**/*.js',
-    ],
-    darkMode: false, // or 'media' or 'class'
-    theme: {
-        extend: {
-            boxShadow: {
-                'inner-sm': 'inset 0 1px 2px 0 rgba(0, 0, 0, 0.05)'
-            }
-        },
-    },
-    variants: {
-        extend: {},
+    purge: {
+        enabled: true,
+        content: [
+            './src/**/*.{html,js,jsx,ts,tsx}',
+        ],
     },
+    darkMode: false, // or 'media' or 'class'
+    theme: { extend: { boxShadow: { 'inner-sm': 'inset 0 1px 2px 0 rgba(0, 0, 0, 0.05)' } } },
     plugins: [
-        require('@flybywiresim/tailwind-config')
+        require('@flybywiresim/tailwind-config'),
     ],
 };