@gitlab/ui 86.12.0 → 86.12.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [86.12.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v86.12.0...v86.12.1) (2024-07-17)
+
+
+### Bug Fixes
+
+* Properly handle multi-class tailwind migration ([7131ebb](https://gitlab.com/gitlab-org/gitlab-ui/commit/7131ebb48501d1ac962c1b64d7fb45fc07f6fc37))
+
 # [86.12.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v86.11.1...v86.12.0) (2024-07-16)
 
 

package/bin/migrate_custom_utils_to_tw.bundled.mjs

@@ -183679,9 +183679,15 @@ var _23 = function() {
 }();
 var lne = { html: rn7("html", gc3, { staticAttrs: ["class"] }), glimmer: rn7("glimmer", oY, { staticAttrs: ["class"] }), lwc: rn7("lwc", gc3, { staticAttrs: ["class"] }), angular: rn7("angular", gc3, { staticAttrs: ["class"], dynamicAttrs: ["[ngClass]"] }), vue: rn7("vue", gc3, { staticAttrs: ["class"], dynamicAttrs: [":class", "v-bind:class"] }), css: rn7("css", Sv), scss: rn7("scss", Sv), less: rn7("less", Sv), babel: rn7("babel", Ls8, { staticAttrs: ["class", "className"] }), "babel-flow": rn7("babel-flow", Ls8, { staticAttrs: ["class", "className"] }), flow: rn7("flow", Ls8, { staticAttrs: ["class", "className"] }), typescript: rn7("typescript", Ls8, { staticAttrs: ["class", "className"] }), "babel-ts": rn7("babel-ts", Ls8, { staticAttrs: ["class", "className"] }), acorn: rn7("acorn", Ls8, { staticAttrs: ["class", "className"] }), meriyah: rn7("meriyah", Ls8, { staticAttrs: ["class", "className"] }), __js_expression: rn7("__js_expression", Ls8, { staticAttrs: ["class", "className"] }), ...si5.parsers.svelte ? { svelte: rn7("svelte", vc3, { staticAttrs: ["class"] }) } : {}, ...si5.parsers.astro ? { astro: rn7("astro", I23, { staticAttrs: ["class", "className"], dynamicAttrs: ["class:list", "className"] }) } : {}, ...si5.parsers.astroExpressionParser ? { astroExpressionParser: rn7("astroExpressionParser", Ls8, { staticAttrs: ["class"], dynamicAttrs: ["class:list"] }) } : {}, ...si5.parsers.marko ? { marko: rn7("marko", cY2, { staticAttrs: ["class"] }) } : {}, ...si5.parsers.melody ? { melody: rn7("melody", O23, { staticAttrs: ["class"] }) } : {}, ...si5.parsers.pug ? { pug: rn7("pug", pY, { staticAttrs: ["class"] }) } : {}, ...si5.parsers["liquid-html"] ? { "liquid-html": rn7("liquid-html", lY, { staticAttrs: ["class"] }) } : {} };
 
-// bin/lib/tailwind_equivalents.js
+// bin/lib/tailwind_equivalents.mjs
 var tailwindEquivalents = {
+  /**
+   * These classes are mapping to multi-classes...
+   */
   "gl-sr-only-focusable": "gl-sr-only focus:gl-not-sr-only",
+  "gl--flex-center": "gl-flex gl-items-center gl-justify-center",
+  "gl-flex-flow-row-wrap": "gl-flex-row gl-flex-wrap",
+  // Normal replacements below
   "gl-spin": "gl-animate-spin",
   "gl-animate-skeleton-loader": null,
   "gl-hover-bg-transparent": "hover:gl-bg-transparent",
@@ -183797,7 +183803,6 @@ var tailwindEquivalents = {
   "gl-hover-text-blue-800": "hover:gl-text-blue-800",
   "gl-hover-text-blue-800!": "hover:!gl-text-blue-800",
   "gl-text-red-500!": "!gl-text-red-500",
-  "gl--flex-center": "gl-flex gl-items-center gl-justify-center",
   "gl-focus--focus": "focus:gl-focus",
   "gl-cursor-default!": "!gl-cursor-default",
   "gl-hover-cursor-pointer": "hover:gl-cursor-pointer",
@@ -183904,7 +183909,6 @@ var tailwindEquivalents = {
   "gl-flex-basis-half": "gl-basis-1/2",
   "gl-flex-basis-full": "gl-basis-full",
   "gl-flex-basis-full!": "!gl-basis-full",
-  "gl-flex-flow-row-wrap": "gl-flex-row gl-flex-wrap",
   "gl-justify-content-center": "gl-justify-center",
   "gl-justify-content-end": "gl-justify-end",
   "gl-justify-content-end!": "!gl-justify-end",
@@ -184208,6 +184212,21 @@ var tailwindEquivalents = {
   "gl-visibility-hidden": "gl-invisible",
   "gl-z-index-200": "gl-z-200",
   "gl-z-index-9999!": "!gl-z-9999",
+  /*
+   Items below have been found by analysing the following projects
+   - jh fork of GitLab
+   - https://gitlab-org.gitlab.io/frontend/playground/gitlab-code-scanner
+   - https://gitlab.com/gitlab-com/gl-infra/gitlab-dedicated/switchboard/
+   - https://gitlab.com/gitlab-org/customers-gitlab-com/
+   - https://gitlab.com/gitlab-org/editor-extensions/gitlab-jetbrains-plugin
+   - https://gitlab.com/gitlab-org/frontend/pajamas-adoption-scanner
+   - https://gitlab.com/gitlab-org/frontend/playground/vue-compat-scanner
+   - https://gitlab.com/gitlab-org/gitlab-docs/
+   - https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com
+   - https://gitlab.com/gitlab-org/gitlab-vscode-extension/
+   - https://gitlab.com/gitlab-org/status-page
+   - https://gitlab.com/gitlab-org/technical-writing-group/gitlab-docs-hugo
+   */
   "gl-active-bg-t-gray-a-08": "active:gl-bg-alpha-dark-8",
   "gl-inset-border-b-1-gray-200": "gl-shadow-inner-b-1-gray-100",
   "gl-justify-content-center!": "!gl-justify-center",
@@ -184235,18 +184254,87 @@ var tailwindEquivalents = {
   "gl-z-index-1": "gl-z-1",
   "gl-z-index-2": "gl-z-2",
   "gl-z-index-3": "gl-z-3",
-  "gl-z-index-4": "gl-z-4"
+  "gl-z-index-4": "gl-z-4",
+  "gl-bg-data-viz-green-700!": "!gl-bg-data-viz-green-700",
+  "gl-bg-data-viz-magenta-950!": "!gl-bg-data-viz-magenta-950",
+  "gl-inset-border-1-red-300": "gl-shadow-inner-1-red-300",
+  "gl-inset-border-1-red-500": "gl-shadow-inner-1-red-500",
+  "gl-column-gap-3": "gl-gap-x-3"
 };
 
+// bin/lib/tailwind_migrations.mjs
+function legacyClassToImportant(klass) {
+  return klass.endsWith("!") ? klass : `${klass}!`;
+}
+function tailwindClassToImportant(klass) {
+  if (klass.includes(" ")) {
+    return klass.split(" ").map((k9) => tailwindClassToImportant(k9)).join(" ");
+  }
+  if (klass.includes("!gl-")) {
+    return klass;
+  } else {
+    return klass.replace(/(^|:)(-?gl-)/, "$1!$2");
+  }
+}
+function filterOutNonStringValues(rawMigrations) {
+  return Object.entries(rawMigrations).filter(([, to4]) => typeof to4 === "string");
+}
+function addImportantVariants(rawMigrations) {
+  const map2 = rawMigrations.reduce((acc, [from, to4]) => {
+    acc.set(from, to4);
+    if (to4.includes(" ")) {
+      acc.set("\\." + from, "." + to4.replace(/ /g, "."));
+    }
+    const importantFrom = legacyClassToImportant(from);
+    if (!Object.hasOwn(rawMigrations, importantFrom)) {
+      const importantTo = tailwindClassToImportant(to4);
+      acc.set(importantFrom, importantTo);
+      if (to4.includes(" ")) {
+        acc.set("\\." + importantFrom, "." + importantTo.replace(/ /g, "."));
+      }
+    }
+    return acc;
+  }, /* @__PURE__ */ new Map());
+  return Array.from(map2.entries()).map(([from, to4]) => ({ from, to: to4 }));
+}
+function addFromRegExps(rawMigrations) {
+  const classChars = ["-", "\\w", "!", ":"].join("|");
+  return rawMigrations.map((migration) => ({
+    ...migration,
+    fromRegExp: new RegExp(`(?<!${classChars})${migration.from}(?!${classChars})`, "g")
+  }));
+}
+function sortMigrations(unsortedMigrations) {
+  return unsortedMigrations.slice().sort((a3, b6) => {
+    if (a3.from.length < b6.from.length)
+      return 1;
+    if (a3.from.length > b6.from.length)
+      return -1;
+    return 0;
+  });
+}
+async function parseMigrations(obj) {
+  try {
+    return sortMigrations(addFromRegExps(addImportantVariants(filterOutNonStringValues(obj))));
+  } catch (error) {
+    console.error(error.message);
+    return [];
+  }
+}
+function runMigrations(contents, migrationsToDo) {
+  let newContents = contents;
+  for (const { fromRegExp, to: to4 } of migrationsToDo) {
+    newContents = newContents.replaceAll(fromRegExp, to4);
+  }
+  return newContents;
+}
+
 // bin/migrate_custom_utils_to_tw.mjs
 function createRewriter(config, migrationsToDo) {
   const { tailwindConfig, dryRun } = config;
   return async function rewrite(file) {
     const contents = await readFile3(file, { encoding: "utf8" });
-    let newContents = contents;
-    for (const { fromRegExp, to: to4 } of migrationsToDo) {
-      newContents = newContents.replaceAll(fromRegExp, to4);
-    }
+    let newContents = runMigrations(contents, migrationsToDo);
     if (contents === newContents) {
       console.warn(`No changes to ${file}`);
       return;
@@ -184315,50 +184403,6 @@ function validateMigrations(processedMigrations) {
   }
   return true;
 }
-function legacyClassToImportant(klass) {
-  return klass.endsWith("!") ? klass : `${klass}!`;
-}
-function tailwindClassToImportant(klass) {
-  return klass.includes("!gl-") ? klass : klass.replace(/(^|:)(-?gl-)/, "$1!$2");
-}
-function filterOutNonStringValues(rawMigrations) {
-  return Object.entries(rawMigrations).filter(([, to4]) => typeof to4 === "string");
-}
-function addImportantVariants(rawMigrations) {
-  const map2 = rawMigrations.reduce((acc, [from, to4]) => {
-    acc.set(from, to4);
-    const importantFrom = legacyClassToImportant(from);
-    if (!Object.hasOwn(rawMigrations, importantFrom)) {
-      acc.set(importantFrom, tailwindClassToImportant(to4));
-    }
-    return acc;
-  }, /* @__PURE__ */ new Map());
-  return Array.from(map2.entries()).map(([from, to4]) => ({ from, to: to4 }));
-}
-function addFromRegExps(rawMigrations) {
-  const classChars = ["-", "\\w", "!", ":"].join("|");
-  return rawMigrations.map((migration) => ({
-    ...migration,
-    fromRegExp: new RegExp(`(?<!${classChars})${migration.from}(?!${classChars})`, "g")
-  }));
-}
-function sortMigrations(unsortedMigrations) {
-  return unsortedMigrations.slice().sort((a3, b6) => {
-    if (a3.from.length < b6.from.length)
-      return 1;
-    if (a3.from.length > b6.from.length)
-      return -1;
-    return 0;
-  });
-}
-async function parseMigrations(obj) {
-  try {
-    return sortMigrations(addFromRegExps(addImportantVariants(filterOutNonStringValues(obj))));
-  } catch (error) {
-    console.error(error.message);
-    return [];
-  }
-}
 async function getFilesAndDirectories(directories, dryRun) {
   const directoriesPattern = directories.length === 0 ? process.cwd() : directories.length === 1 ? directories[0] : `{${directories.join(",")}}`;
   const extensions = ["haml", "rb", "vue", "js", "snap", "html"];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "86.12.0",
+  "version": "86.12.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",