diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml index 8e58120dc6f0c9259e5d0acf990c15cf490b6a0c..301695a2ff38b5419be9c9e052d8583dea4c2ee0 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 e3559db51bb3328f546fb72852ea2d5b5f4fd7a6..88310ba38e5ed10b9d9deea0f3c34a1b729ff777 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 fbeb047653357d67b2667f6700d1f932ff2c27be..ad70bc06e341ee31213ca50c92b142b9ca747ad0 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 90b905342986c94956e8687bc6fd1754b8c45776..8b59c17bab3a74314061466ac31b878a24119fa0 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 e8efcaee740522880fffc2f07665ca27fa6fecc3..1f32a33e6c1ce36af828bc1b68c3b17ea72b004d 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 )