Update dependency tailwindcss to v3.3.3

refs #676

- required for the `eslint-plugin-tailwindcss` bump to work correctly
- ran `yarn lint:js --fix`
  - CSS ordering changed to be more deterministic, see tailwindlabs/tailwindcss#10672

packages/koenig-lexical/.eslintrc.cjs

@@ -47,4 +47,4 @@ module.exports = {
             'react/prop-types': 2
         }
     }]
-};
+};

packages/koenig-lexical/demo/DemoApp.jsx

@@ -240,7 +240,7 @@ function DemoComposer({editorType, isMultiplayer, setWordCount}) {
                 }
                 <DarkModeToggle darkMode={darkMode} toggleDarkMode={toggleDarkMode} />
                 <div ref={containerRef} className="h-full overflow-auto overflow-x-hidden" onClick={focusEditor}>
-                    <div className="mx-auto max-w-[740px] py-[15vmin] px-6 lg:px-0">
+                    <div className="mx-auto max-w-[740px] px-6 py-[15vmin] lg:px-0">
                         {showTitle
                             ? <TitleTextBox ref={titleRef} editorAPI={editorAPI} setTitle={setTitle} title={title} />
                             : null

packages/koenig-lexical/demo/HtmlOutputDemo.jsx

@@ -89,7 +89,7 @@ function HtmlOutputDemo() {
                 >
                     <div className="relative h-full grow">
                         <div ref={containerRef} className="h-full overflow-auto" onClick={focusEditor}>
-                            <div className="mx-auto max-w-[740px] py-[15vmin] px-6 lg:px-0">
+                            <div className="mx-auto max-w-[740px] px-6 py-[15vmin] lg:px-0">
                                 <KoenigComposableEditor
                                     cursorDidExitAtTop={focusTitle}
                                     registerAPI={setEditorAPI}

packages/koenig-lexical/demo/RestrictedContentDemo.jsx

@@ -95,7 +95,7 @@ function RestrictedContentDemo() {
             >
                 <div className="relative h-full grow">
                     <div ref={containerRef} className="h-full overflow-auto" onClick={focusEditor}>
-                        <div className="mx-auto max-w-[740px] py-[15vmin] px-6 lg:px-0">
+                        <div className="mx-auto max-w-[740px] px-6 py-[15vmin] lg:px-0">
                             <KoenigComposableEditor
                                 cursorDidExitAtTop={focusTitle}
                                 registerAPI={setEditorAPI}

packages/koenig-lexical/demo/components/FloatingButton.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 const FloatingButton = ({isOpen, ...props}) => {
     return (
-        <div className={`fixed bottom-4 right-6 z-20 rounded py-1 px-2 font-mono text-sm tracking-tight text-grey-600 transition-all duration-200 ease-in-out ${isOpen ? 'bg-transparent' : 'bg-white'}`}>
+        <div className={`fixed bottom-4 right-6 z-20 rounded px-2 py-1 font-mono text-sm tracking-tight text-grey-600 transition-all duration-200 ease-in-out ${isOpen ? 'bg-transparent' : 'bg-white'}`}>
             <button className="cursor-pointer" type="button" onClick={() => props.onClick('json')}>
                 JSON output
             </button>

packages/koenig-lexical/demo/components/InitialContentToggle.jsx

@@ -33,9 +33,9 @@ const InitialContentToggle = ({defaultContent, setTitle, searchParams, setSearch
 
     return (
         <>
-            <button className="absolute top-4 right-6 z-20 block h-[22px] w-[42px] cursor-pointer rounded-full bg-black transition-all ease-in-out" type="button" onClick={toggle}>
-                <EyeOpenIcon className="absolute top-[5px] left-[6px] h-3 w-3 text-white" />
-                <EyeClosedIcon className="absolute top-[5px] right-[6px] h-3 w-3 text-white" />
+            <button className="absolute right-6 top-4 z-20 block h-[22px] w-[42px] cursor-pointer rounded-full bg-black transition-all ease-in-out" type="button" onClick={toggle}>
+                <EyeOpenIcon className="absolute left-[6px] top-[5px] h-3 w-3 text-white" />
+                <EyeClosedIcon className="absolute right-[6px] top-[5px] h-3 w-3 text-white" />
                 <div className={`absolute top-[2px] h-[18px] w-[18px] rounded-full bg-white transition-all ease-in-out ${isOn ? 'left-[22px]' : 'left-[2px]'}`}></div>
             </button>
         </>

packages/koenig-lexical/demo/components/Watermark.jsx

@@ -13,7 +13,7 @@ function EditorLink({editorType}) {
 const Watermark = ({editorType}) => {
     if (!editorType) {
         return (
-            <a className="absolute bottom-4 left-6 z-20 flex items-center rounded bg-white py-1 pr-2 pl-1 font-mono text-sm tracking-tight text-black" href="https://github.com/TryGhost/Koenig/tree/main/packages/koenig-lexical" rel="nofollow ugc noopener noreferrer" target="_blank">
+            <a className="absolute bottom-4 left-6 z-20 flex items-center rounded bg-white py-1 pl-1 pr-2 font-mono text-sm tracking-tight text-black" href="https://github.com/TryGhost/Koenig/tree/main/packages/koenig-lexical" rel="nofollow ugc noopener noreferrer" target="_blank">
                 <GhostFavicon className="mr-2 h-6 w-6" />
                 <span className="pr-1 font-bold tracking-wide">Koenig</span>
             editor
@@ -40,7 +40,7 @@ const Watermark = ({editorType}) => {
 
     return (
         <>
-            <div className="group absolute bottom-4 left-6 z-20 flex items-center rounded bg-white py-1 pr-2 pl-1 font-mono text-sm tracking-tight text-black">
+            <div className="group absolute bottom-4 left-6 z-20 flex items-center rounded bg-white py-1 pl-1 pr-2 font-mono text-sm tracking-tight text-black">
                 <GhostFavicon className="mr-2 h-6 w-6" />
                 <span className="pr-1 font-bold tracking-wide">Koenig</span>
                 <span className="group-hover:font-bold">{editorType}

packages/koenig-lexical/demo/components/WordCount.jsx

@@ -1,6 +1,6 @@
 const WordCount = ({wordCount}) => {
     return (
-        <div className="absolute top-4 left-6 z-20 block cursor-pointer rounded bg-white py-1 px-2 font-mono text-sm tracking-tight text-grey-600 dark:bg-transparent">
+        <div className="absolute left-6 top-4 z-20 block cursor-pointer rounded bg-white px-2 py-1 font-mono text-sm tracking-tight text-grey-600 dark:bg-transparent">
             <span data-testid="word-count">{wordCount}</span> words
         </div>
     );

packages/koenig-lexical/package.json

@@ -120,7 +120,7 @@
     "react-router-dom": "6.15.0",
     "storybook": "^7.0.12",
     "stylelint": "^15.6.1",
-    "tailwindcss": "3.2.7",
+    "tailwindcss": "3.3.3",
     "typescript": "5.1.6",
     "vite": "4.3.8",
     "vite-plugin-svgr": "^3.2.0",

packages/koenig-lexical/src/components/KoenigCaptionEditor.jsx

@@ -7,7 +7,7 @@ import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
 
 const Placeholder = ({text = 'Type here'}) => {
     return (
-        <div className="pointer-events-none absolute top-0 left-0 !m-0 min-w-full cursor-text font-sans text-sm font-normal tracking-wide text-grey-500 dark:text-grey-800">
+        <div className="pointer-events-none absolute left-0 top-0 !m-0 min-w-full cursor-text font-sans text-sm font-normal tracking-wide text-grey-500 dark:text-grey-800">
             {text}
         </div>
     );

packages/koenig-lexical/src/components/KoenigNestedEditor.jsx

@@ -6,7 +6,7 @@ const Placeholder = ({text = 'Type here', className = ''}) => {
     // Note: we use line-clamp-1, instead of truncate because truncate adds 'white-space: nowrap', which often breaks overflows of parents in some cards
     return (
         <div className={`placeholder not-kg-prose pointer-events-none h-0 cursor-text overflow-visible`}>
-            <div className={`translate-y-[-100%] line-clamp-1 ${className}`}>{text}</div>
+            <div className={`line-clamp-1 translate-y-[-100%] ${className}`}>{text}</div>
         </div>
     );
 };

packages/koenig-lexical/src/components/ui/ActionToolbar.jsx

@@ -6,7 +6,7 @@ export function ActionToolbar({isVisible, children, ...props}) {
 
     if (isVisible && !isDragging) {
         return (
-            <div className="not-kg-prose absolute top-[-44px] left-1/2 z-[1000] -translate-x-1/2" {...props}>
+            <div className="not-kg-prose absolute left-1/2 top-[-44px] z-[1000] -translate-x-1/2" {...props}>
                 {children}
             </div>
         );

packages/koenig-lexical/src/components/ui/BackgroundImagePicker.jsx

@@ -55,7 +55,7 @@ export function BackgroundImagePicker({onFileChange,
                                             <div className="group relative mb-4 w-full rounded">
                                                 <div className="absolute inset-0 rounded bg-gradient-to-t from-black/0 via-black/5 to-black/30 opacity-0 transition-all group-hover:opacity-100">
                                                 </div>
-                                                <div className="absolute top-5 right-5 flex opacity-0 transition-all group-hover:opacity-100">
+                                                <div className="absolute right-5 top-5 flex opacity-0 transition-all group-hover:opacity-100">
                                                     <button className="pointer-events-auto flex h-8 w-9 cursor-pointer items-center justify-center rounded bg-white/90 transition-all hover:bg-white" type="button" onClick={handleClearBackgroundImage}>
                                                         <TrashIcon className="h-5 w-5 fill-grey-900 stroke-[3px] transition-all ease-linear group-hover:scale-105" />
                                                     </button>

packages/koenig-lexical/src/components/ui/ColorPicker.jsx

@@ -159,7 +159,7 @@ export function ColorIndicator({value, swatches, onSwatchChange, onTogglePicker,
                 <div className='absolute inset-0 rounded-full bg-[conic-gradient(hsl(360,100%,50%),hsl(315,100%,50%),hsl(270,100%,50%),hsl(225,100%,50%),hsl(180,100%,50%),hsl(135,100%,50%),hsl(90,100%,50%),hsl(45,100%,50%),hsl(0,100%,50%))]' />
                 {value && !selectedSwatch && (
                     <div className="absolute inset-[3px] overflow-hidden rounded-full border border-white dark:border-grey-950" style={{backgroundColor}}>
-                        {value === 'transparent' && <div className="absolute top-[3px] left-[3px] z-10 w-[136%] origin-left rotate-45 border-b border-b-red" />}
+                        {value === 'transparent' && <div className="absolute left-[3px] top-[3px] z-10 w-[136%] origin-left rotate-45 border-b border-b-red" />}
                     </div>
                 )}
             </button>

packages/koenig-lexical/src/components/ui/Dropdown.jsx

@@ -63,7 +63,7 @@ export function Dropdown({value, menu, onChange}) {
 
     return (
         <div className="relative z-0 font-sans text-sm font-normal">
-            <button className={`relative w-full cursor-pointer border border-grey-300 py-2 px-3 text-left font-sans font-normal text-grey-900 focus-visible:outline-none dark:border-grey-900 dark:bg-grey-900 dark:text-white dark:placeholder:text-grey-800 ${open ? 'rounded-t' : 'rounded'}`} type="button" onBlur={handleBlur} onClick={handleOpen} onMouseDownCapture={preventLoseFocus}>
+            <button className={`relative w-full cursor-pointer border border-grey-300 px-3 py-2 text-left font-sans font-normal text-grey-900 focus-visible:outline-none dark:border-grey-900 dark:bg-grey-900 dark:text-white dark:placeholder:text-grey-800 ${open ? 'rounded-t' : 'rounded'}`} type="button" onBlur={handleBlur} onClick={handleOpen} onMouseDownCapture={preventLoseFocus}>
                 {trigger}
                 <ArrowIcon className={`absolute right-2 top-4 h-2 w-2 text-grey-600 ${open && 'rotate-180'}`} />
             </button>

packages/koenig-lexical/src/components/ui/EditorPlaceholder.jsx

@@ -1,7 +1,7 @@
 export function EditorPlaceholder({className, text}) {
     return (
         <div
-            className={`pointer-events-none absolute top-0 left-0 min-w-full cursor-text font-serif text-xl text-grey-500 dark:text-grey-800 ${className}`}
+            className={`pointer-events-none absolute left-0 top-0 min-w-full cursor-text font-serif text-xl text-grey-500 dark:text-grey-800 ${className}`}
         >{text || 'Begin writing your post...'}</div>
     );
 }

packages/koenig-lexical/src/components/ui/InputList.jsx

@@ -21,7 +21,7 @@ function Item({dataTestId, item, selected, onChange}) {
     return (
         <li className={`${selectionClass} cursor-pointer px-4 py-2 text-left hover:bg-grey-100 dark:hover:bg-black`} data-testid={`${dataTestId}-listOption`} onMouseDownCapture={event => handleOptionMouseDown(event, item.value)}>
             <span className="block text-sm font-semibold leading-tight text-black dark:text-white" data-testid={`${dataTestId}-listOption-${item.label}`}>{item.label}</span>
-            <span className="block overflow-hidden text-ellipsis whitespace-nowrap text-xs leading-tight text-grey-700 dark:text-grey-600" data-testid={`${dataTestId}-listOption-${item.value}`}>
+            <span className="block truncate text-xs leading-tight text-grey-700 dark:text-grey-600" data-testid={`${dataTestId}-listOption-${item.value}`}>
                 {item.value}
             </span>
         </li>

packages/koenig-lexical/src/components/ui/LinkInput.jsx

@@ -49,7 +49,7 @@ export function LinkInput({href, update, cancel, arrowStyles}) {
     }, [onEscape]);
 
     return (
-        <div ref={containerRef} className="relative m-0 flex h-[36px] min-w-[240px] items-center justify-evenly rounded bg-black py-0 px-1 font-sans text-sm font-medium dark:bg-grey-950">
+        <div ref={containerRef} className="relative m-0 flex h-[36px] min-w-[240px] items-center justify-evenly rounded bg-black px-1 py-0 font-sans text-sm font-medium dark:bg-grey-950">
             <input
                 ref={inputRef}
                 className="mb-[1px] h-auto w-full rounded bg-black pl-3 pr-9 leading-loose text-white selection:bg-grey/40 dark:bg-grey-950"
@@ -84,7 +84,7 @@ export function LinkInput({href, update, cancel, arrowStyles}) {
             {/* Arrow block. Used div instead of pseudo-element. Arrow requires dynamic values for position,
              and Tailwind can't handle this. They recommended CSS-in-JS or style attr for such cases (https://v2.tailwindcss.com/docs/just-in-time-mode) */}
             <div
-                className="absolute top-[36px] left-[calc(50%-8px)] w-0 border-x-8 border-t-8 border-x-transparent border-t-black dark:border-t-grey-950"
+                className="absolute left-[calc(50%-8px)] top-[36px] w-0 border-x-8 border-t-8 border-x-transparent border-t-black dark:border-t-grey-950"
                 style={arrowStyles}
             ></div>
         </div>

packages/koenig-lexical/src/components/ui/MediaPlayer.jsx

@@ -15,7 +15,7 @@ export function MediaPlayer({type, duration, theme, ...args}) {
             <div className={`relative mx-2 h-1 grow rounded ${theme === 'light' ? 'bg-white/40' : 'bg-grey/30'}`}>
                 <button className="absolute left-0 top-[-6px] h-4 w-4 rounded-full border border-grey/50 bg-white shadow" type="button"></button>
             </div>
-            <button className={`mr-4 mb-[1px] px-1 font-sans text-sm font-medium ${theme === 'light' ? 'text-white' : 'text-black'}`} type="button">1&#215;</button>
+            <button className={`mb-[1px] mr-4 px-1 font-sans text-sm font-medium ${theme === 'light' ? 'text-white' : 'text-black'}`} type="button">1&#215;</button>
             <button type="button">
                 <UnmuteIcon className={`${theme === 'light' ? 'fill-white' : 'fill-black'}`} />
             </button>

packages/koenig-lexical/src/components/ui/MediaUploader.jsx

@@ -85,7 +85,7 @@ export function MediaUploader({
             )}
 
             {!isLoading && (
-                <div className="absolute top-2 right-2 flex space-x-2 opacity-0 transition-all group-hover:opacity-100">
+                <div className="absolute right-2 top-2 flex space-x-2 opacity-0 transition-all group-hover:opacity-100">
                     {additionalActions}
                     { isPinturaEnabled && <IconButton Icon={EditIcon} onClick={() => openImageEditor({
                         image: src,

packages/koenig-lexical/src/components/ui/Modal.jsx

@@ -20,14 +20,14 @@ export function Modal({isOpen, onClose, children}) {
     return (
         <Portal>
             <div
-                className="fixed top-0 left-0 z-40 flex h-full w-full items-start justify-center overflow-auto"
+                className="fixed left-0 top-0 z-40 flex h-full w-full items-start justify-center overflow-auto"
                 role="dialog"
                 aria-modal
                 onKeyDown={controlByKeys}
             >
                 <div className="fixed inset-0 z-40 h-[100vh] bg-black opacity-60" onClick={onClose}></div>
                 <div className="relative z-50 my-8 w-full max-w-[550px] rounded bg-white drop-shadow-2xl">
-                    <button aria-label="Close dialog" className="absolute top-6 right-6 cursor-pointer" type="button" autoFocus>
+                    <button aria-label="Close dialog" className="absolute right-6 top-6 cursor-pointer" type="button" autoFocus>
                         <CloseIcon className="h-4 w-4 stroke-2 text-grey-400" onClick={onClose}/>
                     </button>
                     {children}

packages/koenig-lexical/src/components/ui/PlusMenu.jsx

@@ -2,7 +2,7 @@ import {ReactComponent as PlusIcon} from '../../assets/icons/plus.svg';
 
 export function PlusButton({onClick}) {
     return (
-        <div className="absolute top-[-2px] left-[-32px] xs:left-[-66px]" data-kg-plus-button>
+        <div className="absolute left-[-32px] top-[-2px] xs:left-[-66px]" data-kg-plus-button>
             <button
                 aria-label="Add a card"
                 className="group relative flex h-7 w-7 cursor-pointer items-center justify-center rounded-full border border-grey transition-all ease-linear hover:border-grey-900 dark:border-grey-800 dark:hover:border-grey-100 md:h-9 md:w-9"

packages/koenig-lexical/src/components/ui/SnippetInput/Dropdown.jsx

@@ -54,7 +54,7 @@ export const Dropdown = ({
 const DropdownSection = ({list = [], onClick, activeMenuItem}) => {
     return (
         <li role="separator">
-            <span className="tracking-loose block border-t border-grey-200 px-3 pt-3 pb-2 text-xs font-medium uppercase text-grey dark:border-grey-900 dark:text-grey-800">Replace existing</span>
+            <span className="tracking-loose block border-t border-grey-200 px-3 pb-2 pt-3 text-xs font-medium uppercase text-grey dark:border-grey-900 dark:text-grey-800">Replace existing</span>
             <ul role="menu">
                 {
                     list.map((item, index) => (
@@ -88,7 +88,7 @@ const DropdownItem = ({onClick, name, active, index}) => {
         <li className="mb-1">
             <button
                 ref={buttonRef}
-                className="flex w-full cursor-pointer items-center justify-between py-2 px-3 text-left text-sm hover:bg-grey-100 focus:bg-grey-100 dark:hover:bg-black dark:focus:bg-black"
+                className="flex w-full cursor-pointer items-center justify-between px-3 py-2 text-left text-sm hover:bg-grey-100 focus:bg-grey-100 dark:hover:bg-black dark:focus:bg-black"
                 type="button"
                 onClick={() => onClick(name)}
             >

packages/koenig-lexical/src/components/ui/SnippetInput/Input.jsx

@@ -6,7 +6,7 @@ export const Input = ({value, onChange, onClear, onKeyDown, arrowStyles}) => {
         <div className="shadow-[0 18px 45px -5px rgba(0,0,0,.15)] relative m-0 flex h-[35px] min-w-[240px] items-center justify-evenly rounded bg-white py-0 font-sans text-sm font-medium">
             <input
                 autoFocus={true}
-                className={`mb-[1px] h-auto w-full border bg-white py-1 pl-3 pr-9 font-normal leading-loose text-grey-900 selection:bg-grey/40 dark:bg-grey-950 dark:text-grey-100 dark:placeholder:text-grey-800 ${value ? 'rounded-t rounded-b-none border-grey-300 dark:border-grey-900' : 'rounded border-green'}`}
+                className={`mb-[1px] h-auto w-full border bg-white py-1 pl-3 pr-9 font-normal leading-loose text-grey-900 selection:bg-grey/40 dark:bg-grey-950 dark:text-grey-100 dark:placeholder:text-grey-800 ${value ? 'rounded-b-none rounded-t border-grey-300 dark:border-grey-900' : 'rounded border-green'}`}
                 data-testid="snippet-name"
                 placeholder="Snippet name"
                 value={value}
@@ -20,7 +20,7 @@ export const Input = ({value, onChange, onClear, onKeyDown, arrowStyles}) => {
             {/* Arrow block. Used div instead of pseudo-element. Arrow requires dynamic values for position,
              and Tailwind can't handle this. They recommended CSS-in-JS or style attr for such cases (https://v2.tailwindcss.com/docs/just-in-time-mode) */}
             <div
-                className="absolute top-[35px] left-[calc(50%-8px)] w-0 border-x-[9px] border-t-[9px] border-x-transparent border-t-green after:absolute after:top-[-9px] after:left-[calc(50%-8px)] after:w-0 after:border-x-8 after:border-t-8 after:border-x-transparent after:border-t-white dark:after:border-t-grey-950"
+                className="absolute left-[calc(50%-8px)] top-[35px] w-0 border-x-[9px] border-t-[9px] border-x-transparent border-t-green after:absolute after:left-[calc(50%-8px)] after:top-[-9px] after:w-0 after:border-x-8 after:border-t-8 after:border-x-transparent after:border-t-white dark:after:border-t-grey-950"
                 style={arrowStyles}
             ></div>
         </div>