chore: retire gulp (#3036)

removes gulp dependencies
adds specific npm scripts to run sass tasks and update version.ts
adds eslint and stylelint rules to replace setting license header via gulp scripts

.eslintrc.js

@@ -8,6 +8,7 @@ module.exports = {
   parser: '@typescript-eslint/parser',
   parserOptions: {
     project: [
+      'stories/tsconfig.lint.json',
       'packages/mgt/tsconfig.json',
       'packages/mgt-element/tsconfig.json',
       'packages/mgt-components/tsconfig.json',
@@ -23,12 +24,25 @@ module.exports = {
     ],
     sourceType: 'module'
   },
-  plugins: ['eslint-plugin-jsdoc', 'eslint-plugin-prefer-arrow', 'eslint-plugin-react', '@typescript-eslint'],
+  plugins: ['eslint-plugin-jsdoc', 'eslint-plugin-prefer-arrow', 'eslint-plugin-react', '@typescript-eslint', 'header'],
   root: true,
   ignorePatterns: ['**/**-css.ts', '.eslintrc.js', '*.cjs', 'rollup.config.mjs'],
   rules: {
     '@typescript-eslint/no-explicit-any': 'warn',
     // prefer-nullish-coalescing requires strictNullChecking to be turned on
-    '@typescript-eslint/prefer-nullish-coalescing': 'off'
+    '@typescript-eslint/prefer-nullish-coalescing': 'off',
+    'header/header': [
+      2,
+      'block',
+      [
+        '*',
+        ' * -------------------------------------------------------------------------------------------',
+        ' * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.',
+        ' * See License in the project root for license information.',
+        ' * -------------------------------------------------------------------------------------------',
+        ' '
+      ],
+      1
+    ]
   }
 };

.stylelintrc.json

@@ -3,4 +3,4 @@
     "stylelint-config-standard-scss",
     "stylelint-config-prettier-scss"
   ]
-}
+}

package.json

@@ -23,12 +23,16 @@
     "bundle": "cd ./packages/mgt && npm run bundle",
     "clean": "lerna run --parallel --stream --scope '@microsoft/*' clean",
     "lint:eslint": "eslint -c .eslintrc.js --quiet 'packages/*/src/**/*.ts'",
+    "lint:eslint:fix": "eslint -c .eslintrc.js --quiet 'packages/*/src/**/*.ts' --fix",
     "lint:eslint:loud": "eslint -c .eslintrc.js 'packages/*/src/**/*.ts'",
     "lint:styles": "stylelint './packages/mgt-components/**/*.{css,scss}'",
-    "lint:fix": "npm run lint:styles -- --fix",
+    "lint:styles:fix": "stylelint './packages/mgt-components/**/*.{css,scss}' --fix",
+    "lint:fix": "npm-run-all lint:eslint:fix lint:styles:fix",
     "lint": "npm run lint:eslint && npm run lint:styles",
     "pack": "shx rm -rf 'artifacts/*.tgz' && lerna exec --stream --scope '@microsoft/*' -- npm pack",
-    "sass": "lerna run sass --scope @microsoft/*",
+    "sass": "lerna run sass --scope @microsoft/mgt-components",
+    "sass:test": "lerna run sass:test --scope @microsoft/mgt-components",
+    "sass:watch": "lerna run sass:watch --scope @microsoft/mgt-components",
     "serve": "web-dev-server --port 3000 --node-resolve --open --watch --compatibility none --app-index index.html",
     "serve:https": "web-dev-server --http2 --port 3000 --node-resolve --open --watch --compatibility none --app-index index.html",
     "start": "npm-run-all prettier:check watch:serve",
@@ -52,7 +56,7 @@
     "storybook:bundle:watch": "rollup -c ./.storybook/rollup.config.mjs --watch",
     "storybook:build": "npm run storybook:bundle && npm run storybook:dev && storybook build && cpx .storybook/CNAME storybook-static && node ./.storybook/post-process-index-file.js 'Microsoft Graph Toolkit Playground' ../",
     "csp": "node ./.storybook/post-process-index-file.js 'Microsoft Graph Toolkit Playground' ../",
-    "setLicense": "gulp setLicense",
+    "setLicense": "npm run lint:fix",
     "test": "npm run wtr:coverage",
     "version:tsc": "tsc -v",
     "wtr": "wtr --playwright",
@@ -104,30 +108,24 @@
     "@web/test-runner-puppeteer": "^0.14.0",
     "@webcomponents/webcomponentsjs": "^2.5.0",
     "babel-loader": "^8.2.1",
