diff --git a/.gitattributes b/.gitattributes index 077267a..79a85db 100644 --- a/.gitattributes +++ b/.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 diff --git a/common/config/azure-pipelines/templates/build.yaml b/common/config/azure-pipelines/templates/build.yaml index 22fbe10..d0fa0ff 100644 --- a/common/config/azure-pipelines/templates/build.yaml +++ b/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 diff --git a/common/config/rush/build-cache.json b/common/config/rush/build-cache.json index 36c39ce..b75b532 100644 --- a/common/config/rush/build-cache.json +++ b/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", /** diff --git a/common/config/rush/command-line.json b/common/config/rush/command-line.json index 399941a..2605d8c 100644 --- a/common/config/rush/command-line.json +++ b/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 // }, // // { diff --git a/common/config/rush/experiments.json b/common/config/rush/experiments.json index 794bb1f..60e8af9 100644 --- a/common/config/rush/experiments.json +++ b/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 } diff --git a/common/config/rush/rush-plugins.json b/common/config/rush/rush-plugins.json new file mode 100644 index 0000000..fbc34d4 --- /dev/null +++ b/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" + // } + ] +} diff --git a/common/config/rush/version-policies.json b/common/config/rush/version-policies.json index 511cddb..50982c7 100644 --- a/common/config/rush/version-policies.json +++ b/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 // } ] diff --git a/heft/heft-node-basic-tutorial/package.json b/heft/heft-node-basic-tutorial/package.json index 2a76fa2..be6ef0b 100644 --- a/heft/heft-node-basic-tutorial/package.json +++ b/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" } } diff --git a/heft/heft-node-jest-tutorial/package.json b/heft/heft-node-jest-tutorial/package.json index 106078a..3afcfa8 100644 --- a/heft/heft-node-jest-tutorial/package.json +++ b/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" } } diff --git a/heft/heft-webpack-basic-tutorial/config/heft.json b/heft/heft-webpack-basic-tutorial/config/heft.json index 28919eb..96ee181 100644 --- a/heft/heft-webpack-basic-tutorial/config/heft.json +++ b/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. diff --git a/heft/heft-webpack-basic-tutorial/config/typescript.json b/heft/heft-webpack-basic-tutorial/config/typescript.json index 72847a7..f254e2f 100644 --- a/heft/heft-webpack-basic-tutorial/config/typescript.json +++ b/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. diff --git a/heft/heft-webpack-basic-tutorial/package.json b/heft/heft-webpack-basic-tutorial/package.json index aa3c57b..1593775 100644 --- a/heft/heft-webpack-basic-tutorial/package.json +++ b/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" } } diff --git a/heft/heft-webpack-basic-tutorial/src/ExampleApp.tsx b/heft/heft-webpack-basic-tutorial/src/ExampleApp.tsx index 5e5447e..5311774 100644 --- a/heft/heft-webpack-basic-tutorial/src/ExampleApp.tsx +++ b/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', diff --git a/heft/heft-webpack-basic-tutorial/src/ToggleSwitch.scss b/heft/heft-webpack-basic-tutorial/src/ToggleSwitch.scss new file mode 100644 index 0000000..ce13d6f --- /dev/null +++ b/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; +} diff --git a/heft/heft-webpack-basic-tutorial/src/ToggleSwitch.tsx b/heft/heft-webpack-basic-tutorial/src/ToggleSwitch.tsx index c4ac05f..ec039bf 100644 --- a/heft/heft-webpack-basic-tutorial/src/ToggleSwitch.tsx +++ b/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 -
+
+
); } diff --git a/heft/heft-webpack-basic-tutorial/tsconfig.json b/heft/heft-webpack-basic-tutorial/tsconfig.json index bd378b8..8c84441 100644 --- a/heft/heft-webpack-basic-tutorial/tsconfig.json +++ b/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", diff --git a/heft/heft-webpack-basic-tutorial/webpack.config.js b/heft/heft-webpack-basic-tutorial/webpack.config.js index c6a4c30..018f86b 100644 --- a/heft/heft-webpack-basic-tutorial/webpack.config.js +++ b/heft/heft-webpack-basic-tutorial/webpack.config.js @@ -1,7 +1,10 @@ 'use strict'; const path = require('path'); +const sass = require('sass'); +const autoprefixer = require('autoprefixer'); const HtmlWebpackPlugin = require('html-webpack-plugin'); +const { DefinePlugin } = require('webpack'); /** * If the "--production" command-line parameter is specified when invoking Heft, then the @@ -12,45 +15,179 @@ function createWebpackConfig({ production }) { // Documentation: https://webpack.js.org/configuration/mode/ mode: production ? 'production' : 'development', resolve: { + // Important: Do NOT add TypeScript extensions here extensions: ['.js', '.jsx', '.json'] }, module: { rules: [ { - test: /\.css$/, - use: [require.resolve('style-loader'), require.resolve('css-loader')] + // We recommend the newer .scss file format because its syntax is a proper superset of plain CSS. + // The older .sass syntax is supported only for backwards compatibility. + // The SASS docs are here: https://sass-lang.com/documentation/syntax + test: /\.(scss|sass|css)$/, + exclude: /node_modules/, + use: [ + { + // Generates JavaScript code that injects CSS styles into the DOM at runtime. + // The default configuration creates