From c9730df1cf1b9457b03e1da42f4ce8e565efc5bf Mon Sep 17 00:00:00 2001
From: Lukas 'ai-pi' Eipert <leipert@gitlab.com>
Date: Tue, 20 Feb 2024 16:36:11 +0000
Subject: [PATCH] Enable new CSS compiler by default

After analyzing the CSS diff between the new and old compiler, the diff
doesn't have us concerned too much. We therefore want to enable the new
SASS compiler in CI/CD to see if there are any failures.

Furthermore we turn it on in development by default as well

- See also: https://gitlab.com/gitlab-org/gitlab/-/issues/438278
- Link to the Diff:
  https://gitlab.com/gitlab-org/frontend/playground/sass-compiler-diff/-/merge_requests/1#note_1758213709
---
 .gitlab-ci.yml                       |  4 ++++
 config/application.rb                |  2 +-
 lib/tasks/gitlab/assets.rake         |  1 +
 scripts/frontend/lib/compile_css.mjs | 21 +++++++++++++++++++--
 scripts/generate-e2e-pipeline        |  1 +
 5 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index 8e58120dc6f0c..301695a2ff38b 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -254,6 +254,10 @@ variables:
   BUILD_ASSETS_IMAGE: "true"  # Set it to "false" to disable assets image building, used in `build-assets-image`
   SIMPLECOV: "true"
 
+  # Temporary variable to enable new CSS compiler
+  # See: https://gitlab.com/gitlab-org/gitlab/-/issues/438278
+  USE_NEW_CSS_PIPELINE: "true"
+
 include:
   - local: .gitlab/ci/_skip.yml
     rules:
diff --git a/config/application.rb b/config/application.rb
index e3559db51bb33..88310ba38e5ed 100644
--- a/config/application.rb
+++ b/config/application.rb
@@ -260,7 +260,7 @@ class Application < Rails::Application
     # For more context, see: https://gitlab.com/gitlab-org/gitlab/-/issues/438278
     # Need to be loaded before initializers
     config.before_configuration do
-      if Gitlab::Utils.to_boolean(ENV["USE_NEW_CSS_PIPELINE"])
+      if Gitlab::Utils.to_boolean(ENV["USE_NEW_CSS_PIPELINE"], default: true)
         require 'cssbundling-rails'
       else
         require 'fileutils'
diff --git a/lib/tasks/gitlab/assets.rake b/lib/tasks/gitlab/assets.rake
index fbeb047653357..ad70bc06e341e 100644
--- a/lib/tasks/gitlab/assets.rake
+++ b/lib/tasks/gitlab/assets.rake
@@ -52,6 +52,7 @@ module Tasks
         puts "Generating the SHA256 hash for #{asset_files.size} Webpack-related assets..." if verbose
 
         assets_sha256 = asset_files.map { |asset_file| Digest::SHA256.file(asset_file).hexdigest }.join
+        assets_sha256 += ENV.fetch('USE_NEW_CSS_PIPELINE', 'true')
 
         Digest::SHA256.hexdigest(assets_sha256).tap { |sha256| puts "=> SHA256 generated in #{Time.now - start_time}: #{sha256}" if verbose }
       end
diff --git a/scripts/frontend/lib/compile_css.mjs b/scripts/frontend/lib/compile_css.mjs
index 90b905342986c..8b59c17bab3a7 100644
--- a/scripts/frontend/lib/compile_css.mjs
+++ b/scripts/frontend/lib/compile_css.mjs
@@ -172,6 +172,11 @@ export async function compileAllStyles({ shouldWatch = false }) {
   const sassCompilerOptions = {
     loadPaths: resolveLoadPaths(),
     logger: Logger.silent,
+    // For now we compress CSS directly with SASS if we do not watch
+    // We probably want to change this later if there are more
+    // post-processing steps, because we would compress
+    // _after_ things like auto-prefixer, etc. happened
+    style: shouldWatch ? 'expanded' : 'compressed',
   };
 
   let fileWatcher = null;
@@ -218,8 +223,20 @@ export async function compileAllStyles({ shouldWatch = false }) {
   return fileWatcher;
 }
 
-function shouldUseNewPipeline() {
-  return /^(true|t|yes|y|1|on)$/i.test(`${env.USE_NEW_CSS_PIPELINE}`);
+// Mirroring gems/gitlab-utils/lib/gitlab/utils.rb
+function shouldUseNewPipeline(defaultValue = true) {
+  if ([true, false, 0, 1].includes(env?.USE_NEW_CSS_PIPELINE)) {
+    return env.USE_NEW_CSS_PIPELINE;
+  }
+
+  if (/^(true|t|yes|y|1|on)$/i.test(`${env.USE_NEW_CSS_PIPELINE}`)) {
+    return true;
+  }
+  if (/^(false|f|no|n|0|off)$/i.test(`${env.USE_NEW_CSS_PIPELINE}`)) {
+    return false;
+  }
+
+  return defaultValue;
 }
 
 export function viteCSSCompilerPlugin({ shouldWatch = true }) {
diff --git a/scripts/generate-e2e-pipeline b/scripts/generate-e2e-pipeline
index e8efcaee74052..1f32a33e6c1ce 100755
--- a/scripts/generate-e2e-pipeline
+++ b/scripts/generate-e2e-pipeline
@@ -49,6 +49,7 @@ variables:
   QA_SUITES: "$QA_SUITES"
   QA_TESTS: "$QA_TESTS"
   KNAPSACK_TEST_FILE_PATTERN: "$KNAPSACK_TEST_FILE_PATTERN"
+  USE_NEW_CSS_PIPELINE: "true"
 YML
 )
 
-- 
GitLab