+    "clean-css": "^5.3.3",
     "core-js": "^3.31.0",
     "cpx": "^1.5.0",
     "eslint": "^8.49.0",
     "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-header": "^3.1.1",
     "eslint-plugin-jsdoc": "^46.8.2",
     "eslint-plugin-prefer-arrow": "^1.2.3",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-storybook": "^0.6.15",
     "fs-extra": "^9.0.1",
-    "gulp": "^4.0.2",
-    "gulp-append-prepend": "^1.0.8",
-    "gulp-clean-css": "4.3.0",
-    "gulp-header-license": "^1.0.10",
-    "gulp-rename": "^2.0.0",
-    "gulp-replace-task": "^2.0.1",
-    "gulp-sass": "^5.1.0",
-    "gulp-util": "^3.0.8",
     "husky": "^4.3.0",
     "js-beautify": "^1.14.11",
     "lerna": "^7.1.1",
     "lit": "^3.0.0",
     "monaco-editor": "^0.30.0",
     "monaco-editor-webpack-plugin": "^6.0.0",
-    "node-sass": "npm:sass@^1.44.0",
+    "nodemon": "^3.0.3",
     "npm-run-all": "^4.1.5",
     "office-ui-fabric-core": "^11.0.0",
     "playwright": "^1.39.0",
@@ -137,7 +135,7 @@
     "regenerator-runtime": "^0.13.7",
     "rollup": "^4.9.6",
     "rollup-plugin-postcss": "^4.0.2",
-    "sass": "^1.29.0",
+    "sass": "^1.70.0",
     "shx": "^0.3.3",
     "sinon": "^16.1.0",
     "storybook": "^7.6.7",
@@ -146,6 +144,7 @@
     "stylelint": "^15.6.1",
     "stylelint-config-prettier-scss": "^0.0.1",
     "stylelint-config-standard-scss": "^9.0.0",
+    "stylelint-copyright": "^3.1.1",
     "testing-library__dom": "^7.29.4-beta.1",
     "typescript": "^5.1.5",
     "web-component-analyzer": "^1.1.6",

packages/mgt-components/.stylelintrc.json

@@ -3,13 +3,17 @@
     "stylelint-config-standard-scss",
     "stylelint-config-prettier-scss"
   ],
+  "plugins": [
+    "stylelint-copyright"
+  ],
   "rules": {
     "no-descending-specificity": null,
-    "selector-class-pattern":[
-    "^[-a-z][a-z0-9]*(?:[_-]{0,2}[a-z0-9]*)*$",
-    {
-      "message":"Expected the class selector '%s' to be kebab-case"
-    }],
+    "selector-class-pattern": [
+      "^[-a-z][a-z0-9]*(?:[_-]{0,2}[a-z0-9]*)*$",
+      {
+        "message": "Expected the class selector '%s' to be kebab-case"
+      }
+    ],
     "scss/dollar-variable-pattern": [
       "^[a-z][a-z0-9]*(?:[-]{0,2}[a-z0-9]+)*$",
       {
@@ -19,8 +23,16 @@
     "selector-pseudo-class-no-unknown": [
       true,
       {
-        "ignorePseudoClasses": ["first"]
+        "ignorePseudoClasses": [
+          "first"
+        ]
+      }
+    ],
+    "docusaurus/copyright-header": [
+      true,
+      {
+        "header": "*\n * -------------------------------------------------------------------------------------------\n * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.\n * See License in the project root for license information.\n * -------------------------------------------------------------------------------------------"
       }
     ]
   }
-}
+}

packages/mgt-components/package.json

@@ -32,8 +32,8 @@
     "compile:watch": "tsc -w",
     "lint": "eslint -c ../../.eslintrc.js 'src/**/*.ts'",
     "postpack": "cpx *.tgz ../../artifacts",
