From 3c9118954377a8bb10d6c23a8ed17f9fa981ab8d Mon Sep 17 00:00:00 2001 From: Yohn Date: Fri, 17 Jan 2025 05:29:34 -0500 Subject: [PATCH] 2.2.6 - cleancss fix for minifying error on on the striped tables #42 --- README.md | 8 ++-- docs/index.html | 26 +++--------- package.json | 2 +- scss/_settings.scss | 5 --- scss/content/_table.scss | 77 +++--------------------------------- scss/helpers/_copyright.scss | 2 +- 6 files changed, 16 insertions(+), 104 deletions(-) diff --git a/README.md b/README.md index 57455af3..5618c7e1 100644 --- a/README.md +++ b/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 - + ``` ### Install with NPM @@ -135,7 +135,7 @@ Use the default `.classless` version if you need centered viewports: ```html ``` @@ -144,7 +144,7 @@ Or use the `.fluid.classless` version if you need a fluid container: ```html ``` @@ -159,7 +159,7 @@ Then just write pure HTML, and it should look great: Hello, world! diff --git a/docs/index.html b/docs/index.html index 42f8b792..1445defc 100644 --- a/docs/index.html +++ b/docs/index.html @@ -224,7 +224,7 @@
-

Yohns PicoCSS Fork v2.2.5

+

Yohns PicoCSS Fork v2.2.6

Not in npm yet, but will be soon.

I've merged some open pull requests from the original Pico @@ -249,26 +249,10 @@

Tables

Striped rows require .striped class
-
- To have the striped rows, can be solved 2 ways. -
-

- The easy way is to set tbody tr:nth-child(odd of :not([hidden])) - 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. -

-

- As a result of the minification we are resorting to use an answer that was found on StackOverflow - by Shaggy - that I converted into a sass mixin to create more or less nested hidden selectors. -

-

The default is currently set to 4 and can be changed with your settings, or when you include pico in your sass file.

- 
@use "pico" with (
-	$hidden-table-levels: 4
-);
-

If you do not intend to have any hidden rows you can set the $hidden-table-levels to 0.

Styles for a <caption> element have been added for tables as well.

- +

For rows that will be hidden, make sure to add the hidden attribute like so: <tr hidden>

+

When rows are toggled, the hidden rows have * around the first column.

+ 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 diff --git a/scss/content/_table.scss b/scss/content/_table.scss index e61d5319..cbd62aba 100644 --- a/scss/content/_table.scss +++ b/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 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 { - &:nth-child(odd) { - > th, - > td { - background: $color-dark; - } - } - - &:nth-child(even) { - > th, - > td { - background: $color-light; - } - } - - // Apply the hidden row patterns - @include hidden-row-patterns($hidden-levels); + /* clean-css ignore:start */ + tbody tr:nth-child(odd of :not([hidden])) th, + tbody tr:nth-child(odd of :not([hidden])) td { + /* clean-css ignore:end */ + background-color: var(#{$css-var-prefix}table-row-stripped-background-color); } } } diff --git a/scss/helpers/_copyright.scss b/scss/helpers/_copyright.scss index dbcc5220..3e7ae1c7 100644 --- a/scss/helpers/_copyright.scss +++ b/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 */
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'); } } diff --git a/package.json b/package.json index 0bae56cc..26ed56bc 100644 --- a/package.json +++ b/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": [ { diff --git a/scss/_settings.scss b/scss/_settings.scss index d09c6e02..081656ed 100644 --- a/scss/_settings.scss +++ b/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? -//