Gemfile

@@ -336,7 +336,7 @@ gem 'gitlab_chronic_duration', '~> 0.12' # rubocop:todo Gemfile/MissingFeatureCa
 
 gem 'rack-proxy', '~> 0.7.7' # rubocop:todo Gemfile/MissingFeatureCategory
 
-gem 'sassc-rails', '~> 2.1.0' # rubocop:todo Gemfile/MissingFeatureCategory
+gem 'cssbundling-rails', '1.3.3', feature_category: :shared
 gem 'autoprefixer-rails', '10.2.5.1' # rubocop:todo Gemfile/MissingFeatureCategory
 gem 'terser', '1.0.2' # rubocop:todo Gemfile/MissingFeatureCategory
 

Gemfile.checksum

@@ -95,6 +95,7 @@
 {"name":"creole","version":"0.5.0","platform":"ruby","checksum":"951701e2d80760f156b1cb2a93471ca97c076289becc067a33b745133ed32c03"},
 {"name":"crystalball","version":"0.7.0","platform":"ruby","checksum":"6e729f372a5071daec877adb40c5df4cb25fe21f350635e2a9624373fc151ef2"},
 {"name":"css_parser","version":"1.14.0","platform":"ruby","checksum":"f2ce6148cd505297b07bdbe7a5db4cce5cf530071f9b732b9a23538d6cdc0113"},
+{"name":"cssbundling-rails","version":"1.3.3","platform":"ruby","checksum":"4aa13311e52a40bc0eb32ca651f44db8df03df273553cf9aeb022570607e1855"},
 {"name":"cvss-suite","version":"3.0.1","platform":"ruby","checksum":"b5ca9e9e94032a42fd0dc28c1e305378b62c949e35ed7111fc4a1d76f68ad3f9"},
 {"name":"danger","version":"9.3.1","platform":"ruby","checksum":"9070fbac181eb45fb9b69ea25e6ea4faa86796ef33bf8d00346cab4385e51df5"},
 {"name":"danger-gitlab","version":"8.0.0","platform":"ruby","checksum":"497dd7d0f6513913de651019223d8058cf494df10acbd17de92b175dfa04a3a8"},
@@ -579,9 +580,6 @@
 {"name":"safe_yaml","version":"1.0.4","platform":"ruby","checksum":"248193992ef1730a0c9ec579999ef2256a2b3a32a9bd9d708a1e12544a489ec2"},
 {"name":"safety_net_attestation","version":"0.4.0","platform":"ruby","checksum":"96be2d74e7ed26453a51894913449bea0e072f44490021545ac2d1c38b0718ce"},
 {"name":"sanitize","version":"6.0.2","platform":"ruby","checksum":"48c4eb8e92bb1699056b6000986ac50fc9df82f458a941abf2c4d6759bccd5cf"},
-{"name":"sassc","version":"2.4.0","platform":"ruby","checksum":"4c60a2b0a3b36685c83b80d5789401c2f678c1652e3288315a1551d811d9f83e"},
-{"name":"sassc","version":"2.4.0","platform":"x64-mingw32","checksum":"8773b917cb52c7e92c94d4bf324c1c0be3e50d9092f9f5ed4c3c6e454b451c5e"},
-{"name":"sassc-rails","version":"2.1.0","platform":"ruby","checksum":"764dcc74e06930e3483caf0d595084d11f2b0fefd6539abf487cdddfba6cafa2"},
 {"name":"sawyer","version":"0.9.2","platform":"ruby","checksum":"fa3a72d62a4525517b18857ddb78926aab3424de0129be6772a8e2ba240e7aca"},
 {"name":"sd_notify","version":"0.1.1","platform":"ruby","checksum":"cbc7ac6caa7cedd26b30a72b5eeb6f36050dc0752df263452ea24fb5a4ad3131"},
 {"name":"seed-fu","version":"2.3.7","platform":"ruby","checksum":"f19673443e9af799b730e3d4eca6a89b39e5a36825015dffd00d02ea3365cf74"},

Gemfile.lock

@@ -425,6 +425,8 @@ GEM
       git
     css_parser (1.14.0)
       addressable
+    cssbundling-rails (1.3.3)
+      railties (>= 6.0.0)
     cvss-suite (3.0.1)
     danger (9.3.1)
       claide (~> 1.0)
@@ -1509,14 +1511,6 @@ GEM
     sanitize (6.0.2)
       crass (~> 1.0.2)
       nokogiri (>= 1.12.0)
