Remove the `tailwind_all_the_way` feature flag

This removes the `tailwind_all_the_way` feature flag. We had the flag
enabled long enough in production to catch and fix a few regressions. We
are now ready to remove the flag and rely on a single Tailwind config
which will allow us to resume the migrations.

Changelog: added

app/assets/stylesheets/tailwind.css

 /* stylelint-disable scss/at-rule-no-unknown */
 
 @tailwind base;
+@tailwind components;
 @tailwind utilities;
+
+/*
+Components layer:
+https://tailwindcss.com/docs/adding-custom-styles#adding-component-classes
+
+The components layer will be rendered _before_ the utilities,
+so that utilities can overwrite values
+*/
+@layer components {
+    /*
+    our gl-border shorthands do a little more than tailwinds.
+    in order not to conflict with other border related properties
+    (color, width), we need to define them _before_ the tailwind utils.
+     */
+    .gl-border {
+        @apply gl-border-gray-100;
+        @apply gl-border-solid;
+    }
+
+    .gl-border\! {
+        @apply gl-border !important;
+        @apply gl-border-gray-100 !important;
+        @apply gl-border-solid !important;
+    }
+
+    .gl-border-b {
+        @apply gl-border-b-gray-100;
+        @apply gl-border-b-solid;
+    }
+
+    .gl-border-b\! {
+        @apply gl-border-b !important;
+        @apply gl-border-b-gray-100 !important;
+        @apply gl-border-b-solid !important;
+    }
+
+    .gl-border-l {
+        @apply gl-border-l-gray-100;
+        @apply gl-border-l-solid;
+    }
+
+    .gl-border-l\! {
+        @apply gl-border-l !important;
+        @apply gl-border-l-gray-100 !important;
+        @apply gl-border-l-solid !important;
+    }
+
+    .gl-border-r {
+        @apply gl-border-r-gray-100;
+        @apply gl-border-r-solid;
+    }
+
+    .gl-border-r\! {
+        @apply gl-border-r !important;
+        @apply gl-border-r-gray-100 !important;
+        @apply gl-border-r-solid !important;
+    }
+
+    .gl-border-t {
+        @apply gl-border-t-gray-100;
+        @apply gl-border-t-solid;
+    }
+
+    .gl-border-t\! {
+        @apply gl-border-t !important;
+        @apply gl-border-t-gray-100 !important;
+        @apply gl-border-t-solid !important;
+    }
+
+}
+
+/*
+Utilities layer:
+https://tailwindcss.com/docs/adding-custom-styles#adding-custom-utilities
+*/
+@layer utilities {
+    /* the border-style utils in tailwind do not allow for top, bottom, right, left specific values */
+    .gl-border-b-solid {
+        border-bottom-style: solid;
+    }
+
+    .gl-border-l-solid {
+        border-left-style: solid;
+    }
+
+    .gl-border-r-solid {
+        border-right-style: solid;
+    }
+
+    .gl-border-t-solid {
+        border-top-style: solid;
+    }
+}

app/assets/stylesheets/tailwind_all_the_way.css

