Tom-Bonnike/netlify-plugin-inline-source

constants.PUBLISH_DIR

cdeath opened this issue · 9 comments

cdeath commented

build is failing because i believe it's not honoring the publish dir as defined in the Netlify UI.

i have tried with just the Netlify UI build settings

also tried to set it in the netlify.toml file

[build]
  publish = "_site"

this is a jekyll build with the default settings

$ jekyll build
8:27:04 PM: Configuration file: /opt/build/repo/_config.yml
8:27:04 PM:             Source: /opt/build/repo
8:27:04 PM:        Destination: /opt/build/repo/_site

build fails

8:27:14 PM: ┌─────────────────────────────┐
8:27:14 PM: │        Build failed         │
8:27:14 PM: └─────────────────────────────┘
8:27:14 PM: ​
8:27:14 PM:   Error message
8:27:14 PM:   Error: Inlining sources failed.
8:27:14 PM:   ENOENT: no such file or directory, open '/opt/build/repo/team/index.html'

the plugin should be looking inside the destination folder _site

let me know if i'm doing anything wrong.

thank you!

Tom-Bonnike commented

Hey, thanks for the report @cdeath.
Fixed in a3087c7 and published 1.0.3 of the plugin.
Could you please rebuild your site and let me know if the issue is properly fixed? I tried locally with a similar setup and it seems to work fine now.

cdeath commented

failed:

5:52:41 PM: ┌─────────────────────────────┐
5:52:41 PM: │        Build failed         │
5:52:41 PM: └─────────────────────────────┘
5:52:41 PM: ​
5:52:41 PM:   Error message
5:52:41 PM:   Error: Inlining sources failed.
5:52:41 PM:   ENOENT: no such file or directory, open '/opt/build/repo/assets/css/main.css'
5:52:41 PM: ​
5:52:41 PM:   Plugin details
5:52:41 PM:   ID:             netlify-plugin-inline-source
5:52:41 PM:   Version:        1.0.3

this is my config:

  [plugins.inputs]
    attribute = "data-inline"
    compress = true

and this is the file i want to inline:
<link rel="stylesheet" href="/assets/css/main.css" data-inline>

again this should be prepending the _site dir...

Tom-Bonnike commented

Is the repository open-source by any chance, so that I can test some changes on it?

Did you keep

[build]
  publish = "_site"

In your netlify.toml? I don’t think it is necessary though, through the Netlify UI should work (Publish directory).

I’d love if you could post the whole build log, too.

How the plugin works is that I find all html files in constants.PUBLISH_DIR:

const getHtmlFiles = async (directory) => {
  const files = await readdirp.promise(directory, { fileFilter: '*.html' })

  return files.map((file) => file.fullPath) // absolute path
}

const htmlFiles = await getHtmlFiles(constants.PUBLISH_DIR)

And then run inline-source on all of those absolute paths (and then overwrite each one)…

cdeath commented

i've added you as a collaborator to the repository.

