move gist and codehitlite css to have their own entry point

Author: chris-lawton

tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/markdown_block.html

@@ -1,5 +1,8 @@
-{% load wagtailmarkdown %}
+{% load wagtailmarkdown static %}
+
 <div class="grid__markdown markdown-block">
+    <link rel="stylesheet" type="text/css" href="{% static 'css/codehilite.css' %}">
+
     {# tabindex needed because in order to scroll using the keyboard #}
     <div class="markdown-block__scroller" tabindex="0">
         {{ value|markdown }}

tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/raw_html_block.html

@@ -1,3 +1,9 @@
+{% load static %}
+
 <div class="grid__raw-html">
+    {% if 'gist' in value %}
+        <link rel="stylesheet" type="text/css" href="{% static 'css/gist.css' %}">
+    {% endif %}
+
     {{ value }}
 </div>

tbx/static_src/sass/main.scss

@@ -81,7 +81,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-// CSS from external vendors (not available as npm)
-@import 'vendor/codehilite';
-@import 'vendor/gist';

tbx/static_src/sass/vendor/_codehilite.scss renamed to tbx/static_src/sass/vendor/codehilite.scss

@@ -1,3 +1,5 @@
+// This file has it's own entry point in webpack and is only included in markdown_block.html
+
 /*!
     Code highlighting generated from Pygments | https://pygments.org/
     | Copyright 2006-2023 by the Pygments team
@@ -8,8 +10,6 @@
 
 /* stylelint-disable */
 
-@use 'config' as *;
-
 .mode-dark {
     pre {
         line-height: 125%;

tbx/static_src/sass/vendor/_gist.scss renamed to tbx/static_src/sass/vendor/gist.scss

@@ -1,3 +1,5 @@
+// This file has it's own entrypoint in webpack.js and is only included in raw_html_block.html
+
 /* stylelint-disable */
 
 /*!

webpack.config.js

@@ -15,6 +15,8 @@ const options = {
         // here, it will deem the quotes uneccessary.
         'main': `./${projectRoot}/static_src/javascript/main.js`, // prettier-ignore
         'admin': `./${projectRoot}/static_src/javascript/admin.js`, // prettier-ignore
+        'gist': `./${projectRoot}/static_src/sass/vendor/gist.scss`, // prettier-ignore
+        'codehilite': `./${projectRoot}/static_src/sass/vendor/codehilite.scss`, // prettier-ignore
     },
     resolve: {
         extensions: ['.ts', '.tsx', '.js'],