Fix invalid CSS rules in head elements (#1368)

Rectify and simplify CSS rules  used in the head element. The rules now avoid the invalid use of nested `:not()` pseudo-classes.

- Update CHANGELOG.md
- Remove ignore statements re CSS parse errors
- Add rules for excluded pages and simplify
- Add `activation_no_nav_link` with the rules for excluded pages
- Insert `activation_no_nav_link` when no other rules are generated
- Replace `:nth-child(1)` by `:first-child`
- Correct `:nth-child(n + {{ activation_index | plus: 1 }})` to `:not(:first-child)`
- Eliminate `activation_collection_index`
- Generate `.nav-category-list` selectors only for sites with collections

---------

Co-authored-by: Matt Wang <matt@matthewwang.me>

CHANGELOG.md

@@ -27,6 +27,7 @@ Code changes to `main` that are *not* in the latest release:
 - Fixed: improve build time by [@pdmosses] in [#1358]
 - Fixed: erroneous parentheses in `site_nav` conditional by [@mattxwang] in [#1366]
 - Fixed: navigation scroll to active link regression by [@pdmosses] in [#1367]
+- Fixed: invalid CSS rules in head elements by [@pdmosses] in [#1368]
 
 {: .warning }
 [#1358] moved `_includes/nav.html` to the `_includes/components` directory,
@@ -49,6 +50,7 @@ Users who were overriding that file will need to adjust their sites accordingly.
 [#1360]: https://github.com/just-the-docs/just-the-docs/pull/1360
 [#1366]: https://github.com/just-the-docs/just-the-docs/pull/1366
 [#1367]: https://github.com/just-the-docs/just-the-docs/pull/1367
+[#1368]: https://github.com/just-the-docs/just-the-docs/pull/1368
 [#1377]: https://github.com/just-the-docs/just-the-docs/pull/1377
 
 ## Release v0.6.2

_includes/css/activation.scss.liquid

@@ -6,16 +6,42 @@
   Includes:
     sorted_pages.html.
   Overwrites: 
-    activation_pages, activation_pages_top_size, activation_page, activation_title,
+    activation_no_nav_link, activation_pages, activation_pages_top_size, activation_page, activation_title,
     activation_first_level, activation_second_level, activation_third_level,
     activation_first_level_reversed, activation_second_level_reversed,
-    activation_first_level_index, activation_second_level_index, activation_third_level_index.
+    activation_first_level_index, activation_second_level_index, activation_third_level_index,
+    activation_index, activation_collection_prefix, activation_other_collection_prefix.
   Should not be cached, because it depends on page.
   (For a site with only top-level pages, the rendering of this file is always empty.
   This property could be detected, and used to reduce the build time for such sites.)
 {%- endcomment -%}
 
-{%- unless page.title == nil or page.nav_exclude == true -%}
+{%- comment -%}
+  The CSS rules in activation_no_nav_link are for use on pages excluded from the main navigation.
+  - The first rule ensures that no nav-link has a background image.
+  - The other two rules ensure that all folding collections are expanded.
+{%- endcomment -%}
+
+{%- capture activation_no_nav_link %}
+.site-nav ul li a {
+  background-image: none;
+}
+
+{%- if site.just_the_docs.collections %}
+.site-nav > ul.nav-category-list > li > button svg {
+  transform: rotate(-90deg);
+}
+.site-nav > ul.nav-category-list > li.nav-list-item > ul.nav-list {
+  display: block;
+}
+{%- endif %}
+{% endcapture -%}
+
+{%- if page.title == nil or page.nav_exclude == true -%}
+
+{{ activation_no_nav_link }}
+
+{%- else -%}
 
 {%- assign activation_pages = site[page.collection]
       | default: site.html_pages
@@ -45,7 +71,11 @@
   {%- endif -%}
 {%- endfor -%}
 
-{%- unless activation_first_level_index == nil -%}
+{%- if activation_first_level_index == nil -%}
+
+{{ activation_no_nav_link }}
+
+{%- else -%}
 
 {%- if page.grand_parent -%}
   {%- assign activation_title = page.parent -%}
@@ -89,31 +119,52 @@
   {%- endfor -%}
 {%- endif -%}
 
-{%- unless activation_second_level_index == nil and activation_third_level_index -%}
+{%- if activation_second_level_index == nil and activation_third_level_index -%}
+
+{{ activation_no_nav_link }}
+
+{%- else -%}
 
 {%- comment -%}
-  The generated CSS uses a prefix that depends on the number of ordinary pages
+  The site-nav is:
-  and on the page collections.
+  - an optional ul.nav-list with li.nav-list-items for non-collection top-level pages
+  - an optional ul.nav-list with li.nav-list-item.externals
+  - any number of just-the-docs.collections
+  
+  A non-foldable collection is:
+  - a div.nav-category with the collection name, followed by:
+  - a ul.nav-list with li.nav-list-items for its top-level pages
+  
+  A foldable collection is:
+  - a ul.nav-list.nav-category-list with a single li.nav-list-item containing:
+    - an optional button with the expander svg
+    - a div.nav-category with the collection name
+    - a ul.nav-list with li.nav-list-items for its top-level pages
+  
+  The generated CSS uses:
+  - activation_collection_prefix, to select the site-nav > ul.nav-list for the page
+  - activation_other_collection_prefix, to select all the other site-nav > ul.nav-lists
 {%- endcomment -%}
 
 {%- if page.collection == nil -%}
 
   {%- capture activation_collection_prefix -%}
-  .site-nav > .nav-list:nth-child(1):not(.nav-category-list)
+  .site-nav > ul.nav-list:first-child
   {%- endcapture -%}
+
   {%- capture activation_other_collection_prefix -%}
-  .site-nav > .nav-list:not(:nth-child(1):not(.nav-category-list))
+  .site-nav > ul.nav-list:not(:first-child)
   {%- endcapture -%}
 
 {%- else -%}
 
   {%- for activation_collection in site.just_the_docs.collections -%}
     {%- if activation_collection[0] == page.collection -%}
-      {%- assign activation_collection_index = forloop.index -%}
+      {%- assign activation_index = forloop.index -%}
       {%- break -%}
     {%- endif -%}
   {%- endfor -%}
-  {%- assign activation_index = activation_collection_index -%}
+
   {%- assign activation_pages_top_size = site.html_pages
           | where_exp:"item", "item.title != nil"
           | where_exp:"item", "item.parent == nil"
@@ -122,14 +173,19 @@
   {%- if activation_pages_top_size > 0 -%}
     {%- assign activation_index = activation_index | plus: 1 -%}
   {%- endif -%}
+
   {%- if site.nav_external_links -%}
     {%- assign activation_index = activation_index | plus: 1 -%}
   {%- endif -%}
+
   {%- capture activation_collection_prefix -%}
-  .site-nav > .nav-list:nth-of-type({{ activation_index }}){% if site.just_the_docs.collections[page.collection].nav_fold == true %} > .nav-list-item > .nav-list{% endif %}
+  .site-nav > ul:nth-of-type({{ activation_index }})
+  {%- if site.just_the_docs.collections[page.collection].nav_fold %} > li > ul
+  {%- endif -%}
   {%- endcapture -%}
+
   {%- capture activation_other_collection_prefix -%}
-  .site-nav > .nav-list:not(:nth-of-type({{ activation_index }}))
+  .site-nav > ul:not(:nth-of-type({{ activation_index }}))
   {%- endcapture -%}
 
 {%- endif -%}
@@ -143,25 +199,25 @@
 
 {% if activation_third_level_index -%}
 
-{{ activation_collection_prefix }} > .nav-list-item:not(.external) > .nav-list-link,
+{{ activation_collection_prefix }} > li > a,
-{{ activation_collection_prefix }} > .nav-list-item:not(.external) > .nav-list > .nav-list-item > .nav-list-link,
+{{ activation_collection_prefix }} > li > ul > li > a,
-{{ activation_collection_prefix }} > .nav-list-item:not(.external) > .nav-list > .nav-list-item > .nav-list > .nav-list-item:not(:nth-child({{ activation_third_level_index }})) > .nav-list-link {
+{{ activation_collection_prefix }} > li > ul > li > ul > li:not(:nth-child({{ activation_third_level_index }})) > a {
   background-image: none;
 }
 
 {%- elsif activation_second_level_index -%}
 
-{{ activation_collection_prefix }} > .nav-list-item:not(.external) > .nav-list-link,
+{{ activation_collection_prefix }} > li > a,
-{{ activation_collection_prefix }} > .nav-list-item:not(.external) > .nav-list > .nav-list-item:not(:nth-child({{ activation_second_level_index }})) > .nav-list-link,
+{{ activation_collection_prefix }} > li > ul > li:not(:nth-child({{ activation_second_level_index }})) > a,
-{{ activation_collection_prefix }} > .nav-list-item:not(.external) > .nav-list > .nav-list-item > .nav-list > .nav-list-item > .nav-list-link {
+{{ activation_collection_prefix }} > li > ul > li > ul > li > a {
   background-image: none;
 }
 
 {%- else -%}
 
-{{ activation_collection_prefix }} > .nav-list-item:not(.external):not(:nth-child({{ activation_first_level_index }})) > .nav-list-link,
+{{ activation_collection_prefix }} > li:not(:nth-child({{ activation_first_level_index }})) > a,
-{{ activation_collection_prefix }} > .nav-list-item:not(.external) > .nav-list > .nav-list-item > .nav-list-link,
+{{ activation_collection_prefix }} > li > ul > li > a,
-{{ activation_collection_prefix }} > .nav-list-item:not(.external) > .nav-list > .nav-list-item > .nav-list > .nav-list-item > .nav-list-link {
+{{ activation_collection_prefix }} > li > ul > li > ul > li > a {
   background-image: none;
 }
 
@@ -171,8 +227,8 @@
   The following rule removes the image from the links to pages in other collections.
 {%- endcomment %}
 
-{{ activation_other_collection_prefix }} .nav-list-link,
+{{ activation_other_collection_prefix }} a,
-.site-nav .nav-list-link.external {
+.site-nav li.external a {
   background-image: none;
 }
 
@@ -180,11 +236,11 @@
   The following rule styles the link to the current page.
 {%- endcomment %}
 
-{{ activation_collection_prefix }} > .nav-list-item:not(.external):nth-child({{ activation_first_level_index }})
+{{ activation_collection_prefix }} > li:nth-child({{ activation_first_level_index }})
-{%- if activation_second_level_index %} > .nav-list > .nav-list-item:nth-child({{ activation_second_level_index }})
+{%- if activation_second_level_index %} > ul > li:nth-child({{ activation_second_level_index }})
-{%- if activation_third_level_index %} > .nav-list > .nav-list-item:nth-child({{ activation_third_level_index }})
+{%- if activation_third_level_index %} > ul > li:nth-child({{ activation_third_level_index }})
 {%- endif -%}
-{%- endif %} > .nav-list-link {
+{%- endif %} > a {
   font-weight: 600;
   text-decoration: none;
 }
@@ -200,22 +256,26 @@
   nav-list-expander-right is false, which seems unavoidable.
 {%- endcomment %}
 
-.site-nav > .nav-category-list > .nav-list-item > .nav-list-expander svg,
+{%- if site.just_the_docs.collections %}
-{{ activation_collection_prefix }} > .nav-list-item:nth-child({{ activation_first_level_index }}) > .nav-list-expander svg
+.site-nav > ul.nav-category-list > li > button svg,
+{% endif -%}
+{{ activation_collection_prefix }} > li:nth-child({{ activation_first_level_index }}) > button svg
 {%- if activation_second_level_index -%},
-{{ activation_collection_prefix }} > .nav-list-item:nth-child({{ activation_first_level_index }}) > .nav-list > .nav-list-item:nth-child({{ activation_second_level_index }}) > .nav-list-expander svg
+{{ activation_collection_prefix }} > li:nth-child({{ activation_first_level_index }}) > ul > li:nth-child({{ activation_second_level_index }}) > button svg
 {%- endif %} {
   transform: rotate(-90deg);
 }
 
-.site-nav > .nav-category-list > .nav-list-item > .nav-list,
+{%- if site.just_the_docs.collections %}
-{{ activation_collection_prefix }} > .nav-list-item:nth-child({{ activation_first_level_index }}) > .nav-list
+.site-nav > ul.nav-category-list > li.nav-list-item > ul.nav-list,
+{% endif -%}
+{{ activation_collection_prefix }} > li.nav-list-item:nth-child({{ activation_first_level_index }}) > ul.nav-list
 {%- if activation_second_level_index %},
-{{ activation_collection_prefix }} > .nav-list-item:nth-child({{ activation_first_level_index }}) > .nav-list > .nav-list-item:nth-child({{ activation_second_level_index }}) > .nav-list
+{{ activation_collection_prefix }} > li.nav-list-item:nth-child({{ activation_first_level_index }}) > ul.nav-list > li.nav-list-item:nth-child({{ activation_second_level_index }}) > ul.nav-list
 {%- endif %} {
   display: block;
 }
 
-{%- endunless -%}
+{%- endif -%}
-{%- endunless -%}
+{%- endif -%}
-{%- endunless -%}
+{%- endif -%}

assets/css/just-the-docs-head-nav.css

@@ -11,7 +11,7 @@
 
 {%- capture scss -%}
 {% include css/just-the-docs.scss.liquid color_scheme=color_scheme %}
-.nav-list .nav-list-item .nav-list-link {
+.site-nav ul li a {
   background-image: linear-gradient(
     -90deg,
     rgba($feedback-color, 1) 0%,

fixtures/html5validator-config.yml

@@ -1,6 +1,3 @@
 root: _site
 blacklist:
   - "line-numbers"
-ignore:
-  - "1.810-1.823: error: CSS: Parse Error."
-  - "1.811-1.824: error: CSS: Parse Error."