Add more example-lib tests; use sass modern API

.prettierignore

@@ -10,3 +10,4 @@ CHANGELOG.*
 SECURITY.md
 change
 *.api.md
+*.scss.ts

.yarnrc.yml

@@ -25,6 +25,7 @@ catalogs:
     mock-fs: ^5.5.0
     postcss: ^8.5.8
     sass: ^1.98.0
+    tar-fs: ^3.1.2
     ts-node: ^10.8.0
     typescript: ~6.0.3
     webpack: ^5.105.4

change/change-154e963b-d63f-48e4-971c-27011a703bb6.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "type": "minor",
+      "comment": "`sassTask`: use the `sass` modern `compile()` API when available",
+      "packageName": "just-scripts",
+      "email": "elcraig@microsoft.com",
+      "dependentChangeType": "patch"
+    }
+  ]
+}

change/change-4e7ac4ba-18ff-423d-8725-0f028585b26e.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "type": "patch",
+      "comment": "`styleOverlay`: fix how options are passed to `postcss-loader`",
+      "packageName": "just-scripts",
+      "email": "elcraig@microsoft.com",
+      "dependentChangeType": "patch"
+    }
+  ]
+}

change/change-53854319-2146-4f4b-bc3f-e0f67b2f2bd2.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "type": "patch",
+      "comment": "`webpackTask`: support default export from config file",
+      "packageName": "just-scripts",
+      "email": "elcraig@microsoft.com",
+      "dependentChangeType": "patch"
+    }
+  ]
+}

change/change-8df139e6-6651-477b-a782-05181c767214.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "type": "minor",
+      "comment": "Webpack tasks: try all js/ts webpack config extensions",
+      "packageName": "just-scripts",
+      "email": "elcraig@microsoft.com",
+      "dependentChangeType": "patch"
+    }
+  ]
+}

packages/just-example-lib/.gitignore

@@ -0,0 +1,2 @@
+# Generated by sassTask
+*.scss.ts

packages/just-example-lib/api-extractor.json

@@ -1,4 +1,5 @@
 {
   "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
-  "extends": "@microsoft/just-internal-scripts/api-extractor.base.json"
+  "extends": "@microsoft/just-internal-scripts/api-extractor.base.json",
+  "mainEntryPointFilePath": "<projectFolder>/lib/src/index.d.ts"
 }

packages/just-example-lib/eslint.config.mjs

@@ -0,0 +1,4 @@
+// @ts-check
+import { getConfig } from '@microsoft/just-internal-scripts/eslintConfig.mjs';
+
+export default getConfig(import.meta.dirname);

packages/just-example-lib/etc/just-example-lib.api.md