1:19:37 AM: Build ready to start
1:19:39 AM: build-image version: 6dfe19d15f524c85d6f9bf7df9fb30b0a9f0a61a
1:19:39 AM: build-image tag: v3.3.10
1:19:39 AM: buildbot version: 0d19834c19ebfe54208907d729718495339fe085
1:19:39 AM: Fetching cached dependencies
1:19:39 AM: Starting to download cache of 132.1MB
1:19:40 AM: Finished downloading cache in 828.931851ms
1:19:40 AM: Starting to extract cache
1:19:44 AM: Finished extracting cache in 4.769746804s
1:19:44 AM: Finished fetching cache in 5.63381091s
1:19:44 AM: Starting to prepare the repo for build
1:19:44 AM: Netlify Large Media is enabled, running git commands with GIT_LFS_SKIP_SMUDGE=1
1:19:45 AM: Preparing Git Reference refs/heads/master
1:19:47 AM: Starting build script
1:19:47 AM: Installing dependencies
1:19:47 AM: Started restoring cached node version
1:19:51 AM: Finished restoring cached node version
1:19:51 AM: v10.20.1 is already installed.
1:19:52 AM: Now using node v10.20.1 (npm v6.14.4)
1:19:52 AM: Attempting ruby version 2.6.2, read from environment
1:19:53 AM: Using ruby version 2.6.2
1:19:54 AM: Using bundler version 2.1.4 from Gemfile.lock
1:19:54 AM: Using PHP version 5.6
1:19:54 AM: Started restoring cached ruby gems
1:19:54 AM: Finished restoring cached ruby gems
1:19:54 AM: 5.2 is already installed.
1:19:54 AM: Using Swift version 5.2
1:19:54 AM: Started restoring cached go cache
1:19:54 AM: Finished restoring cached go cache
1:19:54 AM: go version go1.12 linux/amd64
1:19:54 AM: go version go1.12 linux/amd64
1:19:54 AM: Installing missing commands
1:19:54 AM: Verify run directory
1:19:56 AM: ​
1:19:56 AM: ┌─────────────────────────────┐
1:19:56 AM: │        Netlify Build        │
1:19:56 AM: └─────────────────────────────┘
1:19:56 AM: ​
1:19:56 AM: ❯ Version
1:19:56 AM:   @netlify/build 0.4.26
1:19:56 AM: ​
1:19:56 AM: ❯ Flags
1:19:56 AM:   mode: buildbot
1:19:56 AM: ​
1:19:56 AM: ❯ Current directory
1:19:56 AM:   /opt/build/repo
1:19:56 AM: ​
1:19:56 AM: ❯ Config file
1:19:56 AM:   /opt/build/repo/netlify.toml
1:19:56 AM: ​
1:19:56 AM: ❯ Context
1:19:56 AM:   production
1:19:56 AM: ​
1:19:56 AM: ❯ Installing plugins
1:19:56 AM:    - netlify-plugin-inline-source
1:20:04 AM: ​
1:20:04 AM: ❯ Loading plugins
1:20:04 AM:    - netlify-plugin-inline-source@1.0.3
1:20:04 AM: ​
1:20:04 AM: ┌────────────────────────────────────┐
1:20:04 AM: │ 1. build.command from netlify.toml │
1:20:04 AM: └────────────────────────────────────┘
1:20:04 AM: ​
1:20:04 AM: $ jekyll build
1:20:05 AM: Configuration file: /opt/build/repo/_config.yml
1:20:05 AM:             Source: /opt/build/repo
1:20:05 AM:        Destination: /opt/build/repo/_site
1:20:05 AM:  Incremental build: disabled. Enable with --incremental
1:20:05 AM:       Generating...
1:20:05 AM:            Warning: Empty `slug` generated for '/'.
1:20:05 AM:                     done in 0.379 seconds.
1:20:05 AM:  Auto-regeneration: disabled. Use --watch to enable.
1:20:05 AM: ​
1:20:05 AM: (build.command completed in 944ms)
1:20:05 AM: ​
1:20:05 AM: ┌──────────────────────────────────────────────────────────┐
1:20:05 AM: │ 2. onPostBuild command from netlify-plugin-inline-source │
1:20:05 AM: └──────────────────────────────────────────────────────────┘
1:20:05 AM: ​
1:20:05 AM: ​
1:20:05 AM: ┌─────────────────────────────┐
1:20:05 AM: │        Build failed         │
1:20:05 AM: └─────────────────────────────┘
1:20:05 AM: ​
1:20:05 AM:   Error message
1:20:05 AM:   Error: Inlining sources failed.
1:20:05 AM:   ENOENT: no such file or directory, open '/opt/build/repo/assets/css/main.css'
1:20:05 AM: ​
1:20:05 AM:   Plugin details
1:20:05 AM:   ID:             netlify-plugin-inline-source
1:20:05 AM:   Version:        1.0.3
1:20:05 AM:   Repository:     git+https://github.com/Tom-Bonnike/netlify-plugin-inline-source.git
1:20:05 AM:   npm link:       https://www.npmjs.com/package/netlify-plugin-inline-source
1:20:05 AM:   Report issues:  https://github.com/Tom-Bonnike/netlify-plugin-inline-source/issues
1:20:05 AM: ​
1:20:05 AM:   Error location
1:20:05 AM:   In "onPostBuild" event in npm package "netlify-plugin-inline-source"
1:20:05 AM:       at Promise (/node_modules/inline-source/lib/load.js:19:41)
1:20:05 AM:       at load (/node_modules/inline-source/lib/load.js:12:10)
1:20:05 AM:       at Promise.all.sources.map (/node_modules/inline-source/lib/run.js:17:17)
1:20:05 AM:       at run (/node_modules/inline-source/lib/run.js:14:13)
1:20:05 AM:       at Promise (/node_modules/inline-source/index.js:44:15)
1:20:05 AM: ​
1:20:05 AM: Caching artifacts
1:20:05 AM: Started saving ruby gems
1:20:05 AM: Finished saving ruby gems
1:20:05 AM: Started saving node modules
1:20:05 AM: Finished saving node modules
1:20:05 AM: Started saving pip cache
1:20:05 AM: Finished saving pip cache
1:20:05 AM: Started saving emacs cask dependencies
1:20:05 AM: Finished saving emacs cask dependencies
1:20:05 AM: Started saving maven dependencies
1:20:05 AM: Finished saving maven dependencies
1:20:05 AM: Started saving boot dependencies
1:20:05 AM: Finished saving boot dependencies
1:20:05 AM: Started saving go dependencies
1:20:05 AM: Finished saving go dependencies
1:20:05 AM: Error running command: Build script returned non-zero exit code: 1
1:20:05 AM: Failing build: Failed to build site
1:20:05 AM: Failed during stage 'building site': Build script returned non-zero exit code: 1
1:20:06 AM: Finished processing build request in 26.966085221s
Tom-Bonnike commented

