Switch all Node tooling from Gulp to Webpack, with needed code changes

- Remove gulp code and docs
- Add base CSS & SCSS processing in Webpack
- Make sure Sass files use paths that can be resolved by Webpack
- Use faster source map generation
- Clean up build scripts
- Make sure Storybook can process Sass
- Switch away from web fonts (more work needed)

.circleci/config.yml

@@ -46,7 +46,7 @@ jobs:
           paths:
             - node_modules
           key: frontend-v1-{{ checksum "package-lock.json" }}
-      - run: npm run dist
+      - run: npm run build
       # Save static files for subsequent jobs.
       - persist_to_workspace:
           root: ~/project
@@ -116,7 +116,7 @@ jobs:
       - run: cd /usr/local/ && sudo tar --strip-components 1 -xzf ~/node-v14.17.5-linux-x64.tar.gz
       - run: pip install --user wheel boto3
       - run: npm install
-      - run: npm run dist
+      - run: npm run build
       - run: PYTHONPATH=. python scripts/nightly/get_version.py > __init__.py
       - run: mv __init__.py wagtail/__init__.py
       - run: python setup.py bdist_wheel

.eslintignore

@@ -3,9 +3,7 @@ node_modules
 **/lib/
 public/
 coverage/
-gulp/
 **/vendor/
-gulpfile.js
 docs/_build
 wagtail/admin/static
 wagtail/documents/static

.squash.yml

@@ -9,7 +9,7 @@ deployments:
       - cd /code
     post_build_steps:
       - npm install --no-save --no-audit --progress=false
-      - npm run dist
+      - npm run build
       - pip install /code
       - mkdir /myproject
       - cd /myproject

client/.storybook/main.js

@@ -2,15 +2,33 @@ module.exports = {
   "stories": [
     "../src/**/*.stories.@(js|jsx|ts|tsx)"
   ],
-  "addons": [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials"
-  ],
   "core": {
     "builder": "webpack5"
   },
-  "webpackFinal": (config) => {
+  webpackFinal: (config) => {
     config.resolve.fallback.crypto = false;
+
+    const rules = [
+      {
+        test: /\.(scss|css)$/,
+        use: [
+          "style-loader",
+          "css-loader",
+          {
+            loader: "postcss-loader",
+            options: {
+              postcssOptions: {
+                plugins: ["autoprefixer", "cssnano"],
+              },
+            },
+          },
+          "sass-loader",
+        ],
+      },
+    ];
+
+    config.module.rules = config.module.rules.concat(rules);
+
     return config;
   },
-}
+};

client/.storybook/preview.js

@@ -1,5 +1,8 @@
 import '../tests/stubs';
 
+import '../../wagtail/admin/static_src/wagtailadmin/scss/core.scss';
+import '../../wagtail/admin/static_src/wagtailadmin/scss/sidebar.scss';
+
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
   controls: {

client/scss/_tools.scss

@@ -5,7 +5,6 @@ No CSS should be produced by these files.
 
 @import 'tools/functions.breakpoints';
 @import 'tools/mixins.breakpoints';
-@import 'tools/mixins.fonts';
 @import 'tools/mixins.general';
 @import 'tools/mixins.grid';
 @import 'tools/various.colors';

client/scss/components/_bulk_actions.scss

@@ -98,7 +98,7 @@
             color: $color-teal-light;
             background-color: transparent;
             border: 0;
-            font-family: Open Sans, Arial, sans-serif;
+            font-family: $font-sans;
             padding: 0;
         }
 

client/scss/components/_button.scss

