2.2.6 - cleancss fix for minifying error on on the striped tables #42

README.md

@@ -77,7 +77,7 @@ There are 4 ways to get started with pico.css:
 Alternatively, you can use [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@yohns/picocss) to link pico.css.
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.5/css/pico.min.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.6/css/pico.min.css" />
 ```
 
 ### Install with NPM
@@ -135,7 +135,7 @@ Use the default `.classless` version if you need centered viewports:
 ```html
 <link
   rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.5/css/pico.classless.min.css"
+  href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.6/css/pico.classless.min.css"
 />
 ```
 
@@ -144,7 +144,7 @@ Or use the `.fluid.classless` version if you need a fluid container:
 ```html
 <link
   rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.5/css/pico.fluid.classless.min.css"
+  href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.6/css/pico.fluid.classless.min.css"
 />
 ```
 
@@ -159,7 +159,7 @@ Then just write pure HTML, and it should look great:
     <meta name="color-scheme" content="light dark" />
     <link
       rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.5/css/pico.classless.min.css"
+      href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.6/css/pico.classless.min.css"
     />
     <title>Hello, world!</title>
   </head>

docs/index.html

@@ -224,7 +224,7 @@
 			<main class="col-12 col-md-9 col-lg-10">
 				<article>
 					<header>
-						<h2>Yohns PicoCSS Fork v2.2.5</h2>
+						<h2>Yohns PicoCSS Fork v2.2.6</h2>
 						<p class="mb-0">Not in npm yet, but will be soon.</p>
 					</header>
 					<p>I've merged some open pull requests from the <a href="https://github.com/picocss/pico">original Pico</a>
@@ -249,26 +249,10 @@
 						<h2>Tables</h2>
 						<h6 class="fw-n">Striped rows require .striped class</h6>
 					</header>
-					<h6>
-						To have the striped rows, can be solved 2 ways.
-					</h6>
-					<p>
-						The easy way is to set <code>tbody tr:nth-child(odd of :not([hidden]))</code>
-						but unfortunetly, when we minify the CSS it remove the space between odd and of, making the striped lines fail.
-						Until we can find a way to fix the minification of the CSS, we will use a secondary feature that does require some more CSS code.
-					</p>
-					<p>
-						As a result of the minification we are resorting to use an answer that was found on StackOverflow
-						by <a href="https://stackoverflow.com/questions/3773890/zebra-striping-a-table-with-hidden-rows-using-css3/36892714#36892714">Shaggy</a>
-						that I converted into a sass mixin to create more or less nested hidden selectors.
-					</p>
-					<p>The default is currently set to <code>4</code> and can be changed with your settings, or when you include pico in your sass file.</p>
-					<pre class="language-css"><code>@use "pico" with (
-	$hidden-table-levels: 4
-);</code></pre>
-					<p>If you do not intend to have any hidden rows you can set the <code>$hidden-table-levels</code> to 0.</p>
 					<p>Styles for a <code>&lt;caption&gt;</code> element have been added for tables as well.</p>
-					<nav><ul><li>When rows are toggled, the hidden rows have * around the first column.</li></ul><ul><li><button type="button" onclick="document.querySelectorAll('.hidden-table-row').forEach(row => {row.hidden = !row.hidden;});">Toggle Hidden Rows</button></li></ul></nav>
+					<p>For rows that will be hidden, make sure to add the <code>hidden</code> attribute like so: <code>&lt;tr hidden&gt;</code></p>
+					<p>When rows are toggled, the hidden rows have * around the first column.</p>
+					<nav><ul><li></li></ul><ul><li><button type="button" onclick="document.querySelectorAll('.hidden-table-row').forEach(row => {row.hidden = !row.hidden;});">Toggle Hidden Rows</button></li></ul></nav>
 					<table class="striped" id="hidden-row-example">
 						<caption>
 							Solar System Planets
@@ -1655,7 +1639,7 @@
 			function changeTheme(newTheme) {
 				const linkElement = document.getElementById('theme-color-ss');
 				if (linkElement) {
-					linkElement.setAttribute('href', 'https://cdn.jsdelivr.net/gh/Yohn/PicoCSS@2.2.5/css/pico.' + newTheme + '.min.css');
+					linkElement.setAttribute('href', 'https://cdn.jsdelivr.net/gh/Yohn/PicoCSS@2.2.6/css/pico.' + newTheme + '.min.css');
 				}
 			}
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yohns/picocss",
-  "version": "2.2.5",
+  "version": "2.2.6",
   "description": "Minimal CSS Framework for semantic HTML, updated with enhanced capabilities.",
   "authors": [
     {

scss/_settings.scss

@@ -60,11 +60,6 @@ $enable-transitions: true !default;
 // Enable overriding with !important
 $enable-important: true !default;
 
-// How many hidden rows do you expect to have within a table?
-// <tr hidden> is what is accounted for striped rows.
-// if none, put 0 instead of 3.
-$hidden-table-levels: 4 !default;
-
 // Optional parent selector
 // If defined, all HTML tags are wrapped with this selector
 // :root is not wrapped

scss/content/_table.scss

@@ -1,61 +1,6 @@
 @use "sass:map";
 @use "../settings" as *;
 
-// Variables for striped rows
-$color-dark: var(#{$css-var-prefix}table-row-stripped-background-color);
-$color-light: var(#{$css-var-prefix}background-color);
-
-// Adjust this number to control how many <tr hidden> rows are expected.
-$hidden-levels: $hidden-table-levels;
-
-// Do not change, or remove the following line
-// needed this outside of the mixin to compile, idk why
-// sass --version = 1.83.4 compiled with dart2js 3.6.1
-$selector: "& ~ tr";
-
-// This is the work around because the compiler changes
-// :nth-child(odd of :not(:hidden))  to  :nth-child(oddof:not(:hidden))
-// which makes the stripes fail.
-// Mixin to handle the hidden row with striped backgrounds patterns
-// Thanks Shaggy: https://stackoverflow.com/questions/3773890/zebra-striping-a-table-with-hidden-rows-using-css3/36892714#36892714
-@mixin hidden-row-patterns($levels: 2, $dark-color: $color-dark, $light-color: $color-light) {
-  $current-color-odd: $light-color;
-  $current-color-even: $dark-color;
-  // Generate nested s electors for each level
-  $selector: "& ~ tr";
-
-  &[hidden] {
-    display: none;
-
-    @for $i from 1 through $levels {
-      @if $i > 1 {
-        // Swap colors for next iteration
-        $temp: $current-color-odd;
-        $current-color-odd: $current-color-even;
-        $current-color-even: $temp;
-
-        // Add another level of nesting to the selector
-        $selector: "#{$selector}[hidden] ~ tr";
-      }
-      #{$selector} {
-        &:nth-child(odd) {
-          > th,
-          > td {
-            background: $current-color-odd;
-          }
-        }
-
-        &:nth-child(even) {
-          > th,
-          > td {
-            background: $current-color-even;
-          }
-        }
-      }
-    }
-  }
-}
-
 @if map.get($modules, "content/table") {
   /**
    * Table
@@ -126,23 +71,11 @@ $selector: "& ~ tr";
   @if enable-classes {
     #{$parent-selector} table {
       &.striped {
-        > tbody > tr {
+        /* clean-css ignore:start */
-          &:nth-child(odd) {
+        tbody tr:nth-child(odd of :not([hidden])) th,
-            > th,
+        tbody tr:nth-child(odd of :not([hidden])) td {
-            > td {
+          /* clean-css ignore:end */
-              background: $color-dark;
+          background-color: var(#{$css-var-prefix}table-row-stripped-background-color);
-            }
-          }
-
-          &:nth-child(even) {
-            > th,
-            > td {
-              background: $color-light;
-            }
-          }
-
-          // Apply the hidden row patterns
-          @include hidden-row-patterns($hidden-levels);
         }
       }
     }

scss/helpers/_copyright.scss

@@ -1,4 +1,4 @@
 /*!
- * Pico CSS ✨ v2.2.5 (https://github.com/Yohn/PicoCSS)
+ * Pico CSS ✨ v2.2.6 (https://github.com/Yohn/PicoCSS)
  * Copyright 2019-2025 - Licensed under MIT
  */