OK, this should be fixed with version 1.0.4. If it’s still not working after your next build, add this back to your netlify.toml, but I don’t think you’ll need to.

[build]
  publish = '_site'

The change I made is here: 75ae4cd. Since in 1.0.3 I started passing absolute file paths to inline-source, I thought the roothpath option was not needed anymore and removed it, but it seems like for some reason it still needs it.

Sorry and thanks for giving me access to the repo, you can revoke my access as soon as you confirm it’s fixed 👍
By the way, one of the two .css files you’re inlining is the main CSS file of your website, which is used on every page. It’s quite large and so I think you’re actually making performance worse as every single page becomes much heavier. With proper caching, you’d keep lighter pages while still downloading that CSS once.
What you probably want to do is run something like critical, criticalCSS or penthouse to make sure you’re only inlining the critical CSS of each of those pages.

I’m thinking of creating a separate Netlify plugin on top of critical which would both extract the critical CSS and inline it (this plugin would still be useful as it can inline scripts, images and SVG as well).

  • 🎉1
cdeath commented

hi!

yep! it works! thanks a lot!!!

as for the critical css... this was not the project i was aiming to make it work on, but the one i could share (or even make it public, if necessary), so i refactored some stuff in order to make it similar.

this one includes the bundle in every page a second one only in the homepage.

the other one has separate css files for the section templates that are included as needed for each page. so it's kindah a critical css approach (but for the whole page instead of just above the fold).

i would be more than welcome to help with the development of that plugin.

another plugin that's necessary is minifing and bundling files without using Netlify's post processing, first because you can't use it when you have GitLFS set up for the repo, and secondly because AFAIK netlify doesn't add HTTP/2 push headers for the bundles it creates and you cannot add them to netlify.toml because the CDN url is different each time.

PS: after inlining, some comments are still preserved (with !), but i guess that's an issue with inline-source that does not have or expose an option to remove all comments...

  • 👍1
cdeath commented

another cool plugin would be something in the likes of uncss

Tom-Bonnike commented

the other one has separate css files for the section templates that are included as needed for each page. so it's kindah a critical css approach (but for the whole page instead of just above the fold).

Cool, makes sense!

another plugin that's necessary is minifing and bundling files without using Netlify's post processing, first because you can't use it when you have GitLFS set up for the repo, and secondly because AFAIK netlify doesn't add HTTP/2 push headers for the bundles it creates and you cannot add them to netlify.toml because the CDN url is different each time.

Oh interesting. Tbh I’d rather see Netlify improve their post-processing/fix “edge-cases” like GitLFS than rely on people creating Build plugins to workaround them. Even this plugin could be a post-processing option, with an option like “inline assets under X kB” 😄 I hope they’ll add a proper UI for plugins once it’s out of beta, too, and then maybe it’ll be the same great UX as the post-processing options.

another cool plugin would be something in the likes of uncss

Yeah, I also thought about an uncss plugin, critical CSS + uncss without any setup would be pretty sweet… 😍

Tom-Bonnike commented

@cdeath the critical CSS plugin is out if you wanna test it on your projects! https://github.com/Tom-Bonnike/netlify-plugin-inline-critical-css