Merge branch 'master' into fix/144166-146420-issue-where-the-table-icon-is-not-displayed-when-hovering-over-the-table

.changeset/config.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@3.0.0/schema.json",
+  "changelog": ["@changesets/changelog-github", { "repo": "weseek/growi" }],
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "restricted",
+  "baseBranch": "master",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}

.stylelintrc.json

@@ -1,15 +1,25 @@
 {
   "extends": [
+    "stylelint-config-recommended-scss",
     "stylelint-config-recess-order"
   ],
   "rules": {
-    "indentation": 2,
-    "string-quotes": "single",
+    "no-duplicate-selectors": null,
+    "scss/comment-no-empty": null,
+    "scss/at-extend-no-missing-placeholder": null,
     "rule-empty-line-before": [ "always-multi-line", {
       "except": ["after-single-line-comment", "first-nested"],
       "ignore": ["after-comment", "inside-block"]
     } ],
-    "selector-combinator-space-before": "always",
-    "selector-combinator-space-after": "always"
+    "color-function-notation": "legacy",
+    "selector-pseudo-class-no-unknown": [
+      true,
+      {
+        "ignorePseudoClasses": [
+          "global",
+          "local"
+        ]
+      }
+    ]
   }
 }

apps/app/.stylelintrc.json

@@ -1,7 +1,6 @@
 {
   "extends": "../../.stylelintrc.json",
   "ignoreFiles": [
-    "src/styles/prebuilt/*.css",
-    "src/linter-checker/test.scss"
+    "src/styles/prebuilt/*.css"
   ]
 }

apps/app/package.json

@@ -29,7 +29,7 @@
     "dev:ci": "yarn cross-env NODE_ENV=development yarn ts-node src/server/app.ts --ci",
     "lint:typecheck": "npx -y tsc",
     "lint:eslint": "yarn eslint --quiet \"**/*.{js,jsx,ts,tsx}\"",
-    "lint:styles": "stylelint src/**/*.scss",
+    "lint:styles": "stylelint \"src/**/*.scss\"",
     "lint:swagger2openapi": "node node_modules/.bin/oas-validate tmp/swagger.json",
     "lint": "run-p lint:*",
     "prelint:swagger2openapi": "yarn openapi:v3",
@@ -178,7 +178,7 @@
     "react-syntax-highlighter": "^15.5.0",
     "react-toastify": "^9.1.3",
     "react-use-ripple": "^1.5.2",
-    "reactstrap": "^9.2.0",
+    "reactstrap": "^9.2.2",
     "reconnecting-websocket": "^4.4.0",
     "redis": "^3.0.2",
     "rehype-katex": "^6.0.2",
@@ -194,7 +194,7 @@
     "remark-toc": "^8.0.1",
     "remark-wiki-link": "^1.0.4",
     "sanitize-filename": "^1.6.3",
-    "socket.io": "^4.7.2",
+    "socket.io": "^4.7.5",
     "stream-to-promise": "^3.0.0",
     "string-width": "=4.2.2",
     "superjson": "^1.9.1",
@@ -210,11 +210,12 @@
     "validator": "^13.7.0",
     "ws": "^8.3.0",
     "xss": "^1.0.14",
-    "y-mongodb-provider": "^0.1.7",
-    "y-socket.io": "^1.1.0",
-    "yjs": "^13.6.12"
+    "y-mongodb-provider": "^0.1.10",
+    "y-socket.io": "^1.1.3",
+    "yjs": "^13.6.15"
   },
   "// comments for defDependencies": {
+    "bootstrap": "v5.3.3 has a bug. refs: https://github.com/twbs/bootstrap/issues/39798",
     "@handsontable/react": "v3 requires handsontable >= 7.0.0.",
     "handsontable": "v7.0.0 or above is no loger MIT lisence."
   },
@@ -242,7 +243,7 @@
     "@vitejs/plugin-react": "^4.2.1",
     "@vitest/coverage-v8": "^0.34.6",
     "babel-loader": "^8.2.5",
-    "bootstrap": "^5.3.3",
+    "bootstrap": "=5.3.2",
     "connect-browser-sync": "^2.1.0",
     "cypress-real-events": "^1.12.0",
     "diff2html": "^3.4.47",
@@ -279,7 +280,7 @@
     "sass": "^1.53.0",
     "simple-load-script": "^1.0.2",
     "simplebar-react": "^2.3.6",
-    "socket.io-client": "^4.2.0",
+    "socket.io-client": "^4.7.5",
     "source-map-loader": "^4.0.1",
     "swagger2openapi": "^7.0.8",
     "tsc-alias": "^1.2.9"

apps/app/src/components/Admin/App/MaskedInput.module.scss

