From 5e429baf675064bb926d97c46a78e485570091c5 Mon Sep 17 00:00:00 2001
From: Paul Gascou-Vaillancourt <paul.gascvail@gmail.com>
Date: Thu, 28 Mar 2024 14:37:00 -0400
Subject: [PATCH] Creates the `tailwind_all_the_way` feature flag
This creates the `tailwind_all_the_way` feature flag and lays the
groundwork for what we'll need to take advantage of it:
* GitLab UI utitilies are moved to their own stylesheet so that we can
easily switch between the legacy library and the Tailwind one.
* We create the "all the way" Tailwind stylesheet and config. These
compile the `app/assets/builds/tailwind_all_the_way.css` CSS file
which gets included when the feature flag is enabled. For now, this
file is unreliable as it requires the second iteration where we'll
create the proper CSS in Js config for Tailwind to generate our legacy
utils.
* The Tailwind compiler is updated to compile both Tailwind CSS bundles.
---
app/assets/stylesheets/application_utilities.scss | 3 ---
.../application_utilities_to_be_replaced.scss | 4 ++++
.../application_utilities_to_be_replaced_dark.scss | 3 +++
app/assets/stylesheets/tailwind.css | 1 +
app/assets/stylesheets/tailwind_all_the_way.css | 3 +++
app/views/layouts/_head.html.haml | 8 +++++++-
config/application.rb | 3 +++
.../development/tailwind_all_the_way.yml | 8 ++++++++
config/tailwind.all_the_way.config.js | 12 ++++++++++++
package.json | 1 +
scripts/frontend/tailwindcss.mjs | 14 +++++++++++---
11 files changed, 53 insertions(+), 7 deletions(-)
create mode 100644 app/assets/stylesheets/application_utilities_to_be_replaced.scss
create mode 100644 app/assets/stylesheets/application_utilities_to_be_replaced_dark.scss
create mode 100644 app/assets/stylesheets/tailwind_all_the_way.css
create mode 100644 config/feature_flags/development/tailwind_all_the_way.yml
create mode 100644 config/tailwind.all_the_way.config.js
diff --git a/app/assets/stylesheets/application_utilities.scss b/app/assets/stylesheets/application_utilities.scss
index 817e983a0ecce..da4ee455b4ea7 100644
--- a/app/assets/stylesheets/application_utilities.scss
+++ b/app/assets/stylesheets/application_utilities.scss
@@ -7,6 +7,3 @@
to see the available utility classes.
**/
@import 'utilities';
-
-// Gitlab UI util classes
-@import '@gitlab/ui/src/scss/utilities';
diff --git a/app/assets/stylesheets/application_utilities_to_be_replaced.scss b/app/assets/stylesheets/application_utilities_to_be_replaced.scss
new file mode 100644
index 0000000000000..f8c40835a494a
--- /dev/null
+++ b/app/assets/stylesheets/application_utilities_to_be_replaced.scss
@@ -0,0 +1,4 @@
+@import 'page_bundles/mixins_and_variables_and_functions';
+
+// Gitlab UI util classes
+@import '@gitlab/ui/src/scss/utilities';
diff --git a/app/assets/stylesheets/application_utilities_to_be_replaced_dark.scss b/app/assets/stylesheets/application_utilities_to_be_replaced_dark.scss
new file mode 100644
index 0000000000000..3c7b3e63b59e3
--- /dev/null
+++ b/app/assets/stylesheets/application_utilities_to_be_replaced_dark.scss
@@ -0,0 +1,3 @@
+@import './themes/dark';
+
+@import 'application_utilities_to_be_replaced';
diff --git a/app/assets/stylesheets/tailwind.css b/app/assets/stylesheets/tailwind.css
index fb8180222b6b7..8dd183dd4bd96 100644
--- a/app/assets/stylesheets/tailwind.css
+++ b/app/assets/stylesheets/tailwind.css
@@ -1,2 +1,3 @@
/* stylelint-disable scss/at-rule-no-unknown */
+
@tailwind utilities;
diff --git a/app/assets/stylesheets/tailwind_all_the_way.css b/app/assets/stylesheets/tailwind_all_the_way.css
new file mode 100644
index 0000000000000..8dd183dd4bd96
--- /dev/null
+++ b/app/assets/stylesheets/tailwind_all_the_way.css
@@ -0,0 +1,3 @@
+/* stylelint-disable scss/at-rule-no-unknown */
+
+@tailwind utilities;
diff --git a/app/views/layouts/_head.html.haml b/app/views/layouts/_head.html.haml
index f6c71fd6fb199..faaa3307e8369 100644
--- a/app/views/layouts/_head.html.haml
+++ b/app/views/layouts/_head.html.haml
@@ -5,6 +5,7 @@
-# This is a temporary place for the page specific style migrations to be included on all pages like page_specific_files
- if Feature.disabled?(:page_specific_styles, current_user)
- add_page_specific_style('page_bundles/commit_description')
+- tailwind_all_the_way = Feature.enabled?(:tailwind_all_the_way, current_user)
%head{ omit_og ? { } : { prefix: "og: http://ogp.me/ns#" } }
%meta{ charset: "utf-8" }
@@ -30,11 +31,16 @@
= stylesheet_link_tag_defer "application_dark"
= yield :page_specific_styles
= stylesheet_link_tag_defer "application_utilities_dark"
+ = stylesheet_link_tag_defer "application_utilities_to_be_replaced_dark"
- else
= stylesheet_link_tag_defer "application"
= yield :page_specific_styles
= stylesheet_link_tag_defer 'application_utilities'
- = stylesheet_link_tag_defer 'tailwind'
+ = stylesheet_link_tag_defer "application_utilities_to_be_replaced"
+ - if tailwind_all_the_way
+ = stylesheet_link_tag_defer 'tailwind_all_the_way'
+ - else
+ = stylesheet_link_tag_defer 'tailwind'
= stylesheet_link_tag "disable_animations", media: "all" if Rails.env.test? || Gitlab.config.gitlab['disable_animations']
= stylesheet_link_tag "test_environment", media: "all" if Rails.env.test?
diff --git a/config/application.rb b/config/application.rb
index b5c61c0972380..8e67104a50f45 100644
--- a/config/application.rb
+++ b/config/application.rb
@@ -267,9 +267,12 @@ class Application < Rails::Application
config.assets.paths << "#{config.root}/vendor/assets/fonts"
config.assets.precompile << "application_utilities.css"
+ config.assets.precompile << "application_utilities_to_be_replaced.css"
config.assets.precompile << "application_utilities_dark.css"
+ config.assets.precompile << "application_utilities_to_be_replaced_dark.css"
config.assets.precompile << "application_dark.css"
config.assets.precompile << "tailwind.css"
+ config.assets.precompile << "tailwind_all_the_way.css"
config.assets.precompile << "print.css"
config.assets.precompile << "mailer.css"
diff --git a/config/feature_flags/development/tailwind_all_the_way.yml b/config/feature_flags/development/tailwind_all_the_way.yml
new file mode 100644
index 0000000000000..03276ae355fa6
--- /dev/null
+++ b/config/feature_flags/development/tailwind_all_the_way.yml
@@ -0,0 +1,8 @@
+---
+name: tailwind_all_the_way
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/148202
+rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/452445
+milestone: '16.11'
+type: development
+group: group::foundations
+default_enabled: false
diff --git a/config/tailwind.all_the_way.config.js b/config/tailwind.all_the_way.config.js
new file mode 100644
index 0000000000000..269468de3f7e2
--- /dev/null
+++ b/config/tailwind.all_the_way.config.js
@@ -0,0 +1,12 @@
+// const plugin = require('tailwindcss/plugin');
+const tailwindGitLabDefaults = require('./tailwind.config');
+// const utilities = require('./helpers/tailwind/css_in_js');
+
+const { content, ...remainingConfig } = tailwindGitLabDefaults;
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ content,
+ ...remainingConfig,
+ // This will be filled with life in a follow-up MR
+};
diff --git a/package.json b/package.json
index 7343c6c83467a..4134b79553613 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
"prejest": "yarn check-dependencies",
"build:css": "node scripts/frontend/build_css.mjs",
"tailwindcss:build": "node scripts/frontend/tailwindcss.mjs",
+ "pretailwindcss:build": "TAILWIND_ALL_THE_WAY=1 node scripts/frontend/tailwindcss.mjs",
"jest": "jest --config jest.config.js",
"jest-debug": "node --inspect-brk node_modules/.bin/jest --runInBand",
"jest:ci": "jest --config jest.config.js --ci --coverage --testSequencer ./scripts/frontend/parallel_ci_sequencer.js",
diff --git a/scripts/frontend/tailwindcss.mjs b/scripts/frontend/tailwindcss.mjs
index ca58c41cc7893..2bce47e3c79e4 100644
--- a/scripts/frontend/tailwindcss.mjs
+++ b/scripts/frontend/tailwindcss.mjs
@@ -1,3 +1,4 @@
+/* eslint-disable import/extensions */
import path from 'node:path';
import { fileURLToPath } from 'node:url';
import { createProcessor } from 'tailwindcss/lib/cli/build/plugin.js';
@@ -6,13 +7,20 @@ import { createProcessor } from 'tailwindcss/lib/cli/build/plugin.js';
const ROOT_PATH = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '../../');
async function build({ shouldWatch = false } = {}) {
+ let config = path.join(ROOT_PATH, 'config/tailwind.config.js');
+ let fileName = 'tailwind.css';
+ if (process.env.TAILWIND_ALL_THE_WAY) {
+ config = path.join(ROOT_PATH, 'config/tailwind.all_the_way.config.js');
+ fileName = 'tailwind_all_the_way.css';
+ }
+
const processor = await createProcessor(
{
'--watch': shouldWatch,
- '--output': path.join(ROOT_PATH, 'app/assets/builds/tailwind.css'),
- '--input': path.join(ROOT_PATH, 'app/assets/stylesheets/tailwind.css'),
+ '--output': path.join(ROOT_PATH, 'app/assets/builds', fileName),
+ '--input': path.join(ROOT_PATH, 'app/assets/stylesheets', fileName),
},
- path.join(ROOT_PATH, 'config/tailwind.config.js'),
+ config,
);
if (shouldWatch) {
--
GitLab