Upgrade Tailwind to v4.1

package.json

@@ -167,6 +167,7 @@
     "@lezer/generator": "^1.7.3",
     "@nabla/vite-plugin-eslint": "^2.0.5",
     "@playwright/test": "^1.52.0",
+    "@tailwindcss/postcss": "^4.1.12",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^15.0.7",
     "@types/diff": "^7.0.2",
@@ -190,7 +191,6 @@
     "@vitejs/plugin-react": "^4.4.1",
     "@vitest/web-worker": "^3.1.2",
     "@xstate/cli": "^0.5.17",
-    "autoprefixer": "^10.4.21",
     "babel-preset-vite": "^1.1.3",
     "cross-env": "^7.0.3",
     "dpdm": "^3.14.0",
@@ -222,7 +222,7 @@
     "postcss": "^8.4.43",
     "postinstall-postinstall": "^2.1.0",
     "setimmediate": "^1.0.5",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.1.12",
     "ts-jest": "^29.3.2",
     "ts-node": "^10.0.0",
     "typescript": "^5.8.3",

postcss.config.js

@@ -1,7 +1,6 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
+    '@tailwindcss/postcss': {},
     '@csstools/postcss-oklab-function': { preserve: true },
-    autoprefixer: {},
   },
 }

src/Toolbar.tsx