-    sassc (2.4.0)
-      ffi (~> 1.9)
-    sassc-rails (2.1.0)
-      railties (>= 4.0.0)
-      sassc (>= 2.0)
-      sprockets (> 3.0)
-      sprockets-rails
-      tilt
     sawyer (0.9.2)
       addressable (>= 2.3.5)
       faraday (>= 0.17.3, < 3)
@@ -1843,6 +1837,7 @@ DEPENDENCIES
   countries (~> 4.0.0)
   creole (~> 0.5.0)
   crystalball (~> 0.7.0)
+  cssbundling-rails (= 1.3.3)
   csv_builder!
   cvss-suite (~> 3.0.1)
   database_cleaner-active_record (~> 2.1.0)
@@ -2069,7 +2064,6 @@ DEPENDENCIES
   rubyzip (~> 2.3.2)
   rugged (~> 1.6)
   sanitize (~> 6.0.2)
-  sassc-rails (~> 2.1.0)
   sd_notify (~> 0.1.0)
   seed-fu (~> 2.3.7)
   selenium-webdriver (~> 4.16)

bin/build-css

+#!/usr/bin/env bash
+
+# Replace with some form of programattic Compiling
+# https://sass-lang.com/documentation/js-api/modules/
+./node_modules/sass/sass.js \
+  ./app/assets/stylesheets/application.scss:./app/assets/builds/application.css \
+  ./app/assets/stylesheets/application_dark.scss:./app/assets/builds/application_dark.css \
+  ./app/assets/stylesheets/application_utilities.scss:./app/assets/builds/application_utilities.css \
+  ./app/assets/stylesheets/application_utilities_dark.scss:./app/assets/builds/application_utilities_dark.css \
+  ./app/assets/stylesheets/disable_animations.scss:./app/assets/builds/disable_animations.css \
+  ./app/assets/stylesheets/emoji_sprites.scss:./app/assets/builds/emoji_sprites.css \
+  ./app/assets/stylesheets/errors.scss:./app/assets/builds/errors.css \
+  ./app/assets/stylesheets/fonts.scss:./app/assets/builds/fonts.css \
+  ./app/assets/stylesheets/mailer.scss:./app/assets/builds/mailer.css \
+  ./app/assets/stylesheets/mailer_client_specific.scss:./app/assets/builds/mailer_client_specific.css \
+  ./app/assets/stylesheets/notify.scss:./app/assets/builds/notify.css \
+  ./app/assets/stylesheets/notify_enhanced.scss:./app/assets/builds/notify_enhanced.css \
+  ./app/assets/stylesheets/performance_bar.scss:./app/assets/builds/performance_bar.css \
+  ./app/assets/stylesheets/print.scss:./app/assets/builds/print.css \
+  ./app/assets/stylesheets/snippets.scss:./app/assets/builds/snippets.css \
+  ./app/assets/stylesheets/test_environment.scss:./app/assets/builds/test_environment.css \
+  \
+  ./app/assets/stylesheets/lazy_bundles:./app/assets/builds/lazy_bundles \
+  ./app/assets/stylesheets/mailers:./app/assets/builds/mailers \
+  ./app/assets/stylesheets/page_bundles/_mixins_and_variables_and_functions.scss:./app/assets/builds/page_bundles/_mixins_and_variables_and_functions.css \
+  ./app/assets/stylesheets/page_bundles:./app/assets/builds/page_bundles \
+  ./app/assets/stylesheets/themes:./app/assets/builds/themes \
+  ./app/assets/stylesheets/highlight/diff_custom_colors_addition.scss:./app/assets/builds/highlight/diff_custom_colors_addition.css \
+  ./app/assets/stylesheets/highlight/diff_custom_colors_deletion.scss:./app/assets/builds/highlight/diff_custom_colors_deletion.css \
+  ./app/assets/stylesheets/highlight/themes:./app/assets/builds/highlight/themes \
+  \
+  ./ee/app/assets/stylesheets/page_bundles:./app/assets/builds/page_bundles \
+  \
+  --no-source-map \
+  --load-path=app/assets/stylesheets \
+  --load-path=jh/app/assets/stylesheets \
+  --load-path=ee/app/assets/stylesheets \
+  --load-path=jh/app/assets/stylesheets/_jh \
+  --load-path=ee/app/assets/stylesheets/_ee \
+  --load-path=app/assets/stylesheets/_jh \
+  --load-path=app/assets/stylesheets/_ee \
+  --load-path=vendor/assets/stylesheets \
+  --load-path=node_modules \
+  $@

config/application.rb

@@ -11,6 +11,7 @@
 require 'action_mailer/railtie'
 require 'action_cable/engine'
 require 'rails/test_unit/railtie'