-/* stylelint-disable scss/at-rule-no-unknown */
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-/*
-Components layer:
-https://tailwindcss.com/docs/adding-custom-styles#adding-component-classes
-
-The components layer will be rendered _before_ the utilities,
-so that utilities can overwrite values
-*/
-@layer components {
-    /*
-    our gl-border shorthands do a little more than tailwinds.
-    in order not to conflict with other border related properties
-    (color, width), we need to define them _before_ the tailwind utils.
-     */
-    .gl-border {
-        @apply gl-border-gray-100;
-        @apply gl-border-solid;
-    }
-
-    .gl-border\! {
-        @apply gl-border !important;
-        @apply gl-border-gray-100 !important;
-        @apply gl-border-solid !important;
-    }
-
-    .gl-border-b {
-        @apply gl-border-b-gray-100;
-        @apply gl-border-b-solid;
-    }
-
-    .gl-border-b\! {
-        @apply gl-border-b !important;
-        @apply gl-border-b-gray-100 !important;
-        @apply gl-border-b-solid !important;
-    }
-
-    .gl-border-l {
-        @apply gl-border-l-gray-100;
-        @apply gl-border-l-solid;
-    }
-
-    .gl-border-l\! {
-        @apply gl-border-l !important;
-        @apply gl-border-l-gray-100 !important;
-        @apply gl-border-l-solid !important;
-    }
-
-    .gl-border-r {
-        @apply gl-border-r-gray-100;
-        @apply gl-border-r-solid;
-    }
-
-    .gl-border-r\! {
-        @apply gl-border-r !important;
-        @apply gl-border-r-gray-100 !important;
-        @apply gl-border-r-solid !important;
-    }
-
-    .gl-border-t {
-        @apply gl-border-t-gray-100;
-        @apply gl-border-t-solid;
-    }
-
-    .gl-border-t\! {
-        @apply gl-border-t !important;
-        @apply gl-border-t-gray-100 !important;
-        @apply gl-border-t-solid !important;
-    }
-
-}
-
-/*
-Utilities layer:
-https://tailwindcss.com/docs/adding-custom-styles#adding-custom-utilities
-*/
-@layer utilities {
-    /* the border-style utils in tailwind do not allow for top, bottom, right, left specific values */
-    .gl-border-b-solid {
-        border-bottom-style: solid;
-    }
-
-    .gl-border-l-solid {
-        border-left-style: solid;
-    }
-
-    .gl-border-r-solid {
-        border-right-style: solid;
-    }
-
-    .gl-border-t-solid {
-        border-top-style: solid;
-    }
-}
-

app/views/layouts/_head.html.haml

@@ -5,7 +5,6 @@
 -# 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" }
@@ -31,15 +30,10 @@
     = 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" unless tailwind_all_the_way
   - else
     = stylesheet_link_tag_defer "application"
     = yield :page_specific_styles
     = stylesheet_link_tag_defer 'application_utilities'
-    = stylesheet_link_tag_defer "application_utilities_to_be_replaced" unless tailwind_all_the_way
-  - 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?

config/application.rb

@@ -267,12 +267,9 @@ 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"

config/feature_flags/development/tailwind_all_the_way.yml

----
-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

config/tailwind.all_the_way.config.js

-const path = require('path');
-const plugin = require('tailwindcss/plugin');
-const tailwindGitLabDefaults = require('./tailwind.config');
-
-// Try loading the tailwind css_in_js, in case they exist
-let utilities = {};
-try {
-  // eslint-disable-next-line global-require, import/extensions
-  utilities = require('./helpers/tailwind/css_in_js.js');
-} catch (e) {
-  console.log(
-    'config/helpers/tailwind/css_in_js do not exist yet. Please run `scripts/frontend/tailwind_all_the_way.mjs`',
-  );
-  /*
-  We need to remove the module itself from the cache, because node caches resolved modules.
-  So if we:
-  1. Require this file while helpers/tailwind/css_in_js.js does NOT exist
-  2. Require this file again, when it exists, we would get the version from (1.) leading
-     to errors.
-  If we bust the cache in case css_in_js.js doesn't exist, we will get the proper version
-     on a reload.
-   */
-  delete require.cache[path.resolve(__filename)];
-}
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  ...tailwindGitLabDefaults,
-  corePlugins: {
-    /*
-    We set background: none, Tailwind background-image: none...
-    Probably compatible enough?
-    We could also extend the theme, so that we use background: none in tailwind
-     */
-    backgroundImage: false,
-    /*
-    Our lineClamp also sets white-space: normal, which tailwind doesn't do, maybe we are okay?
-     */
-    lineClamp: false,
-    /*
-    Our opacity scale is 0 to 10, tailwind is 0, 100
-    So:
-    opacity-5 => opacity-50
-    opacity-10 => opacity-100
-     */
-    opacity: false,
-    /*
-    outline-none in tailwind is 2px solid transparent, we have outline: none
-
-    I assume that tailwind has it's reasons, and we probably could enable it
-    after a UX check
-     */
-    outlineStyle: false,
-    /*
-    Our outline-0 removes the complete outline, while tailwind just sets the width to 0.
-    Maybe compatible?
-     */
-    outlineWidth: false,
-    /*
-    Disable preflight styles so that `@tailwind base` compiles to CSS vars declarations without
-    any of the resets which we don't need.
-    More on this at https://tailwindcss.com/docs/preflight.
-     */
-    preflight: false,
-  },
-  theme: {
-    // These extends probably should be moved to GitLab UI:
-    extend: {
-      borderWidth: {
-        // We have a border-1 class, while tailwind was missing it
-        1: '1px',
-      },
-      borderRadius: {
-        // Tailwind gl-rounded-full is 9999px
-        full: '50%',
-      },
-      boxShadow: {
-        none: 'none',
-        // TODO: I don't think we have a --t-gray matching class... --t-gray-a-24 seems close
-        DEFAULT: '0 1px 4px 0 rgba(#000, 0.3)',
-        sm: '0 1px 2px var(--t-gray-a-08, #1f1e2414)',
-        md: '0 2px 8px var(--t-gray-a-16, #1f1e2429), 0 0 2px var(--t-gray-a-16, #1f1e2429)',
-        lg: '0 4px 12px var(--t-gray-a-16, #1f1e2429), 0 0 4px var(--t-gray-a-16, #1f1e2429)',
-      },
-    },
-  },
-  plugins: [
-    plugin(({ addUtilities }) => {
-      addUtilities(utilities);
-    }),
-  ],
-};

