build: allow unocss to run through dev mode (#167)

* build: allow unocss to run through dev mode

* build: Update unocss dependencies to latest versions

Updated dependencies '@unocss/eslint-config', '@unocss/postcss', '@unocss/preset-uno', '@unocss/preset-web-fonts', '@unocss/reset', '@unocss/transformer-directives', '@unocss/transformer-variant-group' to version 0.58.6 for consistency and compatibility.

* refactor: add note to readme

* refactor: improve readme

* refactor: update readme (again)

* Update README.md

Updates the UTRP description text

---------

Co-authored-by: Isaiah David Rodriguez <51803892+IsaDavRod@users.noreply.github.com>

README.md

@@ -1,28 +1,54 @@
 # UT Registration Plus
 
-## Built Using
+We've all been there. 20 tabs of Rate My Professor, Google Spreadsheet, and the UT Course Schedule open and you still don't know what classes to take.
+This extension, UT Registration Plus (UTRP), tries to streamline most of the unnecessary steps and headaches of registering for classes at UT Austin.
+
+- For each class in the UT Course Schedule site, UTRP provides a "breakdown" popup, with quick and easy links to the instructor's RateMyProfessor, Course Evaluation Survey (CES) and past syllabi.
+
+- Shows the course description with highlighted information on prerequisites, restrictions, etc.
+
+- Shows an aggregate and semesterly graph of the grade distributions for each course.
+
+- Gives you the ability to add "Add Course" and view them in the extension popup, a quick list of all the courses you have saved and an easy way to copy unique numbers.
+
+- Highlights and crosses-out what courses on the UT Course Catalog would conflict with your currently saved courses, making selecting courses that fit with your schedule so much easier.
+
+- Display's a weekly schedule based on your saved courses.
+
+- Give you the ability to create multiple schedules to plan for different scenarios.
+
+- ... and much more!
+
+## Toolchain
 
 - React 18
 - TypeScript
 - Vite 5
 - ESLint
 - Prettier
+- Storybook
 - Semantic-Release
 - Custom Messaging & Storage Wrappers
 
-## Getting Started
+## Development: Getting Started
 
 1. Clone this repo
-2. Run `pnpm install` to install and patch all the required dependencies
+2. This project uses `pnpm` to manage and patch dependencies. Run `pnpm install` to configure the repository for building/development
+3. Using either of the methods listed below, the extension will build to the `dist/` directory.
 
-- If you want to run the development build:
+### Development Builds
 
-  - Run `pnpm run dev`
+- Run `pnpm dev`
 
-- If you want to build the extension for production:
+> [!NOTE]
+> Injected content such as extension content on UT pages is not properly styled, and are missing class stylings. When developing for these pages, use `pnpm build -w` to build and watch for changes. This will ensure you are seeing an accurate representation of the extension.
 
-  - Run `pnpm build`
+### Production Builds
 
-Go to chrome://extensions, ensure you have "Developer Mode" enabled, and click 'Load unpacked'
+- Run `pnpm build`
 
-Navigate to the 'dist' folder and click 'select' to import the extension.
+## Development: Loading the Extension Manually
+
+Open [chrome://extensions](chrome://extensions), ensure you have 'Developer Mode' enabled, and click 'Load unpacked'.
+
+Navigate to the `dist/` folder, and click 'select' to import the extension.

package.json

@@ -27,6 +27,7 @@
     "dependencies": {
         "@headlessui/react": "^1.7.18",
         "@hello-pangea/dnd": "^16.5.0",
+        "@unocss/vite": "^0.58.6",
         "@vitejs/plugin-react": "^4.2.1",
         "chrome-extension-toolkit": "^0.0.51",
         "clsx": "^2.1.0",
@@ -65,13 +66,13 @@
         "@types/sql.js": "^1.4.9",
         "@typescript-eslint/eslint-plugin": "^6.21.0",
         "@typescript-eslint/parser": "^6.21.0",
-        "@unocss/eslint-config": "^0.58.5",
+        "@unocss/eslint-config": "^0.58.6",
-        "@unocss/postcss": "^0.58.5",
+        "@unocss/postcss": "^0.58.6",
-        "@unocss/preset-uno": "^0.58.5",
+        "@unocss/preset-uno": "^0.58.6",
-        "@unocss/preset-web-fonts": "^0.58.5",
+        "@unocss/preset-web-fonts": "^0.58.6",
-        "@unocss/reset": "^0.58.5",
+        "@unocss/reset": "^0.58.6",
-        "@unocss/transformer-directives": "^0.58.5",
+        "@unocss/transformer-directives": "^0.58.6",
-        "@unocss/transformer-variant-group": "^0.58.5",
+        "@unocss/transformer-variant-group": "^0.58.6",
         "@vitejs/plugin-react-swc": "^3.6.0",
         "@vitest/coverage-v8": "^1.3.1",
         "@vitest/ui": "^1.3.1",
@@ -103,7 +104,7 @@
         "react-devtools": "^5.0.0",
         "storybook": "^7.6.17",
         "typescript": "^5.3.3",
-        "unocss": "^0.58.5",
+        "unocss": "^0.58.6",
         "unocss-preset-primitives": "0.0.2-beta.0",
         "unplugin-icons": "^0.18.5",
         "vite": "^5.1.4",
@@ -112,7 +113,8 @@
     },
     "pnpm": {
         "patchedDependencies": {
-            "@crxjs/vite-plugin@2.0.0-beta.21": "patches/@crxjs__vite-plugin@2.0.0-beta.21.patch"
+            "@crxjs/vite-plugin@2.0.0-beta.21": "patches/@crxjs__vite-plugin@2.0.0-beta.21.patch",
+            "@unocss/vite@0.58.6": "patches/@unocss__vite@0.58.6.patch"
         },
         "overrides": {
             "es-module-lexer": "^1.4.1"

patches/@unocss__vite@0.58.6.patch

@@ -0,0 +1,108 @@
+diff --git a/dist/index.cjs b/dist/index.cjs
+index 560f423a07f21b0c47abd494d77654de4c874481..35ae1fdca8bd5546f7e40a23edacb1dbbbd34b58 100644
+--- a/dist/index.cjs
++++ b/dist/index.cjs
+@@ -35,15 +35,15 @@ const VIRTUAL_ENTRY_ALIAS = [
+   /^(?:virtual:)?uno(?::(.+))?\.css(\?.*)?$/
+ ];
+ const LAYER_MARK_ALL = "__ALL__";
+-const RESOLVED_ID_WITH_QUERY_RE = /[\/\\]__uno(?:(_.*?))?\.css(\?.*)?$/;
+-const RESOLVED_ID_RE = /[\/\\]__uno(?:_(.*?))?\.css$/;
++const RESOLVED_ID_WITH_QUERY_RE = /[\/\\]uno(?:(_.*?))?\.css(\?.*)?$/;
++const RESOLVED_ID_RE = /[\/\\]uno(?:_(.*?))?\.css$/;
+ function resolveId(id) {
+   if (id.match(RESOLVED_ID_WITH_QUERY_RE))
+     return id;
+   for (const alias of VIRTUAL_ENTRY_ALIAS) {
+     const match = id.match(alias);
+     if (match) {
+-      return match[1] ? `/__uno_${match[1]}.css` : "/__uno.css";
++      return match[1] ? `/uno_${match[1]}.css` : "/uno.css";
+     }
+   }
+ }
+@@ -745,7 +745,7 @@ function GlobalModeDevPlugin({ uno, tokens, tasks, flushTasks, affectedModules,
+         const { hash, css } = await generateCSS(layer);
+         return {
+           // add hash to the chunk of CSS that it will send back to client to check if there is new CSS generated
+-          code: `__uno_hash_${hash}{--:'';}${css}`,
++          code: `uno_hash_${hash}{--:'';}${css}`,
+           map: { mappings: "" }
+         };
+       },
+@@ -764,7 +764,7 @@ function GlobalModeDevPlugin({ uno, tokens, tasks, flushTasks, affectedModules,
+         if (layer && code.includes("import.meta.hot")) {
+           let hmr = `
+ try {
+-  let hash = __vite__css.match(/__uno_hash_(\\w{${HASH_LENGTH}})/)
++  let hash = __vite__css.match(/uno_hash_(\\w{${HASH_LENGTH}})/)
+   hash = hash && hash[1]
+   if (!hash)
+     console.warn('[unocss-hmr]', 'failed to get unocss hash, hmr might not work')
+diff --git a/dist/index.mjs b/dist/index.mjs
+index bbbccb7cad7421cbdb97223a451ec5853c0476cb..4bf6a08d94e562090a530308c0ab8337afdf8243 100644
+--- a/dist/index.mjs
++++ b/dist/index.mjs
+@@ -1,17 +1,17 @@
+-import process$1 from 'node:process';
++import remapping from '@ampproject/remapping';
++import { createFilter } from '@rollup/pluginutils';
++import { loadConfig } from '@unocss/config';
++import { BetterMap, createGenerator, cssIdRE, notNull, toEscapedSelector } from '@unocss/core';
+ import UnocssInspector from '@unocss/inspector';
+-import { resolve, isAbsolute, dirname } from 'node:path';
+-import fs from 'node:fs/promises';
+ import fg from 'fast-glob';
+ import MagicString from 'magic-string';
+-import remapping from '@ampproject/remapping';
+-import { createHash } from 'node:crypto';
+-import { cssIdRE, createGenerator, BetterMap, notNull, toEscapedSelector } from '@unocss/core';
+ import { Buffer } from 'node:buffer';
+-import { createFilter } from '@rollup/pluginutils';
++import { createHash } from 'node:crypto';
+ import fs$1 from 'node:fs';
++import fs from 'node:fs/promises';
++import { dirname, isAbsolute, resolve } from 'node:path';
++import process$1 from 'node:process';
+ import { fileURLToPath } from 'node:url';
+-import { loadConfig } from '@unocss/config';
+ 
+ const defaultPipelineExclude = [cssIdRE];
+ const defaultPipelineInclude = [/\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/];
+@@ -20,15 +20,15 @@ const VIRTUAL_ENTRY_ALIAS = [
+   /^(?:virtual:)?uno(?::(.+))?\.css(\?.*)?$/
+ ];
+ const LAYER_MARK_ALL = "__ALL__";
+-const RESOLVED_ID_WITH_QUERY_RE = /[\/\\]__uno(?:(_.*?))?\.css(\?.*)?$/;
+-const RESOLVED_ID_RE = /[\/\\]__uno(?:_(.*?))?\.css$/;
++const RESOLVED_ID_WITH_QUERY_RE = /[\/\\]uno(?:(_.*?))?\.css(\?.*)?$/;
++const RESOLVED_ID_RE = /[\/\\]uno(?:_(.*?))?\.css$/;
+ function resolveId(id) {
+   if (id.match(RESOLVED_ID_WITH_QUERY_RE))
+     return id;
+   for (const alias of VIRTUAL_ENTRY_ALIAS) {
+     const match = id.match(alias);
+     if (match) {
+-      return match[1] ? `/__uno_${match[1]}.css` : "/__uno.css";
++      return match[1] ? `/uno_${match[1]}.css` : "/uno.css";
+     }
+   }
+ }
+@@ -730,7 +730,7 @@ function GlobalModeDevPlugin({ uno, tokens, tasks, flushTasks, affectedModules,
+         const { hash, css } = await generateCSS(layer);
+         return {
+           // add hash to the chunk of CSS that it will send back to client to check if there is new CSS generated
+-          code: `__uno_hash_${hash}{--:'';}${css}`,
++          code: `uno_hash_${hash}{--:'';}${css}`,
+           map: { mappings: "" }
+         };
+       },
+@@ -749,7 +749,7 @@ function GlobalModeDevPlugin({ uno, tokens, tasks, flushTasks, affectedModules,
+         if (layer && code.includes("import.meta.hot")) {
+           let hmr = `
+ try {
+-  let hash = __vite__css.match(/__uno_hash_(\\w{${HASH_LENGTH}})/)
++  let hash = __vite__css.match(/uno_hash_(\\w{${HASH_LENGTH}})/)
+   hash = hash && hash[1]
+   if (!hash)
+     console.warn('[unocss-hmr]', 'failed to get unocss hash, hmr might not work')

src/pages/calendar/index.tsx

@@ -1,3 +1,5 @@
+import 'uno.css';
+
 import React from 'react';
 import { createRoot } from 'react-dom/client';