@@ -34,11 +34,11 @@
 }: React.HTMLAttributes<HTMLElement>) {
   const { state, send, context } = useModelingContext()
   const iconClassName =
-    'group-disabled:text-chalkboard-50 !text-inherit dark:group-enabled:group-hover:!text-inherit'
-  const bgClassName = '!bg-transparent'
+    'group-disabled:text-chalkboard-50 text-inherit! dark:group-hover:group-enabled:text-inherit!'
+  const bgClassName = 'bg-transparent!'
   const buttonBgClassName =
-    'bg-chalkboard-transparent dark:bg-transparent disabled:bg-transparent dark:disabled:bg-transparent enabled:hover:bg-chalkboard-10 dark:enabled:hover:bg-chalkboard-100 pressed:!bg-primary pressed:enabled:hover:!text-chalkboard-10'
-  const buttonBorderClassName = '!border-transparent'
+    'bg-chalkboard-transparent dark:bg-transparent disabled:bg-transparent dark:disabled:bg-transparent enabled:hover:bg-chalkboard-10 dark:enabled:hover:bg-chalkboard-100 pressed:bg-primary! pressed:enabled:hover:text-chalkboard-10!'
+  const buttonBorderClassName = 'border-transparent!'
 
   const isInTemporaryWorkspace = codeManager.isBufferMode
 
@@ -104,7 +104,7 @@
 
   const tooltipContentClassName = !showRichContent
     ? ''
-    : '!text-left text-wrap !text-xs !p-0 !pb-2 flex !max-w-none !w-72 flex-col items-stretch'
+    : 'text-left! text-wrap text-xs! p-0! pb-2! flex max-w-none! w-72! flex-col items-stretch'
   const richContentTimeout = useRef<number | null>(null)
   const richContentClearTimeout = useRef<number | null>(null)
   // On mouse enter, show rich content after a 1s delay
@@ -207,13 +207,13 @@
     <menu
       data-current-mode={currentMode}
       data-onboarding-id="toolbar"
-      className="z-[19] max-w-full whitespace-nowrap rounded-b px-2 py-1 mx-auto bg-chalkboard-10 dark:bg-chalkboard-90 relative border border-chalkboard-30 dark:border-chalkboard-80 border-t-0 shadow-sm"
+      className="z-19 max-w-full whitespace-nowrap rounded-b px-2 py-1 mx-auto bg-chalkboard-10 dark:bg-chalkboard-90 relative border border-chalkboard-30 dark:border-chalkboard-80 border-t-0 shadow-xs"
     >
       <ul
         {...props}
         ref={toolbarButtonsRef}
         className={
-          'has-[[aria-expanded=true]]:!pointer-events-none m-0 py-1 rounded-l-sm flex gap-1.5 items-center ' +
+          'has-aria-expanded:pointer-events-none! m-0 py-1 rounded-l-sm flex gap-1.5 items-center ' +
           className
         }
       >
@@ -224,7 +224,7 @@
             return (
               <div
                 key={'break-' + i}
-                className="h-5 w-[1px] block bg-chalkboard-30 dark:bg-chalkboard-80"
+                className="h-5 w-px block bg-chalkboard-30 dark:bg-chalkboard-80"
               />
             )
           } else if (isToolbarItemResolvedDropdown(maybeIconConfig)) {
@@ -249,10 +249,10 @@
                 className={
                   (maybeIconConfig.array[0].alwaysDark
                     ? 'dark bg-chalkboard-90 '
-                    : '!bg-transparent ') +
+                    : 'bg-transparent! ') +
                   'group/wrapper ' +
                   buttonBorderClassName +
-                  ' relative group !gap-0'
+                  ' relative group gap-0!'
                 }
                 splitMenuItems={maybeIconConfig.array.map((itemConfig) => ({
                   id: itemConfig.id,
@@ -287,7 +287,7 @@
                       bgClassName: bgClassName,
                     }}
                     className={
-                      '!border-transparent !px-0 pressed:!text-chalkboard-10 pressed:enabled:hovered:!text-chalkboard-10 ' +
+                      'border-transparent! px-0! pressed:text-chalkboard-10! pressed:enabled:hovered:text-chalkboard-10! ' +
                       buttonBgClassName
                     }
                     aria-pressed={selectedIcon.isActive}
@@ -310,7 +310,7 @@
                     <ToolbarItemTooltip
                       itemConfig={selectedIcon}
                       configCallbackProps={configCallbackProps}
-                      wrapperClassName="ui-open:!hidden"
+                      wrapperClassName="ui-open:hidden!"
                       contentClassName={tooltipContentClassName}
                     >
                       {showRichContent ? (
@@ -354,11 +354,11 @@
                   bgClassName: bgClassName,
                 }}
                 className={
-                  'pressed:!text-chalkboard-10 pressed:enabled:hovered:!text-chalkboard-10 ' +
+                  'pressed:text-chalkboard-10! pressed:enabled:hovered:text-chalkboard-10! ' +
                   buttonBorderClassName +
                   ' ' +
                   buttonBgClassName +
-                  (!itemConfig.showTitle ? ' !px-0' : '')
+                  (!itemConfig.showTitle ? ' px-0!' : '')
                 }
                 name={itemConfig.title}
                 // aria-description is still in ARIA 1.3 draft.
@@ -401,17 +401,17 @@
             <div className="mt-2 animate-pulse w-fit uppercase text-xs rounded-full ml-2 px-2 py-1 border border-chalkboard-40 dark:text-chalkboard-40 bg-chalkboard-10 dark:bg-chalkboard-90 shadow-lg flex items-center">
               Temporary workspace
             </div>
             <button
               data-testid="tws-save"
               onClick={onClickSave}
-              className="mt-2 py-1 rounded-sm border-solid border border-chalkboard-30 hover:border-chalkboard-40 dark:hover:border-chalkboard-60 dark:bg-chalkboard-90/50 text-chalkboard-100 dark:text-chalkboard-10 bg-chalkboard-10 dark:bg-chalkboard-90 px-2"
+              className="mt-2 py-1 rounded-xs border-solid border border-chalkboard-30 hover:border-chalkboard-40 dark:hover:border-chalkboard-60 dark:bg-chalkboard-90/50 text-chalkboard-100 dark:text-chalkboard-10 bg-chalkboard-10 dark:bg-chalkboard-90 px-2"
             >
               Save
             </button>
           </div>
         )}
         {state.matches('Sketch no face') && (
-          <div className="mt-2 py-1 px-2 bg-chalkboard-10 dark:bg-chalkboard-90 border border-chalkboard-20 dark:border-chalkboard-80 rounded shadow-lg">
+          <div className="mt-2 py-1 px-2 bg-chalkboard-10 dark:bg-chalkboard-90 border border-chalkboard-20 dark:border-chalkboard-80 rounded-sm shadow-lg">
             <p className="text-xs">Select a plane or face to start sketching</p>
           </div>
         )}