config/tailwind.config.js

+const path = require('path');
+const plugin = require('tailwindcss/plugin');
 const tailwindDefaults = require('@gitlab/ui/tailwind.defaults');
 
+// Try loading the tailwind css_in_js, in case they exist
+let utilities = {};
+try {
+  // eslint-disable-next-line global-require, import/extensions
+  utilities = require('./helpers/tailwind/css_in_js.js');
+} catch (e) {
+  console.log(
+    'config/helpers/tailwind/css_in_js do not exist yet. Please run `scripts/frontend/tailwind_all_the_way.mjs`',
+  );
+  /*
+  We need to remove the module itself from the cache, because node caches resolved modules.
+  So if we:
+  1. Require this file while helpers/tailwind/css_in_js.js does NOT exist
+  2. Require this file again, when it exists, we would get the version from (1.) leading
+     to errors.
+  If we bust the cache in case css_in_js.js doesn't exist, we will get the proper version
+     on a reload.
+   */
+  delete require.cache[path.resolve(__filename)];
+}
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  presets: [tailwindDefaults],
   content: [
     './{ee,jh,}/app/assets/javascripts/**/*.{vue,js}',
     '!./app/assets/javascripts/locale/',
@@ -10,22 +34,73 @@ module.exports = {
     './{ee,jh,}/app/views/**/*.haml',
     './node_modules/@gitlab/ui/dist/**/*.{vue,js}',
   ],
-  presets: [tailwindDefaults],
-  corePlugins: [
-    'appearance',
-    'content',
-    'float',
-    'inset',
-    'isolation',
-    'mixBlendMode',
-    'position',
-    'tableLayout',
-    'userSelect',
-  ],
   blocklist: [
     // Prevents an irrelevant util from being generated.
     // In the long run, we'll look into disabling arbitrary values altogether, which should prevent
     // this from happening. For now, we are simply blocking the only problematic occurrence.
     '[link:page-slug]',
   ],
+  corePlugins: {
+    /*
+    We set background: none, Tailwind background-image: none...
+    Probably compatible enough?
+    We could also extend the theme, so that we use background: none in tailwind
+     */
+    backgroundImage: false,
+    /*
+    Our lineClamp also sets white-space: normal, which tailwind doesn't do, maybe we are okay?
+     */
+    lineClamp: false,
+    /*
+    Our opacity scale is 0 to 10, tailwind is 0, 100
+    So:
+    opacity-5 => opacity-50
+    opacity-10 => opacity-100
+     */
+    opacity: false,
+    /*
+    outline-none in tailwind is 2px solid transparent, we have outline: none
+
+    I assume that tailwind has it's reasons, and we probably could enable it
+    after a UX check
+     */
+    outlineStyle: false,
+    /*
+    Our outline-0 removes the complete outline, while tailwind just sets the width to 0.
+    Maybe compatible?
+     */
+    outlineWidth: false,
+    /*
+    Disable preflight styles so that `@tailwind base` compiles to CSS vars declarations without
+    any of the resets which we don't need.
+    More on this at https://tailwindcss.com/docs/preflight.
+     */
+    preflight: false,
+  },
+  theme: {
+    // These extends probably should be moved to GitLab UI:
+    extend: {
+      borderWidth: {
+        // We have a border-1 class, while tailwind was missing it
+        1: '1px',
+      },
+      borderRadius: {
+        // Tailwind gl-rounded-full is 9999px
+        full: '50%',
+      },
+      boxShadow: {
+        none: 'none',
+        // TODO: I don't think we have a --t-gray matching class... --t-gray-a-24 seems close
+        DEFAULT: '0 1px 4px 0 rgba(#000, 0.3)',
+        sm: '0 1px 2px var(--t-gray-a-08, #1f1e2414)',
+        md: '0 2px 8px var(--t-gray-a-16, #1f1e2429), 0 0 2px var(--t-gray-a-16, #1f1e2429)',
+        lg: '0 4px 12px var(--t-gray-a-16, #1f1e2429), 0 0 4px var(--t-gray-a-16, #1f1e2429)',
+      },
+    },
+  },
+  plugins: [
+    plugin(({ addUtilities }) => {
+      addUtilities(utilities);
+    }),
+  ],
 };