+require 'sprockets/railtie'
 
 require 'gitlab/utils/all'
 
@@ -603,9 +604,8 @@ class Application < Rails::Application
     # The jh/ version will be preferred.
     initializer :prefer_specialized_assets, after: :append_assets_path, before: :build_middleware_stack do |app|
       Gitlab.extensions.each do |extension|
-        %w[images javascripts stylesheets].each do |path|
-          app.config.assets.paths.unshift("#{config.root}/#{extension}/app/assets/#{path}")
-        end
+        app.config.paths.add("#{extension}/app/assets", glob: "*")
+        app.config.assets.paths.unshift(*paths["#{extension}/app/assets"].existent_directories)
       end
     end
 

package.json

@@ -46,7 +46,9 @@
     "swagger:validate": "swagger-cli validate",
     "webpack": "NODE_OPTIONS=\"${NODE_OPTIONS:=--max-old-space-size=5120}\" webpack --config config/webpack.config.js",
     "webpack-vendor": "NODE_OPTIONS=\"${NODE_OPTIONS:=--max-old-space-size=5120}\" webpack --config config/webpack.vendor.config.js",
-    "webpack-prod": "NODE_OPTIONS=\"${NODE_OPTIONS:=--max-old-space-size=5120}\" NODE_ENV=production webpack --config config/webpack.config.js"
+    "webpack-prod": "NODE_OPTIONS=\"${NODE_OPTIONS:=--max-old-space-size=5120}\" NODE_ENV=production webpack --config config/webpack.config.js",
+    "build:css": "node ./scripts/frontend/compile.mjs",
+    "build:css:watch": "./bin/build-css --watch"
   },
   "dependencies": {
     "@apollo/client": "^3.5.10",

scripts/frontend/compile.mjs

+import { compile } from 'sass'
+import { SassString } from 'sass'
+import { existsSync, mkdirSync, readdirSync, statSync, writeFileSync } from 'fs'
+import path from 'path'
+import IS_EE from '../../config/helpers/is_ee_env.js'
+import IS_JH from '../../config/helpers/is_jh_env.js'
+
+const OUTPUT_PATH = 'app/assets/builds/'
+const ROOT_PATH = new URL('../../', import.meta.url);
+
+function resolveLoadPaths() {
+  let loadPaths = {
+    base: [
+      'app/assets/stylesheets'
+    ],
+    vendor: [
+      // no-op files
+      'app/assets/stylesheets/_ee',
+      'app/assets/stylesheets/_jh',
+      // loaded last
+      'vendor/assets/stylesheets', // empty
+      'node_modules'
+    ]
+  }
+
+  if (IS_EE) {
+    loadPaths.base.unshift('ee/app/assets/stylesheets')
+    loadPaths.vendor.unshift('ee/app/assets/stylesheets/_ee')
+  }
+  if (IS_JH) {
+    loadPaths.base.unshift('jh/app/assets/stylesheets')
+    loadPaths.vendor.unshift('jh/app/assets/stylesheets/_jh')
+  }
+  return Object.values(loadPaths).flat()
+    .map((p) => path.resolve(ROOT_PATH.pathname, p))
+}
+
+const SASS_LOAD_PATHS = resolveLoadPaths();
+
+const defaultOptions = {
+  loadPaths: SASS_LOAD_PATHS,
+}
+
+// Source => Destination (Relative to OUTPUT_PATH)
+let inputFiles = new Map([
+  ['app/assets/stylesheets/application.scss', 'application.css'],
+  ['app/assets/stylesheets/application_dark.scss', 'application_dark.css'],
+  ['app/assets/stylesheets/application_utilities.scss', 'application_utilities.css'],
+  ['app/assets/stylesheets/application_utilities_dark.scss', 'application_utilities_dark.css'],
+  ['app/assets/stylesheets/disable_animations.scss', 'disable_animations.css'],
+  ['app/assets/stylesheets/emoji_sprites.scss', 'emoji_sprites.css'],
+  ['app/assets/stylesheets/errors.scss', 'errors.css'],
+  ['app/assets/stylesheets/fonts.scss', 'fonts.css'],
+  ['app/assets/stylesheets/mailer.scss', 'mailer.css'],
+  ['app/assets/stylesheets/mailer_client_specific.scss', 'mailer_client_specific.css'],
+  ['app/assets/stylesheets/notify.scss', 'notify.css'],
+  ['app/assets/stylesheets/notify_enhanced.scss', 'notify_enhanced.css'],
+  ['app/assets/stylesheets/performance_bar.scss', 'performance_bar.css'],
+  ['app/assets/stylesheets/print.scss', 'print.css'],
+  ['app/assets/stylesheets/snippets.scss', 'snippets.css'],
+  ['app/assets/stylesheets/test_environment.scss', 'test_environment.css'],
+  ['app/assets/stylesheets/lazy_bundles/', 'lazy_bundles/'],
+  ['app/assets/stylesheets/mailers/', 'mailers/'],
+  ['app/assets/stylesheets/page_bundles/_mixins_and_variables_and_functions.scss', 'page_bundles/_mixins_and_variables_and_functions.css'],
+  ['app/assets/stylesheets/page_bundles/', 'page_bundles/'],
+  ['app/assets/stylesheets/themes/_dark.scss', 'themes/_dark.css'], // TODO: find out why this is explicitly compiled
+  ['app/assets/stylesheets/themes/', 'themes/'],
+  ['app/assets/stylesheets/highlight/diff_custom_colors_addition.scss', 'highlight/diff_custom_colors_addition.css'],
+  ['app/assets/stylesheets/highlight/diff_custom_colors_deletion.scss', 'highlight/diff_custom_colors_deletion.css'],
+  ['app/assets/stylesheets/highlight/themes/', 'highlight/themes/'],
+])
+
+if (IS_EE) {
+  inputFiles.set('ee/app/assets/stylesheets/page_bundles/', 'page_bundles/')
+}
+
+function writeContentToFile(content, src, dest) {
+  const destPath = path.resolve(ROOT_PATH.pathname, dest);
+  let outputFile;
+  if (!!src.relativePath) {
+    outputFile = path.resolve(destPath, src.relativePath)
+    console.log('Outputting to: ', outputFile, path.extname(outputFile));
+    if (path.extname(outputFile) == '.scss') {
+      outputFile = outputFile.replace(/\.[^.]+$/, '.css');
+    }
+  } else {
+    outputFile = destPath
+  }
+  console.log(`Writing ${src.fullPath} to ${outputFile}`)
+  if (!existsSync(path.dirname(outputFile))) {
+    mkdirSync(path.dirname(outputFile), { recursive: true });
+  }
+  writeFileSync(outputFile, content.css);
+}
+
+function resolveSources(base, source, dest) {
+  console.log("Resolving source", source);
+  const destPath = path.resolve(base, dest)
+  const fullPath = path.resolve(base, source);
+
+  // If single scss file, then return single object
+  if (statSync(fullPath).isFile() && path.extname(source) == '.scss') {
+    console.log("Source is a file, Dest is: ", dest, fullPath)
+    return [{source: source, dest: destPath}]
+  }
+
+  const paths = new Set();
+
+  if (statSync(fullPath).isDirectory()) {
+    // Filter out any scss files that start with _
+    // Only keep files and directories
+    readdirSync(fullPath).filter((f) => statSync(path.resolve(fullPath, f)).isDirectory() || (f.endsWith('.scss') && !f.startsWith('_')) ).forEach((relativeFile) => {
+      // Full Path to each immediate item in this directory
+      let file = path.resolve(fullPath, relativeFile);
+      console.log('resolved file: ', file)
+
+      // Return early, don't resolve this directory as a destination
+      if (statSync(file).isDirectory()) {
+        console.log("Recursing into subdir", file);
+        let newSource = path.relative(fullPath, file)
+        let newDest = path.resolve(destPath, newSource)
+        console.log(fullPath, newSource, newDest)
+        // Add each resolved source to paths
+        resolveSources(fullPath, newSource, newDest).forEach((x) => paths.add(x))
+      } else {
+        // Expect files here
+        const destFileName = relativeFile.replace(/\.[^.]+$/, '.css');
+
+        // Assuming dest is a directory
+        paths.add({source: file, dest: path.resolve(base, dest, destFileName)})
+        console.log('resolved destination file: ', path.resolve(base, dest, destFileName))
+      }
+
+    })
+  }
+  return [...paths]
+}
+
+inputFiles.forEach((dest, source, _) => {
+  const dest = [OUTPUT_PATH, dest].join('/');
+  console.log("processing source", source);
+  const sources = resolveSources(ROOT_PATH.pathname, source, dest);
+  console.log(`${source} resolved to:`, sources)
+  sources.forEach(({ source, dest }) => {
+    console.log(`compiling source ${source} to ${dest}`)
+    const content = compile(source, defaultOptions)
+    writeContentToFile(content, source, dest)
+  });
+  console.log("processed source", source);
+});