@@ -467,7 +467,7 @@
       }
       hoverOnly
       position="bottom"
-      wrapperClassName={'!p-4 !pointer-events-auto ' + wrapperClassName}
+      wrapperClassName={'p-4! pointer-events-auto! ' + wrapperClassName}
       contentClassName={contentClassName}
     >
       {children}
@@ -606,7 +606,7 @@
                   onClick={openExternalBrowserIfDesktop(link.url)}
                   target="_blank"
                   rel="noreferrer"
-                  className="flex items-center rounded-sm p-1 no-underline text-inherit hover:bg-primary/10 hover:text-primary dark:hover:bg-chalkboard-70 dark:hover:text-inherit"
+                  className="flex items-center rounded-xs p-1 no-underline text-inherit hover:bg-primary/10 hover:text-primary dark:hover:bg-chalkboard-70 dark:hover:text-inherit"
                 >
                   <span className="flex-1">Open {link.label}</span>
                   <CustomIcon name="link" className="w-4 h-4" />

src/clientSideScene/ClientSideSceneComp.tsx

@@ -201,7 +201,7 @@
   // Set a large zIndex, the overlay for hover dropdown menu on line segments needs to render
   // over the length labels on the line segments
   return (
-    <div className="absolute inset-0 pointer-events-none z-sketchOverlayDropdown">
+    <div className="absolute inset-0 pointer-events-none z-sketch-overlay-dropdown">
       {Object.entries(context.segmentOverlays)
         .flatMap(([pathToNodeString, overlays]) =>
           overlays.map((b) => ({ pathToNodeString, overlay: b }))
@@ -378,42 +378,42 @@
           <Popover.Button
             data-testid="overlay-menu"
             data-stdlib-fn-name={stdLibFnName}
-            className="bg-chalkboard-10 dark:bg-chalkboard-100 border !border-transparent hover:!border-chalkboard-40 dark:hover:!border-chalkboard-70 ui-open:!border-chalkboard-40 dark:ui-open:!border-chalkboard-70 h-[26px] w-[26px] rounded-sm p-0 m-0"
+            className="bg-chalkboard-10 dark:bg-chalkboard-100 border border-transparent! hover:border-chalkboard-40! dark:hover:border-chalkboard-70! ui-open:border-chalkboard-40! dark:ui-open:border-chalkboard-70! h-[26px] w-[26px] rounded-xs p-0 m-0"
           >
             <CustomIcon name={'three-dots'} />
           </Popover.Button>
           <Popover.Panel
             as="menu"
             className={`absolute ${
               verticalPosition === 'top' ? 'bottom-full' : 'top-full'
-            } z-10 w-36 flex flex-col gap-1 divide-y divide-chalkboard-20 dark:divide-chalkboard-70 align-stretch px-0 py-1 bg-chalkboard-10 dark:bg-chalkboard-100 rounded-sm shadow-lg border border-solid border-chalkboard-20/50 dark:border-chalkboard-80/50`}
+            } z-10 w-36 flex flex-col gap-1 divide-y divide-chalkboard-20 dark:divide-chalkboard-70 align-stretch px-0 py-1 bg-chalkboard-10 dark:bg-chalkboard-100 rounded-xs shadow-lg border border-solid border-chalkboard-20/50 dark:border-chalkboard-80/50`}
           >
             {stdLibFnName !== 'arcTo' && (
               <button
-                className="!border-transparent rounded-sm text-left p-1 text-nowrap"
+                className="border-transparent! rounded-xs text-left p-1 text-nowrap"
                 onClick={() => {
                   send({
                     type: 'Constrain remove constraints',
                     data: pathToNode,
                   })
                 }}
               >
                 Remove constraints
               </button>
             )}
             <button
-              className="!border-transparent rounded-sm text-left p-1 text-nowrap"
+              className="border-transparent! rounded-xs text-left p-1 text-nowrap"
               title={
                 dependentSourceRanges.length > 0
                   ? `At least ${dependentSourceRanges.length} segment rely on this segment's tag.`
                   : ''
               }
               onClick={() => {
                 send({ type: 'Delete segment', data: pathToNode })
               }}
             >
               Delete Segment
             </button>
           </Popover.Panel>
         </>
       )}
