Improve heft-webpack-basic-tutorial to illustrate .scss support

.gitattributes

@@ -1,6 +1,6 @@
 # Don't allow people to merge changes to these generated files, because the result
 # may be invalid.  You need to run "rush update" again.
-pnpm-lock.yaml               merge=binary
+pnpm-lock.yaml               merge=text
 shrinkwrap.yaml              merge=binary
 npm-shrinkwrap.json          merge=binary
 yarn.lock                    merge=binary

common/config/azure-pipelines/templates/build.yaml

@@ -14,3 +14,7 @@ steps:
     displayName: 'Rush Install'
   - script: 'node common/scripts/install-run-rush.js rebuild --verbose --production'
     displayName: 'Rush Rebuild'
+    env:
+      # Prevent time-based browserslist update warning
+      # See https://github.com/microsoft/rushstack/issues/2981
+      BROWSERSLIST_IGNORE_OLD_DATA: 1

common/config/rush/build-cache.json

@@ -21,9 +21,9 @@
 
   /**
    * Setting this property overrides the cache entry ID.  If this property is set, it must contain
-   * a [hash] token. It may also contain a [projectName] or a [projectName:normalized] token.
+   * a [hash] token. It may also contain a [projectName] or a [projectName:normalize] token.
    */
-  // "cacheEntryNamePattern": "[projectName:normalized]-[hash]"
+  // "cacheEntryNamePattern": "[projectName:normalize]-[phaseName:normalize]-[hash]"
 
   /**
    * Use this configuration with "cacheProvider"="azure-blob-storage"
@@ -58,15 +58,20 @@
    */
   "amazonS3Configuration": {
     /**
-     * (Required) The Amazon S3 region of the bucket to use for build cache (e.g. "us-east-1").
+     * (Required unless s3Endpoint is specified) The name of the bucket to use for build cache (e.g. "my-bucket").
      */
-    // "s3Region": "us-east-1",
+    // "s3Bucket": "my-bucket",
+    /**
+     * (Required unless s3Bucket is specified) The Amazon S3 endpoint of the bucket to use for build cache (e.g. "my-bucket.s3.us-east-2.amazonaws.com" or "http://localhost:9000").
+     * This shold not include any path, use the s3Prefix to set the path.
+     */
+    // "s3Endpoint": "https://my-bucket.s3.us-east-2.amazonaws.com",
     /**
-     * The name of the bucket in Amazon S3 to use for build cache.
+     * (Required) The Amazon S3 region of the bucket to use for build cache (e.g. "us-east-1").
      */
-    // (Required) "s3Bucket": "my-bucket",
+    // "s3Region": "us-east-1",
     /**
-     * An optional prefix ("folder") for cache items.
+     * An optional prefix ("folder") for cache items. Should not start with /
      */
     // "s3Prefix": "my-prefix",
     /**

common/config/rush/command-line.json

@@ -92,7 +92,7 @@
     //    *
     //    * Thus, warnings do not interfere with local development, but they will cause a CI job to fail, because
     //    * the Rush process itself returns a nonzero exit code if there are any warnings or errors. This is by design.
-    //    * In an active monorepo, we've found that if you allow any warnings in your master branch, it inadvertently
+    //    * In an active monorepo, we've found that if you allow any warnings in your main branch, it inadvertently
     //    * teaches developers to ignore warnings, which quickly leads to a situation where so many "expected" warnings
     //    * have accumulated that warnings no longer serve any useful purpose.
     //    *
@@ -123,7 +123,7 @@
     //    * (EXPERIMENTAL) Disable cache for this action. This may be useful if this command affects state outside of
     //    * projects' own folders.
     //    */
-    //   "disableBuildCache ": false
+    //   "disableBuildCache": false
     // },
     //
     // {

common/config/rush/experiments.json

@@ -28,5 +28,17 @@
    * If true, the chmod field in temporary project tar headers will not be normalized.
    * This normalization can help ensure consistent tarball integrity across platforms.
    */
-  // "noChmodFieldInTarHeaderNormalization": true
+  // "noChmodFieldInTarHeaderNormalization": true,
+
+  /**
+   * If true, build caching will respect the allowWarningsInSuccessfulBuild flag and cache builds with warnings.
+   * This will not replay warnings from the cached build.
+   */
+  // "buildCacheWithAllowWarningsInSuccessfulBuild": true,
+
+  /**
+   * If true, the phased commands feature is enabled. To use this feature, create a "phased" command
+   * in common/config/rush/command-line.json.
+   */
+  // "phasedCommands": true
 }

