Local VRT + Eliminate CSS warnings from build process #8968

stevector · 2024-04-26T01:42:45Z

The volume of warnings within our build process related to CSS order is problematic. Here's an example:

warning undefined
chunk styles [mini-css-extract-plugin]
Conflicting order. Following module has been added:
 * css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[10].oneOf[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[10].oneOf[1].use[2]!./src/layout/header/style.css
despite it was not able to fulfill desired ordering with these modules:
 * css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[10].oneOf[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[10].oneOf[1].use[2]!./src/components/headerBody/style.css
   - couldn't fulfill desired order of chunk group(s) component---src-pages-glossary-js
   - while fulfilling desired order of chunk group(s) component---src-templates-certificationpage-js, component---src-templates-doc-js, component---src-templates-guide-js, component---src-templates-terminus-command-js, component---src-templates-terminuspage-js, component---src-templates-video-js
 * css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[10].oneOf[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[10].oneOf[1].use[2]!./src/components/contributorGuest/style.css
   - couldn't fulfill desired order of chunk group(s) component---src-pages-glossary-js
   - while fulfilling desired order of chunk group(s) component---src-templates-certificationpage-js, component---src-templates-doc-js, component---src-templates-guide-js, component---src-templates-terminus-command-js, component---src-templates-terminuspage-js, component---src-templates-video-js
 * css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[10].oneOf[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[10].oneOf[1].use[2]!./src/components/twitter/style.css
   - couldn't fulfill desired order of chunk group(s) component---src-pages-glossary-js
   - while fulfilling desired order of chunk group(s) component---src-templates-certificationpage-js, component---src-templates-doc-js, component---src-templates-guide-js, component---src-templates-terminus-command-js, component---src-templates-terminuspage-js, component---src-templates-video-js
 * css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[10].oneOf[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[10].oneOf[1].use[2]!./src/components/github/style.css
   - couldn't fulfill desired order of chunk group(s) component---src-pages-glossary-js
   - while fulfilling desired order of chunk group(s) component---src-templates-certificationpage-js, component---src-templates-doc-js, component---src-templates-guide-js, component---src-templates-terminus-command-js, component---src-templates-terminuspage-js, component---src-templates-video-js

In the latest build of the main branch there are 16 instances of Conflicting order. Following module has been added:

It is not clear to me how serious these warnings are in and of themselves, but I think the are worth eliminating purely to get rid of the noise that makes it much harder to troubleshoot other warnings and errors with the build process when they occur.

In researching this pattern of warnings I found that the path to resolution seemed to be in ensuring that components/css files were imported in the same order across pages (and potentially imported in the order of usage within a component).

In any case, the build of this PR contains no CSS warnings. The changes in the PR fall into three categories

Reordering or import statements within component files to create consistency across components.
Abstracting usage of MDX to DRY out the codebase and reduce the likelihood that the long lists import statements in the pre-existing unDRY codebase cause conflicting ordering.
Removal of unused import statements. As I was cleaning up these files I was relying on VSCode's hightlighting to point out unused import statements. Some of the removed imports might have been irrelevant to the css ordering errors, but it seemed wise to remove unused imports anyway.

Adding BackstopJS Configuration

Updates the README with usage instructions
Adds 8 scenarios for VRT:
- Pantheon Docs Homepage
- Get Started - Landing Page
- Release Notes - Single Entry
- Terminus Manual - Single Page
- Certification - Landing Page
- Certification - Study Guide
- Guide Layout
- Individual Doc Page
backstop_data directory path added to .gitignore

Example result:

pantheon-decoupled · 2024-04-26T02:20:39Z

⚡ Deployed with Pantheon Decoupled

This build was successfully deployed with Pantheon. You can track the build logs here.

👀 Preview: https://pr-8968-documentation.appa.pantheon.site
🛠️ Manage in Pantheon: https://dashboard.pantheon.io/site/2b30153f-e8b1-4427-b076-6109e704ba5d/overview

pantheon-decoupled · 2024-04-26T02:32:26Z

⚡ Deployed with Pantheon Decoupled

This build was successfully deployed with Pantheon. You can track the build logs here.

👀 Preview: https://pr-8968-documentation.appa.pantheon.site
🛠️ Manage in Pantheon: https://dashboard.pantheon.io/site/2b30153f-e8b1-4427-b076-6109e704ba5d/overview

stevector · 2024-04-26T15:45:53Z

@mel-miller This PR is not at all urgent. Just some clean up that should get your review.

mel-miller

Works for me.

stevector · 2024-04-30T18:09:11Z

Thanks @mel-miller! I'm assigning to @rachelwhitton for final review and merge.

stevector · 2024-04-30T18:13:48Z

I just resolved the merge conflicts with main

pantheon-decoupled · 2024-04-30T18:26:24Z

⚡ Deployed with Pantheon Decoupled

This build was successfully deployed with Pantheon. You can track the build logs here.

👀 Preview: https://pr-8968-documentation.appa.pantheon.site
🛠️ Manage in Pantheon: https://dashboard.pantheon.io/site/2b30153f-e8b1-4427-b076-6109e704ba5d/overview

guardrails · 2024-05-09T18:00:03Z

⚠️ We detected 1 security issue in this pull request:

Vulnerable Libraries (1)

Severity	Details
High	pkg:npm/backstopjs@6.3.23 upgrade to: > 6.3.23

More info on how to fix Vulnerable Libraries in JavaScript.

👉 Go to the dashboard for detailed results.

📥 Happy? Share your feedback with us.

pantheon-decoupled · 2024-05-09T18:00:26Z

⚡ Deployed with Pantheon Decoupled

This build was successfully deployed with Pantheon. You can track the build logs here.

👀 Preview: https://pr-8968-documentation.appa.pantheon.site
🛠️ Manage in Pantheon: https://dashboard.pantheon.io/site/2b30153f-e8b1-4427-b076-6109e704ba5d/overview

pantheon-decoupled · 2024-05-09T18:13:59Z

⚡ Deployed with Pantheon Decoupled

This build was successfully deployed with Pantheon. You can track the build logs here.

👀 Preview: https://pr-8968-documentation.appa.pantheon.site
🛠️ Manage in Pantheon: https://dashboard.pantheon.io/site/2b30153f-e8b1-4427-b076-6109e704ba5d/overview

rachelwhitton

@stevector I added local VRT here in this PR, can you take a look? On another branch I got 8 scenarios passed (screenshot of that has been added to the description at the top of this PR), but on this branch the test result is showing me 4 passed and 4 failed

The TOC stopped working across various templates, for example:

Headers are smaller in the preview environment compared to production

rachelwhitton · 2024-05-10T16:51:56Z

backstop.json

+  "onBeforeScript": "puppet/onBefore.js",
+  "onReadyScript": "puppet/onReady.js",


These 2 lines were copied in from an example config file, I think we can remove?

CREATING NEW REFERENCE FILE WARNING: script not found: /Users/rachelwhitton/documentation/backstop_data/engine_scripts/puppet/onBefore.js Browser Console Log 0: JSHandle:BackstopTools have been installed. Browser Console Log 0: JSHandle:BackstopTools have been installed. Browser Console Log 0: JSHandle:BackstopTools have been installed. Browser Console Log 0: JSHandle:BackstopTools have been installed. Browser Console Log 0: JSHandle:BackstopTools have been installed. Browser Console Log 0: JSHandle:BackstopTools have been installed. Browser Console Log 0: JSHandle:BackstopTools have been installed. Browser Console Log 0: JSHandle:BackstopTools have been installed. WARNING: script not found: /Users/rachelwhitton/documentation/backstop_data/engine_scripts/puppet/onReady.js

stevector · 2024-05-13T20:34:56Z

The TOC stopped working across various templates

@rachelwhitton I'm reassigning to myself to investigate that

stevector · 2024-05-13T21:07:07Z

@rachelwhitton I figure out why the Table of Contents stopped working.

In the PR that created Release Notes (#8802) I created the MdxWrapper component. In creating that component I tried to consolidate as many of the shortcodes passed in to mdx from other templates including this one from the old changelogs template.

documentation/src/templates/changelogs.js

Line 23 in 87ec5f5

import {

That releaseHeadlines component appears to exist only to exclude headings from TOCs (because) on the old changelog you won't want every heading on the TOC, just the main headline (the month).

Anyway, I don't think we need the releaseHeadlines component at all anymore.

stevector · 2024-05-13T21:07:31Z

I'll keep this PR assigned to myself to continue poking at VRT, at least until our 1:1 tomorrow.

This reverts commit d95bca8.

stevector · 2024-05-13T21:14:36Z

Anyway, I don't think we need the releaseHeadlines component at all anymore

🙃 No, it's used elsewhere so I'll keep the component, just remove this particular usage.

pantheon-decoupled · 2024-05-13T21:19:43Z

⚡ Deployed with Pantheon Decoupled

This build was successfully deployed with Pantheon. You can track the build logs here.

👀 Preview: https://pr-8968-documentation.appa.pantheon.site
🛠️ Manage in Pantheon: https://dashboard.pantheon.io/site/2b30153f-e8b1-4427-b076-6109e704ba5d/overview

pantheon-decoupled · 2024-05-13T21:43:28Z

⚡ Deployed with Pantheon Decoupled

This build was successfully deployed with Pantheon. You can track the build logs here.

👀 Preview: https://pr-8968-documentation.appa.pantheon.site
🛠️ Manage in Pantheon: https://dashboard.pantheon.io/site/2b30153f-e8b1-4427-b076-6109e704ba5d/overview

pantheon-decoupled · 2024-05-14T22:04:27Z

⚡ Deployed with Pantheon Decoupled

This build was successfully deployed with Pantheon. You can track the build logs here.

👀 Preview: https://pr-8968-documentation.appa.pantheon.site
🛠️ Manage in Pantheon: https://dashboard.pantheon.io/site/2b30153f-e8b1-4427-b076-6109e704ba5d/overview

pantheon-decoupled · 2024-05-20T20:01:25Z

⚡ Deployed with Pantheon Decoupled

This build was successfully deployed with Pantheon. You can track the build logs here.

👀 Preview: https://pr-8968-documentation.appa.pantheon.site
🛠️ Manage in Pantheon: https://dashboard.pantheon.io/site/2b30153f-e8b1-4427-b076-6109e704ba5d/overview

mdx and import ordering

97e22c1

stevector added the Site Issue or PR with the docs app stack and/or live site label Apr 26, 2024

stevector requested a review from a team as a code owner April 26, 2024 01:42

stevector mentioned this pull request Apr 26, 2024

WIP - Mdxwrapper usage #8966

Closed

stevector and others added 2 commits April 25, 2024 20:59

Update index.js

9f34a0d

whitespace fixes

b9008bd

stevector changed the title ~~WIP - mdx and import ordering~~ Eliminate CSS warnings from build process Apr 26, 2024

stevector requested review from mel-miller and rachelwhitton April 26, 2024 15:45

mel-miller approved these changes Apr 30, 2024

View reviewed changes

stevector assigned rachelwhitton Apr 30, 2024

merging

5eae4c8

rachelwhitton added 2 commits May 9, 2024 12:53

Merge branch 'main' into mdx-and-css-fixes

8b93d7f

BackstopJS init for local VRT (#8989)

5b9f380

rachelwhitton changed the title ~~Eliminate CSS warnings from build process~~ Local VRT + Eliminate CSS warnings from build process May 9, 2024

rachelwhitton requested changes May 9, 2024

View reviewed changes

rachelwhitton reviewed May 10, 2024

View reviewed changes

stevector assigned stevector and unassigned rachelwhitton May 13, 2024

removing potentially unneeded component

d95bca8

stevector added 2 commits May 13, 2024 16:12

Revert "removing potentially unneeded component"

cf75a79

This reverts commit d95bca8.

removing releaseHeadlines from MdxWrapper

1a872ea

stevector added 2 commits May 13, 2024 16:38

adding more pages to backstop

8e731b3

adding npx to instructions

4771556

mdx customshortcodes

cdc5483

stevector marked this pull request as draft May 17, 2024 18:56

Merge remote-tracking branch 'origin/main' into mdx-and-css-fixes

7d58394

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Local VRT + Eliminate CSS warnings from build process #8968

Local VRT + Eliminate CSS warnings from build process #8968

stevector commented Apr 26, 2024 •

edited by rachelwhitton

pantheon-decoupled bot commented Apr 26, 2024

pantheon-decoupled bot commented Apr 26, 2024

stevector commented Apr 26, 2024

mel-miller left a comment

stevector commented Apr 30, 2024

stevector commented Apr 30, 2024

pantheon-decoupled bot commented Apr 30, 2024

guardrails bot commented May 9, 2024 •

edited

pantheon-decoupled bot commented May 9, 2024

pantheon-decoupled bot commented May 9, 2024

rachelwhitton left a comment

rachelwhitton May 10, 2024

stevector commented May 13, 2024

stevector commented May 13, 2024

stevector commented May 13, 2024

stevector commented May 13, 2024

pantheon-decoupled bot commented May 13, 2024

pantheon-decoupled bot commented May 13, 2024

pantheon-decoupled bot commented May 14, 2024

pantheon-decoupled bot commented May 20, 2024

		"onBeforeScript": "puppet/onBefore.js",
		"onReadyScript": "puppet/onReady.js",

Local VRT + Eliminate CSS warnings from build process #8968

Are you sure you want to change the base?

Local VRT + Eliminate CSS warnings from build process #8968

Conversation

stevector commented Apr 26, 2024 • edited by rachelwhitton

Adding BackstopJS Configuration

pantheon-decoupled bot commented Apr 26, 2024

pantheon-decoupled bot commented Apr 26, 2024

stevector commented Apr 26, 2024

mel-miller left a comment

Choose a reason for hiding this comment

stevector commented Apr 30, 2024

stevector commented Apr 30, 2024

pantheon-decoupled bot commented Apr 30, 2024

guardrails bot commented May 9, 2024 • edited

pantheon-decoupled bot commented May 9, 2024

pantheon-decoupled bot commented May 9, 2024

rachelwhitton left a comment

Choose a reason for hiding this comment

rachelwhitton May 10, 2024

Choose a reason for hiding this comment

stevector commented May 13, 2024

stevector commented May 13, 2024

stevector commented May 13, 2024

stevector commented May 13, 2024

pantheon-decoupled bot commented May 13, 2024

pantheon-decoupled bot commented May 13, 2024

pantheon-decoupled bot commented May 14, 2024

pantheon-decoupled bot commented May 20, 2024

stevector commented Apr 26, 2024 •

edited by rachelwhitton

guardrails bot commented May 9, 2024 •

edited