Including Tailwind via CDN causes html5validator to fail

kschmott commented 1 year ago

Which project?
Project 3

Describe the bug

When I including the Tailwind via a script tag, it causes html5validator to fail on the cypress tests.

A copy-paste of a traceback (prefer text, not screenshot)

CypressError: `cy.exec('html5validator --ignore=JAVA_TOOL_OPTIONS /tmp/tmp-31868-33EvgNTYebAS')` failed because the command exited with a non-zero code.

Pass `{failOnNonZeroExit: false}` to ignore exit code failures.

Information about the failure:
Code: 68

Stdout:
"file:/tmp/tmp-31868-33EvgNTYebAS":42.34-42.39: error: CSS: "font-variation-settings": Property "font-variation-settings" doesn't exist.
"file:/tmp/tmp-31868-33EvgNTYebAS":53.25-53.25: error: CSS: ...

A quote from the source code of a public unit test.

it("Renders to HTML5-compliant HTML code on normal server", () => {
    // Go to the index page and make sure the feed has loaded.
    loadFeed();

    // Run html5validator on the rendered page. First query for the top-level element,
    // <html>.
    cy.get("html")
      // This call retrieves the HTML code for the <html> element and all of its contents.
      .invoke("prop", "outerHTML")
      // This call gives us access to the HTML code in a callback function.
      .then((doc) => {
        // Add back <!DOCTYPE> because it's not contained inside the <html> element.
        let htmlCode = `<!DOCTYPE html>${doc}`;

        // Cypress adds a script inside the page. Strip it out so we don't include it
        // while running html5validator.
        htmlCode = htmlCode.replace(/<script.*<\/script>/, "");

        // Prettify the HTML code.
        cy.task("prettify", htmlCode).then((prettifiedHtmlCode) => {
          // Write the HTML code to a temporary file and run html5validator on it.
          cy.task("createTmpfile").then((tmpfile) => {
            cy.writeFile(tmpfile.name, prettifiedHtmlCode);
            cy.exec(
              `html5validator --ignore=JAVA_TOOL_OPTIONS ${tmpfile.name}`,
            );
          });
        });
      });
  });

A quote from the spec

"Renders to HTML5-compliant HTML code on normal server"

To Reproduce

Steps to reproduce the behavior.

Use the tailwind CDN on project 3
Do cypress test test_index_public.cy.js
TO FIX

Add htmlCode = htmlCode.replace(/<style.*<\/style>/, ""); below or above line 170 in test_index_public.cy.js(or any test that run html5validator).

Expected behavior

Test should pass without html5validator errors

noah-weingarden commented 1 year ago

Hi @kschmott, thanks for the issue! font-variation-settings is a relatively recent addition to CSS, and html5validator is using an older version of the Nu HTML checker that doesn't support it. I would suggest inquiring with html5validator if they're willing to upgrade to a later version. For now, I suggest that you disable tailwind during testing.

Besides disabling CSS validation as you propose or waiting for html5validator to upgrade their backend, another option is to cut out html5validator from project 3. It's essentially a middleman for the Nu HTML checker, which is packaged for JavaScript apps via vnu-jar . Since project 3 uses npm for JavaScript dependencies, we can run validation using vnu-jar instead of html5validator. vnu-jarpackages a later version of v.Nu and would not report the error that you've posted here.

awdeorio commented 1 year ago

@kschmott and I were working on this during office hours. Of course, he did remove the tailwind stuff for his autograder submission. It would be nice if he could have left it in.

Thanks for the added detail about vnu-jar, TIL. That sounds reasonable to me.

eecs485staff / issues