package.json

@@ -11,8 +11,7 @@
     "internal:stylelint": "stylelint -q --rd '{ee/,}app/assets/stylesheets/**/*.{css,scss}'",
     "prejest": "yarn check-dependencies",
     "build:css": "node scripts/frontend/build_css.mjs",
-    "tailwindcss:build": "node scripts/frontend/tailwindcss.mjs",
-    "pretailwindcss:build": "node scripts/frontend/tailwind_all_the_way.mjs --only-used",
+    "tailwindcss:build": "node scripts/frontend/tailwind_all_the_way.mjs --only-used",
     "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",
@@ -42,7 +41,7 @@
     "preinstall": "node ./scripts/frontend/preinstall.mjs",
     "postinstall": "node ./scripts/frontend/postinstall.js",
     "storybook:install": "yarn --cwd ./storybook install",
-    "storybook:build": "yarn pretailwindcss:build && yarn --cwd ./storybook build --quiet",
+    "storybook:build": "yarn tailwindcss:build && yarn --cwd ./storybook build --quiet",
     "storybook:start": "./scripts/frontend/start_storybook.sh",
     "swagger:validate": "swagger-cli validate",
     "webpack": "NODE_OPTIONS=\"${NODE_OPTIONS:=--max-old-space-size=5120}\" webpack --config config/webpack.config.js",

scripts/frontend/compare_css_util_classes.mjs

@@ -73,7 +73,7 @@ const applicationUtilsDark = extractRules(
   loadCSSFromFile('app/assets/builds/application_utilities_to_be_replaced_dark.css'),
   { convertColors: true },
 );
-const tailwind = loadCSSFromFile('app/assets/builds/tailwind_all_the_way.css');
+const tailwind = loadCSSFromFile('app/assets/builds/tailwind.css');
 
 compareApplicationUtilsToTailwind(applicationUtilsLight, tailwind);
 compareApplicationUtilsToTailwind(applicationUtilsDark, tailwind, darkModeResolver);

scripts/frontend/start_storybook.sh

@@ -7,5 +7,5 @@ if ! [[ -d storybook/node_modules ]] ; then
   yarn storybook:install
 fi
 
-yarn pretailwindcss:build
+yarn tailwindcss:build
 yarn --cwd ./storybook start

scripts/frontend/tailwind_all_the_way.mjs

