Just a little question

[marcfilleul]

Hi,

Thanks a lot for this starter, it's the best I've found out there for my needs.

I was wondering why this css file is here : src/_includes/stylesheets/app.css

I don't see it used but maybe I don't understand all the build process and logic ;)

Thanks in advance.

[chrissy-dev]

@willdante No problem, glad you've found it useful. 😃

When you run npm start it starts a local development server and compiles the CSS into ./src/static and when developing locally the site simply links to the CSS file in ./src/static. This speeds up local development time as the amount of processing that is done is kept to a minimum.

When you run npm run build the CSS file in ./src/static runs through a tool called PurgeCSS which looks at your HTML and JS files to detect which classes you've used and removes any unused CSS from the file, resulting in a much leaner CSS file size. Purge CSS then puts the leaner file into ./src/_includes/stylesheets.

Finally when Eleventy builds in production mode (during npm run build) it inlines the lean CSS file contents in the head of document (the logic can be seen here).

The reason for doing this is to send the CSS alongside the HTML eliminating render blocking external stylesheets, which delay the time to first render.

Hope that makes sense 😃

[marcfilleul]

Thank you @chrisssycollins.

I had already figured out this workflow and think it makes sense indeed.

But if I'm correct, we have src/_assets/stylesheets/app.css which is the css entry point.

When running npm start, it's compiled into src/static/app.compiled.css.

When running npm run build, it's purged and the output file is src/_includes/stylesheets/app.compiled.css.

That's why I was asking about a 4th css file we can find in your starter: src/_includes/stylesheets/app.css

Because this one doesn't seem to be used at all and could confuse some people. I've deleted it to be sure and everything is working fine.

Best regards :)

[chrissy-dev]

@willdante ahhhh my apologies. Yeah that shouldn't be there. It's probably been left over from earlier in the project, I'll remove it. Thank for flagging! 👍🏼

[chrissy-dev]

@willdante I've removed it from the project, thanks again.