Merge pull request #602 from opensafely-core/vite-deps

Update Vite pipeline with HTMX and fonts

airlock/templates/file_browser/index.html

@@ -36,7 +36,7 @@
 {% endblock full_width_content %}
 
 {% block extra_js %}
-  <script type="text/javascript" src="{% static 'htmx-1.9.10.min.js' %}"></script>
+  {% vite_asset "assets/src/scripts/htmx.js" %}
   {% django_htmx_script %}
   <script src="{% static 'assets/file_browser/index.js' %}"></script>
   {% vite_asset "assets/src/scripts/resizer.js" %}

assets/src/scripts/htmx.js

@@ -0,0 +1 @@
+import "htmx.org";

assets/src/scripts/main.js

@@ -1,2 +1,3 @@
 import "vite/modulepreload-polyfill";
+import "@fontsource-variable/public-sans";
 import "../styles/main.css";

package.json

@@ -14,5 +14,9 @@
     "postcss": "^8.4.40",
     "tailwindcss": "^3.4.7",
     "vite": "^5.3.5"
+  },
+  "dependencies": {
+    "@fontsource-variable/public-sans": "^5.0.19",
+    "htmx.org": "^1.9.12"
   }
 }

tailwind.config.js

@@ -12,7 +12,7 @@ export default {
   theme: {
     extend: {
       fontFamily: {
-        sans: ["Public Sans", ...fontFamily.sans],
+        sans: ["Public Sans Variable", ...fontFamily.sans],
       },
       colors: {
         oxford: {
@@ -187,5 +187,23 @@ export default {
   plugins: [
     tailwindTypography,
     tailwindForms,
+    ({ addBase, theme }) => {
+      function extractColorVars(colorObj, colorGroup = "") {
+        return Object.keys(colorObj).reduce((vars, colorKey) => {
+          const value = colorObj[colorKey];
+
+          const newVars =
+            typeof value === "string"
+              ? { [`--color${colorGroup}-${colorKey}`]: value }
+              : extractColorVars(value, `-${colorKey}`);
+
+          return { ...vars, ...newVars };
+        }, {});
+      }
+
+      addBase({
+        ":root": extractColorVars(theme("colors")),
+      });
+    },
   ],
 };

vite.config.js

@@ -7,9 +7,13 @@ export default defineConfig({
     outDir: "./assets/out",
     rollupOptions: {
       input: {
+        htmx: "assets/src/scripts/htmx.js",
         main: "assets/src/scripts/main.js",
         resizer: "assets/src/scripts/resizer.js",
       },
     },
   },
+  server: {
+    origin: "http://localhost:5173",
+  },
 });