gregives / Twelvety

An Eleventy starter project built to be fast

Home Page:https://twelvety.netlify.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Referencing an external stylesheet prevents build

Meandmybadself opened this issue · comments

Howdy & thank you for building this.

When using an external stylesheet (https://cloud.typography.com/6984932/6762612/css/fonts.css, for fonts) in a tag in my default.liquid, I encounter the following error during build:

➜ project git:(master) ✗ npm run build

> project@1.0.0 build /Users/jeffery/Sites/project
> cross-env ELEVENTY_ENV=production eleventy

Error writing templates: (more in DEBUG output)
> Having trouble writing template: dist/media/killing-me-softly/index.html

`TemplateWriterWriteError` was thrown
> /6984932/6762612/css/fonts.css:1:1: Unknown word

`CssSyntaxError` was thrown:
    CssSyntaxError: /6984932/6762612/css/fonts.css:1:1: Unknown word
        at Input.error (/Users/jeffery/Sites/project/node_modules/critical/node_modules/postcss/lib/input.js:128:16)
        at Parser.unknownWord (/Users/jeffery/Sites/project/node_modules/critical/node_modules/postcss/lib/parser.js:561:22)
        at Parser.other (/Users/jeffery/Sites/project/node_modules/critical/node_modules/postcss/lib/parser.js:166:12)
        at Parser.parse (/Users/jeffery/Sites/project/node_modules/critical/node_modules/postcss/lib/parser.js:75:16)
        at parse (/Users/jeffery/Sites/project/node_modules/critical/node_modules/postcss/lib/parse.js:17:12)
        at new LazyResult (/Users/jeffery/Sites/project/node_modules/critical/node_modules/postcss/lib/lazy-result.js:64:16)
        at Processor.<anonymous> (/Users/jeffery/Sites/project/node_modules/critical/node_modules/postcss/lib/processor.js:142:12)
        at Processor.process (/Users/jeffery/Sites/project/node_modules/critical/node_modules/postcss/lib/processor.js:121:23)
        at rebaseAssets (/Users/jeffery/Sites/project/node_modules/critical/src/file.js:284:8)
        at getStylesheet (/Users/jeffery/Sites/project/node_modules/critical/src/file.js:739:21)
Problem writing Eleventy templates: (more in DEBUG output)
> Having trouble writing template: dist/media/killing-me-softly/index.html

An initial guess is that that URL fails loading because it doesn't have a referrer when being loaded as part of the build process. The server responds with a 403 in this instance. Any way for it to remain unconsumed by the build process / postcss?

I've unsuccessfully tried the following:

  • Using @import url() in my SASS.
  • Wrapping the <link> in {% raw %}

Note, things work great during development. It's just build that causes the problem.

I'll keep experimenting & report back.

Thanks for taking the time to create an issue!

I think the problem might be coming from Critical and not from Twelvety but I will investigate some more. Would you be able to share your repository with me?

I'll share the repo shortly.

I found a workaround that gets the build building.

Before, I was linking to the stylesheet as:
<link rel="stylesheet" type="text/css" href="https://cloud.typography.com/6984932/6762612/css/fonts.css" />

Removing some of the properties that identify it as CSS appear to serve as a workaround:
<link href="https://cloud.typography.com/6984932/6762612/css/fonts.css" />

So this is actually unrelated to Twelvety, as you said the error is because Critical is trying to parse this 403 response:

An error (403 Forbidden) has occurred in response to this request.

You could either disable Twelvety's critical transform by commenting out line 9 of utils/transforms.js or you could find a way of configuring Critical so that it ignores that URL.

If you go down the second route, Critical has a request option which you can use to configure got. If the external stylesheet is returning a 403 because there isn't a referrer header, you might be able to set that header using the request option.

I'll look into it & report back. Thank you for your assistance.