common/config/rush/rush-plugins.json

@@ -0,0 +1,25 @@
+/**
+ * This configuration file manages Rush's plugin feature.
+ */
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/rush/v5/rush-plugins.schema.json",
+  "plugins": [
+    /**
+     * Each item defines a plugin configuration used by Rush.
+     */
+    // {
+    //   /**
+    //    * The name of the rush plugin package.
+    //    */
+    //   "packageName": "@scope/my-rush-plugin",
+    //   /**
+    //    * The name of the plugin provided by rush plugin package
+    //    */
+    //   "pluginName": "my-plugin-name",
+    //   /**
+    //    * Autoinstaller name used to install the plugin.
+    //    */
+    //   "autoinstallerName": "plugins"
+    // }
+  ]
+}

common/config/rush/version-policies.json

@@ -51,7 +51,17 @@
   //    * If this field is omitted, then a separate CHANGELOG.md file will be maintained for each
   //    * package in the set.
   //    */
-  //   "mainProject": "my-app"
+  //   "mainProject": "my-app",
+  //
+  //   /**
+  //    * (Optional) If enabled, the "rush change" command will prompt the user for their email address
+  //    * and include it in the JSON change files.  If an organization maintains multiple repos, tracking
+  //    * this contact information may be useful for a service that automatically upgrades packages and
+  //    * needs to notify engineers whose change may be responsible for a downstream build break.  It might
+  //    * also be useful for crediting contributors.  Rush itself does not do anything with the collected
+  //    * email addresses.  The default value is "false".
+  //    */
+  //   // "includeEmailInChangeFile": true
   // },
   //
   // {
@@ -85,6 +95,8 @@
   //    * in some other way, set "exemptFromRushChange" to true to tell "rush change" to ignore the projects
   //    * belonging to this version policy.
   //    */
-  //   "exemptFromRushChange": false
+  //   "exemptFromRushChange": false,
+  //
+  //   // "includeEmailInChangeFile": true
   // }
 ]

heft/heft-node-basic-tutorial/package.json

@@ -14,7 +14,7 @@
     "@rushstack/heft-jest-plugin": "^0.1.28",
     "@types/heft-jest": "1.0.2",
     "@types/node": "10.17.13",
-    "eslint": "~7.12.1",
+    "eslint": "~7.28.0",
     "typescript": "~4.3.5"
   }
 }

heft/heft-node-jest-tutorial/package.json

@@ -13,7 +13,7 @@
     "@rushstack/heft-jest-plugin": "^0.1.28",
     "@types/heft-jest": "1.0.2",
     "@types/node": "10.17.13",
-    "eslint": "~7.12.1",
+    "eslint": "~7.28.0",
     "typescript": "~4.3.5"
   }
 }

heft/heft-webpack-basic-tutorial/config/heft.json

@@ -40,7 +40,7 @@
       /**
        * The path to the plugin package.
        */
-      "plugin": "@rushstack/heft-webpack4-plugin"
+      "plugin": "@rushstack/heft-webpack5-plugin"
 
       /**
        * An optional object that provides additional settings that may be defined by the plugin.

heft/heft-webpack-basic-tutorial/config/typescript.json

@@ -60,7 +60,7 @@
     /**
      * File extensions that should be copied from the src folder to the destination folder(s).
      */
