[BUG] Striped table does not work on minified pico css version

[anthony-robin]

Please search for duplicate or closed issues first. ✔️

Describe the issue

Current Behavior

When using minified version of pico (pico.min.css), .striped class applied on table does not appears.
When switching back to the non minified version (pico.css) it works as expected.

Expected Behavior

Striped table should work for both minified and unminified version of pico

Reproduction URL

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.4/css/pico.min.css" />

<table class="striped">
	<thead>
		<tr>
			<th scope="col">Planet</th>
			<th scope="col">Diam. (km)</th>
			<th scope="col">Dist. to Sun (AU)</th>
			<th scope="col">Grav. (m/s²)</th>
		</tr>
	</thead>

	<tbody>
		<tr>
			<th scope="row">Mercury</th>
			<td>4,880</td><td>0.39</td>
			<td>3.7</td>
		</tr>
		<tr>
			<th scope="row">Venus</th>
			<td>12,104</td>
			<td>0.72</td>
			<td>8.9</td>
		</tr>
		<tr>
			<th scope="row">Earth</th>
			<td>12,742</td>
			<td>1.00</td>
			<td>9.8</td>
		</tr>
	</tbody>
</table>

Environment

• picocss 2.2.4

[Yohn]

Yep, I just noticed that as well, I'll have a fix for it shortly.

[Yohn]

Codepen

So what's happening is when cleancss cli minifies the CSS it change the css selector and removes an important space from

PicoCSS/scss/content/_table.scss

Lines 55 to 56 in 0875d75

	tbody tr:nth-child(odd of :not([hidden])) th,
	tbody tr:nth-child(odd of :not([hidden])) td {

Between the odd of making it oddof in minified versions.
I tried countless ways around this to correct the issue but could not solve the issue using that CSS selector.

If anybody knows of a way around this, please let us know!

Then after researching today, I've found a workaround

I created a sass mixin that handles the levels of nested hidden rows, and will be pushing it to the repo here shortly. I will probably set the level to 2 hidden rows, and if more is needed I'll have a setting that'll allow the developer to change the number of potential hidden rows. I'll make a note of this in the docs as well.

This fix is only a temporary fix u til we can find a way to minify the CSS and not remove the spaces around the of operator using clean-css-cli.

[anthony-robin]

So if it's an issue with the dependency that minify style should an issue be opened to their repo to notice them ?
Or maybe switch to another minifier tool ?

[Yohn]

I think switching to another minifier would be useful because the one that is used currently in pico looks to be possibly abandoned.

[Yohn]

Gotta hate when you find a solution to the original issue after you made an alternative and released it.

I thought I tried this solution but I guess not. I'll be publishing it here soon, version 2.2.6

[anthony-robin]

Thanks for the quick release fix ;)