@@ -5,7 +5,10 @@
 ```ts
 
 // @public (undocumented)
-export const a = 5;
+export const sample = 5;
+
+// @public (undocumented)
+export const sub = "sub";
 
 // (No @packageDocumentation comment for this package)
 

packages/just-example-lib/just.config.ts

@@ -1,66 +1,175 @@
+// This config is basically a big E2E test for just-scripts
+import fs from 'fs';
 import {
-  nodeExecTask,
-  tscTask,
-  task,
-  parallel,
-  watch,
-  jestTask,
-  eslintTask,
-  apiExtractorVerifyTask,
   apiExtractorUpdateTask,
+  apiExtractorVerifyTask,
+  cleanTask,
+  copyInstructions,
+  copyInstructionsTask,
+  copyTask,
+  createTarTask,
+  esbuildTask,
+  eslintTask,
+  extractTarTask,
+  jestTask,
   logger,
+  nodeExecTask,
+  parallel,
+  prettierCheckTask,
+  sassTask,
   series,
+  task,
+  tscTask,
+  watch,
+  webpackCliTask,
+  webpackDevServerTask,
+  webpackTask,
 } from 'just-scripts';
+import path from 'path';
 
 task('typescript', tscTask({}));
 task('typescript:watch', tscTask({ watch: true }));
 
-task('customNodeTask', nodeExecTask({ enableTypeScript: true, args: ['./tasks/customTask.ts'] }));
+// creates src/style2.scss.ts
+task(
+  'sass',
+  sassTask({
+    createSourceModule: (fileName, css) => {
+      logger.info(`processing ${fileName} with sassTask`);
+      return `/* eslint-disable */\nexport default ${JSON.stringify(css)};`;
+    },
+  }),
+);
+
+task('build', series('sass', 'typescript'));
+
+task('clean', cleanTask());
+
+task('api', apiExtractorVerifyTask({}));
+task('api:update', apiExtractorUpdateTask({}));
+
+task('eslint', eslintTask());
+task(
+  'prettier:check',
+  // newlines cause issues on windows
+  process.platform === 'win32'
+    ? done => {
+        logger.info('skip on windows');
+        done();
+      }
+    : prettierCheckTask({
+        files: ['src'],
+        configPath: path.resolve(__dirname, '../../prettier.config.js'),
+        ignorePath: path.resolve(__dirname, '../../.prettierignore'),
+      }),
+);
+
+task('lint', series('eslint', 'prettier:check'));
+
+task('customNodeTask', nodeExecTask({ enableTypeScript: true, args: ['./src/customTask.ts'] }));
 
-task('bundle', () => {
+task('bundle:fake', () => {
   const someVar = Math.random();
 
   return done => {
     logger.info('fake bundle', someVar);
-    setTimeout(done, 50);
+    setTimeout(done, 10);
   };
 });
 
-task('bundle:promise', () => {
+task('bundle:fake:promise', () => {
   return () =>
     new Promise(resolve => {
       logger.info('fake promise bundling files');
-      setTimeout(resolve, 50);
+      setTimeout(resolve, 10);
     });
 });
 
-task('build', 'description', series(parallel('customNodeTask', 'typescript'), 'bundle', 'bundle:promise'));
-task('watch', parallel('typescript:watch'));
+task('bundle:webpack', webpackTask({ output: { filename: 'index.webpack.js' } }));
+task(
+  'bundle:webpack:cli',
+  webpackCliTask({ webpackCliArgs: ['--output-filename', 'index.webpack-cli.js', '--mode', 'development'] }),
+);
+
+task(
+  'bundle:esbuild',
+  esbuildTask({
+    entryPoints: ['./src/index.ts'],
+    outfile: './dist/index.esbuild.js',
+    bundle: true,
+    // The css/scss imports will have warnings about "Ignoring this import" which is fine in context
+    // (this bundle is never loaded, so a CSS plugin isn't configured)
+    loader: { '.css': 'file', '.scss': 'file', '.jpg': 'dataurl' },
+  }),
+);
 
 task(
-  'start',
+  'bundle',
   parallel(
-    () =>
-      watch(['./src/**/*.js'], () => {
-        console.log('dude js');
-      }),
-    () =>
-      watch(['./src/**/*.ts'], () => {
-        console.log('dude ts');
-      }),
+    series('bundle:fake', 'bundle:fake:promise'),
+    series('bundle:webpack', 'bundle:webpack:cli'),
+    'bundle:esbuild',
   ),
 );
 
-task('w', () => {
+const tarFile = path.join(__dirname, 'dist/sample.tar.gz');
+task('tar:create', createTarTask({ file: tarFile, cwd: path.join(__dirname, 'lib') }));
+task('tar:extract', extractTarTask({ file: tarFile, cwd: path.join(__dirname, 'dist/extracted') }));
+
+task('tar', series('tar:create', 'tar:extract'));
+
+task('test:jest', jestTask());
+
+task(
+  'copy',
+  copyTask({
+    // Glob patterns must use forward slashes even on Windows (see CopyTaskOptions.paths), so
+    // build the `*.css` pattern with `path.posix` rather than `path.join`, which would use `\` on
+    // Windows and cause glob to treat the separators as escape characters (matching nothing).
+    paths: [path.resolve('src/clippy.jpg'), 'src/*.css'],
+    dest: path.join(__dirname, 'dist/copied'),
+  }),
+);
+
+task(
+  'copy:instructions',
+  copyInstructionsTask({
+    copyInstructions: copyInstructions.copyFileToDestinationDirectoryWithRename({
+      sourceFilePath: path.join(__dirname, 'src/style1.css'),
+      destinationDirectory: path.join(__dirname, 'dist'),
+      destinationName: 'renamed-style1.css',
+    }),
+  }),
+);
+
+task('copy:verify', done => {
+  const expected = ['dist/renamed-style1.css', 'dist/copied/clippy.jpg', 'dist/copied/style1.css'];
+  const missing = expected.filter(file => !fs.existsSync(path.join(__dirname, file)));
+  if (missing.length) {
+    done(new Error(`Missing expected copied files: ${missing.join(', ')}`));
+  }
+  logger.info('All expected files copied successfully');
+  done();
+});
+
+task('copy:all', series('copy', 'copy:instructions', 'copy:verify'));
+
+// Lump bundle and the other random tasks under "test" since they're really tests
+task('test', series(parallel('test:jest', 'customNodeTask'), 'bundle', 'tar', 'copy:all'));
+
+task(
+  'watch1',
+  parallel(
+    () => watch(['./src/**/*.js'], pth => console.log('js update', pth)),
+    () => watch(['./src/**/*.ts'], pth => console.log('ts update', pth)),
+  ),
+);
+
+task('watch2', () => {
   const watcher = watch(['./src/**/*.js']);
   watcher.on('change', (evt, file) => {
     console.log(file, 'is changed', evt);
   });
 });
 
-task('test', jestTask());
-
-task('lint', eslintTask());
-
-task('api', apiExtractorVerifyTask({}));
-task('api:update', apiExtractorUpdateTask({}));
+task('start', webpackDevServerTask());

packages/just-example-lib/package.json

@@ -3,19 +3,40 @@
   "version": "1.0.0",
   "private": true,
   "license": "MIT",
+  "type": "commonjs",
   "description": "E2E test for running a task with local just-scripts",
   "main": "index.js",
   "scripts": {
     "api": "just-scripts api",
     "api:update": "just-scripts api:update",
     "build": "just-scripts build",
     "lint": "just-scripts lint",
+    "start": "just-scripts start",
     "test": "just-scripts test"
   },
   "devDependencies": {
+    "@microsoft/api-extractor": "catalog:dev",
     "@microsoft/just-internal-scripts": "workspace:^",
+    "autoprefixer": "catalog:dev",
+    "css-loader": "^7.1.4",
+    "esbuild": "catalog:dev",
+    "eslint": "catalog:dev",
+    "file-loader": "^6.2.0",
+    "fork-ts-checker-webpack-plugin": "catalog:dev",
+    "html-webpack-plugin": "catalog:dev",
+    "jest": "catalog:dev",
     "just-scripts": "workspace:^",
+    "postcss": "catalog:dev",
+    "postcss-loader": "^8.2.1",
+    "sass": "catalog:dev",
+    "sass-loader": "^17.0.0",
+    "style-loader": "^4.0.0",
+    "tar-fs": "catalog:dev",
+    "ts-loader": "^9.6.0",
     "ts-node": "catalog:dev",
-    "typescript": "catalog:dev"
+    "typescript": "catalog:dev",
+    "webpack": "catalog:dev",
+    "webpack-cli": "^7.0.3",
+    "webpack-dev-server": "^5.2.4"
   }
 }

packages/just-example-lib/src/customTask.ts

@@ -0,0 +1,3 @@
+import path from 'path';
+import fs from 'fs';
+export const packageJson = fs.readFileSync(path.resolve(__dirname, '../package.json'), 'utf-8');

packages/just-example-lib/src/index.ts

@@ -1 +1,16 @@
-export const a = 5;
+import clippy from './clippy.jpg';
+import './style1.css';
+// style2.scss.ts is created by the sass task
+import './style2.scss';
+
+export { sub } from './sub/sub';
+
+export const sample = 5;
+
+const root = document.createElement('div');
+root.innerHTML = `
+  <h1>Hello, world!</h1>
+  <button>button</button>
+  <img src="${clippy}" alt="Clippy" />
+`;
+document.body.appendChild(root);

packages/just-example-lib/src/style1.css

@@ -0,0 +1,7 @@
+body {
+  color: blue;
+}
+
+h1 {
+  font-size: 10rem;
+}

packages/just-example-lib/src/style2.scss

@@ -0,0 +1,7 @@
+$primary-color: #3498db;
+
+button {
+  background-color: $primary-color;
+  color: white;
+  font-size: 3rem;
+}

packages/just-example-lib/src/sub/sub.ts

@@ -0,0 +1 @@
+export const sub = 'sub';

packages/just-example-lib/src/types.d.ts

@@ -0,0 +1,6 @@
+declare module '*.jpg' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.css' {}