diff --git a/.storybook/main.js b/.storybook/main.js
index 116175f20..c9535d841 100644
--- a/.storybook/main.js
+++ b/.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$/,
                                   },
                               ]
diff --git a/.storybook/preview.js b/.storybook/preview.js
index 92be3d3a3..eada7501f 100644
--- a/.storybook/preview.js
+++ b/.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]
 
diff --git a/src/menu/menu.less b/src/menu/menu.less
deleted file mode 100644
index 69afc76bc..000000000
--- a/src/menu/menu.less
+++ /dev/null
@@ -1,72 +0,0 @@
-.reactist_menulist[role='menu'] {
-    min-height: 44px; // minimum accessible target area
-    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);
-
-    [role='menuitem'],
-    .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);
-    }
-
-    .reactist_menugroup__label {
-        color: var(--reactist-content-secondary);
-        font-size: var(--reactist-font-size-copy);
-    }
-
-    [role='menuitem'] {
-        width: 100%;
-        box-sizing: border-box;
-        &:hover,
-        &:focus,
-        &[aria-expanded='true'] {
-            color: var(--reactist-content-primary);
-            background-color: var(--reactist-bg-selected);
-        }
-        &[aria-disabled='true'],
-        &:disabled {
-            color: var(--reactist-content-secondary);
-            pointer-events: none;
-        }
-    }
-
-    a[role='menuitem'] {
-        cursor: default;
-        text-decoration: none;
-        &:hover {
-            text-decoration: none;
-        }
-    }
-
-    // sub-menus need to be shifted a bit towards the top to be aligned with its menu item
-    [role='menu'] {
-        margin-top: -5px;
-    }
-
-    hr {
-        border: none;
-        height: 1px;
-        background-color: var(--reactist-bg-selected);
-        margin: 4px 0;
-    }
-}
diff --git a/src/menu/menu.module.css b/src/menu/menu.module.css
new file mode 100644
index 000000000..07abb1840
--- /dev/null
+++ b/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;
+}
diff --git a/src/menu/menu.tsx b/src/menu/menu.tsx
index ace95c8b6..9fca203fd 100644
--- a/src/menu/menu.tsx
+++ b/src/menu/menu.tsx
@@ -1,4 +1,4 @@
-import './menu.less'
+import './menu.module.css'
 
 import * as React from 'react'
 
diff --git a/stories/components/Avatar.stories.tsx b/stories/components/Avatar.stories.tsx
index 1c156fdb3..5c12b1307 100644
--- a/stories/components/Avatar.stories.tsx
+++ b/stories/components/Avatar.stories.tsx
@@ -1,4 +1,4 @@
-import './styles/avatar_story.less'
+import './styles/avatar_story.css'
 
 import * as React from 'react'
 
diff --git a/stories/components/color.stories.tsx b/stories/components/color.stories.tsx
index 83db959d9..764336408 100644
--- a/stories/components/color.stories.tsx
+++ b/stories/components/color.stories.tsx
@@ -1,4 +1,4 @@
-import './styles/color-story.less'
+import './styles/color-story.css'
 
 import * as React from 'react'
 
diff --git a/stories/components/styles/avatar_story.less b/stories/components/styles/avatar_story.css
similarity index 100%
rename from stories/components/styles/avatar_story.less
rename to stories/components/styles/avatar_story.css
diff --git a/stories/components/styles/color-story.less b/stories/components/styles/color-story.css
similarity index 100%
rename from stories/components/styles/color-story.less
rename to stories/components/styles/color-story.css
diff --git a/stories/components/styles/story.css b/stories/components/styles/story.css
new file mode 100644
index 000000000..6e08f70a8
--- /dev/null
+++ b/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;
+}
diff --git a/stories/components/styles/story.less b/stories/components/styles/story.less
deleted file mode 100644
index 7d5f350da..000000000
--- a/stories/components/styles/story.less
+++ /dev/null
@@ -1,15 +0,0 @@
-body {
-    font-family: var(--reactist-font-family);
-}
-
-.story {
-    margin: 0 40px 0 40px;
-    padding: 20px;
-    background-color: white;
-
-    // checkered background
-    // @gray: whitesmoke;
-    // background-image: linear-gradient(45deg, @gray 25%, transparent 25%), linear-gradient(-45deg, @gray 25%, transparent 25%), linear-gradient(45deg, transparent 75%, @gray 75%), linear-gradient(-45deg, transparent 75%, @gray 75%);
-    // background-size: 20px 20px;
-    // background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
-}