@leaflink/stash 44.0.0-beta.9 → 44.0.1

package/styles/base.css

@@ -9,6 +9,32 @@
   @tailwind utilities;
 */
 
+@layer components {
+  /**
+   * ll-grid is a legacy grid class that conflicts with tailwinds out of the box grid class.
+   * It's quite hard to replace it with a 1-1 swap, because there's so many default styles included in ll-grid, but it's
+   * also used in conjunction with other grid classes. For example:
+   *      <div class="ll-grid ll-grid-cols-4 md:ll-grid-cols-8 lg:ll-grid-cols-12">
+   *
+   * In this example, ll-grid has default grid-cols styles, but the dev is overriding those defaults. If we were to
+   * replace ll-grid with tw-grid in a simple find/replace, we would HAVE to include
+   * `tw-grid-cols-1 tw-gap-x-gutter tw-gap-y-6 md:tw-grid-cols-12` as well, and then in examples like the one above,
+   * you'd have weird conflicts and specificity issues.
+   *
+   * Conclusion: So, for now,
+   * - `.ll-grid` & `.grid` will continue to exist in backwards-compat.css as is.
+   * - `.tw-grid` will behave as expected and is a simple utility with no baked in defaults.
+   * - We're creating a custom .tw-ll-grid class that will have the same styles but won't cause weird issues downstream.
+   *   In the future we can remove this class OR keep it around if we decide we want to keep a grid utility with
+   *   some baked in defaults.
+   */
+  .tw-ll-grid {
+    @apply tw-grid tw-grid-cols-1 tw-gap-x-gutter tw-gap-y-6 md:tw-grid-cols-12;
+
+    --deprecated: "WARNING: Use `tw-grid` instead";
+  }
+}
+
 /**
  * This is a custom .container class that conflicts with tailwinds out of the box container class.
  * Placed here before tw utilities, and specifically not within @layer components, so that it is
@@ -22,20 +48,6 @@
   width: 100%;
 }
 
-/**
- * This is a legacy grid class that conflicts with tailwinds out of the box grid class.
- * Placed here before tw utilities, and specifically not within @layer components, so that it is
- * always included in the output css.
- *
- * @deprecated - Todo: Migrate to tailwind grid classes. Too tricky to do in one find/replace cause you may have
- *                conflicts with other grid classes meant to override ll-grid.
- */
-.ll-grid {
-  @apply tw-grid tw-grid-cols-1 tw-gap-x-gutter tw-gap-y-6 md:tw-grid-cols-12;
-
-  --deprecated: "WARNING: Use `tw-grid` instead";
-}
-
 /**
  * Variables
  */
@@ -217,7 +229,7 @@
   *,
   ::before,
   ::after {
-    @apply tw-border-0 tw-border-ice-500;
+    @apply tw-border-0 tw-border-solid tw-border-ice-500;
 
     background-repeat: no-repeat;
     box-sizing: border-box;