-    "fileExtensions": [".css"]
+    "fileExtensions": [".css", ".scss", ".sass"]
 
     /**
      * Glob patterns that should be explicitly included.

heft/heft-webpack-basic-tutorial/package.json

@@ -11,19 +11,25 @@
     "@rushstack/eslint-config": "^2.4.0",
     "@rushstack/heft": "^0.38.0",
     "@rushstack/heft-jest-plugin": "^0.1.28",
-    "@rushstack/heft-webpack4-plugin": "^0.3.0",
+    "@rushstack/heft-webpack5-plugin": "~0.1.27",
     "@types/heft-jest": "1.0.2",
-    "@types/react": "16.9.45",
-    "@types/react-dom": "16.9.8",
-    "@types/webpack-env": "1.13.0",
-    "css-loader": "~4.2.1",
-    "eslint": "~7.12.1",
-    "html-webpack-plugin": "~4.5.0",
-    "react": "~16.13.1",
-    "react-dom": "~16.13.1",
-    "style-loader": "~1.2.1",
+    "@types/react-dom": "17.0.7",
+    "@types/react": "17.0.11",
+    "@types/webpack-env": "1.16.0",
+    "autoprefixer": "~10.2.6",
+    "css-loader": "~5.2.6",
+    "eslint": "~7.28.0",
+    "file-loader": "~6.2.0",
+    "html-webpack-plugin": "~5.3.1",
+    "postcss-loader": "~6.1.0",
+    "postcss": "~8.3.4",
+    "react-dom": "~17.0.2",
+    "react": "~17.0.2",
+    "sass-loader": "~12.1.0",
+    "sass": "~1.35.1",
+    "source-map-loader": "~3.0.0",
+    "style-loader": "~2.0.0",
     "typescript": "~4.3.5",
-    "webpack": "~4.44.2",
-    "source-map-loader": "~1.1.2"
+    "webpack": "~5.39.0"
   }
 }

heft/heft-webpack-basic-tutorial/src/ExampleApp.tsx

@@ -6,6 +6,8 @@ import { ToggleSwitch, IToggleEventArgs } from './ToggleSwitch';
  */
 export class ExampleApp extends React.Component {
   public render(): React.ReactNode {
+    // This is an example of an inline style object.
+    // See ToggleSwitch.tsx for an example of a style that is imported from a SASS .scss file.
     const appStyle: React.CSSProperties = {
       backgroundColor: '#ffffff',
       padding: '20px',

heft/heft-webpack-basic-tutorial/src/ToggleSwitch.scss

@@ -0,0 +1,31 @@
+// Documentation for .scss syntax: https://sass-lang.com/documentation/syntax
+
+// Example of a SASS variable:
+$height: 20px;
+
+.frame {
+  border-radius: 10px;
+  width: 35px;
+  height: $height;
+  cursor: pointer;
+}
+
+.sliderLeft {
+  border-radius: 10px;
+  background-color: #c0c0c0;
+  width: 20px;
+  height: $height;
+
+  margin-left: 0px;
+  margin-right: auto;
+}
+
+.sliderRight {
+  border-radius: 10px;
+  background-color: #c0c0c0;
+  width: 20px;
+  height: $height;
+
+  margin-left: auto;
+  margin-right: 0px;
+}

heft/heft-webpack-basic-tutorial/src/ToggleSwitch.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react';
 
+import styles from './ToggleSwitch.scss';
+
 /**
  * Slider positions for `ToggleSwitch`.
  */
@@ -54,33 +56,17 @@ export class ToggleSwitch extends React.Component<IToggleSwitchProps, IToggleSwi
 
   public render(): React.ReactNode {
     const frameStyle: React.CSSProperties = {
-      borderRadius: '10px',
       backgroundColor:
-        this.state.sliderPosition === ToggleSwitchPosition.Left
-          ? this.props.leftColor
-          : this.props.rightColor,
-      width: '35px',
-      height: '20px',
-      cursor: 'pointer'
-    };
-    const sliderStyle: React.CSSProperties = {
-      borderRadius: '10px',
-      backgroundColor: '#c0c0c0',
-      width: '20px',
-      height: '20px'
+        this.state.sliderPosition === ToggleSwitchPosition.Left ? this.props.leftColor : this.props.rightColor
     };
 
-    if (this.state.sliderPosition === ToggleSwitchPosition.Left) {
-      sliderStyle.marginLeft = '0px';
-      sliderStyle.marginRight = 'auto';
-    } else {
-      sliderStyle.marginLeft = 'auto';
-      sliderStyle.marginRight = '0px';
-    }
-
     return (
-      <div style={frameStyle} onClick={this._onClickSlider}>
-        <div style={sliderStyle} />
+      <div className={styles.frame} style={frameStyle} onClick={this._onClickSlider}>
+        <div
+          className={
+            this.state.sliderPosition === ToggleSwitchPosition.Left ? styles.sliderLeft : styles.sliderRight
+          }
+        />
       </div>
     );
   }

heft/heft-webpack-basic-tutorial/tsconfig.json

@@ -3,7 +3,7 @@
 
   "compilerOptions": {
     "outDir": "lib",
-    "rootDir": "src",
+    "rootDirs": ["src/", "temp/sass-ts/"],
 
     "forceConsistentCasingInFileNames": true,
     "jsx": "react",