adds CSS logical property classes to Spacing plugin

* updates dependency versions * cleans up docs
area17 · Jun 20, 2024 · e946827 · e946827
1 parent db7dd87
commit e946827
Show file tree

Hide file tree

Showing 8 changed files with 425 additions and 281 deletions.
diff --git a/changelog.md b/changelog.md
@@ -4,6 +4,13 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [4.0.5] - 2024-06-20
+
+### Added
+
+- add `ms-`, `me-`, `ps-`, `pe-`, `start-` and `end-` to `Spacing` plugin (to match `Layout` plugin).
+((CSS logical properties)[https://tailwindcss.com/blog/tailwindcss-v3-3#simplified-rtl-support-with-logical-properties])
+
 ## [4.0.4] - 2024-03-06
 
 ### Fixed
@@ -87,7 +94,8 @@ For Spacing now use "arbitraries" instead of "arbritraries"
 
 ## Added
 
-- add `ms-`, `me-`, `ps-`, `pe-`, `start-` and `end-`
+- add `ms-`, `me-`, `ps-`, `pe-`, `start-` and `end-` to `Layout` plugin.
+((CSS logical properties)[https://tailwindcss.com/blog/tailwindcss-v3-3#simplified-rtl-support-with-logical-properties])
 
 ### Fixed
 

diff --git a/docs/Layout.html b/docs/Layout.html
@@ -74,6 +74,27 @@ <h3>
           <code>margin-right</code> and a negative <code>margin-left</code> of
           <code>N</code> columns wide
         </li>
+
+        <li class="mt-20">
+          <code>.ms-N-cols</code> on child, sets a
+          <code>margin-inline-start</code> of <code>N</code> columns wide
+          - from <code>3.10.0</code>
+        </li>
+        <li>
+          <code>.me-N-cols</code> on child, sets a
+          <code>margin-inline-end</code> of <code>N</code> columns wide
+          - from <code>3.10.0</code>
+        </li>
+        <li>
+          <code>.-ms-N-cols</code> on child, sets a negative
+          <code>margin-inline-start</code> of <code>N</code> columns wide
+          - from <code>3.10.0</code>
+        </li>
+        <li>
+          <code>.-me-N-cols</code> on child, sets a negative
+          <code>margin-inline-end</code> of <code>N</code> columns wide
+          - from <code>3.10.0</code>
+        </li>
       </ul>
     </li>
     <li class="mt-20">
@@ -92,6 +113,15 @@ <h3>
           <code>padding-right</code> and <code>padding-left</code> of
           <code>N</code> columns wide
         </li>
+
+        <li class="mt-20">
+          <code>.ps-N-cols</code> on child, sets a <code>padding-inline-start</code> of
+          <code>N</code> columns wide - from <code>3.10.0</code>
+        </li>
+        <li>
+          <code>.pe-N-cols</code> on child, sets a <code>padding-inline-end</code> of
+          <code>N</code> columns wide - from <code>3.10.0</code>
+        </li>
       </ul>
     </li>
     <li class="mt-20">
@@ -122,6 +152,23 @@ <h3>
           <code>.-inset-x-N-cols</code> sets negative <code>left</code> and
           negative <code>right</code> to <code>N</code> columns
         </li>
+
+
+        <li class="mt-20">
+          <code>.start-N-cols</code> sets <code>inset-inline-start</code> to
+          <code>N</code> columns - from <code>3.10.0</code>
+        </li>
+        <li>
+          <code>.end-N-cols</code> sets <code>inset-inline-end</code> to
+          <code>N</code> columns - from <code>3.10.0</code>
+        </li>
+          <code>.-start-N-cols</code> sets negative <code>inset-inline-start</code> to
+          <code>N</code> columns - from <code>3.10.0</code>
+        </li>
+        <li>
+          <code>.-end-N-cols</code> sets negative <code>inset-inline-end</code> to
+          <code>N</code> columns - from <code>3.10.0</code>
+        </li>
       </ul>
     </li>
     <li class="mt-20">
@@ -159,6 +206,27 @@ <h3>
           <code>N</code> columns minus an inner gutter
         </li>
 
+        <li class="mt-20">
+          <code>.ms-N-cols-no-gutter</code> on child, sets a
+          <code>margin-inline-start</code>of <code>N</code> columns wide minus an inner
+          gutter - from <code>3.10.0</code>
+        </li>
+        <li>
+          <code>.me-N-cols-no-gutter</code> on child, sets a
+          <code>margin-inline-end</code> of <code>N</code> columns minus an inner
+          gutter - from <code>3.10.0</code>
+        </li>
+        <li>
+          <code>.-ms-N-cols-no-gutter</code> on child, sets a negative
+          <code>margin-inline-startt</code> of <code>N</code> columns wide minus an inner
+          gutter - from <code>3.10.0</code>
+        </li>
+        <li>
+          <code>.-me-N-cols-no-gutter</code> on child, sets a negative
+          <code>margin-inline-end</code> of <code>N</code> columns wide minus an
+          inner gutter - from <code>3.10.0</code>
+        </li>
+
         <li class="mt-20">
           <code>.pl-N-cols-no-gutter</code> on child, sets a
           <code>padding-left</code> of <code>N</code> columns minus an inner
@@ -175,6 +243,17 @@ <h3>
           <code>N</code> columns minus an inner gutter
         </li>
 
+        <li class="mt-20">
+          <code>.ps-N-cols-no-gutter</code> on child, sets a
+          <code>padding-inline-start</code> of <code>N</code> columns minus an inner
+          gutter - from <code>3.10.0</code>
+        </li>
+        <li>
+          <code>.pe-N-cols-no-gutter</code> on child, sets a
+          <code>padding-inline-end</code> of <code>N</code> columns minus an inner
+          gutter - from <code>3.10.0</code>
+        </li>
+
         <li class="mt-20">
           <code>.left-N-cols-no-gutter</code> sets <code>left</code> to
           <code>N</code> columns minus an inner gutter
@@ -201,6 +280,23 @@ <h3>
           <code>left</code> and <code>right</code> to <code>N</code> columns
           minus an inner gutter
         </li>
+
+        <li class="mt-20">
+          <code>.start-N-cols-no-gutter</code> sets <code>inset-inline-start</code> to
+          <code>N</code> columns minus an inner gutter - from <code>3.10.0</code>
+        </li>
+        <li>
+          <code>.end-N-cols-no-gutter</code> sets <code>inset-inline-end</code> to
+          <code>N</code> columns minus an inner gutter - from <code>3.10.0</code>
+        </li>
+        <li>
+          <code>.-start-N-cols-no-gutter</code> sets negative
+          <code>inset-inline-start</code> to <code>N</code> columns minus an inner gutter - from <code>3.10.0</code>
+        </li>
+        <li>
+          <code>.-end-N-cols-no-gutter</code> sets negative
+          <code>inset-inline-end</code> to <code>N</code> columns minus an inner gutter - from <code>3.10.0</code>
+        </li>
       </ul>
     </li>
   </ul>

diff --git a/docs/Spacing.html b/docs/Spacing.html
@@ -105,12 +105,14 @@ <h2 id="output">Output</h2>
   </figure>
 
   <p>
-    (<code>.m-</code>, <code>.mx-</code>, <code>my-</code>, <code>mt-</code>,
+    <code>m-</code>, <code>mx-</code>, <code>my-</code>, <code>mt-</code>,
     <code>mb-</code>, <code>ml-</code>, <code>mr-</code>, <code>p-</code>,
     <code>px-</code>, <code>py-</code>, <code>pt-</code>, <code>pb-</code>,
-    <code>pl-</code>, <code>pr-</code> classes will also be created)
+    <code>pl-</code>, <code>pr-</code> classes will also be created, with appropriate negative classes.
   </p>
 
+  <p>From <code>4.0.5</code>, <a href="https://tailwindcss.com/blog/tailwindcss-v3-3#simplified-rtl-support-with-logical-properties" target="_blank">CSS logical property class names are also generated</a> - <code>ms-</code>, <code>me-</code>, <code>ps-</code>, <code>pe-</code>, <code>start-</code> and <code>end-</code>, with appropriate negative classes.</p>
+
   <h2 id="demo">Demo</h2>
 
   <p>
@@ -122,7 +124,7 @@ <h2 id="demo">Demo</h2>
 </div>
 
 <div class="mt-outer-1 p-inner-1 bg-column">
-  <div class="copy">
+  <div class="bg-primary copy ps-inner-1">
     <p>Content</p>
   </div>
 </div>
@@ -133,7 +135,7 @@ <h2 id="demo">Demo</h2>
     <pre
       class="code-example-code"
     ><code class="language-html">&lt;div class="mt-outer-1 p-inner-1 bg-column">
-  &lt;div class="copy">
+  &lt;div class="bg-primary copy ps-inner-1">
     &lt;p>Content&lt;/p>
   &lt;/div>
 &lt;/div></code></pre>

diff --git a/docs/index.html b/docs/index.html
@@ -67,6 +67,17 @@ <h2 class="f-h2">Layout</h2>
         <li>
           <a href="./Spacing.html">Spacing</a> - generates responsive spacing
           classes
+          <ul>
+            <li>
+              <code>v4.0.5</code> adds logical properties
+              <code>margin-inline-start</code>/<code>ms-</code>,
+              <code>margin-inline-end</code>/<code>me-</code>,
+              <code>padding-inline-start</code>/<code>ps-</code>,
+              <code>padding-inline-end</code>/<code>pe-</code>,
+              <code>inset-inline-start</code>/<code>start</code> and
+              <code>inset-inline-end</code>/<code>end</code>
+            </li>
+          </ul>
         </li>
         <li>
           <a href="./Container.html">Container</a> - generates a custom
@@ -81,7 +92,7 @@ <h2 class="f-h2">Layout</h2>
               <code>v3.6.0</code> adds <code>vw</code> based calcs variants
             </li>
             <li>
-              <code>3.10.0</code> adds logical properties
+              <code>v3.10.0</code> adds logical properties
               <code>margin-inline-start</code>/<code>ms-</code>,
               <code>margin-inline-end</code>/<code>me-</code>,
               <code>padding-inline-start</code>/<code>ps-</code>,

diff --git a/docs/tailwind.css b/docs/tailwind.css
@@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -211,6 +211,8 @@ textarea {
   /* 1 */
   line-height: inherit;
   /* 1 */
+  letter-spacing: inherit;
+  /* 1 */
   color: inherit;
   /* 1 */
   margin: 0;
@@ -234,9 +236,9 @@ select {
 */
 
 button,
-[type='button'],
-[type='reset'],
-[type='submit'] {
+input:where([type='button']),
+input:where([type='reset']),
+input:where([type='submit']) {
   -webkit-appearance: button;
   /* 1 */
   background-color: transparent;
@@ -861,6 +863,10 @@ video {
   padding-top: var(--spacing-inner-1);
 }
 
+.ps-inner-1 {
+  padding-inline-start: var(--spacing-inner-1);
+}
+
 [class*='stroke-full'] {
   --stroke-full-thickness: 0.0625em;
   --stroke-full-style: solid;
@@ -1137,6 +1143,10 @@ video {
   --tw-backdrop-opacity:  ;
   --tw-backdrop-saturate:  ;
   --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
 }
 
 ::backdrop {
@@ -1187,6 +1197,10 @@ video {
   --tw-backdrop-opacity:  ;
   --tw-backdrop-saturate:  ;
   --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
 }
 
 :root {
@@ -11349,16 +11363,6 @@ video {
     margin-left: unset;
   }
 
-  .lg\:f-h1 {
-    font-family: var(--f-h1-font-family);
-    font-weight: var(--f-h1-font-weight);
-    font-size: var(--f-h1-font-size);
-    line-height: var(--f-h1-line-height);
-    letter-spacing: var(--f-h1-letter-spacing);
-    -moz-osx-font-smoothing: var(--f-h1--moz-osx-font-smoothing);
-    -webkit-font-smoothing: var(--f-h1--webkit-font-smoothing);
-  }
-
   .lg\:f-code {
     font-family: var(--f-code-font-family);
     font-weight: var(--f-code-font-weight);
@@ -11369,10 +11373,6 @@ video {
     -webkit-font-smoothing: var(--f-code--webkit-font-smoothing);
   }
 
-  .lg\:f-h1 b,.lg\:f-h1 strong {
-    font-weight: var(--f-h1---bold-weight, bold);
-  }
-
   .lg\:f-code b,.lg\:f-code strong {
     font-weight: var(--f-code---bold-weight, bold);
   }