@@ -533,11 +533,11 @@
         data-is-constrained={isConstrained ? 'true' : 'false'}
         className={`${
           implicitDesc
-            ? 'bg-chalkboard-10 dark:bg-chalkboard-100 border-transparent border-0 rounded'
+            ? 'bg-chalkboard-10 dark:bg-chalkboard-100 border-transparent border-0 rounded-sm'
             : isConstrained
-              ? 'bg-chalkboard-10 dark:bg-chalkboard-90 dark:hover:bg-chalkboard-80 border-chalkboard-40 dark:border-chalkboard-70 rounded-sm'
+              ? 'bg-chalkboard-10 dark:bg-chalkboard-90 dark:hover:bg-chalkboard-80 border-chalkboard-40 dark:border-chalkboard-70 rounded-xs'
               : 'bg-primary/30 dark:bg-primary text-primary dark:text-chalkboard-10 dark:border-transparent group-hover:bg-primary/40 group-hover:border-primary/50 group-hover:brightness-125'
-        } h-[26px] w-[26px] rounded-sm relative m-0 p-0`}
+        } h-[26px] w-[26px] rounded-xs relative m-0 p-0`}
         onMouseEnter={() => {
           editorManager.setHighlightRange([range])
         }}
@@ -622,7 +622,7 @@
         }}
       >
         <div
-          className="bg-chalkboard-10 dark:bg-chalkboard-90 p-2 px-3 rounded-sm border border-solid border-chalkboard-20 dark:border-chalkboard-80 shadow-sm"
+          className="bg-chalkboard-10 dark:bg-chalkboard-90 p-2 px-3 rounded-xs border border-solid border-chalkboard-20 dark:border-chalkboard-80 shadow-xs"
           data-testid="constraint-symbol-popover"
         >
           {implicitDesc ? (

src/clientSideScene/sceneInfra.ts

@@ -283,7 +283,7 @@ export class SceneInfra {
     this.labelRenderer.domElement.style.pointerEvents = 'none'
     this.renderer.domElement.style.width = '100%'
     this.renderer.domElement.style.height = '100%'
-    this.labelRenderer.domElement.className = 'z-sketchSegmentIndicators'
+    this.labelRenderer.domElement.className = 'z-sketch-segment-indicators'
 
     window.addEventListener('resize', this.onWindowResize)
 

src/codemirror.css

@@ -0,0 +1,150 @@
+/*
+ * The first descendent of the CodeMirror wrapper is the theme,
+ * but its identifying class can change depending on the theme.
+*/
+#code-mirror-override > div,
+#code-mirror-override .cm-editor {
+  @apply bg-transparent h-full;
+  @apply select-auto;
+}
+
+#code-mirror-override .cm-scroller {
+  overflow: auto;
+}
+
+#code-mirror-override .cm-gutter {
+  @apply select-none;
+}
+
+#code-mirror-override .cm-activeLine,
+#code-mirror-override .cm-activeLineGutter {
+  @apply bg-primary/5;
+}
+
+#code-mirror-override .cm-scroller,
+#code-mirror-override .cm-editor {
+  height: 100% !important;
+}
+
+.dark #code-mirror-override .cm-activeLine,
+.dark #code-mirror-override .cm-activeLineGutter {
+  @apply bg-chalkboard-70/20;
+  mix-blend-mode: lighten;
+}
+
+#code-mirror-override .cm-focused .cm-activeLine,
+#code-mirror-override .cm-focused .cm-activeLineGutter {
+  @apply bg-primary/10;
+}
+
+.dark #code-mirror-override .cm-focused .cm-activeLine,
+.dark #code-mirror-override .cm-focused .cm-activeLineGutter {
+  @apply bg-chalkboard-70/40;
+}
+
+#code-mirror-override .cm-matchingBracket {
+  @apply bg-primary/20;
+}
+
+.dark #code-mirror-override .cm-matchingBracket {
+  @apply bg-chalkboard-70/60;
+}
+
+#code-mirror-override .cm-gutters {
+  @apply bg-chalkboard-10/30;
+}
+
+.dark #code-mirror-override .cm-gutters {
+  @apply bg-chalkboard-110/50;
+}
+
+#code-mirror-override .cm-content {
+  @apply caret-primary;
+}
+
+.dark #code-mirror-override .cm-content {
+  @apply caret-chalkboard-10;
+}
+
+#code-mirror-override .cm-focused {
+  outline: none;
+}
+
+.cm-rename-popup {
+  /* we want to overpower anything else */
+  z-index: 99999999999 !important;
+}
+
+.cm-rename-popup input {
+  /* use black text on white background in both light and dark mode */
+  color: black !important;
+  background: white !important;
+}
+
+@keyframes blink {
+  0%,
+  100% {
+    opacity: 0;
+  }
+
+  10% {
+    opacity: 1;
+  }
+}
+
+.react-json-view {
+  @apply bg-transparent!;
+}
+
+#code-mirror-override .cm-tooltip,
+.cm-tooltip {
+  @apply text-xs shadow-md;
+  @apply bg-chalkboard-10 text-chalkboard-80;
+  @apply rounded-xs border-solid border border-chalkboard-40/30 border-l-liquid-10;
+}
+
+.dark #code-mirror-override .cm-tooltip,
+.dark .cm-tooltip {
+  @apply bg-chalkboard-110 text-chalkboard-40;
+  @apply border-chalkboard-70/20 border-l-liquid-70;
+}
+
+#code-mirror-override .cm-tooltip-hover,
+#code-mirror-override .cm-signature-tooltip,
+.cm-signature-tooltip {
+  @apply py-1 px-2 w-max max-w-md;
+}
+
+#code-mirror-override .cm-completionInfo {
+  @apply px-4 rounded-l-none;
+  @apply bg-chalkboard-10 text-liquid-90;
+  @apply border-liquid-40/30;
+}
+
+.dark #code-mirror-override .cm-completionInfo {
+  @apply bg-liquid-120 text-liquid-50;
+  @apply border-liquid-90/60;
+}
+
+#code-mirror-override .cm-tooltip-autocomplete li {
+  @apply px-2 py-1;
+}
+
+#code-mirror-override .cm-tooltip-autocomplete li[aria-selected="true"] {
+  @apply bg-liquid-10 text-liquid-110;
+}
+
+.dark #code-mirror-override .cm-tooltip-autocomplete li[aria-selected="true"] {
+  @apply bg-liquid-100 text-liquid-20;
+}
+
+#code-mirror-override .cm-content {
+  white-space: pre-wrap;
+  word-break: normal;
+  word-wrap: break-word;
+}
+
+.cm-ghostText,
+.cm-ghostText * {
+  color: rgb(120, 120, 120, 0.8) !important;
+}

src/components/ActionButton.tsx

@@ -44,7 +44,7 @@ export type ActionButtonProps =
   | ActionButtonAsElement
 
 export const ActionButton = forwardRef((props: ActionButtonProps, ref) => {
-  const classNames = `action-button leading-[0.7] p-0 m-0 group text-xs leading-none flex items-center gap-2 rounded-sm border-solid border border-chalkboard-30 hover:border-chalkboard-40 enabled:dark:border-chalkboard-70 dark:hover:border-chalkboard-60 dark:bg-chalkboard-90/50 text-chalkboard-100 dark:text-chalkboard-10 ${
+  const classNames = `action-button leading-[0.7] p-0 m-0 group text-xs leading-none flex items-center gap-2 rounded-xs border-solid border border-chalkboard-30 hover:border-chalkboard-40 enabled:dark:border-chalkboard-70 dark:hover:border-chalkboard-60 dark:bg-chalkboard-90/50 text-chalkboard-100 dark:text-chalkboard-10 ${
     props.iconStart
       ? props.iconEnd
         ? 'px-0' // No padding if both icons are present