Migrate away from @import in SCSS, add some JSDoc types

packages/typescriptlang-org/scripts/cacheBustPlayground.mjs

@@ -17,6 +17,10 @@ if (!content.includes(gitSha)) throw new Error("Could not run cache busting")
 fs.writeFileSync(toChange, content)
 
 // https://stackoverflow.com/posts/52338335/revisions
+/**
+ * @param {string} from
+ * @param {string} to
+ */
 function copyFolderSync(from, to) {
   fs.mkdirSync(to, { recursive: true })
   fs.readdirSync(from).forEach(element => {

packages/typescriptlang-org/scripts/downloadPlaygroundAssets.js

@@ -5,6 +5,10 @@
 const { writeFileSync, readFileSync } = require("fs")
 const { join } = require("path")
 
+/**
+ * @param {string} url
+ * @param {string} path
+ */
 const getFileAndStoreLocally = async (url, path) => {
   const packageJSON = await fetch(url)
   const contents = await packageJSON.text()
@@ -21,7 +25,7 @@ const go = async () => {
     "//# sourceMappingURL=../../min-maps/vs/loader.js.map",
     "//# sourceMappingURL=vs.loader.js.map"
   )
-  new writeFileSync("static/js/vs.loader.js", newLoader)
+  writeFileSync("static/js/vs.loader.js", newLoader)
 
   await getFileAndStoreLocally(
     "https://unpkg.com/monaco-editor@0.19.0/min-maps/vs/loader.js.map",
@@ -33,7 +37,7 @@ const go = async () => {
     "utf8"
   ).replace('"sources":["vs/vs/loader.js"]', '"sources":["vs.loader.js"]')
 
-  new writeFileSync("static/js/vs.loader.js.map", newLoaderMap)
+  writeFileSync("static/js/vs.loader.js.map", newLoaderMap)
 }
 
 go()

packages/typescriptlang-org/scripts/downloadSearchAssets.js

@@ -5,8 +5,13 @@
 const { writeFileSync } = require("fs")
 const { join } = require("path")
 
+/**
+ * @param {string} url
+ * @param {string} path
+ * @param {(text: string) => string} [editFunc]
+ */
 const getFileAndStoreLocally = async (url, path, editFunc) => {
-  const editingFunc = editFunc ? editFunc : text => text
+  const editingFunc =  editFunc ?? (text => text)
   const packageJSON = await fetch(url)
   const contents = await packageJSON.text()
   writeFileSync(join(__dirname, "..", path), editingFunc(contents), "utf8")

packages/typescriptlang-org/scripts/getTypeScriptNPMVersions.js

@@ -16,6 +16,8 @@ const get = async url => {
 /**
  * Queries the VS marketplace for typescript extensions, returns
  * only official extensions
+ * 
+ * @param {string} latest
  */
 const getLatestVSExtensions = async latest => {
   const headers = {
@@ -56,7 +58,11 @@ const getLatestVSExtensions = async latest => {
   return officialExtensions
 }
 
-/** Gets VS Marketplace info for a particular semver */
+/**
+ * Gets VS Marketplace info for a particular semver
+ * 
+ * @param {string} semver
+ */
 const getVSInfo = async semver => {
   // console.log(
   //   `Grabbing the VS TypeScript extension for ${semver} from the marketplace`

packages/typescriptlang-org/src/components/ShowExamples.scss

@@ -1,4 +1,4 @@
-@import "../style/globals.scss";
+@use "../style/globals.scss";
 
 // This is the visual aspect of the popover ( the white bit )
 // the non-visible layout is above in #playground-samples-popover
@@ -31,7 +31,7 @@
   }
 
   button.section-name.selected {
-    border-bottom: $ts-main-blue-color 2px solid;
+    border-bottom: globals.$ts-main-blue-color 2px solid;
   }
 
   // The titles of the sections
@@ -62,7 +62,7 @@
 
     >p>a {
       display: inline-block;
-      color: $ts-main-blue-color;
+      color: globals.$ts-main-blue-color;
       padding: 0;
     }
 
@@ -101,7 +101,7 @@
             }
 
             &.highlight {
-              border-left: $ts-main-blue-darker-color 2px solid;
+              border-left: globals.$ts-main-blue-darker-color 2px solid;
               padding-left: 8px;
             }
           }
@@ -116,11 +116,11 @@
             margin-top: 0.3rem;
 
             &.done {
-              background-color: $ts-main-blue-darker-color;
+              background-color: globals.$ts-main-blue-darker-color;
             }
 
             &.changed {
-              border: $ts-main-blue-darker-color 1px solid;
+              border: globals.$ts-main-blue-darker-color 1px solid;
             }
           }
         }

packages/typescriptlang-org/src/components/layout/Sidebar.scss

@@ -1,4 +1,4 @@
-@import "../../style/globals.scss";
+@use "../../style/globals.scss";
 
 #small-device-button-sidebar {
   display: none;
@@ -72,7 +72,7 @@ nav#sidebar {
       background-color: var(--sidebar-list-active-background-color);
 
       svg path {
-        stroke: $ts-main-blue-color;
+        stroke: globals.$ts-main-blue-color;
       }
     }
 
@@ -143,8 +143,8 @@ nav#sidebar {
       }
 
       &.highlight a {
-        color: $ts-sidebar-link;
-        border-left: 2px solid $ts-main-blue-color;
+        color: globals.$ts-sidebar-link;
+        border-left: 2px solid globals.$ts-main-blue-color;
         margin-left: 0.5rem;
         margin-right: -0.5rem;
         font-weight: 500;
@@ -154,15 +154,15 @@ nav#sidebar {
 
   // Only set max-height and overflow rules for direct ul children to prevent scrolling in subnav uls
   & > ul {
-    @media (min-width: $screen-sm) {
+    @media (min-width: globals.$screen-sm) {
       max-height: calc(100vh - 10px);
       overflow-y: auto;
       overflow-x: hidden;
     }
   }
 }
 
-@media (max-width: $screen-sm) {
+@media (max-width: globals.$screen-sm) {
   // This is a button which will scroll off and on with the nav
   button#small-device-button-sidebar {
     display: flex;
@@ -186,7 +186,7 @@ nav#sidebar {
     background-color: #c4c4c4;
     border-radius: 6px;
 
-    z-index: $z-index-for-handbook-nav-button;
+    z-index: globals.$z-index-for-handbook-nav-button;
 
     // Reset the button
     -webkit-appearance: none;
@@ -206,7 +206,7 @@ nav#sidebar {
 
     -webkit-overflow-scrolling: touch;
 
-    z-index: $z-index-for-handbook-nav;
+    z-index: globals.$z-index-for-handbook-nav;
     margin-left: -800px;
     width: 90%;
 

packages/typescriptlang-org/src/components/layout/SiteFooter.scss

@@ -1,12 +1,12 @@
-@import "../../style/globals.scss";
+@use "../../style/globals.scss";
 
 #site-footer {
-  background-color: $ts-main-blue-color;
+  background-color: globals.$ts-main-blue-color;
   color: white;
   padding-top: 1rem;
   padding-bottom: 3rem;
 
-  @media (max-width: $screen-sm) {
+  @media (max-width: globals.$screen-sm) {
     padding-bottom: 9rem;
   }
 
@@ -57,7 +57,7 @@
       }
     }
 
-    @media (max-width: $screen-sm) {
+    @media (max-width: globals.$screen-sm) {
       li {
         margin-left: 10px;
 
@@ -80,7 +80,7 @@
       display: flex;
       flex-direction: row;
 
-      @media (max-width: $screen-sm) {
+      @media (max-width: globals.$screen-sm) {
         flex-direction: column;
         margin-bottom: 1rem;
 
@@ -109,7 +109,7 @@
       margin-right: 1rem;
 
       select {
-        background-color: $ts-main-blue-darkest-color;
+        background-color: globals.$ts-main-blue-darkest-color;
         color: white;
       }
     }
@@ -120,7 +120,7 @@
     padding-top: 2rem;
     display: flex;
 
-    @media (max-width: $screen-sm) {
+    @media (max-width: globals.$screen-sm) {
       flex-direction: column-reverse;
 
       article#logos {
@@ -135,7 +135,7 @@
       flex-wrap: wrap;
 
       >li {
-        @media (min-width: $screen-sm) {
+        @media (min-width: globals.$screen-sm) {
           width: 50%;
         }
 
@@ -185,7 +185,7 @@
   }
 }
 
-@media (max-width: $screen-sm) {
+@media (max-width: globals.$screen-sm) {
 
   // This was sneakily making site wider than
   // the viewport because it uses opacity which affects layout
@@ -278,12 +278,12 @@
       width: 320px;
     }
 
-    border-bottom: 1px solid $ts-main-blue-darker-color;
+    border-bottom: 1px solid globals.$ts-main-blue-darker-color;
     border-radius: 0;
   }
 
   a {
-    color: $ts-main-blue-color;
+    color: globals.$ts-main-blue-color;
     text-decoration: none;
   }
 }

packages/typescriptlang-org/src/components/layout/TopNav.scss

@@ -1,12 +1,12 @@
-@import "../../style/globals.scss";
+@use "../../style/globals.scss";
 
 #site-wrapper {
   display: flex;
   flex-direction: column;
 }
 
 #top-menu {
-  background-color: $ts-main-blue-color;
+  background-color: globals.$ts-main-blue-color;
 
   user-select: none;
   clear: both;
@@ -93,7 +93,7 @@
 
 #beta-notification-menu,
 .gatsby-noscript {
-  background-color: $ts-muted-red;
+  background-color: globals.$ts-muted-red;
   text-align: center;
   color: white;
   padding: 0.4rem 0;
@@ -108,7 +108,7 @@
 
 form.search {
   height: 3rem;
-  background-color: $ts-main-blue-darker-color;
+  background-color: globals.$ts-main-blue-darker-color;
   border-radius: 3px 0px 0px 3px;
 
   padding-left: 1rem;
@@ -127,7 +127,7 @@ form.search {
   }
 
   &:focus-within {
-    background-color: $ts-main-blue-lighter-color;
+    background-color: globals.$ts-main-blue-lighter-color;
     @media screen and (-ms-high-contrast: black-on-white) {
       border: 2px solid white;
     }
@@ -140,10 +140,10 @@ form.search {
     width: 150px;
 
     &:focus-within {
-      background-color: $ts-main-blue-lighter-color;
+      background-color: globals.$ts-main-blue-lighter-color;
     }
     -webkit-appearance: none;
-    background-color: $ts-main-blue-darker-color;
+    background-color: globals.$ts-main-blue-darker-color;
 
     border-color: #152740;
     border-radius: 0;
@@ -190,7 +190,7 @@ form.search {
     button {
       flex: 1;
       flex-grow: 1;
-      background-color: $ts-main-blue-darker-color;
+      background-color: globals.$ts-main-blue-darker-color;
       color: white;
       border: none;
       border-radius: 0;
@@ -230,7 +230,7 @@ form.search {
     display: none;
   }
 
-  @media (max-width: $screen-sm) {
+  @media (max-width: globals.$screen-sm) {
     .show-only-small {
       display: block !important;
     }
@@ -245,7 +245,7 @@ form.search {
     }
   }
 
-  @media (min-width: 767px) and (max-width: $screen-md) {
+  @media (min-width: 767px) and (max-width: globals.$screen-md) {
     .show-only-medium {
       display: inline !important;
     }
@@ -255,7 +255,7 @@ form.search {
     }
   }
 
-  @media (min-width: $screen-md) {
+  @media (min-width: globals.$screen-md) {
     .show-only-large {
       display: inline-block !important;
     }
@@ -396,7 +396,7 @@ form.search {
   overflow: auto;
   position: absolute;
   width: 100%;
-  background-color: $ts-light-bg-sandy-color;
+  background-color: globals.$ts-light-bg-sandy-color;
   color: black;
   text-align: center;
   padding: 20px;