Use bootstrap scss

Author: AndreasArvidsson

packages/common/src/buildUtil/vitePreactAlias.ts

@@ -3,6 +3,7 @@
 export const vitePreactAlias = {
   "react-dom/test-utils": "preact/test-utils",
   "react-dom": "preact/compat",
+  "react/jsx-dev-runtime": "preact/jsx-runtime",
   "react/jsx-runtime": "preact/jsx-runtime",
   react: "preact/compat",
 };

packages/cursorless-org-docs/babel.config.mjs

@@ -154,13 +154,13 @@ const config: Config = {
           ],
         },
         theme: {
-          customCss: [require.resolve("./src/css/custom.css")],
+          customCss: [require.resolve("./src/css/custom.scss")],
         },
       },
     ],
   ],
 
-  plugins: ["./src/plugins/scope-tests-plugin.ts"],
+  plugins: ["docusaurus-plugin-sass", "./src/plugins/scope-tests-plugin.ts"],
 
   themeConfig: {
     navbar: {

packages/cursorless-org-docs/docusaurus.config.mts

@@ -51,6 +51,7 @@
     "@mdx-js/react": "^3.1.1",
     "bootstrap": "^5.3.8",
     "clsx": "^2.1.1",
+    "docusaurus-plugin-sass": "^0.2.6",
     "mdast-util-find-and-replace": "^3.0.2",
     "prism-react-renderer": "^2.4.1",
     "react": "^19.2.4",
@@ -65,6 +66,7 @@
     "@tsconfig/docusaurus": "^2.0.9",
     "@types/mdast": "^4.0.4",
     "@types/react": "^19.2.14",
+    "sass": "^1.93.2",
     "typescript": "^5.9.3",
     "unified": "^11.0.5"
   }

packages/cursorless-org-docs/package.json

@@ -0,0 +1,27 @@
+@use "sass:map";
+
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/root";
+@import "bootstrap/scss/utilities";
+@import "bootstrap/scss/utilities/api";
+
+@import "bootstrap/scss/forms/form-select";
+@import "bootstrap/scss/card";
+
+@import "./github-link";
+
+[data-theme="dark"] .dark-mode-invert {
+  filter: invert(90%) hue-rotate(180deg);
+}
+
+[data-theme="light"] .light-mode-invert {
+  filter: invert(90%) hue-rotate(180deg);
+}
+
+.pointer {
+  cursor: pointer;
+}

packages/cursorless-org-docs/src/css/custom.scss

@@ -1,35 +1,3 @@
-@import "bootstrap/dist/css/bootstrap.min.css";
-
-/* Undo some of the global bootstrap styles */
-
-:root {
-  --bs-body-color: var(--ifm-text-color);
-  --bs-body-bg: var(--ifm-background-color);
-  --bs-body-line-height: var(--ifm-line-height-base);
-}
-
-.navbar {
-  --bs-navbar-padding-x: var(--ifm-navbar-padding-horizontal);
-  --bs-navbar-padding-y: var(--ifm-navbar-padding-vertical);
-}
-
-a {
-  text-decoration: var(--ifm-link-decoration);
-}
-
-code {
-  color: inherit;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-weight: var(--ifm-heading-font-weight);
-}
-
 /* From https://github.com/facebook/docusaurus/blob/cc0bceab9c1678303f6237f5526753edc1b12fc3/website/src/css/custom.css#L70-L86 */
 .header-github-link:hover {
   opacity: 0.6;
@@ -48,37 +16,3 @@ h6 {
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
     no-repeat;
 }
-
-[data-theme="dark"] .dark-mode-invert {
-  filter: invert(90%) hue-rotate(180deg);
-}
-
-[data-theme="light"] .light-mode-invert {
-  filter: invert(90%) hue-rotate(180deg);
-}
-
-.hidden {
-  display: none;
-}
-
-.card {
-  border: 1px solid var(--ifm-color-emphasis-300);
-  margin-bottom: 1rem;
-}
-
-.card > .card__header {
-  border-bottom: 1px solid var(--ifm-color-emphasis-300);
-  padding-bottom: 1rem;
-}
-
-.pointer {
-  cursor: pointer;
-}
-
-/* list-style is set to none for some reason. This restores default. */
-ul {
-  list-style: disc;
-}
-ol {
-  list-style: decimal;
-}

…s/cursorless-org-docs/src/css/custom.css …orless-org-docs/src/css/github-link.scsspackages/cursorless-org-docs/src/css/custom.css renamed to packages/cursorless-org-docs/src/css/github-link.scss packages/cursorless-org-docs/src/css/custom.css renamed to packages/cursorless-org-docs/src/css/github-link.scss

@@ -97,7 +97,7 @@ function RenderFacets({
     }
 
     return (
-      <div className="card__body">
+      <div className="card-body">
         <ul>
           {facets.map((scope) => {
             return <li key={scope}>{scope}</li>;
@@ -109,7 +109,7 @@ function RenderFacets({
 
   return (
     <div className={"card" + (open ? " open" : "")}>
-      <div className="card__header pointer" onClick={() => setOpen(!open)}>
+      <div className="card-header pointer" onClick={() => setOpen(!open)}>
         {title} ({facets.length})
       </div>