-    "sass": "gulp sass --cwd .",
-    "sass:watch": "gulp watchSass --cwd ."
+    "sass": "node ./scripts/compileSass.js",
+    "sass:watch": "nodemon -e scss -x npm run sass"
   },
   "sideEffects": [
     "./dist/es6/index.js",

packages/mgt-components/scripts/compileSass.js

@@ -0,0 +1,50 @@
+const sass = require('sass');
+const path = require('path');
+const fs = require('fs-extra');
+const CleanCSS = require('clean-css');
+
+const cleaner = new CleanCSS({});
+const ignoreDirs = ['node_modules', 'samples', 'assets'];
+
+const cssFile = `// THIS FILE IS AUTO GENERATED
+// ANY CHANGES WILL BE LOST DURING BUILD
+// MODIFY THE .SCSS FILE INSTEAD
+
+import { css, CSSResult } from 'lit';
+/**
+ * exports lit-element css
+ * @export styles
+ */
+export const styles: CSSResult[] = [
+  css\`
+[[CSS]]
+\`];`;
+
+const getFiles = (filter, startPath = 'src') => {
+  let results = [];
+
+  if (!fs.existsSync(startPath)) {
+    console.log('no dir ', startPath);
+    return;
+  }
+
+  var files = fs.readdirSync(startPath);
+  for (var i = 0; i < files.length; i++) {
+    var filename = path.join(startPath, files[i]);
+    var stat = fs.lstatSync(filename);
+    if (stat.isDirectory() && ignoreDirs.indexOf(path.basename(filename)) < 0) {
+      results = [...results, ...getFiles(filter, filename)]; //recurse
+    } else if (filename.indexOf(filter) >= 0) {
+      results.push(filename);
+    }
+  }
+
+  return results;
+};
+
+getFiles('.scss').forEach(file => {
+  console.log(`compiling ${file}`);
+  const result = sass.compile(file);
+  const css = cleaner.minify(result.css).styles;
+  fs.writeFileSync(file.replace('.scss', '-css.ts'), cssFile.replace('[[CSS]]', css));
+});

packages/mgt-components/src/components/base-person-card-section.scss

@@ -6,7 +6,7 @@
  */
 
 @import '../styles/shared-styles';
-@import '../../node_modules/office-ui-fabric-core/dist/sass/References';
+@import '../../../../node_modules/office-ui-fabric-core/dist/sass/References';
 
 $font-color: var(--font-color, #323130);
 

packages/mgt-components/src/components/mgt-file-list/mgt-file-upload/mgt-file-upload.tests.ts

@@ -4,6 +4,7 @@
  * See License in the project root for license information.
  * -------------------------------------------------------------------------------------------
  */
+
 import { fixture, html, expect } from '@open-wc/testing';
 import { MockProvider, Providers } from '@microsoft/mgt-element';
 import { MgtFileUpload, registerMgtFileUploadComponent } from './mgt-file-upload';

packages/mgt-components/src/components/mgt-person/mgt-person.tests.ts

@@ -4,6 +4,7 @@
  * See License in the project root for license information.
  * -------------------------------------------------------------------------------------------
  */
+
 import { fixture, html, expect, oneEvent } from '@open-wc/testing';
 import { LocalizationHelper, MockProvider, Providers } from '@microsoft/mgt-element';
 import { registerMgtPersonComponent } from './mgt-person';

packages/mgt-components/src/components/mgt-planner/strings.ts

@@ -4,6 +4,7 @@
  * See License in the project root for license information.
  * -------------------------------------------------------------------------------------------
  */
+
 export const strings = {
   removeTaskSubtitle: 'Delete Task',
   cancelNewTaskSubtitle: 'Cancel',

packages/mgt-components/src/components/mgt-planner/task-sources.ts

@@ -4,6 +4,7 @@
  * See License in the project root for license information.
  * -------------------------------------------------------------------------------------------
  */
+
 /* eslint-disable max-classes-per-file */
 
 import { IGraph, BetaGraph } from '@microsoft/mgt-element';

packages/mgt-components/src/components/mgt-tasks-base/strings.ts

@@ -4,6 +4,7 @@
  * See License in the project root for license information.
  * -------------------------------------------------------------------------------------------
  */
+
 export const strings = {
   cancelNewTaskSubtitle: 'Cancel',
   newTaskPlaceholder: 'Add a task',

packages/mgt-components/src/components/sub-components/mgt-dot-options/strings.ts

@@ -4,6 +4,7 @@
  * See License in the project root for license information.
  * -------------------------------------------------------------------------------------------
  */
+
 export const strings = {
   dotOptionsTitle: 'More options'
 };

packages/mgt-components/src/index.ts

@@ -4,6 +4,7 @@
  * See License in the project root for license information.
  * -------------------------------------------------------------------------------------------
  */
+
 export * from './registerMgtComponents';
 
 export * from './exports';

packages/mgt-components/src/styles/shared-styles.scss

@@ -20,6 +20,7 @@ $font-family: var(
   sans-serif
 );
 $font-size: var(--default-font-size, 14px);
+$focus-ring-color: var(--focus-ring-color, Highlight);
 
 :host([hidden]) {
   display: none;
@@ -36,7 +37,7 @@ $font-size: var(--default-font-size, 14px);
 
 :focus-visible {
   // ensure default is correctly set for Firefox
-  outline-color: var(--focus-ring-color, Highlight);
+  outline-color: $focus-ring-color;
 
   // ensure default is set for other browsers
   /* stylelint-disable-next-line declaration-block-no-duplicate-properties */