chore: remove sass from website (#11229)

.yarnrc.yml

@@ -6,9 +6,6 @@ packageExtensions:
   "@docusaurus/plugin-pwa@*":
     peerDependencies:
       "@babel/core": "^7.0.0"
-  "docusaurus-plugin-sass@*":
-    peerDependencies:
-      webpack: "*"
 
 plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs

package.json

@@ -98,8 +98,8 @@
     "jest-jasmine-ci": "yarn jest-jasmine --color --config jest.config.ci.js",
     "jest-coverage": "yarn jest --coverage",
     "lint": "eslint . --cache --ext js,jsx,ts,tsx,md",
-    "lint:prettier": "prettier '**/*.{md,yml,yaml}' 'website/**/*.{css,scss,js}' --write --ignore-path .gitignore",
-    "lint:prettier:ci": "prettier '**/*.{md,yml,yaml}' 'website/**/*.{css,scss,js}' --check --ignore-path .gitignore",
+    "lint:prettier": "prettier '**/*.{md,yml,yaml}' 'website/**/*.{css,js}' --write --ignore-path .gitignore",
+    "lint:prettier:ci": "prettier '**/*.{md,yml,yaml}' 'website/**/*.{css,js}' --check --ignore-path .gitignore",
     "test-types": "yarn jest --config jest.config.types.js",
     "test-ci": "yarn jest-coverage --color -i --config jest.config.ci.js && yarn test-leak && node ./scripts/mapCoverage.js && codecov",
     "test-ci-partial": "yarn test-ci-partial:parallel -i",

website/docusaurus.config.js

@@ -45,18 +45,17 @@ module.exports = {
         },
         theme: {
           customCss: [
+            path.resolve('src/css/docusaurusTheme.css'),
+            path.resolve('src/css/algoliaDocSearchTheme.css'),
             path.resolve('src/components/v1/legacyCSS.css'),
-            path.resolve('src/css/docusaurusTheme.scss'),
-            path.resolve('src/css/algoliaDocSearchTheme.scss'),
-            path.resolve('static/css/custom.scss'),
-            path.resolve('static/css/jest.scss'),
+            path.resolve('static/css/custom.css'),
+            path.resolve('static/css/jest.css'),
           ],
         },
       },
     ],
   ],
   plugins: [
-    'docusaurus-plugin-sass',
     [
       '@docusaurus/plugin-client-redirects',
       {

website/package.json

@@ -22,7 +22,6 @@
     "@docusaurus/plugin-pwa": "2.0.0-alpha.c32d8bd11",
     "@docusaurus/preset-classic": "2.0.0-alpha.c32d8bd11",
     "clsx": "^1.1.1",
-    "docusaurus-plugin-sass": "^0.1.12",
     "fs-extra": "^9.0.1",
     "globby": "^11.0.1",
     "react": "^17.0.1",

website/src/pages/index.js

@@ -21,7 +21,7 @@ import MarkdownBlock from '@site/src/components/v1/MarkdownBlock';
 
 import UsersJSON from '@site/users.json';
 
-import styles from './index.module.scss';
+import styles from './index.module.css';
 
 import GitHubButton from 'react-github-btn';
 

website/src/pages/index.module.css

@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates. All Rights Reserved.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/* Twitter Follow Button */
+
+.twitter-follow-button {
+  display: inline-block;
+  position: relative;
+  height: 28px;
+  box-sizing: border-box;
+  padding: 1px 10px 1px 9px;
+  background-color: #1b95e0;
+  color: #fff;
+  border-radius: 4px;
+  font-weight: 400;
+  cursor: pointer;
+  font-size: 13px;
+  line-height: 26px;
+  text-decoration: none;
+}
+
+.twitter-follow-button:hover {
+  color: #fff;
+  background-color: #0c7abf;
+  text-decoration: none;
+}
+
+.twitter-follow-button--icon {
+  position: relative;
+  display: inline-block;
+  top: 4px;
+  height: 18px;
+  width: 18px;
+  margin-right: 4px;
+  background: transparent 0 0 no-repeat;
+  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2072%2072%22%3E%3Cpath%20fill%3D%22none%22%20d%3D%22M0%200h72v72H0z%22%2F%3E%3Cpath%20class%3D%22icon%22%20fill%3D%22%23fff%22%20d%3D%22M68.812%2015.14c-2.348%201.04-4.87%201.744-7.52%202.06%202.704-1.62%204.78-4.186%205.757-7.243-2.53%201.5-5.33%202.592-8.314%203.176C56.35%2010.59%2052.948%209%2049.182%209c-7.23%200-13.092%205.86-13.092%2013.093%200%201.026.118%202.02.338%202.98C25.543%2024.527%2015.9%2019.318%209.44%2011.396c-1.125%201.936-1.77%204.184-1.77%206.58%200%204.543%202.312%208.552%205.824%2010.9-2.146-.07-4.165-.658-5.93-1.64-.002.056-.002.11-.002.163%200%206.345%204.513%2011.638%2010.504%2012.84-1.1.298-2.256.457-3.45.457-.845%200-1.666-.078-2.464-.23%201.667%205.2%206.5%208.985%2012.23%209.09-4.482%203.51-10.13%205.605-16.26%205.605-1.055%200-2.096-.06-3.122-.184%205.794%203.717%2012.676%205.882%2020.067%205.882%2024.083%200%2037.25-19.95%2037.25-37.25%200-.565-.013-1.133-.038-1.693%202.558-1.847%204.778-4.15%206.532-6.774z%22%2F%3E%3C%2Fsvg%3E);
+}
+
+.socialLinks {
+  position: absolute;
+  z-index: 1;
+  top: 10px;
+  right: 0;
+  display: flex;
+  justify-content: flex-end;
+  max-width: 1200px;
+}
+
+.socialLinks > * {
+  margin-right: 1rem;
+}

website/src/pages/videos.js

@@ -15,7 +15,7 @@ import Container from '@site/src/components/v1/Container';
 import MarkdownBlock from '@site/src/components/v1/MarkdownBlock';
 
 import VideosJSON from '@site/videos.json';
-import styles from './videos.module.scss';
+import styles from './videos.module.css';
 
 const VideoTypes = {
   YOUTUBE: 'youtube',

website/src/pages/videos.module.scss → website/src/pages/videos.module.css

@@ -9,10 +9,10 @@
   text-align: center;
   margin: 0 auto;
   max-width: 900px;
+}
 
-  .prose {
-    margin: 0 auto;
-    max-width: 560px;
-    text-align: center;
-  }
+.showcaseSection .prose {
+  margin: 0 auto;
+  max-width: 560px;
+  text-align: center;
 }

website/static/css/jest.scss → website/static/css/jest.css

@@ -95,7 +95,7 @@
   margin-bottom: 0;
 }
 
-/*  On mobile, show the screenshot under the body */
+/* On mobile, show the screenshot under the body */
 @media only screen and (max-width: 780px) {
   /* Ensure the consistent order of text first, then image */
   .containerV1 .wrapperV1 .imageAlignLeft {
@@ -302,32 +302,37 @@ body
   }
 }
 
-// Temporary fix for not ideal Docusaurus 2 layout
-// May be removed when we close https://github.com/facebook/docusaurus/issues/4083
-.main-wrapper.blog-wrapper .container .row {
-  // Blog post list
-  .col.col--2:first-child {
-    --ifm-col-width: 22%;
-    div[class^='sidebar'] {
-      padding-right: 1rem;
-    }
-  }
+/* Temporary fix for not ideal Docusaurus 2 layout */
+/* May be removed when we close https://github.com/facebook/docusaurus/issues/4083 */
+.main-wrapper.blog-wrapper .container .row .col.col--2:first-child {
+  --ifm-col-width: 22%;
+}
 
-  // Center
-  .col.col--8 {
-    --ifm-col-width: 62%;
-    @media only screen and (max-width: 996px) {
-      --ifm-col-width: 100% !important;
-    }
-  }
+.main-wrapper.blog-wrapper
+  .container
+  .row
+  /* Blog post list */
+  .col.col--2:first-child
+  div[class^='sidebar'] {
+  padding-right: 1rem;
+}
 
-  // TOC
-  .col.col--2:last-child {
-    --ifm-col-width: 16%;
+/* Center */
+.main-wrapper.blog-wrapper .container .row .col.col--8 {
+  --ifm-col-width: 62%;
+}
+@media only screen and (max-width: 996px) {
+  .main-wrapper.blog-wrapper .container .row .col.col--8 {
+    --ifm-col-width: 100% !important;
   }
 }
 
-// For large screens, make the container a bit larger than Docusaurus default
+/* TOC */
+.main-wrapper.blog-wrapper .container .row .col.col--2:last-child {
+  --ifm-col-width: 16%;
+}
+
+/* For large screens, make the container a bit larger than Docusaurus default */
 @media (min-width: 1650px) {
   .container {
     max-width: 1500px;