sku 12.1.2 → 12.3.0

package/CHANGELOG.md

@@ -1,5 +1,66 @@
 # sku
 
+## 12.3.0
+
+### Minor Changes
+
+- Allow importing external CSS from `node_modules`. ([#861](https://github.com/seek-oss/sku/pull/861))
+
+  CSS from third-party dependencies can be loaded using a side-effect import, e.g.
+
+  ```tsx
+  import { SomeComponent } from 'some-package';
+
+  import 'some-package/dist/styles.css';
+
+  export const MyComponent = () => {
+    return <SomeComponent>{/* ... */}</SomeComponent>;
+  };
+  ```
+
+## 12.2.0
+
+### Minor Changes
+
+- Export internal Jest configuration as a [preset](https://jestjs.io/docs/configuration#preset-string) under `sku/config/jest`. This allows consumers to debug tests in their IDE by specifying the preset in their `jest.config.js`: ([#850](https://github.com/seek-oss/sku/pull/850))
+
+  ```js
+  /** @type {import('jest').Config} */
+  module.exports = {
+    preset: 'sku/config/jest',
+  };
+  ```
+
+- `srcPaths` no longer affects `tsconfig.json#include`. Instead, you can use the [`dangerouslySetTSConfig`][dangerous] option to have more control over which files are included in the type checking process. ([#848](https://github.com/seek-oss/sku/pull/848))
+
+  Previously, sku managed the `include` field in `tsconfig.json`, but this was problematic for projects that wanted more fine grained control over what was included and/or excluded from compilation.
+
+  > **Note**: If you were previously using [`srcPaths`][srcpaths] for this purpose, you should remove the paths which are not source files.
+
+  [dangerous]: https://seek-oss.github.io/sku/#/./docs/configuration?id=dangerouslysettsconfig
+  [srcpaths]: https://seek-oss.github.io/sku/#/./docs/configuration?id=srcpaths
+
+- Update `tsconfig.json` options to match the latest version of the TypeScript compiler. ([#844](https://github.com/seek-oss/sku/pull/844))
+
+### Patch Changes
+
+- Upgrade to TypeScript 5.1 ([#844](https://github.com/seek-oss/sku/pull/844))
+
+- Update dependency `eslint-config-seek`. ([#844](https://github.com/seek-oss/sku/pull/844))
+
+  This reverts [the autofix for a Cypress rule][rule] and [improves the performance][eslint] of linting TypeScript files.
+
+  [rule]: https://github.com/seek-oss/eslint-config-seek/releases/tag/v11.2.1
+  [eslint]: https://github.com/seek-oss/eslint-config-seek/releases/tag/v11.3.0
+
+- The presence of a `sku.config.js` file previously had an effect on what was included in the `tsconfig.json#include` array. With the removal of the default `include` array, this is no longer the case and you might see a TypeScript error like this: ([#848](https://github.com/seek-oss/sku/pull/848))
+
+  ```
+  error TS18003: No inputs were found in config file '/path/to/project/tsconfig.json'. Specified 'include' paths were '["**/*"]' and 'exclude' paths were '[]'.
+  ```
+
+  If your project contains only JavaScript files and you see the above error, you should rename `sku.config.js` to `sku.config.ts` and the error will go away.
+
 ## 12.1.2
 
 ### Patch Changes

package/config/jest/{jestConfig.js → jest-preset.js}

@@ -1,13 +1,14 @@
 const escapeRegex = require('escape-string-regexp');
 const { cwd } = require('../../lib/cwd');
-const { paths, rootResolution } = require('../../context');
+const { paths, rootResolution, jestDecorator } = require('../../context');
+
 const slash = '[/\\\\]'; // Cross-platform path delimiter regex
 const compilePackagesRegex = paths.compilePackages
   .map((pkg) => `.*${escapeRegex(pkg)}`)
   .join('|');
 
 /** @type {import('jest').Config} */
-module.exports = {
+module.exports = jestDecorator({
   testEnvironment: 'jsdom',
   setupFilesAfterEnv: paths.setupTests,
   prettierPath: require.resolve('prettier'),
@@ -41,4 +42,4 @@ module.exports = {
     require.resolve('jest-watch-typeahead/filename'),
     require.resolve('jest-watch-typeahead/testname'),
   ],
-};
+});

package/config/storybook/storybookWebpackConfig.js

@@ -26,7 +26,8 @@ module.exports = ({ config }, { isDevServer }) => {
           : [previousExclude]), // Ensure we don't clobber any existing exclusions
         ...paths.src,
         ...paths.compilePackages.map(resolvePackage),
-        /\.vanilla\.css$/,
+        /\.vanilla\.css$/, // Vanilla Extract virtual modules
+        /\.css$/, // external CSS
       ];
     });
   }

package/config/typescript/tsconfig.js

@@ -1,19 +1,7 @@
 const { cwd } = require('../../lib/cwd');
-const { paths, rootResolution } = require('../../context');
-const path = require('path');
+const { rootResolution, tsconfigDecorator } = require('../../context');
 
 module.exports = () => {
-  const includePaths = paths.src;
-
-  if (paths.appSkuConfigPath && paths.appSkuConfigPath.endsWith('.ts')) {
-    // If the config file is in TypeScript, it needs to be included in the tsconfig
-    includePaths.push(paths.appSkuConfigPath);
-  } else {
-    // If it isn't, the placeholder file needs to be included so we don't break JS only projects.
-    // See the comments in placeholder.ts
-    includePaths.push(path.join(__dirname, '../../lib/placeholder.ts'));
-  }
-
   const config = {
     compilerOptions: {
       // This flag allows tsc to be invoked directly by VS Code (via Cmd+Shift+B),
@@ -24,25 +12,34 @@ module.exports = () => {
       // Fixes https://github.com/cypress-io/cypress/issues/1087
       skipLibCheck: true,
 
-      esModuleInterop: true,
+      // When dependencies have `type: module` TypeScript doesn't know how to resolve them,
+      // so we need to set this to `bundler` or `node`
+      moduleResolution: 'bundler',
+      // This is required by `bundler` and for dynamic `import()`
+      module: 'es2022',
+
+      // resolution-related
+      allowImportingTsExtensions: true,
       allowSyntheticDefaultImports: true,
+      esModuleInterop: true,
+      isolatedModules: true,
       resolveJsonModule: true,
-      noUnusedLocals: true,
+
+      // misc
       strict: true,
-      jsx: 'preserve',
-      lib: ['dom', 'es2019'],
-      target: 'es5',
+      forceConsistentCasingInFileNames: true,
+      jsx: 'react-jsx',
+      lib: ['dom', 'es2022'],
+      target: 'es2022',
     },
-    include: includePaths,
   };
 
   if (rootResolution) {
     config.compilerOptions.paths = {
       '*': ['*'],
     };
-
     config.compilerOptions.baseUrl = cwd();
   }
 
-  return config;
+  return tsconfigDecorator(config);
 };

package/config/webpack/plugins/sku-webpack-plugin/index.js

@@ -5,7 +5,7 @@ const { VanillaExtractPlugin } = require('@vanilla-extract/webpack-plugin');
 const {
   makeJsLoaders,
   makeCssLoaders,
-  makeVanillaCssLoaders,
+  makeExternalCssLoaders,
   makeSvgLoaders,
   TYPESCRIPT,
   JAVASCRIPT,
@@ -148,18 +148,35 @@ class SkuWebpackPlugin {
           }),
       },
       {
-        // All CSS created by vanilla-extract
-        test: /\.vanilla.css$/i,
-        // Don't process vanilla files from Playroom as they are handled separately.
-        // Virtual file paths will look more realistic in the future allowing
-        // more standard handling of include/exclude path matching.
-        exclude: /node_modules\/playroom/,
-        use: makeVanillaCssLoaders({
-          isProductionBuild,
-          MiniCssExtractPlugin,
-          hot,
-          browserslist,
-        }),
+        test: /\.css$/i,
+        oneOf: [
+          {
+            // All CSS created by vanilla-extract
+            test: /\.vanilla\.css$/i,
+            // Don't process vanilla files from Playroom as they are handled separately.
+            // Virtual file paths will look more realistic in the future allowing
+            // more standard handling of include/exclude path matching.
+            exclude: /node_modules\/playroom/,
+            use: makeExternalCssLoaders({
+              isProductionBuild,
+              MiniCssExtractPlugin,
+              hot,
+              browserslist,
+            }),
+          },
+          {
+            test: /\.css$/i,
+            include: /node_modules/,
+            exclude: /node_modules\/playroom/,
+            use: makeExternalCssLoaders({
+              target,
+              isProductionBuild,
+              MiniCssExtractPlugin,
+              hot,
+              browserslist,
+            }),
+          },
+        ],
       },
       {
         test: IMAGE,

package/config/webpack/utils/loaders.js

@@ -91,18 +91,18 @@ const makeCssLoaders = (options = {}) => {
           },
         ]
       : []),
-
     {
       loader: require.resolve('less-loader'),
     },
   ];
 };
 
-const makeVanillaCssLoaders = (options = {}) => {
-  const { isProductionBuild, MiniCssExtractPlugin, browserslist } = options;
+const makeExternalCssLoaders = (options = {}) => {
+  const { target, isProductionBuild, MiniCssExtractPlugin, browserslist } =
+    options;
 
   return [
-    MiniCssExtractPlugin.loader,
+    ...(!target || target === 'browser' ? [MiniCssExtractPlugin.loader] : []),
     {
       loader: require.resolve('css-loader'),
       options: {
@@ -162,6 +162,6 @@ const makeSvgLoaders = () => [
 module.exports = {
   makeJsLoaders,
   makeCssLoaders,
-  makeVanillaCssLoaders,
+  makeExternalCssLoaders,
   makeSvgLoaders,
 };

package/context/configSchema.js

@@ -117,6 +117,9 @@ module.exports = validator.compile({
     type: 'array',
     items: 'string',
   },
+  storybookStoryStore: {
+    type: 'boolean',
+  },
   target: {
     type: 'string',
   },
@@ -162,6 +165,9 @@ module.exports = validator.compile({
   dangerouslySetESLintConfig: {
     type: 'function',
   },
+  dangerouslySetTSConfig: {
+    type: 'function',
+  },
   supportedBrowsers: {
     type: 'array',
     items: {
@@ -201,7 +207,4 @@ module.exports = validator.compile({
   externalizeNodeModules: {
     type: 'boolean',
   },
-  storybookStoryStore: {
-    type: 'boolean',
-  },
 });

package/context/defaultSkuConfig.js

@@ -26,6 +26,7 @@ module.exports = {
   storybookPort: 8081,
   storybookTarget: 'dist-storybook',
   storybookAddons: [],
+  storybookStoryStore: true,
   initialPath: null,
   public: 'public',
   publicPath: '/',
@@ -37,6 +38,7 @@ module.exports = {
   dangerouslySetWebpackConfig: defaultDecorator,
   dangerouslySetJestConfig: defaultDecorator,
   dangerouslySetESLintConfig: defaultDecorator,
+  dangerouslySetTSConfig: defaultDecorator,
   supportedBrowsers,
   orderImports: false,
   cspEnabled: false,
@@ -48,5 +50,4 @@ module.exports = {
   skipPackageCompatibilityCompilation: [],
   persistentCache: true,
   externalizeNodeModules: false,
-  storybookStoryStore: true,
 };

package/context/index.js

@@ -188,11 +188,13 @@ module.exports = {
   storybookPort: skuConfig.storybookPort,
   storybookTarget: skuConfig.storybookTarget,
   storybookAddons: skuConfig.storybookAddons,
+  storybookStoryStore: skuConfig.storybookStoryStore,
   polyfills: skuConfig.polyfills,
   initialPath,
   webpackDecorator: skuConfig.dangerouslySetWebpackConfig,
   jestDecorator: skuConfig.dangerouslySetJestConfig,
   eslintDecorator: skuConfig.dangerouslySetESLintConfig,
+  tsconfigDecorator: skuConfig.dangerouslySetTSConfig,
   routes: normalizedRoutes,
   sites,
   environments: skuConfig.environments,
@@ -214,5 +216,4 @@ module.exports = {
     skuConfig.skipPackageCompatibilityCompilation,
   persistentCache: skuConfig.persistentCache,
   externalizeNodeModules: skuConfig.externalizeNodeModules,
-  storybookStoryStore: skuConfig.storybookStoryStore,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sku",
-  "version": "12.1.2",
+  "version": "12.3.0",
   "description": "Front-end development toolkit, powered by Webpack, Babel, CSS Modules, Less and Jest",
   "main": "index.js",
   "bin": {
@@ -79,7 +79,7 @@
     "esbuild-register": "^3.3.3",
     "escape-string-regexp": "^4.0.0",
     "eslint": "^8.41.0",
-    "eslint-config-seek": "^11.2.0",
+    "eslint-config-seek": "^11.3.1",
     "exception-formatter": "^2.1.2",
     "express": "^4.16.3",
     "fast-glob": "^3.2.5",
@@ -117,7 +117,7 @@
     "terser-webpack-plugin": "^5.1.4",
     "traverse": "^0.6.6",
     "tree-kill": "^1.2.1",
-    "typescript": "~5.0.0",
+    "typescript": "~5.1.0",
     "validate-npm-package-name": "^5.0.0",
     "webpack": "^5.52.0",
     "webpack-bundle-analyzer": "^4.6.1",

package/scripts/test.js

@@ -1,21 +1,23 @@
+const path = require('path');
+const debug = require('debug');
 const jest = require('jest');
 
 const isCI = require('../lib/isCI');
-const baseJestConfig = require('../config/jest/jestConfig');
 const { argv } = require('../config/args');
-const { jestDecorator } = require('../context');
-
 const { runVocabCompile } = require('../lib/runVocab');
 
+const log = debug('sku:jest');
 // https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#configuring-your-testing-environment
 process.env.IS_REACT_ACT_ENVIRONMENT = true;
 
 (async () => {
   await runVocabCompile();
 
-  const jestConfig = jestDecorator(baseJestConfig);
+  // https://jestjs.io/docs/configuration#preset-string
+  const jestPreset = require.resolve('../config/jest/jest-preset');
+  log(`Using Jest preset at ${jestPreset}`);
 
-  argv.push('--config', JSON.stringify(jestConfig));
+  argv.push('--preset', path.dirname(jestPreset));
 
   if (isCI) {
     argv.push('--ci');

package/sku-types.d.ts

@@ -102,20 +102,27 @@ export interface SkuConfig {
   cspExtraScriptSrcHosts?: string[];
 
   /**
-   * Similar to {@link dangerouslySetWebpackConfig} but for eslint config.
+   * Similar to {@link dangerouslySetWebpackConfig}, but for ESLint config.
    *
    * @link https://seek-oss.github.io/sku/#/./docs/configuration?id=dangerouslyseteslintconfig
    */
   dangerouslySetESLintConfig?: (existingESLintConfig: any) => any;
 
   /**
-   * Similar to {@link dangerouslySetWebpackConfig} but for jest config. Make sure {@link setupTests} definitely doesn’t cover your needs before using.
+   * Similar to {@link dangerouslySetWebpackConfig}, but for Jest config. Make sure {@link setupTests} definitely doesn’t cover your needs before using.
    * Please speak with the `sku-support` group before using.
    *
    * @link https://seek-oss.github.io/sku/#/./docs/configuration?id=dangerouslysetjestconfig
    */
   dangerouslySetJestConfig?: (existingJestConfig: any) => any;
 
+  /**
+   * Similar to {@link dangerouslySetWebpackConfig}, but for TypeScript (`tsconfig.json`).
+   *
+   * @link https://seek-oss.github.io/sku/#/./docs/configuration?id=dangerouslysettsconfig
+   */
+  dangerouslySetTSConfig?: (existingTSConfig: any) => any;
+
   /**
    * This function provides a way to override the webpack config after sku has created it.
    * Ideally, this setting is not needed and only used for experimenting/debugging. If you require webpack features not currently supported by sku please speak to the `sku-support` group.
@@ -242,16 +249,6 @@ export interface SkuConfig {
    */
   persistentCache?: boolean;
 
-  /**
-   * Allows disabling Storybook's `storyStoreV7` feature flag. This will result in all stories being
-   * loaded upfront instead of on demand. Disabling this feature will allow stories that use the
-   * deprecated `storiesOf` API to work, however it's highly recommended to migrate off `storiesOf`
-   * to the Component Story Format (CSF) instead.
-   * @default true
-   * @link https://seek-oss.github.io/sku/#/./docs/configuration?id=storybookStoryStore
-   */
-  storybookStoryStore?: boolean;
-
   /**
    * An array of polyfills to be included into all client entry points.
    *
@@ -405,6 +402,16 @@ export interface SkuConfig {
    */
   storybookPort?: number;
 
+  /**
+   * Allows disabling Storybook's `storyStoreV7` feature flag. This will result in all stories being
+   * loaded upfront instead of on demand. Disabling this feature will allow stories that use the
+   * deprecated `storiesOf` API to work, however it's highly recommended to migrate off `storiesOf`
+   * to the Component Story Format (CSF) instead.
+   * @default true
+   * @link https://seek-oss.github.io/sku/#/./docs/configuration?id=storybookStoryStore
+   */
+  storybookStoryStore?: boolean;
+
   /**
    * The directory `sku build-storybook` will output files to.
    *

package/template/src/App/App.tsx

@@ -2,7 +2,7 @@ import 'braid-design-system/reset';
 
 import { BraidProvider } from 'braid-design-system';
 import apac from 'braid-design-system/themes/apac';
-import React, { StrictMode } from 'react';
+import { StrictMode } from 'react';
 
 import { NextSteps } from './NextSteps';
 

package/template/src/App/NextSteps.tsx

@@ -8,7 +8,6 @@ import {
   Stack,
   List,
 } from 'braid-design-system';
-import React from 'react';
 
 import * as styles from './NextSteps.css';
 

package/template/src/client.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { hydrateRoot } from 'react-dom/client';
 
 import App from './App/App';

package/template/src/render.tsx

@@ -1,9 +1,8 @@
-import React from 'react';
 import { renderToString } from 'react-dom/server';
 import type { Render } from 'sku';
 
 import App from './App/App';
-import { ClientContext } from './types';
+import type { ClientContext } from './types';
 
 interface RenderContext {
   appHtml: string;

package/lib/placeholder.ts

@@ -1,7 +0,0 @@
-/**
- * This is a placeholder file that provides for at least one TypeScript file in the project.
- *
- * Since all projects get a tsconfig.json now, having zero TS files would cause an error.
- *
- * Support for purely JS projects will be removed in a future major version, and this file can be removed.
- */