fix: new semantic HTML selectors (#887)

* fix: new semantic HTML selectors * chore: Setup production pipeline and latest * chore: Install polyfills * chore: Selectors cleanup Co-authored-by: SteelWagstaff <[email protected]>
pressbooks · Nov 16, 2021 · 9dbedfd · 9dbedfd
1 parent be05470
commit 9dbedfd
Show file tree

Hide file tree

Showing 14 changed files with 118 additions and 123 deletions.
diff --git a/.github/workflows/.pipeline.yml b/.github/workflows/.pipeline.yml
@@ -77,6 +77,7 @@ jobs:
           export PATH="$HOME/.composer/vendor/bin:$PATH"
           composer install --no-interaction
           composer global require "phpunit/phpunit:7.5.20"
+          composer require --dev yoast/phpunit-polyfills
 
       - name: Run Lint
         run: npm run lint

diff --git a/assets/legacy/styles/_epub-house-style.scss b/assets/legacy/styles/_epub-house-style.scss
@@ -71,7 +71,7 @@ h6.short-title {
 
 /* Numberless chapters have no chapter numbers */
 
-div.chapter.numberless h3.chapter-number {
+div.chapter.numberless .chapter-number {
   display: none;
 }
 

diff --git a/assets/legacy/styles/_pdf-house-style.scss b/assets/legacy/styles/_pdf-house-style.scss
@@ -752,19 +752,19 @@ meta[name="pb-publisher-city"] {
 
 /* PART & CHAPTER STRINGS */
 
-.part-title-wrap h3.part-number {
+.part-title-wrap .part-number {
   string-set: part-number content();
 }
 
 .part-title-wrap h1.part-title {
   string-set: part-title content();
 }
 
-h3.chapter-number {
+.chapter-number {
   string-set: chapter-number content();
 }
 
-div.chapter.numberless h3.chapter-number {
+div.chapter.numberless .chapter-number {
   display: none;
 }
 
@@ -778,9 +778,9 @@ div.back-matter .back-matter-title-wrap > h1:first-of-type {
 /* "short title override" ... this sets short chapter title content (for running header) but does not display it.
 it can cause problems with spacing of things, so be careful to design around it */
 
-div.front-matter > div.ugc h6.short-title:first-of-type,
-div.chapter > div.ugc h6.short-title:first-of-type,
-div.back-matter > div.ugc h6.short-title:first-of-type {
+div.front-matter > div.ugc .short-title:first-of-type,
+div.chapter > div.ugc .short-title:first-of-type,
+div.back-matter > div.ugc .short-title:first-of-type {
   string-set: section-title content() !important; /* override running header */
   visibility: hidden; /* display:none breaks string-set: */
   font-size: 0;

diff --git a/assets/legacy/styles/_prince-toc.scss b/assets/legacy/styles/_prince-toc.scss
@@ -158,6 +158,7 @@
     display: inline-block;
     width: 75%;
     text-indent: 0;
+    color: inherit;
   }
 
   /* TOC CHAPTER NUMBERS */
@@ -610,6 +611,7 @@
     display: none;
     width: 75%;
     text-indent: 0;
+    color: inherit;
   }
 
   /* TOC CHAPTER NUMBERS */

diff --git a/composer.lock b/composer.lock
diff --git a/packages/buckram/assets/styles/components/_colors.scss b/packages/buckram/assets/styles/components/_colors.scss
@@ -125,7 +125,7 @@ p.wp-caption-text {
 }
 
 // TITLE PAGE(S) COLOR
-#half-title-page > h1.title {
+#half-title-page > .title {
   color: if-map-get($half-title-title-color, $type);
 }
 
@@ -150,7 +150,7 @@ p.wp-caption-text {
 }
 
 // FRONT MATTER COLOR
-h1.front-matter-title {
+.front-matter-title {
   color: if-map-get($front-matter-title-color, $type);
 }
 
@@ -167,11 +167,11 @@ h1.front-matter-title {
 }
 
 // PART TITLE COLOR
-h3.part-number {
+.part-number {
   color: if-map-get($part-number-color, $type);
 }
 
-h1.part-title {
+.part-title {
   color: if-map-get($part-title-color, $type);
 }
 
@@ -181,15 +181,15 @@ h1.part-title {
   color: if-map-get($chapter-number-color, $type);
 }
 
-h2.chapter-title {
+.chapter-title {
   color: if-map-get($chapter-title-color, $type);
 }
 
-h2.chapter-subtitle {
+.chapter-subtitle {
   color: if-map-get($chapter-subtitle-color, $type);
 }
 
-h2.chapter-author {
+.chapter-author {
   color: if-map-get($chapter-author-color, $type);
 }
 
@@ -198,7 +198,7 @@ h2.chapter-author {
 }
 
 // BACK MATTER TITLE COLOR
-h1.back-matter-title {
+.back-matter-title {
   color: if-map-get($back-matter-title-color, $type);
 }
 

diff --git a/packages/buckram/assets/styles/components/pages/_titles.scss b/packages/buckram/assets/styles/components/pages/_titles.scss
@@ -9,7 +9,7 @@
   display: if-map-get($title-half-title-display, $type);
 }
 
-#half-title-page > h1.title {
+#half-title-page > .title {
   margin-top: if-map-get($title-half-title-block-margin-top, $type);
   font-family: $title-half-title-font-family;
   font-size: if-map-get($title-half-title-font-size, $type);
@@ -23,7 +23,7 @@
 }
 
 // Title Page
-h1.title {
+.title {
   margin-top: if-map-get($title-title-margin-top, $type);
   margin-right: if-map-get($title-title-margin-right, $type);
   margin-left: if-map-get($title-title-margin-left, $type);
@@ -57,7 +57,7 @@ h1.title {
   }
 }
 
-h2.subtitle {
+.subtitle {
   margin-top: if-map-get($title-subtitle-margin-top, $type);
   margin-right: if-map-get($title-subtitle-margin-right, $type);
   margin-left: if-map-get($title-subtitle-margin-left, $type);
@@ -77,7 +77,7 @@ h2.subtitle {
   }
 }
 
-h3.author {
+.author {
   margin-top: if-map-get($title-author-margin-top, $type);
   margin-right: if-map-get($title-author-margin-right, $type);
   margin-left: if-map-get($title-author-margin-left, $type);
@@ -90,6 +90,7 @@ h3.author {
   word-spacing: $title-author-word-spacing;
   text-align: $title-author-align;
   text-transform: $title-author-text-transform;
+  text-indent: 0;
   border-bottom: if-map-get($title-author-border-bottom-width, $type) $title-author-border-bottom-style if-map-get($title-author-border-bottom-color, $type);
   padding-bottom: if-map-get($title-author-padding-bottom, $type);
   @if $type != 'epub' {
@@ -108,7 +109,7 @@ div.publisher-logo {
   text-align: $title-publisher-logo-text-align;
 }
 
-h4.publisher {
+.publisher {
   display: block;
   float: if-map-get($title-publisher-float, $type);
   margin: if-map-get($title-publisher-margin-top, $type) if-map-get($title-publisher-margin-right, $type) if-map-get($title-publisher-margin-bottom, $type) if-map-get($title-publisher-margin-left, $type);
@@ -124,11 +125,12 @@ h4.publisher {
   word-spacing: $title-publisher-word-spacing;
   text-align: $title-publisher-align;
   text-transform: $title-publisher-text-transform;
+  text-indent: 0;
   border-bottom: if-map-get($title-publisher-border-bottom-width, $type) $title-publisher-border-bottom-style if-map-get($title-publisher-border-bottom-color, $type);
   padding-bottom: if-map-get($title-publisher-padding-bottom, $type);
 }
 
-h5.publisher-city {
+.publisher-city {
   float: if-map-get($title-publisher-city-float, $type);
   margin-top: 0;
   margin-left: if-map-get($title-publisher-city-margin-left, $type);
@@ -145,11 +147,12 @@ h5.publisher-city {
   word-spacing: $title-publisher-city-word-spacing;
   text-align: $title-publisher-city-align;
   text-transform: $title-publisher-city-text-transform;
+  text-indent: 0;
   border-bottom: if-map-get($title-publisher-city-border-bottom-width, $type) $title-publisher-city-border-bottom-style if-map-get($title-publisher-city-border-bottom-color, $type);
   padding-bottom: if-map-get($title-publisher-city-padding-bottom, $type);
 }
 
-// Prince and EPUB-specific disply rules
+// Prince and EPUB-specific display rules
 @mixin titles-prince {
   #title-page {
     > .subtitle,
@@ -168,40 +171,40 @@ h5.publisher-city {
 
 @if $type == 'epub' {
   @media amzn-kf8 {
-    #title-page h1.title::before {
+    #title-page .title::before {
       content: '';
     }
 
-    #title-page h1.title::after {
+    #title-page .title::after {
       content: '';
     }
   }
 
   @media amzn-mobi {
-    h1.title {
+    .title {
       margin-top: 2em;
       font-size: 2em;
       font-style: normal;
       font-weight: normal;
     }
 
-    h2.subtitle {
+    .subtitle {
       font-size: 1em;
       font-style: normal;
       font-weight: normal;
     }
 
-    h3.author {
+    .author {
       font-style: normal;
       font-weight: normal;
     }
 
-    h4.publisher {
+    .publisher {
       font-style: normal;
       font-weight: normal;
     }
 
-    h5.publisher-city {
+    .publisher-city {
       font-style: normal;
       font-weight: normal;
     }

diff --git a/packages/buckram/assets/styles/components/section-titles/_back-matter.scss b/packages/buckram/assets/styles/components/section-titles/_back-matter.scss
@@ -12,7 +12,7 @@
       display: none;
     }
 
-    h1.back-matter-title {
+    .back-matter-title {
       display: block;
       margin-top: if-map-get($back-matter-title-margin-top, $type);
       margin-bottom: 0;
@@ -46,7 +46,7 @@
       }
     }
 
-    h2.chapter-subtitle {
+    .chapter-subtitle {
       display: block;
       margin-bottom: 0;
       font-family: $section-subtitle-font-family;
@@ -63,7 +63,7 @@
       word-spacing: if-map-get($section-subtitle-word-spacing, $type);
     }
 
-    h2.chapter-author {
+    .chapter-author {
       display: block;
       margin-bottom: if-map-get($section-author-margin-bottom, $type);
       font-family: $section-author-font-family;
@@ -78,33 +78,33 @@
       word-spacing: if-map-get($section-author-word-spacing, $type);
     }
 
-    h1.back-matter-title + h2.chapter-subtitle,
-    .short-title + h2.chapter-subtitle {
+    .back-matter-title + .chapter-subtitle,
+    .short-title + .chapter-subtitle {
       margin-top: if-map-get($section-title-subtitle-spacing, $type);
     }
 
-    h1.back-matter-title + h2.chapter-author,
-    .short-title + h2.chapter-author {
+    .back-matter-title + .chapter-author,
+    .short-title + .chapter-author {
       margin-top: if-map-get($section-title-author-spacing, $type);
     }
 
-    h2.chapter-subtitle + h2.chapter-author {
+    .chapter-subtitle + .chapter-author {
       margin-top: if-map-get($section-subtitle-author-spacing, $type);
     }
 
-    h1.back-matter-title:last-child {
+    .back-matter-title:last-child {
       margin-bottom: if-map-get($back-matter-title-margin-bottom, $type);
     }
 
-    h2.chapter-subtitle:last-child {
+    .chapter-subtitle:last-child {
       margin-bottom: if-map-get($section-subtitle-margin-bottom, $type);
     }
   }
 }
 
 @if $type == 'epub' {
   @media amzn-mobi {
-    h2.back-matter-title {
+    .back-matter-title {
       margin-top: 1em;
       margin-bottom: 1em;
       font-size: 1.3em;