@@ -7,7 +7,7 @@
 // input[type=button],
 .button {
     border-radius: 3px;
-    font-family: Open Sans,Arial,sans-serif;
+    font-family: $font-sans;
     width: auto;
     height: 2.4em;
     padding: 0 1em;

client/scss/components/_forms.scss

@@ -47,7 +47,7 @@
 //     box-sizing: border-box;
 //     border-radius: 6px;
 //     width: 100%;
-//     font-family: Open Sans,Arial,sans-serif;
+//     font-family: $font-sans;
 //     border: 1px solid $color-input-border;
 //     padding: 0.9em 1.2em;
 //     background-color: $color-fieldset-hover;

client/scss/components/_icons.scss

@@ -1,8 +1,8 @@
 @use "sass:string";
-// The wagtail font isn't available in WOFF2, so a @font-face is set here without a mixin.
+
 @font-face {
     font-family: 'wagtail';
-    src: url('#{$font-root}wagtail.woff') format('woff');
+    src: url('../fonts/wagtail.woff') format('woff');
     font-weight: normal;
     font-style: normal;
 }
@@ -89,7 +89,7 @@ svg.icon-spinner { // TODO: leave only class when iconfont styles are removed
 }
 
 .icon-horizontalrule:before {
-    font-family: Open Sans, Arial, sans-serif;
+    font-family: $font-sans;
 }
 
 

client/scss/elements/_forms.scss

@@ -81,7 +81,7 @@ select,
     box-sizing: border-box;
     border-radius: 6px;
     width: 100%;
-    font-family: Open Sans,Arial,sans-serif;
+    font-family: $font-sans;
     border: 1px solid $color-input-border;
     padding: 0.9em 1.2em;
     background-color: $color-fieldset-hover;

client/scss/elements/_typography.scss

@@ -1,13 +1,6 @@
-@include webfont(Open Sans, opensans-light, 300, normal);
-@include webfont(Open Sans, opensans-regular, 400, normal);
-@include webfont(Open Sans, opensans-semibold, 600, normal);
-@include webfont(Open Sans, opensans-bold, 700, normal);
-@include webfont(Roboto Slab, robotoslab-regular, 400, normal);
-@include webfont(Roboto Slab, robotoslab-bold, 700, normal);
-
 body {
     -webkit-font-smoothing: antialiased; // Do not remove!
-    font-family: Open Sans, Arial, sans-serif;
+    font-family: $font-sans;
     font-size: 85%;
     line-height: 1.5em;
     color: $color-text-base;
@@ -38,7 +31,7 @@ h1 {
 h2 {
     text-transform: uppercase;
     font-size: 1.3em;
-    font-family: Open Sans, Arial, sans-serif;
+    font-family: $font-sans;
     font-weight: 600;
     color: $color-grey-2;
 }
@@ -65,7 +58,7 @@ code {
 
 kbd {
     border-radius: 3px;
-    font-family: Open Sans, Arial, sans-serif;
+    font-family: $font-sans;
     border: 1px solid $color-grey-2;
     border-color: rgba(0, 0, 0, 0.2);
     padding: 0.3em 0.5em;

client/scss/settings/_variables.scss

@@ -6,9 +6,7 @@
 // compiled CSS files are used.
 // */
 
-$static-root: '../../';
-$images-root: $static-root + 'wagtailadmin/images/';
-$font-root: '../../wagtailadmin/fonts/';
+$images-root: '../images/';
 
 // grid settings
 $grid-columns: 12;
@@ -97,8 +95,7 @@ $system-color-link-text: LinkText;
 $system-color-button-text: ButtonText;
 
 // Fonts
-$font-sans: Open Sans, Arial, sans-serif;
-$font-serif: Roboto Slab, Georgia, serif;
+$font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
 // Legacy icon font, to be removed in the near future.
 $font-wagtail-icons: wagtail;
 

client/scss/tools/_mixins.fonts.scss

@@ -1,23 +0,0 @@
-/*
-NB: Due to Wagtail's browser support the following @font-face formats are required:
-- WOFF2 For modern browsers
-
-This example is all we need now:
-
-@font-face {
-  font-family: 'MyWebFont';
-  src: url('myfont.woff2') format('woff2');
-}
-
-See https://css-tricks.com/snippets/css/using-font-face/ for more information.
-
-*/
-
-@mixin webfont($fontname, $filestub, $weight, $style:normal) {
-    @font-face {
-        font-family: '#{$fontname}';
-        src: url('#{$font-root}#{$filestub}.woff2') format('woff2');
-        font-weight: $weight;
-        font-style: $style;
-    }
-}

client/src/components/CommentApp/main.scss

@@ -40,7 +40,7 @@ $box-padding: 10px;
     }
 
     textarea {
-        font-family: 'Open Sans', sans-serif;
+        font-family: $font-sans;
         margin: 0;
         padding: 10px;
         width: 100%;
@@ -140,7 +140,7 @@ $box-padding: 10px;
     top: 30px;
     right: 30px;
     z-index: 50;
-    font-family: 'Open Sans', sans-serif;
+    font-family: $font-sans;
     pointer-events: none;
 }
 

client/src/components/CommentApp/utils/storybook.tsx

@@ -20,9 +20,6 @@ import { defaultStrings } from '../main';
 
 import CommentComponent from '../components/Comment/index';
 
-// Requires Wagtail static to be built
-import '../../../../../wagtail/admin/static/wagtailadmin/css/core.css';
-
 export function RenderCommentsForStorybook({
   store,
   author,

client/src/components/Draftail/Draftail.scss

@@ -12,7 +12,7 @@ $draftail-editor-background: transparent;
 $draftail-toolbar-radius: 3px;
 $draftail-toolbar-icon-size: 1em;
 
-$draftail-editor-font-family: $font-serif;
+$draftail-editor-font-family: $font-sans;
 
 @import '../../../../node_modules/draft-js/dist/Draft';
 @import '../../../../node_modules/draftail/lib/index';

client/src/components/Hallo/_halloeditor.scss

@@ -1,5 +1,5 @@
 .halloeditor {
-    font-family: $font-serif;
+    font-family: $font-sans;
     padding-top: 4em;
     min-height: 50px;
     overflow: hidden;

client/src/components/StreamField/scss/_variables.scss

@@ -33,4 +33,4 @@ $screen-xs-max: 799px !default;
 $screen-sm-min: 800px !default;
 $screen-l-min: 1075px !default;
 $add-panel-gutter: 8px !default;
-$font-sans: 'Open Sans', sans-serif !default;
+$font-sans: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji" !default;

client/webpack.config.js

@@ -1,19 +1,20 @@
 const path = require('path');
+const CopyPlugin = require('copy-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 // Generates a path to the output bundle to be loaded in the browser.
-const getOutputPath = (app, filename) => {
-  let appLabel = `wagtail${app}`;
-
-  // Exceptions
-  if (app === 'documents') {
-    appLabel = 'wagtaildocs';
-  } else if (app === 'contrib/table_block') {
-    appLabel = 'table_block';
-  } else if (app === 'contrib/typed_table_block') {
-    appLabel = 'typed_table_block';
+const getOutputPath = (app, folder, filename) => {
+  const exceptions = {
+    'documents': 'wagtaildocs',
+    'contrib/table_block': 'table_block',
+    'contrib/typed_table_block': 'typed_table_block',
+    'contrib/styleguide': 'wagtailstyleguide',
+    'contrib/modeladmin': 'wagtailmodeladmin',
   }
 
-  return path.join('wagtail', app, 'static', appLabel, 'js', filename);
+  const appLabel = exceptions[app] || `wagtail${app}`;
+
+  return path.join('wagtail', app, 'static', appLabel, folder, filename);
 };
 
 // Mapping from package name to exposed global variable.
@@ -25,7 +26,9 @@ const exposedDependencies = {
   'draft-js': 'DraftJS',
 };
 
-module.exports = function exports() {
+module.exports = function exports(env, argv) {
+  const isProduction = argv.mode === 'production';
+
   const entrypoints = {
     'admin': [
       'collapsible',
@@ -83,7 +86,7 @@ module.exports = function exports() {
     moduleNames.forEach(moduleName => {
       entry[moduleName] = {
         import: [`./client/src/entrypoints/${appName}/${moduleName}.js`],
-        filename: getOutputPath(appName, moduleName) + '.js',
+        filename: getOutputPath(appName, 'js', moduleName) + '.js',
       };
 
       // Add polyfills to all bundles except userbar
@@ -96,11 +99,41 @@ module.exports = function exports() {
     });
   }
 
+  const sassEntry = {};
+  sassEntry[getOutputPath('admin', 'css', 'core')] = path.resolve('wagtail', 'admin', 'static_src', 'wagtailadmin', 'scss', 'core.scss');
+  sassEntry[getOutputPath('admin', 'css', 'layouts/404')] = path.resolve('wagtail', 'admin', 'static_src', 'wagtailadmin', 'scss', 'layouts', '404.scss');
+  sassEntry[getOutputPath('admin', 'css', 'layouts/account')] = path.resolve('wagtail', 'admin', 'static_src', 'wagtailadmin', 'scss', 'layouts', 'account.scss');
+  sassEntry[getOutputPath('admin', 'css', 'layouts/compare-revisions')] = path.resolve('wagtail', 'admin', 'static_src', 'wagtailadmin', 'scss', 'layouts', 'compare-revisions.scss');
+  sassEntry[getOutputPath('admin', 'css', 'layouts/home')] = path.resolve('wagtail', 'admin', 'static_src', 'wagtailadmin', 'scss', 'layouts', 'home.scss');
+  sassEntry[getOutputPath('admin', 'css', 'layouts/login')] = path.resolve('wagtail', 'admin', 'static_src', 'wagtailadmin', 'scss', 'layouts', 'login.scss');
+  sassEntry[getOutputPath('admin', 'css', 'layouts/page-editor')] = path.resolve('wagtail', 'admin', 'static_src', 'wagtailadmin', 'scss', 'layouts', 'page-editor.scss');
+  sassEntry[getOutputPath('admin', 'css', 'layouts/report')] = path.resolve('wagtail', 'admin', 'static_src', 'wagtailadmin', 'scss', 'layouts', 'report.scss');
+  sassEntry[getOutputPath('admin', 'css', 'layouts/workflow-edit')] = path.resolve('wagtail', 'admin', 'static_src', 'wagtailadmin', 'scss', 'layouts', 'workflow-edit.scss');
+  sassEntry[getOutputPath('admin', 'css', 'layouts/workflow-progress')] = path.resolve('wagtail', 'admin', 'static_src', 'wagtailadmin', 'scss', 'layouts', 'workflow-progress.scss');
+  // sassEntry[getOutputPath('admin', 'css', 'normalize')] = path.resolve('wagtail', 'admin', 'static_src', 'wagtailadmin', 'css', 'normalize.css');
+  sassEntry[getOutputPath('admin', 'css', 'panels/draftail')] = path.resolve('wagtail', 'admin', 'static_src', 'wagtailadmin', 'scss', 'panels', 'draftail.scss');
+  sassEntry[getOutputPath('admin', 'css', 'panels/hallo')] = path.resolve('wagtail', 'admin', 'static_src', 'wagtailadmin', 'scss', 'panels', 'hallo.scss');
+  sassEntry[getOutputPath('admin', 'css', 'panels/streamfield')] = path.resolve('wagtail', 'admin', 'static_src', 'wagtailadmin', 'scss', 'panels', 'streamfield.scss');
+  sassEntry[getOutputPath('admin', 'css', 'sidebar')] = path.resolve('wagtail', 'admin', 'static_src', 'wagtailadmin', 'scss', 'sidebar.scss');
+  sassEntry[getOutputPath('admin', 'css', 'userbar')] = path.resolve('wagtail', 'admin', 'static_src', 'wagtailadmin', 'scss', 'userbar.scss');
+  sassEntry[getOutputPath('documents', 'css', 'add-multiple')] = path.resolve('wagtail', 'documents', 'static_src', 'wagtaildocs', 'scss', 'add-multiple.scss');
+  sassEntry[getOutputPath('images', 'css', 'add-multiple')] = path.resolve('wagtail', 'images', 'static_src', 'wagtailimages', 'scss', 'add-multiple.scss');
+  sassEntry[getOutputPath('images', 'css', 'focal-point-chooser')] = path.resolve('wagtail', 'images', 'static_src', 'wagtailimages', 'scss', 'focal-point-chooser.scss');
+  sassEntry[getOutputPath('users', 'css', 'groups_edit')] = path.resolve('wagtail', 'users', 'static_src', 'wagtailusers', 'scss', 'groups_edit.scss');
+  sassEntry[getOutputPath('contrib/styleguide', 'css', 'styleguide')] = path.resolve('wagtail', 'contrib', 'styleguide', 'static_src', 'wagtailstyleguide', 'scss', 'styleguide.scss');
+  sassEntry[getOutputPath('contrib/modeladmin', 'css', 'index')] = path.resolve('wagtail', 'contrib', 'modeladmin', 'static_src', 'wagtailmodeladmin', 'scss', 'index.scss');
+  sassEntry[getOutputPath('contrib/modeladmin', 'css', 'breadcrumbs_page')] = path.resolve('wagtail', 'contrib', 'modeladmin', 'static_src', 'wagtailmodeladmin', 'scss', 'breadcrumbs_page.scss');
+  sassEntry[getOutputPath('contrib/modeladmin', 'css', 'choose_parent_page')] = path.resolve('wagtail', 'contrib', 'modeladmin', 'static_src', 'wagtailmodeladmin', 'scss', 'choose_parent_page.scss');
+  sassEntry[getOutputPath('contrib/typed_table_block', 'css', 'typed_table_block')] = path.resolve('wagtail', 'contrib', 'typed_table_block', 'static_src', 'typed_table_block', 'scss', 'typed_table_block.scss');
+
   return {
-    entry: entry,
+    entry: {
+      ...entry,
+      ...sassEntry,
+    },
     output: {
       path: path.resolve('.'),
-      publicPath: '/static/js/'
+      publicPath: '/static/',
     },
     resolve: {
       extensions: ['.ts', '.tsx', '.js'],
@@ -116,6 +149,26 @@ module.exports = function exports() {
     externals: {
       jquery: 'jQuery',
     },
+
+    plugins: [
+      new MiniCssExtractPlugin({
+        filename: '[name].css',
+      }),
+      new CopyPlugin({
+        patterns: [
+          { from: 'wagtail/admin/static_src/', to: 'wagtail/admin/static/', globOptions: { ignore: ['**/{app,scss}/**', '*.{css,txt}'] } },
+          { from: 'wagtail/documents/static_src/', to: 'wagtail/documents/static/', globOptions: { ignore: ['**/{app,scss}/**', '*.{css,txt}'] } },
+          { from: 'wagtail/embeds/static_src/', to: 'wagtail/embeds/static/', globOptions: { ignore: ['**/{app,scss}/**', '*.{css,txt}'] } },
+          { from: 'wagtail/images/static_src/', to: 'wagtail/images/static/', globOptions: { ignore: ['**/{app,scss}/**', '*.{css,txt}'] } },
+          { from: 'wagtail/search/static_src/', to: 'wagtail/search/static/', globOptions: { ignore: ['**/{app,scss}/**', '*.{css,txt}'] } },
+          { from: 'wagtail/snippets/static_src/', to: 'wagtail/snippets/static/', globOptions: { ignore: ['**/{app,scss}/**', '*.{css,txt}'] } },
+          { from: 'wagtail/users/static_src/', to: 'wagtail/users/static/', globOptions: { ignore: ['**/{app,scss}/**', '*.{css,txt}'] } },
+          { from: 'wagtail/contrib/settings/static_src/', to: 'wagtail/contrib/settings/static/', globOptions: { ignore: ['**/{app,scss}/**', '*.{css,txt}'] } },
+          { from: 'wagtail/contrib/modeladmin/static_src/', to: 'wagtail/contrib/modeladmin/static/', globOptions: { ignore: ['**/{app,scss}/**', '*.{css,txt}'] } },
+        ],
+      }),
+    ],
+
     module: {
       rules: [
         {
@@ -123,6 +176,37 @@ module.exports = function exports() {
           loader: 'ts-loader',
           exclude: /node_modules/,
         },
+        {
+          // Legacy support for font icon loading, to be removed.
+          test: /\.(woff)$/i,
+          generator: {
+            emit: false,
+            filename: 'wagtailadmin/fonts/[name][ext]',
+          },
+        },
+        {
+          test: /\.(svg)$/i,
+          type: 'asset/inline',
+        },
+        {
+          test: /\.(scss|css)$/,
+          use: [
+            MiniCssExtractPlugin.loader,
+            'css-loader',
+            {
+              loader: 'postcss-loader',
+              options: {
+                postcssOptions: {
+                  plugins: [
+                    "autoprefixer",
+                    "cssnano",
+                  ]
+                }
+              },
+            },
+            'sass-loader'
+          ],
+        },
       ].concat(Object.keys(exposedDependencies).map((name) => {
         const globalName = exposedDependencies[name];
 
@@ -148,7 +232,7 @@ module.exports = function exports() {
       splitChunks: {
         cacheGroups: {
           vendor: {
-            name: getOutputPath('admin', 'vendor'),
+            name: getOutputPath('admin', 'js', 'vendor'),
             chunks: 'initial',
             minChunks: 2,
             reuseExistingChunk: true,
@@ -158,7 +242,7 @@ module.exports = function exports() {
     },
 
     // See https://webpack.js.org/configuration/devtool/.
-    devtool: 'source-map',
+    devtool: isProduction ? false : 'eval-cheap-module-source-map',
 
     // For development mode only.
     watchOptions: {

docs/contributing/css_guidelines.rst

@@ -3,35 +3,6 @@ CSS coding guidelines
 
 Our CSS is written in `Sass <https://sass-lang.com/>`_, using the SCSS syntax.
 
-Compiling
-~~~~~~~~~
-
-The SCSS source files are compiled to CSS using the
-`gulp <https://gulpjs.com/>`_ build system.
-This requires `Node.js <https://nodejs.org>`_ to run.
-To install the libraries required for compiling the SCSS,
-run the following from the Wagtail repository root:
-
-.. code-block:: console
-
-    $ npm install --no-save
-
-
-To compile the assets, run:
-
-.. code-block:: console
-
-    $ npm run build
-
-
-Alternatively, the SCSS files can be monitored,
-automatically recompiling when any changes are observed, by running:
-
-.. code-block:: console
-
-    $ npm start
-
-
 Linting and formatting SCSS
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~
 

docs/contributing/developing.rst

@@ -268,7 +268,7 @@ The audit also states which parts of Wagtail have and haven’t been tested, how
 Compiling static assets
 ~~~~~~~~~~~~~~~~~~~~~~~
 
-All static assets such as JavaScript, CSS, images, and fonts for the Wagtail admin are compiled from their respective sources by ``gulp``. The compiled assets are not committed to the repository, and are compiled before packaging each new release. Compiled assets should not be submitted as part of a pull request.
+All static assets such as JavaScript, CSS, images, and fonts for the Wagtail admin are compiled from their respective sources by ``webpack``. The compiled assets are not committed to the repository, and are compiled before packaging each new release. Compiled assets should not be submitted as part of a pull request.
 
 To compile the assets, run:
 

gulpfile.js/config.js

@@ -1,45 +0,0 @@
-var path = require('path');
-
-var srcDir = 'static_src';
-var destDir = 'static';
-
-var App = function(dir, options) {
-    this.dir = dir;
-    this.options = options || {};
-    this.appName = this.options.appName || path.basename(dir);
-    this.sourceFiles = path.join('.', this.dir, srcDir);
-};
-App.prototype = Object.create(null);
-App.prototype.scssIncludePaths = function() {
-    return [this.sourceFiles];
-};
-App.prototype.scssSources = function() {
-    // Assume that any scss we care about is always within the expected
-    // "appname/static_url/appname/scss/" folder.
-    // NB: this requires the user to adhere to sass's underscore prefixing
-    // to tell the compiler what files are includes.
-    return path.join(this.sourceFiles, this.appName, '/scss/**/*.scss')
-};
-
-// All the Wagtail apps that contain static files
-var apps = [
-    new App(path.join('wagtail', 'admin'), {'appName': 'wagtailadmin'}),
-    new App(path.join('wagtail', 'documents'), {'appName': 'wagtaildocs'}),
-    new App(path.join('wagtail', 'embeds'), {'appName': 'wagtailembeds'}),
-    new App(path.join('wagtail', 'images'), {'appName': 'wagtailimages'}),
-    new App(path.join('wagtail', 'search'), {'appName': 'wagtailsearch'}),
-    new App(path.join('wagtail', 'snippets'), {'appName': 'wagtailsnippets'}),
-    new App(path.join('wagtail', 'users'), {'appName': 'wagtailusers'}),
-    new App(path.join('wagtail', 'contrib', 'styleguide'), {'appName': 'wagtailstyleguide'}),
-    new App(path.join('wagtail', 'contrib', 'settings'), {'appName': 'wagtailsettings'}),
-    new App(path.join('wagtail', 'contrib', 'modeladmin'), {'appName': 'wagtailmodeladmin'}),
-    new App(path.join('wagtail', 'contrib', 'typed_table_block'), {'appName': 'typed_table_block'}),
-];
-
-module.exports = {
-    apps: apps,
-    srcDir: srcDir,
-    destDir: destDir,
-    // Determines whether the pipeline is used in production or dev mode.
-    isProduction: process.env.NODE_ENV === 'production',
-};

gulpfile.js/index.js

@@ -1,7 +0,0 @@
-require('./tasks/fonts');
-require('./tasks/images');
-require('./tasks/scripts');
-require('./tasks/styles');
-require('./tasks/build');
-require('./tasks/watch');
-require('./tasks/default');

gulpfile.js/lib/rename-src-to-dest-scss.js

@@ -1,20 +0,0 @@
-var path = require('path');
-var rename = require('gulp-rename');
-var config = require('../config');
-
-/**
- * Returns a configured gulp-rename to pipe from asset sources to dest.
- * Usage: .pipe(renameSrcToDestScss())
- */
-var renameSrcToDestScss = function(log) {
-    return rename(function(filePath) {
-        if (log) console.log(filePath.dirname + path.sep + filePath.basename + filePath.extname);
-        filePath.dirname = filePath.dirname.replace(
-            path.sep + config.srcDir + path.sep,
-            path.sep + config.destDir + path.sep
-        ).replace(path.sep + "scss", path.sep + "css");
-        if (log) console.log(filePath.dirname);
-    });
-};
-
-module.exports = renameSrcToDestScss;

gulpfile.js/lib/rename-src-to-dest.js

@@ -1,19 +0,0 @@
-var path = require('path');
-var rename = require('gulp-rename');
-var config = require('../config');
-
-/**
- * Returns a configured gulp-rename to pipe from asset sources to dest.
- * Usage: .pipe(renameSrcToDest())
- */
-var renameSrcToDest = function(log) {
-    return rename(function(filePath) {
-        if (log) console.log(filePath.dirname + path.sep + filePath.basename + filePath.extname);
-        filePath.dirname = filePath.dirname.replace(
-            path.sep + config.srcDir + path.sep,
-            path.sep + config.destDir + path.sep);
-        if (log) console.log(filePath.dirname);
-    });
-};
-
-module.exports = renameSrcToDest;

gulpfile.js/lib/simplyCopy.js

@@ -1,24 +0,0 @@
-var gulp = require('gulp');
-var gutil = require('gulp-util');
-var path = require('path');
-var config = require('../config');
-var renameSrcToDest = require('../lib/rename-src-to-dest');
-
-/*
- * Simple copy task - just copoes files from the source to the destination,
- * with no compilation, minification, or other intelligence.
- */
-var simpleCopyTask = function(glob) {
-    return function() {
-        var sources = config.apps.map(function(app) {
-            return path.join(app.sourceFiles, app.appName, glob);
-        });
-
-        return gulp.src(sources, {base: '.'})
-            .pipe(renameSrcToDest())
-            .pipe(gulp.dest('.'))
-            .on('error', gutil.log);
-    };
-};
-
-module.exports = simpleCopyTask;

gulpfile.js/tasks/build.js

@@ -1,3 +0,0 @@
-var gulp = require('gulp');
-
-gulp.task('build', gulp.series('styles', 'scripts', 'images', 'fonts'));

gulpfile.js/tasks/default.js

@@ -1,3 +0,0 @@
-var gulp = require('gulp');
-
-gulp.task('default', gulp.series('build', 'watch'));

gulpfile.js/tasks/fonts.js

@@ -1,4 +0,0 @@
-var gulp = require('gulp');
-var simpleCopyTask = require('../lib/simplyCopy');
-
-gulp.task('fonts', simpleCopyTask('fonts/**/*'));

gulpfile.js/tasks/images.js

@@ -1,4 +0,0 @@
-var gulp = require('gulp');
-var simpleCopyTask = require('../lib/simplyCopy');
-
-gulp.task('images', simpleCopyTask('images/**/*'));

gulpfile.js/tasks/scripts.js

@@ -1,4 +0,0 @@
-var gulp = require('gulp');
-var simpleCopyTask = require('../lib/simplyCopy');
-
-gulp.task('scripts', simpleCopyTask('js/**/*'));

gulpfile.js/tasks/styles.js

@@ -1,84 +0,0 @@
-var path = require('path');
-var gulp = require('gulp');
-var sass = require('gulp-dart-sass');
-var postcss = require('gulp-postcss');
-var autoprefixer = require('autoprefixer');
-var cssnano = require('cssnano');
-var postcssCustomProperties = require('postcss-custom-properties');
-var postcssCalc = require('postcss-calc');
-var sourcemaps = require('gulp-sourcemaps');
-var size = require('gulp-size');
-var config = require('../config');
-var simpleCopyTask = require('../lib/simplyCopy');
-var renameSrcToDest = require('../lib/rename-src-to-dest');
-var renameSrcToDestScss = require('../lib/rename-src-to-dest-scss');
-var gutil = require('gulp-util');
-
-var flatten = function(arrOfArr) {
-    return arrOfArr.reduce(function(flat, more) {
-        return flat.concat(more);
-    }, []);
-};
-
-var autoprefixerConfig = {
-    cascade: false,
-};
-
-var cssnanoConfig = {
-    discardUnused: {
-        fontFace: false,
-    },
-    zindex: false,
-};
-
-// Copy all assets that are not CSS files.
-gulp.task('styles:assets', simpleCopyTask('css/**/!(*.css)'));
-
-gulp.task('styles:css', function() {
-    var sources = config.apps.map(function(app) {
-        return path.join(app.sourceFiles, app.appName, 'css/**/*.css');
-    });
-
-    return gulp.src(sources, {base: '.'})
-        .pipe(postcss([
-          cssnano(cssnanoConfig),
-          autoprefixer(autoprefixerConfig),
-        ]))
-        .pipe(renameSrcToDest())
-        .pipe(size({ title: 'Vendor CSS' }))
-        .pipe(gulp.dest('.'))
-        .on('error', gutil.log);
-});
-
-// For Sass files,
-gulp.task('styles:sass', function () {
-    // Wagtail Sass files include each other across applications,
-    // e.g. wagtailimages Sass files will include wagtailadmin/sass/mixins.scss
-    // Thus, each app is used as an includePath.
-    var includePaths = flatten(config.apps.map(function(app) { return app.scssIncludePaths(); }));
-
-    // Not all files in a directory need to be compiled, so each app defines
-    // its own Sass files that need to be compiled.
-    var sources = flatten(config.apps.map(function(app) { return app.scssSources(); }));
-
-    return gulp.src(sources, {base: '.'})
-        .pipe(config.isProduction ? gutil.noop() : sourcemaps.init())
-        .pipe(sass({
-            errLogToConsole: true,
-            includePaths: includePaths,
-            outputStyle: 'expanded'
-        }).on('error', sass.logError))
-        .pipe(postcss([
-          cssnano(cssnanoConfig),
-          autoprefixer(autoprefixerConfig),
-          postcssCustomProperties(),
-          postcssCalc(),
-        ]))
-        .pipe(size({ title: 'Wagtail CSS' }))
-        .pipe(config.isProduction ? gutil.noop() : sourcemaps.write())
-        .pipe(renameSrcToDestScss())
-        .pipe(gulp.dest("."))
-        .on('error', gutil.log);
-});
-
-gulp.task('styles', gulp.series('styles:sass', 'styles:css', 'styles:assets'));

gulpfile.js/tasks/watch.js

@@ -1,40 +0,0 @@
-var gulp = require("gulp");
-var path = require("path");
-var config = require("../config");
-
-const paths = config.apps.reduce(
-  (_, app) => ({
-    "styles:sass": [
-      ...(_["styles:sass"] || []),
-      path.join(app.sourceFiles, "*/scss/**"),
-    ],
-    "styles:css": [
-      ...(_["styles:css"] || []),
-      path.join(app.sourceFiles, "*/css/**"),
-    ],
-    scripts: [...(_["scripts"] || []), path.join(app.sourceFiles, "*/js/**")],
-    images: [...(_["images"] || []), path.join(app.sourceFiles, "*/images/**")],
-    fonts: [...(_["fonts"] || []), path.join(app.sourceFiles, "*/fonts/**")],
-  }),
-  {}
-);
-
-paths["styles:sass"] = [...paths["styles:sass"], "./client/**/*.scss"];
-
-var gulpOptions = {
-  cwd: path.resolve("."),
-};
-
-/*
- * Watch - Watch files, trigger tasks when they are modified
- */
-gulp.task(
-  "watch",
-  gulp.series("build", function (cb) {
-    gulp.watch(paths["styles:sass"], gulpOptions, gulp.series("styles:sass"));
-    gulp.watch(paths["styles:css"], gulpOptions, gulp.series("styles:css"));
-    gulp.watch(paths["scripts"], gulpOptions, gulp.series("scripts"));
-    gulp.watch(paths["images"], gulpOptions, gulp.series("images"));
-    gulp.watch(paths["fonts"], gulpOptions, gulp.series("fonts"));
-  })
-);

package.json

@@ -119,16 +119,10 @@
     "whatwg-fetch": "^2.0.3"
   },
   "scripts": {
-    "build": "npm run gulp:prod:build && npm run webpack:prod:build",
-    "dist": "NODE_ENV=production npm run build",
-    "watch": "npm-run-all --parallel gulp:dev:watch webpack:dev:watch",
-    "start": "npm run watch",
-    "gulp:dev:watch": "gulp watch",
-    "gulp:prod:build": "gulp build",
-    "webpack:dev:watch": "webpack --config ./client/webpack.config.js --mode development --progress --watch",
-    "webpack:prod:build": "webpack --config ./client/webpack.config.js --mode production",
+    "start": "webpack --config ./client/webpack.config.js --mode development --progress --watch",
+    "build": "webpack --config ./client/webpack.config.js --mode production",
     "fix:js": "eslint --ext .js,.ts,.tsx --fix ./",
-    "lint:js": "eslint --ext .js,.ts,.tsx --report-unused-disable-directives ./",
+    "lint:js": "eslint --ext .js,.ts,.tsx --report-unused-disable-directives --max-warnings 16 ./client",
     "lint:css": "stylelint **/*.scss",
     "lint": "npm run lint:js && npm run lint:css",
     "test": "npm run test:unit",

wagtail/admin/static_src/wagtailadmin/scss/_helpers.scss

@@ -1,2 +0,0 @@
-@import '../../../../../client/scss/settings';
-@import '../../../../../client/scss/tools';

wagtail/admin/static_src/wagtailadmin/scss/layouts/404.scss

@@ -1,4 +1,5 @@
-@import 'wagtailadmin/scss/helpers';
+@import '../../../../../../client/scss/settings';
+@import '../../../../../../client/scss/tools';
 
 .page404__bg {
     position: fixed;

wagtail/admin/static_src/wagtailadmin/scss/layouts/compare-revisions.scss

@@ -1,4 +1,5 @@
-@import 'wagtailadmin/scss/helpers';
+@import '../../../../../../client/scss/settings';
+@import '../../../../../../client/scss/tools';
 
 $color-addition-dark: #a6f3a6;
 $color-addition-light: #ebffeb;

wagtail/admin/static_src/wagtailadmin/scss/layouts/home.scss

@@ -1,4 +1,5 @@
-@import 'wagtailadmin/scss/helpers';
+@import '../../../../../../client/scss/settings';
+@import '../../../../../../client/scss/tools';
 
 h1 {
     font-weight: 300;
@@ -93,7 +94,7 @@ header {
         }
 
         span {
-            font-family: $font-serif;
+            font-family: $font-sans;
             display: block;
             font-size: 4em;
             line-height: 1em;

wagtail/admin/static_src/wagtailadmin/scss/layouts/login.scss

@@ -1,4 +1,5 @@
-@import 'wagtailadmin/scss/helpers';
+@import '../../../../../../client/scss/settings';
+@import '../../../../../../client/scss/tools';
 
 // overrides default nice padding defined in variables.scss
 $desktop-nice-padding: 100px;

wagtail/admin/static_src/wagtailadmin/scss/layouts/page-editor.scss

@@ -2,7 +2,8 @@
 @use "sass:map";
 @use "sass:math";
 
-@import 'wagtailadmin/scss/helpers';
+@import '../../../../../../client/scss/settings';
+@import '../../../../../../client/scss/tools';
 
 .page-editor {
     .content-wrapper {
@@ -448,7 +449,7 @@
     textarea,
     .halloeditor {
         font-size: 2em;
-        font-family: $font-serif;
+        font-family: $font-sans;
     }
 }
 

wagtail/admin/static_src/wagtailadmin/scss/layouts/report.scss

@@ -1,4 +1,5 @@
-@import 'wagtailadmin/scss/helpers';
+@import '../../../../../../client/scss/settings';
+@import '../../../../../../client/scss/tools';
 
 .report {
     display: grid;

wagtail/admin/static_src/wagtailadmin/scss/panels/draftail.scss

@@ -1,3 +1,3 @@
-@import 'wagtailadmin/scss/helpers';
-
+@import '../../../../../../client/scss/settings';
+@import '../../../../../../client/scss/tools';
 @import '../../../../../../client/src/components/Draftail/Draftail';

wagtail/admin/static_src/wagtailadmin/scss/panels/hallo.scss

@@ -1,3 +1,3 @@
-@import 'wagtailadmin/scss/helpers';
-
+@import '../../../../../../client/scss/settings';
+@import '../../../../../../client/scss/tools';
 @import '../../../../../../client/src/components/Hallo/Hallo';

wagtail/admin/static_src/wagtailadmin/scss/panels/streamfield.scss

@@ -1,2 +1,3 @@
-@import 'wagtailadmin/scss/helpers';
+@import '../../../../../../client/scss/settings';
+@import '../../../../../../client/scss/tools';
 @import '../../../../../../client/src/components/StreamField/StreamField';

wagtail/admin/static_src/wagtailadmin/scss/userbar.scss

@@ -3,7 +3,8 @@
 @use "sass:math";
 @use "sass:string";
 
-@import 'wagtailadmin/scss/helpers';
+@import '../../../../../client/scss/settings';
+@import '../../../../../client/scss/tools';
 
 // =============================================================================
 // Variables
@@ -45,47 +46,6 @@ $positions: (
     )
 );
 
-
-// =============================================================================
-// Fonts
-// =============================================================================
-
-@include webfont(Open Sans, opensans-regular, 400, normal);
-
-@font-face {
-    font-family: 'wagtail';
-    src: url('#{$font-root}wagtail.woff') format('woff');
-    font-weight: normal;
-    font-style: normal;
-}
-
-// =============================================================================
-// Namespaced icon component
-// =============================================================================
-
-//  TODO: refactor into a mixin
-.#{$namespace}-icon:before {
-    @include icon();
-}
-
-
-// =============================================================================
-// Icons
-// =============================================================================
-
-@each $icon, $content in $icons {
-    .#{$namespace}-icon-#{$icon}:before {
-        content: string.quote(#{$content});
-    }
-}
-
-@each $icon, $content in $icons-after {
-    .#{$namespace}-icon-#{$icon}:after {
-        content: string.quote(#{$content});
-    }
-}
-
-
 // =============================================================================
 // Wagtail userbar proper
 // =============================================================================
@@ -172,7 +132,7 @@ $positions: (
     margin: 0;
     min-width: 210px;
     visibility: hidden;
-    font-family: 'Open Sans', sans-serif;
+    font-family: $font-sans;
     font-size: 14px;
     box-sizing: border-box;
     padding-left: 0;
@@ -229,7 +189,7 @@ $positions: (
     overflow: hidden;
     transition-duration: 0.125s;
     transition-timing-function: cubic-bezier(0.55, 0, 0.1, 1);
-    font-family: 'Open Sans', sans-serif;
+    font-family: $font-sans;
     font-size: 16px !important;
     text-decoration: none !important;
 

wagtail/admin/templates/wagtailadmin/icons/draft.svg

@@ -1,3 +1,3 @@
 <symbol id="icon-draft" viewBox="0 0 23 21">
-    <g fill-rule="evenodd"><path d="M18 18v1.11a.88.88 0 01-.875.89H4.875A.88.88 0 014 19.11V18h14zM12.167 1v5.047c0 .49.393.89.875.89H18V9H4V1.89c0-.455.332-.828.765-.883L4.875 1h7.292zm1.071 0c.25 0 .489.098.664.273l3.825 3.829a.935.935 0 01.273.66V6h-5V1h.238z" fill-rule="nonzero"/><text font-family="Open Sans, Arial, sans-serif" font-size="7" font-weight="bold" transform="translate(0 .333)"><tspan x="0" y="15.667">DRAFT</tspan></text></g>
+    <g fill-rule="evenodd"><path d="M18 18v1.11a.88.88 0 01-.875.89H4.875A.88.88 0 014 19.11V18h14zM12.167 1v5.047c0 .49.393.89.875.89H18V9H4V1.89c0-.455.332-.828.765-.883L4.875 1h7.292zm1.071 0c.25 0 .489.098.664.273l3.825 3.829a.935.935 0 01.273.66V6h-5V1h.238z" fill-rule="nonzero"/><text font-family="-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif" font-size="7" font-weight="bold" transform="translate(0 .333)"><tspan x="0" y="15.667">DRAFT</tspan></text></g>
 </symbol>

wagtail/admin/tests/test_userbar.py

@@ -146,7 +146,7 @@ class TestUserbarModeration(TestCase, WagtailTestUtils):
         expected_approve_html = """
             <form action="/admin/pages/moderation/{}/approve/" target="_parent" method="post">
                 <input type="hidden" name="csrfmiddlewaretoken">
-                <div class="wagtail-action wagtail-icon wagtail-icon-tick">
+                <div class="wagtail-action">
                     <input type="submit" value="Approve" class="button" />
                 </div>
             </form>
@@ -156,7 +156,7 @@ class TestUserbarModeration(TestCase, WagtailTestUtils):
         expected_reject_html = """
             <form action="/admin/pages/moderation/{}/reject/" target="_parent" method="post">
                 <input type="hidden" name="csrfmiddlewaretoken">
-                <div class="wagtail-action wagtail-icon wagtail-icon-cross">
+                <div class="wagtail-action">
                     <input type="submit" value="Reject" class="button" />
                 </div>
             </form>

wagtail/contrib/modeladmin/static_src/wagtailmodeladmin/scss/breadcrumbs_page.scss

@@ -1,4 +1,5 @@
-@import 'wagtailadmin/scss/helpers';
+@import '../../../../../../client/scss/settings';
+@import '../../../../../../client/scss/tools';
 
 .breadcrumb {
     margin: -1.2em 0 2em;

wagtail/contrib/modeladmin/static_src/wagtailmodeladmin/scss/index.scss

@@ -1,4 +1,5 @@
-@import 'wagtailadmin/scss/helpers';
+@import '../../../../../../client/scss/settings';
+@import '../../../../../../client/scss/tools';
 
 .content header {
     margin-bottom: 0;
@@ -85,7 +86,7 @@
     }
 
     a {
-        font-family: Open Sans,Arial,sans-serif;
+        font-family: $font-sans;
         border-radius: 3px;
         width: auto;
         line-height: 1.2em;

wagtail/contrib/styleguide/static_src/wagtailstyleguide/scss/styleguide.scss

@@ -1,4 +1,5 @@
-@import 'wagtailadmin/scss/helpers';
+@import '../../../../../../client/scss/settings';
+@import '../../../../../../client/scss/tools';
 
 section {
     border-top: 1px solid $color-grey-3;

wagtail/contrib/typed_table_block/static_src/typed_table_block/scss/typed_table_block.scss

@@ -1,4 +1,5 @@
-@import 'wagtailadmin/scss/helpers';
+@import '../../../../../../client/scss/settings';
+@import '../../../../../../client/scss/tools';
 
 .typed-table-block {
     &__wrapper {

wagtail/documents/static_src/wagtaildocs/scss/add-multiple.scss

@@ -1,4 +1,5 @@
-@import 'wagtailadmin/scss/helpers';
+@import '../../../../../client/scss/settings';
+@import '../../../../../client/scss/tools';
 
 .replace-file-input {
     display: inline-block;

wagtail/images/static_src/wagtailimages/scss/add-multiple.scss

@@ -1,6 +1,7 @@
 @use "sass:color";
 
-@import 'wagtailadmin/scss/helpers';
+@import '../../../../../client/scss/settings';
+@import '../../../../../client/scss/tools';
 
 .replace-file-input {
     display: inline-block;

wagtail/images/static_src/wagtailimages/scss/focal-point-chooser.scss

@@ -1,4 +1,5 @@
-@import 'wagtailadmin/scss/helpers';
+@import '../../../../../client/scss/settings';
+@import '../../../../../client/scss/tools';
 
 .focal-point-chooser {
     position: relative;