feat: use `@layer __vitepress_base` to wrap the styles in base.css

src/client/theme-default/styles/base.css

@@ -1,4 +1,5 @@
-@media (prefers-reduced-motion: reduce) {
+@layer __vitepress_base {
+  @media (prefers-reduced-motion: reduce) {
     *,
     ::before,
     ::after {
@@ -10,25 +11,25 @@
       transition-duration: 0s !important;
       transition-delay: 0s !important;
     }
-}
+  }
 
-*,
-::before,
-::after {
+  *,
+  ::before,
+  ::after {
     box-sizing: border-box;
-}
+  }
 
-html {
+  html {
     line-height: 1.4;
     font-size: 16px;
     -webkit-text-size-adjust: 100%;
-}
+  }
 
-html.dark {
+  html.dark {
     color-scheme: dark;
-}
+  }
 
-body {
+  body {
     margin: 0;
     width: 100%;
     min-width: 320px;
@@ -43,34 +44,34 @@ body {
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-}
+  }
 
-main {
+  main {
     display: block;
-}
+  }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
     margin: 0;
     line-height: 24px;
     font-size: 16px;
     font-weight: 400;
-}
+  }
 
-p {
+  p {
     margin: 0;
-}
+  }
 
-strong,
-b {
+  strong,
+  b {
     font-weight: 600;
-}
+  }
 
-/**
+  /**
      * Avoid 300ms click delay on touch devices that support the `touch-action`
      * CSS property.
      *
@@ -85,167 +86,168 @@ b {
      * - http://caniuse.com/#feat=css-touch-action
      * - http://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
      */
-a,
-area,
-button,
-[role='button'],
-input,
-label,
-select,
-summary,
-textarea {
+  a,
+  area,
+  button,
+  [role='button'],
+  input,
+  label,
+  select,
+  summary,
+  textarea {
     touch-action: manipulation;
-}
+  }
 
-a {
+  a {
     color: inherit;
     text-decoration: inherit;
-}
+  }
 
-ol,
-ul {
+  ol,
+  ul {
     list-style: none;
     margin: 0;
     padding: 0;
-}
+  }
 
-blockquote {
+  blockquote {
     margin: 0;
-}
+  }
 
-pre,
-code,
-kbd,
-samp {
+  pre,
+  code,
+  kbd,
+  samp {
     font-family: var(--vp-font-family-mono);
-}
+  }
 
-img,
-svg,
-video,
-canvas,
-audio,
-iframe,
-embed,
-object {
+  img,
+  svg,
+  video,
+  canvas,
+  audio,
+  iframe,
+  embed,
+  object {
     display: block;
-}
+  }
 
-figure {
+  figure {
     margin: 0;
-}
+  }
 
-img,
-video {
+  img,
+  video {
     max-width: 100%;
     height: auto;
-}
+  }
 
-button,
-input,
-optgroup,
-select,
-textarea {
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
     border: 0;
     padding: 0;
     line-height: inherit;
     color: inherit;
-}
+  }
 
-button {
+  button {
     padding: 0;
     font-family: inherit;
     background-color: transparent;
     background-image: none;
-}
+  }
 
-button:enabled,
-[role='button']:enabled {
+  button:enabled,
+  [role='button']:enabled {
     cursor: pointer;
-}
+  }
 
-button:focus,
-button:focus-visible {
+  button:focus,
+  button:focus-visible {
     outline: 1px dotted;
     outline: 4px auto -webkit-focus-ring-color;
-}
+  }
 
-button:focus:not(:focus-visible) {
+  button:focus:not(:focus-visible) {
     outline: none !important;
-}
+  }
 
-input:focus,
-textarea:focus,
-select:focus {
+  input:focus,
+  textarea:focus,
+  select:focus {
     outline: none;
-}
+  }
 
-table {
+  table {
     border-collapse: collapse;
-}
+  }
 
-input {
+  input {
     background-color: transparent;
-}
+  }
 
-input:-ms-input-placeholder,
-textarea:-ms-input-placeholder {
+  input:-ms-input-placeholder,
+  textarea:-ms-input-placeholder {
     color: var(--vp-c-text-3);
-}
+  }
 
-input::-ms-input-placeholder,
-textarea::-ms-input-placeholder {
+  input::-ms-input-placeholder,
+  textarea::-ms-input-placeholder {
     color: var(--vp-c-text-3);
-}
+  }
 
-input::placeholder,
-textarea::placeholder {
+  input::placeholder,
+  textarea::placeholder {
     color: var(--vp-c-text-3);
-}
+  }
 
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
     -webkit-appearance: none;
     margin: 0;
-}
+  }
 
-input[type='number'] {
+  input[type='number'] {
     -moz-appearance: textfield;
-}
+  }
 
-textarea {
+  textarea {
     resize: vertical;
-}
+  }
 
-select {
+  select {
     -webkit-appearance: none;
-}
+  }
 
-fieldset {
+  fieldset {
     margin: 0;
     padding: 0;
-}
+  }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-li,
-p {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  li,
+  p {
     overflow-wrap: break-word;
-}
+  }
 
-vite-error-overlay {
+  vite-error-overlay {
     z-index: 9999;
-}
+  }
 
-mjx-container {
+  mjx-container {
     overflow-x: auto;
-}
+  }
 
-mjx-container > svg {
+  mjx-container > svg {
     display: inline-block;
     margin: auto;
+  }
 }