@@ -138,9 +138,7 @@ const hardCodedColors = ${JSON.stringify(hardcodedColors, null, 2)};
 async function toMinimalUtilities() {
   // We re-import the config with a `?minimal` query in order to cache-bust
   // the previously loaded config, which doesn't have the latest css_in_js
-  const { default: tailwindConfig } = await import(
-    '../../config/tailwind.all_the_way.config.js?minimal'
-  );
+  const { default: tailwindConfig } = await import('../../config/tailwind.config.js?minimal');
 
   const { css: tailwindClasses } = await postcss([
     tailwindcss({
@@ -209,9 +207,7 @@ export async function convertUtilsToCSSInJS({ buildOnlyUsed = false } = {}) {
   );
 
   // Lazily import the tailwind config
-  const { default: tailwindConfig } = await import(
-    '../../config/tailwind.all_the_way.config.js?default'
-  );
+  const { default: tailwindConfig } = await import('../../config/tailwind.config.js?default');
 
   const { css: tailwindClasses } = await postcss([
     tailwindcss({
@@ -235,10 +231,7 @@ export async function convertUtilsToCSSInJS({ buildOnlyUsed = false } = {}) {
     console.log(`Went from ${stats.safeToUseLegacyUtils} => ${minimalUtils} utility classes`);
   }
 
-  await buildTailwind({
-    tailWindAllTheWay: true,
-    content: buildOnlyUsed ? false : allUtilitiesFile,
-  });
+  await buildTailwind({ content: buildOnlyUsed ? false : allUtilitiesFile });
 
   return stats;
 }

scripts/frontend/tailwindcss.mjs

@@ -10,34 +10,16 @@ const exec = util.promisify(execCB);
 // Note, in node > 21.2 we could replace the below with import.meta.dirname
 const ROOT_PATH = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '../../');
 
-export async function build({
-  shouldWatch = false,
-  tailWindAllTheWay = Boolean(process.env.TAILWIND_ALL_THE_WAY),
-  content = false,
-} = {}) {
+const cssInJsPath = path.join(ROOT_PATH, 'config/helpers/tailwind/css_in_js.js');
+
+export async function build({ shouldWatch = false, content = false } = {}) {
   const processorOptions = {
     '--watch': shouldWatch,
     '--output': path.join(ROOT_PATH, 'app/assets/builds', 'tailwind.css'),
     '--input': path.join(ROOT_PATH, 'app/assets/stylesheets', 'tailwind.css'),
   };
 
-  let config = path.join(ROOT_PATH, 'config/tailwind.config.js');
-  if (tailWindAllTheWay) {
-    console.log('# Building "all the way" tailwind');
-    config = path.join(ROOT_PATH, 'config/tailwind.all_the_way.config.js');
-    processorOptions['--output'] = path.join(
-      ROOT_PATH,
-      'app/assets/builds',
-      'tailwind_all_the_way.css',
-    );
-    processorOptions['--input'] = path.join(
-      ROOT_PATH,
-      'app/assets/stylesheets',
-      'tailwind_all_the_way.css',
-    );
-  } else {
-    console.log('# Building "normal" tailwind');
-  }
+  const config = path.join(ROOT_PATH, 'config/tailwind.config.js');
 
   if (content) {
     console.log(`Setting content to ${content}`);
@@ -66,8 +48,8 @@ function wasScriptCalledDirectly() {
 }
 
 async function ensureCSSinJS() {
-  const cmd = 'yarn run pretailwindcss:build';
-  console.log('Ensuring config/helpers/tailwind/css_in_js.js exists');
+  console.log(`Ensuring ${cssInJsPath} exists`);
+  const cmd = 'yarn run tailwindcss:build';
 
   const { stdout, error } = await exec(cmd, {
     env: { ...process.env, REDIRECT_TO_STDOUT: 'true' },

storybook/config/preview.js

@@ -20,5 +20,5 @@ Vue.use(Vuex);
 
 stylesheetsRequireCtx('./application.scss');
 stylesheetsRequireCtx('./application_utilities.scss');
-import('../../app/assets/builds/tailwind_all_the_way.css');
+import('../../app/assets/builds/tailwind.css');
 stylesheetsRequireCtx('./highlight/themes/white.scss');

vite.config.js

@@ -263,6 +263,7 @@ export default defineConfig({
         : {
             ignored: [
               '**/*.stories.js',
+              '**/css_in_js.js',
               function ignoreRootFolder(x) {
                 /*
              `vite` watches the root folder of gitlab and all of its sub folders