refactor: convert menu.less to menu.module.css

.storybook/main.js

@@ -50,6 +50,7 @@ module.exports = {
                             ? [
                                   {
                                       ...rule,
+                                      test: /\.module\.css$/,
                                       use: rule.use.map((useEntry) => {
                                           return useEntry.loader?.match(/\/css-loader/)
                                               ? {
@@ -72,7 +73,6 @@ module.exports = {
                                   },
                                   {
                                       ...rule,
-                                      test: /\.module\.css$/,
                                       exclude: /\.module\.css$/,
                                   },
                               ]

.storybook/preview.js

@@ -1,6 +1,6 @@
 import { addParameters } from '@storybook/react'
 import BaseDecorator from './BaseDecorator'
-import '../stories/components/styles/story.less'
+import '../stories/components/styles/story.css'
 
 export const decorators = [BaseDecorator]
 

src/menu/menu.module.css

@@ -0,0 +1,76 @@
+/* minimum accessible target area */
+:global(.reactist_menulist)[role='menu'] {
+    min-height: 44px;
+    max-height: var(--popover-available-height); /* defined by ariakit */
+    overflow: auto;
+    display: block;
+    white-space: nowrap;
+    background: hsla(0, 100%, 100%, 0.99);
+    outline: none;
+    font-size: var(--reactist-font-size-copy);
+    padding: 4px 0;
+    min-width: 180px;
+    border: 1px solid var(--reactist-divider-secondary);
+    border-radius: 3px;
+    margin: -4px; /* Required to add spacing between the viewport, used in conjunction with unstable_offset */
+    z-index: var(--reactist-stacking-order-menu);
+}
+
+:global(.reactist_menulist) [role='menuitem'],
+:global(.reactist_menulist) :global(.reactist_menugroup__label) {
+    user-select: none;
+    outline: none;
+    text-align: left;
+    display: flex;
+    align-items: center;
+    padding: 5px 10px;
+    color: inherit;
+    border: none;
+    background-color: transparent;
+    font-family: var(--reactist-font-family);
+    font-size: var(--reactist-font-size-copy);
+}
+
+:global(.reactist_menulist) :global(.reactist_menugroup__label) {
+    color: var(--reactist-content-secondary);
+    font-size: var(--reactist-font-size-copy);
+}
+
+:global(.reactist_menulist) [role='menuitem'] {
+    width: 100%;
+    box-sizing: border-box;
+}
+
+:global(.reactist_menulist) [role='menuitem']:hover,
+:global(.reactist_menulist) [role='menuitem']:focus,
+:global(.reactist_menulist) [role='menuitem'][aria-expanded='true'] {
+    color: var(--reactist-content-primary);
+    background-color: var(--reactist-bg-selected);
+}
+
+:global(.reactist_menulist) [role='menuitem'][aria-disabled='true'],
+:global(.reactist_menulist) [role='menuitem']:disabled {
+    color: var(--reactist-content-secondary);
+    pointer-events: none;
+}
+
+:global(.reactist_menulist) a[role='menuitem'] {
+    cursor: default;
+    text-decoration: none;
+}
+
+:global(.reactist_menulist) a[role='menuitem']:hover {
+    text-decoration: none;
+}
+
+/* sub-menus need to be shifted a bit towards the top to be aligned with its menu item */
+:global(.reactist_menulist) [role='menu'] {
+    margin-top: -5px;
+}
+
+:global(.reactist_menulist) hr {
+    border: none;
+    height: 1px;
+    background-color: var(--reactist-bg-selected);
+    margin: 4px 0;
+}

src/menu/menu.tsx

@@ -1,4 +1,4 @@
-import './menu.less'
+import './menu.module.css'
 
 import * as React from 'react'
 

stories/components/Avatar.stories.tsx

@@ -1,4 +1,4 @@
-import './styles/avatar_story.less'
+import './styles/avatar_story.css'
 
 import * as React from 'react'
 

stories/components/color.stories.tsx

@@ -1,4 +1,4 @@
-import './styles/color-story.less'
+import './styles/color-story.css'
 
 import * as React from 'react'
 

stories/components/styles/story.css

@@ -0,0 +1,9 @@
+body {
+    font-family: var(--reactist-font-family);
+}
+
+.story {
+    margin: 0 40px 0 40px;
+    padding: 20px;
+    background-color: white;
+}