@@ -1,3 +1,5 @@
+/* stylelint-disable selector-class-pattern */
+
 .MaskedInput {
   position: relative;
   display: flex;
@@ -5,7 +7,7 @@
 
 .PasswordReveal {
   position: absolute;
-  top: 0rem;
+  top: 0;
   right: 0.5rem;
   left: auto;
   font-size: 1.4rem;

apps/app/src/components/Admin/UserManagement.module.scss

@@ -4,6 +4,7 @@
 .search-typeahead :global {
   position: relative;
   width: 100%;
+
   // corner radius
   border-top-right-radius: bs.$border-radius;
   border-bottom-right-radius: bs.$border-radius;

apps/app/src/components/Common/CopyDropdown/CopyDropdown.module.scss

@@ -1,5 +1,4 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
-
 @use '@growi/ui/scss/atoms/btn-muted';
 
 .grw-copy-dropdown :global {

apps/app/src/components/Common/DrawerToggler/DrawerToggler.module.scss

@@ -1,5 +1,4 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
-
 @use '~/styles/variables' as var;
 
 
@@ -7,7 +6,6 @@
   .btn {
     --bs-btn-color: rgba(var(--bs-tertiary-color-rgb), 0.5);
     --bs-btn-bg: transparent;
-
     --bs-btn-hover-color: rgba(var(--bs-tertiary-color-rgb), 0.7);
 
     width: var.$grw-sidebar-nav-width;

apps/app/src/components/Common/PagePathNav/PagePathNav.module.scss

@@ -1,5 +1,4 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
-
 @use '@growi/ui/scss/atoms/btn-muted';
 
 .grw-mx-02em {

apps/app/src/components/Common/PageViewLayout.module.scss

@@ -1,5 +1,4 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
-
 @use '~/styles/mixins';
 @use '~/styles/variables' as var;
 
@@ -9,6 +8,7 @@ $page-view-layout-margin-top: 32px;
 
 .page-view-layout :global {
   $page-content-footer-min-heigh: 130px;
+
   min-height: calc(100vh - #{$subnavigation-height + $page-view-layout-margin-top + $page-content-footer-min-heigh});
 }
 
@@ -42,6 +42,7 @@ $page-view-layout-margin-top: 32px;
     position: sticky;
 
     $page-path-nav-height: 99px;
+
     top: calc($subnavigation-height + $page-view-layout-margin-top + $page-path-nav-height + 4px);
   }
 }

apps/app/src/components/CustomNavigation/CustomNav.module.scss

@@ -10,7 +10,7 @@
   }
 
   .grw-nav-slide-hr {
-    border-top: 0rem;
+    border-top: 0;
     border-bottom: 3px solid;
     transition: 0.3s ease-in-out;
   }

apps/app/src/components/DescendantsPageListModal.module.scss

@@ -1,7 +1,7 @@
 .grw-descendants-page-list-modal :global {
   .modal-header {
     button.btn-close {
-      margin: auto 0rem auto auto;
+      margin: auto 0 auto auto;
     }
   }
 
@@ -13,6 +13,6 @@
     max-height: calc(100vh - 100px);
   }
   ul.pagination {
-    margin-bottom: 0rem;
+    margin-bottom: 0;
   }
 }

apps/app/src/components/ItemsTree/ItemsTree.module.scss

@@ -0,0 +1,4 @@
+/* stylelint-disable-next-line block-no-empty */
+.items-tree :global {
+
+}

apps/app/src/components/ItemsTree/ItemsTreeContentSkeleton.module.scss

@@ -2,10 +2,12 @@
 
 .text-skeleton-level1 {
   @include mixins.grw-skeleton-text($font-size:16px, $line-height: 40px);
+
   padding-left: 12px;
 }
 
 .text-skeleton-level2 {
   @extend .text-skeleton-level1;
+
   padding-left: 12px + 10px * 2;
 }

apps/app/src/components/Layout/Admin.module.scss

@@ -114,6 +114,7 @@ $slack-work-space-name-card-border: #efc1f6;
       border-width: 2px;
     }
   }
+
   // TODO: change to utility class on Bootstrap 5
   .slack-connection-log {
     .slack-connection-log-title {
@@ -173,6 +174,7 @@ $slack-work-space-name-card-border: #efc1f6;
       &.with-proxy {
         .hr-container {
           margin-top: 40px;
+
           @include media-breakpoint-up(lg) {
             margin-top: 65px;
           }
@@ -189,7 +191,7 @@ $slack-work-space-name-card-border: #efc1f6;
   //// TODO: migrate to Bootstrap 4
   //// omit all .btn-toggle and use Switches
   //// https://getbootstrap.com/docs/4.2/components/forms/#switches
-  //
+
   // Toggle Twitter Bootstrap button class when active
   // https://jsfiddle.net/ms040m01/3/
   // @mixin active-color($color, $bg-color, $border-color) {

apps/app/src/components/Layout/BasicLayout.module.scss

@@ -0,0 +1,28 @@
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
+@use '~/styles/mixins';
+
+
+// for react-toastify
+.grw-basic-layout :global {
+  .Toastify .Toastify__toast-container {
+    top: 2.5em;
+
+    @include bs.media-breakpoint-down(md) {
+      top: 6.5em;
+    }
+  }
+}
+
+.grw-basic-layout {
+  @include mixins.with-editing() {
+    .Toastify .Toastify__toast-container {
+      top: 5em;
+
+      @include bs.media-breakpoint-down(md) {
+        top: 7em;
+      }
+    }
+  }
+}
+
+

apps/app/src/components/Layout/BasicLayout.tsx

@@ -9,6 +9,12 @@ import { Sidebar } from '../Sidebar';
 
 import { RawLayout } from './RawLayout';
 
+
+import styles from './BasicLayout.module.scss';
+
+const moduleClass = styles['grw-basic-layout'] ?? '';
+
+
 const AlertSiteUrlUndefined = dynamic(() => import('../AlertSiteUrlUndefined').then(mod => mod.AlertSiteUrlUndefined), { ssr: false });
 const DeleteAttachmentModal = dynamic(() => import('../PageAttachment/DeleteAttachmentModal').then(mod => mod.DeleteAttachmentModal), { ssr: false });
 const HotkeysManager = dynamic(() => import('../Hotkeys/HotkeysManager'), { ssr: false });
@@ -35,7 +41,7 @@ type Props = {
 
 export const BasicLayout = ({ children, className }: Props): JSX.Element => {
   return (
-    <RawLayout className={`${className ?? ''}`}>
+    <RawLayout className={`${moduleClass} ${className ?? ''}`}>
       <DndProvider backend={HTML5Backend}>
 
         <div className="page-wrapper flex-row">

apps/app/src/components/Layout/NoLoginLayout.module.scss

@@ -1,3 +1,5 @@
+/* stylelint-disable scss/no-global-function-names */
+
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
 @use '@growi/core-styles/scss/variables/growi-official-colors' as var;
 
@@ -5,6 +7,11 @@
 .nologin :global {
   height: 100vh;
 
+  .nologin-header,
+  .nologin-dialog {
+    max-width: 480px;
+  }
+
   // layout
   .main {
     width: 100vw;
@@ -54,11 +61,6 @@
     }
   }
 
-  .nologin-header,
-  .nologin-dialog {
-    max-width: 480px;
-  }
-
 }
 
 .link-switch {
@@ -80,9 +82,10 @@
   .nologin :global {
     // background color
     $color-gradient: #3c465c;
-    background: linear-gradient(45deg, darken($color-gradient, 30%) 0%, hsla(340, 100%, 55%, 0) 70%),
-      linear-gradient(135deg, var.$growi-green 10%, hsla(225, 95%, 50%, 0) 70%), linear-gradient(225deg, var.$growi-blue 10%, hsla(140, 90%, 50%, 0) 80%),
-      linear-gradient(315deg, darken($color-gradient, 25%) 100%, hsla(35, 95%, 55%, 0) 70%);
+
+    background: linear-gradient(45deg, darken($color-gradient, 30%) 0%, hsla(340deg, 100%, 55%, 0%) 70%),
+      linear-gradient(135deg, var.$growi-green 10%, hsla(225deg, 95%, 50%, 0%) 70%), linear-gradient(225deg, var.$growi-blue 10%, hsla(140deg, 90%, 50%, 0%) 80%),
+      linear-gradient(315deg, darken($color-gradient, 25%) 100%, hsla(35deg, 95%, 55%, 0%) 70%);
 
     .nologin-header {
       background-color: rgba(white, 0.3);
@@ -134,9 +137,10 @@
   .nologin :global {
     // background color
     $color-gradient: #3c465c;
-    background: linear-gradient(45deg, darken($color-gradient, 30%) 0%, hsla(340, 100%, 55%, 0) 70%),
-      linear-gradient(135deg, var.$growi-green 10%, hsla(225, 95%, 50%, 0) 70%), linear-gradient(225deg, var.$growi-blue 10%, hsla(140, 90%, 50%, 0) 80%),
-      linear-gradient(315deg, darken($color-gradient, 25%) 100%, hsla(35, 95%, 55%, 0) 70%);
+
+    background: linear-gradient(45deg, darken($color-gradient, 30%) 0%, hsla(340deg, 100%, 55%, 0%) 70%),
+      linear-gradient(135deg, var.$growi-green 10%, hsla(225deg, 95%, 50%, 0%) 70%), linear-gradient(225deg, var.$growi-blue 10%, hsla(140deg, 90%, 50%, 0%) 80%),
+      linear-gradient(315deg, darken($color-gradient, 25%) 100%, hsla(35deg, 95%, 55%, 0%) 70%);
 
     .nologin-header {
       background-color: rgba(black, 0.3);

apps/app/src/components/LoginForm/LoginForm.module.scss

@@ -1,5 +1,4 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
-
 @use '~/styles/atoms/placeholders/buttons';
 
 .login-form :global {
@@ -24,8 +23,8 @@
   }
 
   .text-line {
-    &:before,
-    &:after {
+    &::before,
+    &::after {
       flex-grow: 1;
       height: 1px;
       margin:0 1em;

apps/app/src/components/Me/ColorModeSettings.tsx

@@ -4,8 +4,6 @@ import { useTranslation } from 'react-i18next';
 
 import { Themes, useNextThemes } from '~/stores/use-next-themes';
 
-// import styles from './ColorModeSettings.module.scss';
-
 
 type ColorModeSettingsButtonProps = {
   isActive: boolean,

apps/app/src/components/Navbar/GrowiContextualSubNavigation.module.scss

@@ -9,7 +9,7 @@
   }
 }
 
-@include mixins.editing() {
+@include mixins.at-editing() {
   .grw-contextual-sub-navigation {
     position: fixed;
     right: 0;

apps/app/src/components/Navbar/GrowiNavbarBottom.module.scss

@@ -4,6 +4,7 @@
 .grw-navbar-bottom :global {
   // apply transition
   transition-property: bottom;
+
   @include mixins.apply-navigation-transition();
 
   .navbar {

apps/app/src/components/Navbar/PageEditorModeManager.module.scss

@@ -20,6 +20,7 @@
 .grw-page-editor-mode-manager-skeleton :global {
   width: 90px;
   height: 38px;
+
   @include bs.media-breakpoint-up(md) {
     width: 179px;
     height: 30px;
@@ -47,6 +48,7 @@
     }
   }
 }
+
 @include bs.color-mode(dark) {
   .grw-page-editor-mode-manager :global {
     .btn {

apps/app/src/components/PageAccessoriesModal/PageAccessoriesModal.module.scss

@@ -1,7 +1,7 @@
 .grw-page-accessories-modal :global {
   .modal-header {
     button.btn-close {
-      margin: auto 0rem auto auto;
+      margin: auto 0 auto auto;
     }
   }
 
@@ -13,6 +13,6 @@
     max-height: calc(100vh - 100px);
   }
   ul.pagination {
-    margin-bottom: 0rem;
+    margin-bottom: 0;
   }
 }

apps/app/src/components/PageComment/Comment.module.scss

@@ -1,14 +1,12 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
-
 @use '../../styles/variables' as var;
-@use './_comment-inheritance';
+@use './comment-inheritance';
 
 .comment-styles :global {
 
   .page-comment {
     position: relative;
     pointer-events: none;
-
     scroll-margin-top: var.$grw-scroll-margin-top-in-view;
 
     // background
@@ -49,8 +47,9 @@
     }
 
     // older comments
-    &.page-comment-older {
-    }
+    // &.page-comment-older {
+    // }
+
     // newer comments
     &.page-comment-newer {
       opacity: 0.7;
@@ -71,7 +70,6 @@
     .page-comment-meta {
       display: flex;
       justify-content: flex-end;
-
       font-size: 0.9em;
       color: bs.$gray-400;
     }
@@ -84,6 +82,7 @@
     height: 66px;
     padding: 1em;
     margin-left: 4.5em;
+
     @include bs.media-breakpoint-down(xs) {
       margin-left: 3.5em;
     }

apps/app/src/components/PageComment/CommentEditor.module.scss

@@ -31,8 +31,7 @@
     min-height: comment-inheritance.$codemirror-default-height !important;
   }
   .comment-preview-container {
-    min-height: page-editor-inheritance.$navbar-editor-height
-      + comment-inheritance.$codemirror-default-height;
+    min-height: page-editor-inheritance.$navbar-editor-height + comment-inheritance.$codemirror-default-height;
     padding-top: 0.5em;
   }
 }

apps/app/src/components/PageComment/CommentPreview.module.scss

@@ -1,2 +1,3 @@
+/* stylelint-disable-next-line block-no-empty */
 .grw-comment-preview {
 }

apps/app/src/components/PageComment/DeleteCommentModal.module.scss

@@ -3,6 +3,7 @@
   .modal-content .modal-body {
     .comment-body {
       max-height: 13em;
+
       // scrollable
       overflow-y: auto;
     }

apps/app/src/components/PageComment/SwitchingButtonGroup.module.scss

@@ -31,6 +31,7 @@
     }
   }
 }
+
 @include bs.color-mode(dark) {
   .btn-group-switching :global {
     .btn {

apps/app/src/components/PageComment/_comment-inheritance.scss

@@ -5,7 +5,7 @@
   padding: 1em;
 
   // speech balloon
-  &:before {
+  &::before {
     position: absolute;
     top: 1.5em;
     left: -1em;
@@ -32,8 +32,8 @@ $codemirror-default-height: 300px;
 @include bs.color-mode(light) {
   %bg-comment {
     background-color: rgba( bs.$gray-200, 0.5 );
-    border: 1px solid bs.$gray-200;
     backdrop-filter: blur(10px);
+    border: 1px solid bs.$gray-200;
   }
 }
 
@@ -41,7 +41,7 @@ $codemirror-default-height: 300px;
 @include bs.color-mode(dark) {
   %bg-comment {
     background-color: rgba( bs.$gray-800, 0.3 );
-    border: 1px solid bs.$gray-700;
     backdrop-filter: blur(10px);
+    border: 1px solid bs.$gray-700;
   }
 }

apps/app/src/components/PageContentFooter.module.scss

@@ -6,6 +6,7 @@
     font-size: 0.95em;
   }
 }
+
 // TODO: Should Soft Coding see: https://github.com/weseek/growi/pull/6404
 .page-content-footer-skeleton :global {
   width: 300px;

apps/app/src/components/PageControls/BookmarkButtons.module.scss

@@ -1,7 +1,5 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
-
 @use '@growi/ui/scss/atoms/btn-muted';
-
 @use './button-styles';
 
 .btn-group-bookmark :global {
@@ -13,12 +11,14 @@
   }
   .total-counts {
     @extend %btn-total-counts-basis;
+
     padding-left: 5px;
   }
 }
 
 // == Colors
 .btn-group-bookmark :global {
+  /* stylelint-disable-next-line no-descending-specificity */
   .btn-bookmark {
     @include btn-muted.colorize(bs.$orange);
   }

apps/app/src/components/PageControls/LikeButtons.module.scss

@@ -1,7 +1,5 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
-
 @use '@growi/ui/scss/atoms/btn-muted';
-
 @use './button-styles';
 
 .btn-group-like :global {
@@ -13,6 +11,7 @@
   }
   .total-counts {
     @extend %btn-total-counts-basis;
+
     padding-left: 5px;
   }
 }

apps/app/src/components/PageControls/PageControls.module.scss

@@ -1,7 +1,5 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
-
 @use '@growi/ui/scss/atoms/btn-muted';
-
 @use './button-styles';
 
 // PageItemControl styles

apps/app/src/components/PageControls/SearchButton.module.scss

@@ -1,7 +1,5 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
-
 @use '@growi/ui/scss/atoms/btn-muted';
-
 @use './button-styles';
 
 .btn-search :global {

apps/app/src/components/PageControls/SeenUserInfo.module.scss

@@ -1,7 +1,5 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
-
 @use '@growi/ui/scss/atoms/btn-muted';
-
 @use './button-styles';
 
 .grw-seen-user-info :global {

apps/app/src/components/PageControls/SubscribeButton.module.scss

@@ -1,7 +1,5 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
-
 @use '@growi/ui/scss/atoms/btn-muted';
-
 @use './button-styles';
 
 .btn-subscribe :global {

apps/app/src/components/PageCreateModal.module.scss

@@ -2,9 +2,6 @@
   .page-today-input1 {
     width: 60px;
   }
-  .page-today-input2 {
-  }
-
   .grw-btn-create-page {
     min-width: 90px;
   }

apps/app/src/components/PageEditor/EditorNavbar/EditorNavbar.module.scss

@@ -2,6 +2,7 @@
 
 .editor-navbar :global {
   min-height: 72px;
+
   @include bs.media-breakpoint-down(sm) {
     min-height: 96px;
   }

apps/app/src/components/PageEditor/EditorNavbarBottom.module.scss

@@ -2,7 +2,7 @@
 @use '~/styles/variables' as var;
 @use '~/styles/mixins';
 
-@include mixins.editing() {
+@include mixins.at-editing() {
   .grw-editor-navbar-bottom :global {
     .grw-grant-selector {
       max-width: 250px;

apps/app/src/components/PageEditor/GridEditModal.module.scss

@@ -6,13 +6,13 @@
   .mobile-preview {
     .row {
       height: 140px;
-      margin: 0px;
+      margin: 0;
     }
   }
   .desktop-preview {
     .row {
       div {
-        padding: 0px;
+        padding: 0;
       }
     }
   }
@@ -20,7 +20,7 @@
   .tablet-preview {
     .row {
       div {
-        padding: 0px;
+        padding: 0;
       }
     }
   }
@@ -29,13 +29,14 @@
     width: 75%;
     .row {
       div {
-        padding: 0px;
+        padding: 0;
       }
     }
   }
 
   .grid-division-menu {
     width: 60vw;
+
     @include bs.media-breakpoint-down(lg) {
       width: 80vw;
     }

apps/app/src/components/PageEditor/HandsontableModal.module.scss

@@ -35,7 +35,7 @@
       padding-right: 35px;
       padding-left: 10px;
 
-      i:before {
+      i::before {
         position: absolute;
         top: 6px;
         right: 8px;

apps/app/src/components/PageEditor/LinkEditPreview.module.scss

@@ -1,8 +1,8 @@
 .linkedit-preview {
   .page-editor-preview-body {
     max-height: 70vh;
-    padding-top: 0px;
-    margin: 0px -10px 0px -10px;
+    padding-top: 0;
+    margin: 0 -10px;
     .wiki {
       overflow-y: scroll;
       font-size: 0.5rem;

apps/app/src/components/PageEditor/PageEditor.tsx

@@ -149,7 +149,10 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
     // set to ref
     initialValueRef.current = initialValue;
   }, [initialValue]);
-  const [markdownToPreview, setMarkdownToPreview] = useState<string>(initialValue);
+
+  const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(GlobalCodeMirrorEditorKey.MAIN);
+
+  const [markdownToPreview, setMarkdownToPreview] = useState<string>(codeMirrorEditor?.getDoc() ?? '');
   const setMarkdownPreviewWithDebounce = useMemo(() => debounce(100, throttle(150, (value: string) => {
     setMarkdownToPreview(value);
   })), []);
@@ -159,8 +162,6 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
   }, [setMarkdownPreviewWithDebounce]);
 
 
-  const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(GlobalCodeMirrorEditorKey.MAIN);
-
   const { scrollEditorHandler, scrollPreviewHandler } = useScrollSync(GlobalCodeMirrorEditorKey.MAIN, previewRef);
 
   const scrollEditorHandlerThrottle = useMemo(() => throttle(25, scrollEditorHandler), [scrollEditorHandler]);

apps/app/src/components/PageEditor/Preview.module.scss

@@ -3,7 +3,7 @@
 .page-editor-preview-body :global {
   .wiki {
     max-width: 980px;
-    padding: 0px 15px;
+    padding: 0 15px;
     margin: 0 auto;
   }
 }

apps/app/src/components/PageHeader/PageHeader.module.scss

@@ -1,2 +1,3 @@
+/* stylelint-disable-next-line block-no-empty */
 .page-header :global {
 }

apps/app/src/components/PagePresentationModal.module.scss

@@ -1,7 +1,7 @@
-@use '~/styles/_modal';
+@use '~/styles/modal';
 
 .grw-presentation-modal :global {
-
+  /* stylelint-disable-next-line length-zero-no-unit */
   @include modal.expand-modal-fullscreen(false, false, 0px);
 
   .modal-content {

apps/app/src/components/PageSideContents/PageAccessoriesControl.module.scss

@@ -14,7 +14,7 @@
 
 @include bs.media-breakpoint-down(sm) {
   .btn-page-accessories :global {
-    box-shadow: 0px 3px 6px rgba(black, 0.15);
+    box-shadow: 0 3px 6px rgba(black, 0.15);
   }
 }
 

apps/app/src/components/PageSideContents/PageSideContents.module.scss

@@ -1,2 +1,3 @@
+/* stylelint-disable-next-line block-no-empty */
 .grw-page-accessories-controls :global {
 }

apps/app/src/components/PageStatusAlert.module.scss

@@ -4,7 +4,7 @@
 .grw-page-status-alert :global {
   $margin-bottom: var.$grw-navbar-bottom-height + 10px;
 
-  box-shadow: 0px 2px 4px #0000004d;
+  box-shadow: 0 2px 4px #0000004d;
   opacity: 0.9;
 
   @include bs.media-breakpoint-down(sm) {

apps/app/src/components/PageTags/TagLabels.module.scss

@@ -35,7 +35,8 @@ $grw-tag-label-font-size: 12px;
 
 .grw-tag-icon-button {
   padding: 6px 8px;
+
   @include bs.media-breakpoint-down(sm) {
-    box-shadow: 0px 3px 6px rgba(black, 0.15);
+    box-shadow: 0 3px 6px rgba(black, 0.15);
   }
 }

apps/app/src/components/RevisionComparer/RevisionComparer.module.scss

@@ -1,5 +1,4 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
-
 @use '@growi/ui/scss/atoms/btn-muted';
 
 .revision-compare :global {

apps/app/src/components/SearchPage/SearchControl.module.scss

@@ -1,6 +1,5 @@
 
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
-
 @use '@growi/ui/scss/atoms/btn-muted';
 
 // == Colors

apps/app/src/components/SearchPage/SearchResultContent.module.scss

@@ -1,5 +1,6 @@
 @use '~/styles/mixins';
 
+/* stylelint-disable-next-line block-no-empty */
 .search-result-content :global {
 }
 

apps/app/src/components/SearchTypeahead.module.scss

@@ -3,6 +3,7 @@
 .search-typeahead :global {
   position: relative;
   width: 100%;
+
   // corner radius
   border-top-right-radius: bs.$border-radius;
   border-bottom-right-radius: bs.$border-radius;

apps/app/src/components/ShortcutsModal.module.scss

@@ -25,20 +25,22 @@
 
   // see http://coliss.com/articles/build-websites/operation/css/css-apple-keyboard-style-by-nrjmadan.html
   .key {
-    /*Box Properties*/
+    /* Box Properties */
     display: inline-block;
     width: 36px;
     height: 36px;
-    margin: 0px 4px;
-    /*Text Properties*/
+    margin: 0 4px;
+
+    /* Text Properties */
     font: 18px/36px Helvetica, serif;
     color: bs.$secondary;
     text-align: center;
     text-transform: uppercase;
     background: white;
     border-radius: 4px;
-    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.5);
-    /* SVG Properties*/
+    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 50%);
+
+    /* SVG Properties */
     polygon {
       fill: bs.$secondary;
     }
@@ -63,9 +65,11 @@
       display: flex;
       align-items: center;
       justify-content: flex-end;
+
       // width: 180px;
       height: 41px;
     }
+
     // dd {
     //   margin-left: 190px;
     // }

apps/app/src/components/Sidebar/AppTitle/AppTitle.module.scss

@@ -1,9 +1,6 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
-
 @use '@growi/core-styles/scss/variables/growi-official-colors';
-
 @use '~/styles/variables' as var;
-
 @use '../button-styles';
 
 // GROWI Logo
@@ -55,6 +52,7 @@
     $grw-page-editor-mode-manager-width: 140px;
     $gap: 24px;
     $grw-contextual-subnavigation-padding-right: 24px;
+
     width: calc(100vw - #{var.$grw-sidebar-nav-width + $grw-page-controls-width + $grw-page-editor-mode-manager-width + $grw-contextual-subnavigation-padding-right + $gap * 2});
   }
 }

apps/app/src/components/Sidebar/PageCreateButton/CreateButton.module.scss

@@ -1,5 +1,4 @@
 @use '~/styles/variables' as var;
-
 @use '../button-styles';
 
 .btn-create :global {

apps/app/src/components/Sidebar/PageCreateButton/DropendToggle.module.scss

@@ -1,5 +1,4 @@
 @use '~/styles/variables' as var;
-
 @use '../button-styles';
 
 .btn-toggle :global {
@@ -10,7 +9,7 @@
 
   .icon {
     top: 50%;
-    right: 0px;
+    right: 0;
     font-size: 22px;
     transform: translateY(-50%);
   }
@@ -29,10 +28,7 @@
 // hitarea
 .btn-toggle :global {
   .hitarea {
-    top: 0;
-    right: -10px;
-    bottom: 0;
-    left: 0;
+    inset: 0 -10px 0 0;
   }
 }
 

apps/app/src/components/Sidebar/PageCreateButton/PageCreateButton.module.scss

@@ -1,2 +0,0 @@
-.grw-page-create-button :global {
-}

apps/app/src/components/Sidebar/RecentChanges/RecentChangesSubstance.module.scss

@@ -10,16 +10,19 @@
 
   .grw-recent-changes-skeleton-small {
     @include grw-skeleton-text($font-size: 14px, $line-height: 16px);
+
     max-width: 120px;
   }
 
   .grw-recent-changes-skeleton-h5 {
     @include grw-skeleton-h5;
+
     max-width: 120px;
   }
 
   .grw-recent-changes-skeleton-date {
     @include grw-skeleton-text($font-size: 10px, $line-height: 12px);
+
     width: 80px;
   }
 

apps/app/src/components/Sidebar/ResizableArea/ResizableArea.module.scss

@@ -9,8 +9,8 @@
 
 .grw-navigation-draggable :global {
   position: absolute;
-  top: 0px;
-  bottom: 0px;
+  top: 0;
+  bottom: 0;
   left: 100%;
 
   .grw-navigation-draggable-hitarea {

apps/app/src/components/Sidebar/Sidebar.module.scss

@@ -1,5 +1,4 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
-
 @use '~/styles/variables' as var;
 @use '~/styles/mixins';
 
@@ -60,6 +59,7 @@
 
       // apply transition
       transition-property: transform;
+
       @include mixins.apply-navigation-transition();
 
       &:not(.open) {
@@ -82,6 +82,7 @@
       background-color: color-mix(in srgb, var(--grw-highlight-100), var(--bs-body-bg));
     }
   }
+
   // frosted glass effect in collapsed mode
   .grw-sidebar {
     &:global {
@@ -104,6 +105,7 @@
       background-color: color-mix(in srgb, var(--grw-highlight-800), var(--bs-body-bg));
     }
   }
+
   // frosted glass effect in collapsed mode
   .grw-sidebar {
     &:global {

apps/app/src/components/Sidebar/SidebarContents.module.scss

@@ -1,7 +1,6 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
 
 .grw-sidebar-contents :global {
-
   --bs-heading-color: var(--bs-tertiary-color);
   --bs-body-color: var(--bs-secondary-color);
   --bs-link-color-rgb: var(--bs-secondary-color-rgb);

apps/app/src/components/Sidebar/SidebarHead/SidebarHead.module.scss

@@ -13,6 +13,7 @@
     );
   }
 }
+
 @include bs.color-mode(dark) {
   .grw-sidebar-head :global {
     background-color: var(

apps/app/src/components/Sidebar/SidebarHead/ToggleCollapseButton.module.scss

@@ -1,14 +1,13 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
-
 @use '~/styles/variables' as var;
 @use '~/styles/mixins';
-
 @use '../button-styles';
 
 .btn-toggle-collapse :global {
   @extend %btn-basis;
 
   $height: var.$grw-sidebar-nav-width; // declare $height with the same value as the sidebar nav width
+
   height: $height;
 }
 
@@ -25,7 +24,7 @@
 }
 
 // Hide when editing
-@include mixins.editing() {
+@include mixins.at-editing() {
   .btn-toggle-collapse {
     visibility: hidden;
   }
@@ -48,6 +47,7 @@
     }
   }
 }
+
 @include bs.color-mode(light) {
   .btn-toggle-collapse {
     &:global {
@@ -58,6 +58,7 @@
     }
   }
 }
+
 @include bs.color-mode(dark) {
   .btn-toggle-collapse {
     &:global {

apps/app/src/components/Sidebar/SidebarNav/PersonalDropdown.module.scss

@@ -25,6 +25,7 @@
 
   .personal-dropdown-item :global {
     --bs-link-color-rgb:var(--bs-gray-600);
+
     color: var(--bs-gray-600);
   }
 }
@@ -36,6 +37,7 @@
 
   .personal-dropdown-item :global {
     --bs-link-color-rgb:var(--bs-gray-500);
+
     color: var(--bs-gray-500);
   }
 }

apps/app/src/components/Sidebar/SidebarNav/PrimaryItems.module.scss

@@ -1,7 +1,5 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
-
 @use '../button-styles';
-
 @use '../variables' as sidebarVar;
 
 .grw-primary-items :global {
@@ -29,7 +27,7 @@
       position: relative;
 
       // indicator
-      &:after {
+      &::after {
         position: absolute;
         top: 0;
         left: 0;
@@ -55,6 +53,7 @@
     @extend %btn-primary-color-vars;
   }
 }
+
 @include bs.color-mode(light) {
   .grw-primary-items :global {
     .btn-primary {
@@ -63,6 +62,7 @@
     }
   }
 }
+
 @include bs.color-mode(dark) {
   .grw-primary-items :global {
     .btn-primary {

apps/app/src/components/Sidebar/SidebarNav/SecondaryItems.module.scss

@@ -1,5 +1,4 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
-
 @use '../button-styles';
 
 
@@ -22,6 +21,7 @@
     @extend %btn-primary-color-vars;
   }
 }
+
 @include bs.color-mode(light) {
   .grw-secondary-items :global {
     .btn-primary {
@@ -30,6 +30,7 @@
     }
   }
 }
+
 @include bs.color-mode(dark) {
   .grw-secondary-items :global {
     .btn-primary {

apps/app/src/components/Sidebar/SidebarNav/SidebarNav.module.scss

@@ -1,10 +1,8 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
-
 @use '~/styles/variables' as var;
 
 .grw-sidebar-nav :global {
   width: var.$grw-sidebar-nav-width;
-
   border-right : 1px solid var(--bs-border-color);
 
   .grw-sidebar-nav-secondary-container {
@@ -15,13 +13,12 @@
 
 
 // == Colors
-.grw-sidebar-nav :global {
-}
 @include bs.color-mode(light) {
   .grw-sidebar-nav :global {
     background-color: var(--grw-sidebar-nav-bg, var(--grw-highlight-100));
   }
 }
+
 @include bs.color-mode(dark) {
   .grw-sidebar-nav :global {
     background-color: var(--grw-sidebar-nav-bg, var(--grw-highlight-800));

apps/app/src/components/Sidebar/SidebarNav/SkeletonItem.module.scss

@@ -1,5 +1,4 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
-
 @use '../variables' as sidebarVar;
 
 .grw-skeleton-item :global {

apps/app/src/components/Sidebar/Skeleton/DefaultContentSkelton.module.scss

@@ -3,12 +3,14 @@
 .grw-default-content-skelton :global {
   .grw-skeleton-text {
     @include mixins.grw-skeleton-text($font-size:15px, $line-height:21.42px);
+
     max-width: 160px;
     margin: 15px 0;
   }
 
   .grw-skeleton-text-full {
     @extend .grw-skeleton-text;
+
     max-width: 100%;
   }
 }

apps/app/src/components/Sidebar/_button-styles.scss

@@ -1,5 +1,4 @@
 @use '~/styles/variables' as var;
-
 @use './variables' as sidebarVar;
 
 
@@ -9,7 +8,6 @@
 
   width: var.$grw-sidebar-nav-width;
   height: sidebarVar.$grw-sidebar-button-height;
-
   line-height: 1em;
   border: 0;
   border-radius: 0;

apps/app/src/components/Skeleton.module.scss

@@ -1,4 +1,5 @@
 .grw-skeleton {
   --bs-list-group-color: rgba(var(--bs-tertiary-color-rgb), 0.2);
+
   background-color: var(--bs-list-group-color);
 }

apps/app/src/components/StaffCredit/StaffCredit.module.scss

@@ -3,19 +3,16 @@
   // attached !important for updating from .modal-dialog class style
   width: 80vw !important;
   max-width: unset !important;
-
   height: 80vh !important;
   max-height: unset !important;
-
   margin: 10vh 10vw !important;
 
   // see https://css-tricks.com/old-timey-terminal-styling/
   .credit-curtain {
     padding-top: 80vh;
-
     text-shadow: 0 0 10px #c8c8c8;
     background-color: black;
-    background-image: radial-gradient(rgba(50, 100, 100, 0.75), black 120%);
+    background-image: radial-gradient(rgba(50, 100, 100, 75%), black 120%);
   }
 
   .background {

apps/app/src/components/TableOfContents.module.scss

@@ -5,7 +5,6 @@
   z-index: 1;
   padding: 5px;
   font-size: 0.9em;
-
   border-bottom: 1px solid transparent;
 
   .revision-toc-content {

apps/app/src/components/TagList.module.scss

@@ -17,6 +17,7 @@
     }
   }
 }
+
 @include bs.color-mode(dark) {
   .grw-tag-list :global {
     .grw-tag-count {

apps/app/src/components/UsersHomepageFooter.module.scss

@@ -1,4 +1,5 @@
 @use '@growi/ui/scss/molecules/page_list';
+
 $grw-sidebar-content-header-height: 58px;
 $grw-sidebar-content-footer-height: 50px;
 
@@ -18,18 +19,9 @@ $grw-sidebar-content-footer-height: 50px;
             display: block;
           }
         }
-        .grw-triangle-container {
-          svg {
-            width: 12px;
-            height: 12px;
-          }
-        }
-        svg {
-          width: 20px;
-          height: 20px;
-        }
+
         min-height: 40px;
-        border-radius: 0px;
+        border-radius: 0;
 
         &.grw-bookmark-item-list {
           .picture {
@@ -62,25 +54,11 @@ $grw-sidebar-content-footer-height: 50px;
       width: fit-content !important;
       margin-right: 20px;
     }
-    svg {
-      width: 35px;
-      height: 35px;
-      margin-bottom: 6px;
-    }
     .new-bookmark-folder {
       max-height: 30px;
-      svg {
-        width: 18px;
-        height: 18px;
-      }
     }
     .grw-expand-compress-btn {
       max-height: 40px;
-      svg {
-        width: 18px;
-        height: 18px;
-        margin-bottom: 3px;
-      }
     }
     .grw-folder-tree-container {
       .grw-drop-item-area {

apps/app/src/components/UsersHomepageFooter.tsx

@@ -2,7 +2,6 @@ import React, { useState } from 'react';
 
 import { useTranslation } from 'next-i18next';
 
-import { RecentlyCreatedIcon } from '~/components/Icons/RecentlyCreatedIcon';
 import { RecentCreated } from '~/components/RecentCreated/RecentCreated';
 import styles from '~/components/UsersHomepageFooter.module.scss';
 import { useCurrentUser } from '~/stores/context';

apps/app/src/features/growi-plugin/client/components/Admin/PluginsExtensionPageContents/PluginCard.module.scss

@@ -1,3 +1,5 @@
+/* stylelint-disable selector-class-pattern */
+
 // TODO: Rewrite according to guidelines
 .plugin_card :global {
 
@@ -14,7 +16,7 @@
     cursor: pointer;
     border-radius: 30px;
   }
-  .switch__content:before {
+  .switch__content::before {
     position: absolute;
     top: 0;
     left: 0;
@@ -26,7 +28,7 @@
     border: 1.5px solid #E5E5EA;
     border-radius: 30px;
   }
-  .switch__content:after {
+  .switch__content::after {
     position: absolute;
     top: 50%;
     left: 50%;
@@ -58,7 +60,7 @@
     left: 21px;
   }
 
-  .switch__input:checked ~ .switch__content:after {
+  .switch__input:checked ~ .switch__content::after {
     top: 0;
     left: 0;
     width: 100%;

apps/app/src/features/search/client/components/SearchMenuItem.module.scss

@@ -1,5 +1,4 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
-
 @use '~/styles/variables' as var;
 
 .search-menu-item :global {

apps/app/src/linter-checker/.stylelintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": "../../../../.stylelintrc.json",
+  "ignoreFiles": [
+    "./test.scss"
+  ]
+}

apps/app/src/linter-checker/test.scss

@@ -1,7 +1,7 @@
 /*
  * VSCode の Stylelint 設定チェック方法
  *
- * 1. .stylelintrc.json ファイル中の `src/linter-checker/test.scss` 行を削除し、
+ * 1. このディレクトリにある .stylelintrc.json ファイル中の `./test.scss` 行を削除し、
  *    このファイルを VSCode 上で開き直す
  *
  * 2. VSCode で以下のエラーが表示されていることを確認

apps/app/src/pages/login/index.module.scss

@@ -6,6 +6,7 @@
   .nologin-header,
   .nologin-dialog {
     width: 420px;
+
     @include bs.media-breakpoint-down(sm) {
       width: 320px;
     }

apps/app/src/server/service/yjs-connection-manager.ts

@@ -59,10 +59,9 @@ class YjsConnectionManager {
 
     await this.mdb.flushDocument(pageId);
 
-    const persistedCodeMirrorText = persistedYdoc.getText('codemirror').toString();
-    const currentCodeMirrorText = currentYdoc.getText('codemirror').toString();
-
-    if (persistedCodeMirrorText === '' && currentCodeMirrorText === '') {
+    // If no write operation has been performed, insert initial value
+    const clientsSize = currentYdoc.store.clients.size;
+    if (clientsSize === 0) {
       currentYdoc.getText('codemirror').insert(0, initialValue);
     }
 

apps/app/src/styles/_editor.scss

@@ -1,3 +1,5 @@
+/* stylelint-disable selector-class-pattern */
+
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
 @use './variables' as var;
 @import './organisms/wiki-custom-sidebar';
@@ -72,8 +74,8 @@
 
     }
 
-    .page-editor-preview-container {
-    }
+    // .page-editor-preview-container {
+    // }
 
     .page-editor-preview-body {
       flex-grow: 1;
@@ -95,15 +97,6 @@
 
   }
 
-  // .builtin-editor .tab-pane#edit
-
-  /*****************
-   *     Toastr
-   *****************/
-  .Toastify .Toastify__toast-container {
-    top: 4.5em;
-  }
-
 }
 
 // TODO: Never used this id class

apps/app/src/styles/_fonts.scss

@@ -1,6 +1,6 @@
 :root {
-  --font-family-sans-serif: var(--grw-font-family-lato), -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
-  --font-family-serif: Georgia, 'Times New Roman', Times, serif;
+  --font-family-sans-serif: var(--grw-font-family-lato), -apple-system, blinkmacsystemfont, 'Hiragino Kaku Gothic ProN', meiryo, sans-serif;
+  --font-family-serif: georgia, 'Times New Roman', times, serif;
   --font-family-monospace: monospace, var(--grw-font-family-source-han-code-jp-subset-main), var(--grw-font-family-source-han-code-jp-subset-jis2);
 }
 

apps/app/src/styles/_layout.scss

@@ -1,5 +1,4 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
-
 @use './variables' as var;
 
 body {
@@ -74,7 +73,7 @@ body {
     padding: 30px;
   }
 
-  a:after {
+  a::after {
     display: none !important;
   }
 

apps/app/src/styles/_mixins.scss

@@ -9,7 +9,7 @@
 
 @mixin grw-skeleton-text($font-size, $line-height) {
   height: $line-height;
-  padding: (($line-height - $font-size)  / 2) 0;
+  padding: (($line-height - $font-size) / 2) 0;
 }
 
 @mixin grw-skeleton-h3 {

apps/app/src/styles/_modal.scss

@@ -16,14 +16,16 @@
   .modal-body {
     $modal-header: 54px;
     $modal-footer: 46px;
+    $margin-body: 0;
 
-    $margin-body: 0px;
     @if $hasModalHeader {
       $margin-body: $margin-body + $modal-header;
     }
+
     @if $hasModalFooter {
       $margin-body: $margin-body + $modal-footer;
     }
+
     height: calc(100% - #{$margin-body});
   }
 }

apps/app/src/styles/_override-handsontable.scss

@@ -1,3 +1,5 @@
+/* stylelint-disable selector-class-pattern */
+
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
 
 // Table

apps/app/src/styles/_share-link.scss

@@ -1,6 +1,6 @@
 @use './mixins';
 
-@include mixins.share-link() {
+@include mixins.share-link {
   .d-share-link-none {
     display: none !important;
   }

apps/app/src/styles/_variables.scss

@@ -1,13 +1,11 @@
-//== Marker Color
+// == Marker Color
 $grw-marker-yellow: #ff6;
 $grw-marker-red: #f6c;
 $grw-marker-blue: #6cf;
 $grw-marker-cyan: #6ff;
 $grw-marker-green: #6f6;
 
-//== Layout
+// == Layout
 $grw-sidebar-nav-width: 48px;
-
 $grw-navbar-bottom-height: 62px;
-
 $grw-scroll-margin-top-in-view: 130px;

apps/app/src/styles/atoms/_custom_control.scss

@@ -1,3 +1,5 @@
+/* stylelint-disable no-descending-specificity */
+
 @use '@growi/core-styles/scss/bootstrap/init' as *;
 
 $form-check-gutter: .5rem;
@@ -51,16 +53,14 @@ label.form-check-label {
   $form-switch-indicator-size-lg: subtract($form-check-indicator-size-lg, $form-check-indicator-border-width * 4);
 
   padding-left: $form-switch-width-lg + $form-check-gutter-lg;
-
   line-height: $form-check-indicator-size-lg;
   .form-check-label {
     &::before {
       top: ($font-size-base * $line-height-base - $form-check-indicator-size-lg) / 2;
-
       left: -($form-switch-width-lg + $form-check-gutter-lg);
       width: $form-switch-width-lg;
       height: $form-check-indicator-size-lg;
-      border-radius: $form-check-indicator-size-lg/2;
+      border-radius: $form-check-indicator-size-lg / 2;
     }
 
     &::after {
@@ -68,7 +68,7 @@ label.form-check-label {
       left: add(-($form-switch-width-lg + $form-check-gutter-lg), $form-check-indicator-border-width * 2);
       width: $form-switch-indicator-size-lg;
       height: $form-switch-indicator-size-lg;
-      border-radius: $form-check-indicator-size-lg/2;
+      border-radius: $form-check-indicator-size-lg / 2;
     }
   }
 

apps/app/src/styles/atoms/_tag.scss

@@ -4,13 +4,16 @@
 @include bs.color-mode(light) {
   .grw-tag.badge {
     --bs-badge-color: var(--bs-gray-600);
+
     background-color: var(--bs-gray-100);
     border: 1px solid var(--bs-gray-300);
   }
 }
+
 @include bs.color-mode(dark) {
   .grw-tag.badge {
     --bs-badge-color: var(--bs-gray-500);
+
     background-color: var(--bs-gray-800);
     border: 1px solid var(--bs-gray-600);
   }

apps/app/src/styles/atoms/placeholders/_buttons.scss

@@ -2,6 +2,7 @@
 
 %btn-nologin {
   transition: 0.8s ease;
+
   --bs-btn-border-color: #{rgba(white, 0.1)};
   --bs-btn-hover-border-color: #{rgba(white, 0.1)};
   --bs-btn-active-border-color: #{rgba(white, 0.1)};

apps/app/src/styles/mixins/_editing.scss

@@ -1,14 +1,38 @@
-@mixin editing($global: false) {
+/**
+ * USAGE:
+ * @include at-editing() {
+ *   .component-class {
+ *     visibility: hidden;
+ *   }
+ * }
+ *
+ * outputs: .layout-root.editing .component-class_LOCAL_ID { visibility: hidden; }
+ */
+@mixin at-editing() {
   :global {
     .layout-root.editing {
-      @if ($global) {
+      :local {
         @content;
       }
-      @else {
-        :local {
-          @content;
-        }
-      }
+    }
+  }
+}
+
+/**
+ * USAGE:
+ * .component-class {
+ *   @include with-editing() {
+ *     visibility: hidden;
+ *   }
+ * }
+ *
+ * outputs: .component-class_LOCAL_ID.layout-root.editing { visibility: hidden; }
+ */
+
+@mixin with-editing() {
+  &:global {
+    &.layout-root.editing {
+      @content;
     }
   }
 }

apps/app/src/styles/mixins/_share-link.scss

@@ -7,10 +7,9 @@
 @mixin share-link-for-module($isContentGlobal: false) {
   :global {
     .layout-root.share-link {
-      @if ($isContentGlobal) {
+      @if $isContentGlobal {
         @content;
-      }
-      @else {
+      } @else {
         :local {
           @content;
         }

apps/app/src/styles/organisms/_wiki.scss

@@ -1,10 +1,9 @@
 @use '@growi/core-styles/scss/bootstrap/utilities' as bs;
-
 @use '../variables' as var;
 
 .wiki {
   @mixin add-left-border($width) {
-    &:before {
+    &::before {
       margin-right: 0.4em;
       content: '';
       border-left: $width solid;
@@ -16,6 +15,7 @@
 
   a {
     @extend .link-offset-2;
+
     text-decoration-line: underline;
   }
 
@@ -40,14 +40,13 @@
     scroll-margin-top: var.$grw-scroll-margin-top-in-view;
   }
 
+  /* stylelint-disable no-descending-specificity */
   h1 {
     padding: 0.3em 0;
     margin-top: 2em;
     font-size: 1.9em;
     line-height: 1.1em;
-    border-bottom-color: var(--bs-border-color);
-    border-bottom-style: solid;
-    border-bottom-width: 2px;
+    border-bottom: 2px solid var(--bs-border-color);
   }
 
   h2 {
@@ -55,9 +54,7 @@
     font-size: 1.6em;
     font-weight: bold;
     line-height: 1.225;
-    border-bottom-color: var(--bs-border-color);
-    border-bottom-style: solid;
-    border-bottom-width: 1px;
+    border-bottom: 1px solid var(--bs-border-color);
   }
 
   h3 {
@@ -68,6 +65,7 @@
   h4 {
     font-size: 1.35em;
     font-weight: normal;
+
     // style
     @include add-left-border(6px);
   }
@@ -75,6 +73,7 @@
   h5 {
     font-size: 1.25em;
     font-weight: normal;
+
     // style
     @include add-left-border(4px);
   }
@@ -82,9 +81,11 @@
   h6 {
     font-size: 1.2em;
     font-weight: normal;
+
     // style
     @include add-left-border(2px);
   }
+  /* stylelint-enable no-descending-specificity */
 
   p {
     margin: 15px 0;
@@ -97,8 +98,9 @@
 
   blockquote {
     padding: 0 20px;
-    margin: 0 0 30px 0;
+    margin: 0 0 30px;
     font-size: 0.9em;
+    /* stylelint-disable-next-line scss/no-global-function-names */
     color: lighten(bs.$gray-800, 35%);
     border-left: 0.3rem solid #ddd;
   }
@@ -108,6 +110,10 @@
     margin: 5px 0;
   }
 
+  pre {
+    position: relative; // for absolute positioned .code-highlighted-title
+  }
+
   ul,
   ol {
     padding-left: 30px;
@@ -128,10 +134,6 @@
     }
   }
 
-  pre {
-    position: relative; // for absolute positioned .code-highlighted-title
-  }
-
   .contains-task-list {
     .task-list-item {
       margin: 0 0.2em 0.25em -1.6em;
@@ -144,12 +146,11 @@
 
     // use awesome-bootstrap-checkbox
     .task-list-item .checkbox input[type='checkbox'] {
-
       // layout
       +label {
         padding-left: 0.3em;
 
-        &:before {
+        &::before {
           margin-top: 0.4em;
         }
       }
@@ -161,8 +162,8 @@
         cursor: default;
         opacity: 1;
 
-        &:before,
-        &:after {
+        &::before,
+        &::after {
           cursor: default;
         }
       }
@@ -170,16 +171,19 @@
   }
 
   // see: https://github.com/micromark/micromark-extension-gfm-footnote#css
+
   /* Style the footnotes section. */
   .footnotes {
     font-size: smaller;
     color: bs.$text-muted;
     border-top: 1px solid bs.$border-color;
+
     /* Hide the section label for visual users. */
     #footnote-label {
       display: none;
     }
   }
+
   /* Place `[` and `]` around footnote references. */
   [data-footnote-ref]::before {
     content: '[';
@@ -209,6 +213,7 @@
       }
     }
 
+    /* stylelint-disable no-descending-specificity */
     h1 {
       padding-bottom: 0.3em * $ratio;
       margin-top: 2em * $ratio;
@@ -225,6 +230,7 @@
     h3 {
       font-size: 1.2em * $ratio;
     }
+    /* stylelint-enable no-descending-specificity */
 
     blockquote {
       font-size: 0.9em * $ratio;
@@ -258,7 +264,7 @@
     padding: 7%;
     padding-bottom: 3%;
     margin: 0 7%;
-    background-color: rgba(200, 200, 200, 0.2);
+    background-color: rgba(200, 200, 200, 20%);
     border-radius: 10px;
 
     .grw-keep-time {
@@ -312,6 +318,7 @@
     --bs-border-color: var(--bs-gray-300);
   }
 }
+
 @include bs.color-mode(dark) {
   .wiki {
     --bs-border-color: var(--bs-gray-700);