Move stylesheets into src directory (#43727)

.github/workflows/azure-preview-env-deploy.yml

@@ -202,7 +202,6 @@ jobs:
           rsync -rptovR --ignore-missing-args ./user-code/lib/./**/*.{js,ts} ./lib
           rsync -rptovR --ignore-missing-args ./user-code/middleware/./**/*.{js,ts} ./middleware
           rsync -rptovR ./user-code/src/./**/*.tsx ./src
-          rsync -rptovR ./user-code/stylesheets/./**/*.scss ./stylesheets
 
       - uses: ./.github/actions/warmup-remotejson-cache
         with:

Dockerfile

@@ -44,7 +44,6 @@ RUN npm prune --production
 # ---------------
 FROM all_deps as builder
 
-COPY stylesheets ./stylesheets
 COPY components ./components
 COPY lib ./lib
 COPY src ./src

components/article/ArticleInlineLayout.module.scss

@@ -1,6 +1,6 @@
 @import "@primer/css/support/variables/layout.scss";
 @import "@primer/css/support/mixins/layout.scss";
-@import "stylesheets/breakpoint-xxl.scss";
+@import "src/frame/stylesheets/breakpoint-xxl.scss";
 
 .containerBox {
   max-width: 720px;

components/ui/MarkdownContent/stylesheets/table.scss

@@ -1,4 +1,4 @@
-@import "stylesheets/breakpoint-xxl.scss";
+@import "src/frame/stylesheets/breakpoint-xxl.scss";
 
 .markdownBody {
   table {

content/contributing/setting-up-your-environment-to-work-on-github-docs/creating-a-local-environment.md

@@ -96,5 +96,4 @@ For more information about using a codespace for working on {% data variables.pr
 - [Data](https://github.com/github/docs/blob/main/data/README.md)
 - [Middleware](https://github.com/github/docs/blob/main/middleware/README.md)
 - [Scripts](https://github.com/github/docs/blob/main/script/README.md)
-- [Styles](https://github.com/github/docs/blob/main/stylesheets/README.md)
 - [Tests](https://github.com/github/docs/blob/main/tests/README.md)

contributing/development.md

@@ -73,8 +73,6 @@ For more info about working with this site, check out these READMEs:
 - [includes/README.md](../includes/README.md)
 <!-- The following will be moved into src directory over time: -->
 - [components/README.md](../components/README.md)
-- [lib/liquid-tags/README.md](../lib/liquid-tags/README.md)
 - [middleware/README.md](../middleware/README.md)
 - [script/README.md](../script/README.md)
-- [stylesheets/README.md](../stylesheets/README.md)
 - [tests/README.md](../tests/README.md)

nodemon.json

@@ -3,7 +3,6 @@
   "ignore": [
     "assets",
     "script",
-    "stylesheets",
     "tests",
     "content",
     "translations",

src/assets/scripts/find-orphaned-assets.js

@@ -95,7 +95,7 @@ async function main(opts) {
     }
   }
 
-  const roots = ['tests', 'components', 'script', 'stylesheets', 'contributing', 'src', 'assets']
+  const roots = ['tests', 'components', 'script', 'contributing', 'src', 'assets']
 
   for (const root of roots) {
     sourceFiles.push(

src/content-render/stylesheets/annotate.scss

@@ -1,4 +1,4 @@
-@import "stylesheets/breakpoint-xxl.scss";
+@import "src/frame/stylesheets/breakpoint-xxl.scss";
 
 /* Code annotations
 ----------------------------------------------------------------------------*/

src/content-render/stylesheets/index.scss

@@ -0,0 +1,6 @@
+@import "annotate.scss";
+@import "heading-links.scss";
+@import "images.scss";
+@import "markdown-overrides.scss";
+@import "spotlight.scss";
+@import "syntax-highlighting.scss";

src/frame/stylesheets/index.scss

@@ -10,19 +10,11 @@
 @import "@primer/css/alerts/index.scss";
 @import "@primer/css/popover/index.scss";
 
-// Primer and native tag overrides
 @import "headings.scss";
-@import "markdown-overrides.scss";
+@import "scroll-button.scss";
-@import "images.scss";
 @import "scroll-top.scss";
-
-// Components
-@import "heading-links.scss";
-@import "syntax-highlighting.scss";
-@import "spotlight.scss";
-@import "annotate.scss";
-@import "hover-card.scss";
-
-// Utility classes
-@import "utilities.scss";
 @import "shadows.scss";
+@import "utilities.scss";
+
+@import "src/content-render/stylesheets/index.scss";
+@import "src/links/stylesheets/hover-card.scss";

src/frame/stylesheets/scroll-button.scss

@@ -0,0 +1,11 @@
+.transition-200 {
+  transition: 200ms;
+}
+
+.opacity-0 {
+  opacity: 0;
+}
+
+.opacity-100 {
+  opacity: 1;
+}

src/frame/stylesheets/scroll-top.scss

@@ -1,4 +1,4 @@
-@import "stylesheets/breakpoint-xxl.scss";
+@import "src/frame/stylesheets/breakpoint-xxl.scss";
 
 // https://tetralogical.com/blog/2023/06/08/focus-in-view/
 

src/frame/stylesheets/utilities.scss

@@ -0,0 +1,70 @@
+@import "src/frame/stylesheets/breakpoint-xxl.scss"; // for d-xxl-block and d-xxl-none
+
+@media print {
+  .no-print {
+    display: none;
+  }
+}
+
+.z-1 {
+  z-index: 1;
+}
+
+.z-2 {
+  z-index: 2;
+}
+
+.z-3 {
+  z-index: 3;
+}
+
+.max-w-xs {
+  max-width: 20rem;
+}
+
+.min-h-screen {
+  min-height: 100vh;
+}
+
+.visually-hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute !important;
+  width: 1px;
+}
+
+// For the screenreader
+.skip-button {
+  width: auto;
+  height: auto;
+  clip: auto;
+  overflow: hidden;
+  z-index: 101;
+  padding: 16px;
+
+  &:not(:focus) {
+    clip: rect(1px, 1px, 1px, 1px);
+    clip-path: inset(50%);
+    height: 1px;
+    width: 1px;
+    margin: -1px;
+    padding: 0px;
+  }
+}
+
+// used to help prevent overlapping main content and the minitoc sidebar
+.d-xxl-block {
+  @include breakpoint-xxl {
+    display: block !important;
+  }
+}
+
+.d-xxl-none {
+  @include breakpoint-xxl {
+    display: none !important;
+  }
+}

src/landings/components/ProductArticlesList.tsx

@@ -27,7 +27,7 @@ const ProductTreeNodeList = ({ treeNode }: { treeNode: ProductTreeNode }) => {
   return (
     <div className="col-12 col-lg-4 mb-6 height-full">
       <h3 className="mb-3 f4">
-        <Link className="color-unset text-underline" href={treeNode.href}>
+        <Link className="text-underline" href={treeNode.href}>
           {treeNode.title}
         </Link>
       </h3>

src/pages/_app.tsx

@@ -1,3 +1,3 @@
-import 'stylesheets/index.scss'
+import 'src/frame/stylesheets/index.scss'
 
 export { default } from 'src/frame/pages/app'

src/release-notes/components/PatchNotes.module.scss

@@ -1,6 +1,6 @@
 @import "@primer/css/support/variables/layout.scss";
 @import "@primer/css/support/mixins/layout.scss";
-@import "stylesheets/breakpoint-xxl.scss";
+@import "src/frame/stylesheets/breakpoint-xxl.scss";
 
 .aside {
   @include breakpoint(md) {

stylesheets/utilities.scss

@@ -1,141 +0,0 @@
-@import "stylesheets/breakpoint-xxl.scss";
-
-.color-unset {
-  color: unset;
-}
-
-.line-break-anywhere {
-  line-break: anywhere;
-}
-
-.transition-200 {
-  transition: 200ms;
-}
-
-.rotate-180 {
-  transform: rotateX(180deg);
-}
-
-.outline-none {
-  outline: none;
-}
-
-/* Print utilities
-------------------------------------------------------------------------------*/
-@media print {
-  .no-print {
-    display: none;
-  }
-}
-
-/* Opacity utilities
-------------------------------------------------------------------------------*/
-.opacity-0 {
-  opacity: 0;
-}
-.opacity-60 {
-  opacity: 0.6;
-}
-.opacity-70 {
-  opacity: 0.7;
-}
-.opacity-100 {
-  opacity: 1;
-}
-
-/* List utilities
-------------------------------------------------------------------------------*/
-.list-style-inside {
-  list-style: inside;
-}
-
-/* Hover utilities
-------------------------------------------------------------------------------*/
-.hover\:color-bg-accent:hover {
-  background: var(--color-accent-subtle);
-}
-
-/* Z-Index utilities
-------------------------------------------------------------------------------*/
-.-z-1 {
-  z-index: -1;
-}
-.z-1 {
-  z-index: 1;
-}
-.z-2 {
-  z-index: 2;
-}
-.z-3 {
-  z-index: 3;
-}
-
-/* Border colors
-------------------------------------------------------------------------------*/
-.color-border-transparent {
-  border-color: transparent !important;
-}
-
-/* Background colors
-------------------------------------------------------------------------------*/
-.background-transparent {
-  background-color: transparent;
-}
-
-/* Widths / Heights
-------------------------------------------------------------------------------*/
-.max-w-xs {
-  max-width: 20rem;
-}
-
-.min-h-screen {
-  min-height: 100vh;
-}
-
-.visually-hidden {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute !important;
-  width: 1px;
-}
-
-/* Screen Reader Only
-------------------------------------------------------------------------------*/
-.skip-button {
-  width: auto;
-  height: auto;
-  clip: auto;
-  overflow: hidden;
-  z-index: 101;
-  padding: 16px;
-
-  &:not(:focus) {
-    clip: rect(1px, 1px, 1px, 1px);
-    clip-path: inset(50%);
-    height: 1px;
-    width: 1px;
-    margin: -1px;
-    padding: 0px;
-  }
-}
-
-/* Responsive display utilities
-------------------------------------------------------------------------------*/
-
-// used to help prevent overlapping main content and the minitoc sidebar
-
-.d-xxl-block {
-  @include breakpoint-xxl {
-    display: block !important;
-  }
-}
-
-.d-xxl-none {
-  @include breakpoint-xxl {
-    display: none !important;
-  }
-}