where are the output files?

[Waoweens]

hi, i apologize if this is simple, i'm quite new to 11ty

this is my current setup:

/** @param {import("@11ty/eleventy").UserConfig} eleventyConfig */
module.exports = function (eleventyConfig) {
    eleventyConfig.addPassthroughCopy({ 'src/_includes/styles': '/styles' });

    return {
        dir: {
            input: 'src',
        },
    };
};

there are CSS files in src/_include/styles

however now i want some PostCSS stuff:

module.exports = {
    map: 'inline',
    plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
    ]
}

so i replaced it with the plugin

- eleventyConfig.addPassthroughCopy({ 'src/_includes/styles': '/styles' });
+ eleventyConfig.addPlugin(require('@jgarber/eleventy-plugin-postcss'));

but if i run build, i don't see any css files in the output directory. am i missing something?

[Waoweens]

ok so looks like the plugin does not compile files inside _include, if i move my css files somewhere else it works

is there a way to configure where files are outputted?

[jgarber623]

@Waoweens Hello! Thanks for giving this plugin a try. I think you've come to a proper resolution, but let me share a few thoughts based on your approach:

1. eleventy-plugin-postcss (in its default configuration) will transform Eleventy templates in the configured src path for files with the extensions css, pcss, and postcss.

2. The configured includes folder (./src/_includes in your case) in the configured src path is not considered when Eleventy searches your project for templates. The Working with Templates documentation doesn't obviously say so, though, but Eleventy.js in v2.0.1 has some very specific-looking code related to ignoring CSS files in the configured includes folder. v3.0.0 (currently in alpha) is quite different, but as best as I can tell behaves similarly (see the isTemplateFile function in `ProjectDirectories.js). Assuming those two pieces of linked code are relevant, the takeaway is "Files in the configured includes folder are not considered templates."

   You can test that theory by adding a file, ./src/_includes/index.liquid, and rebuilding your site:

   Hello, world!

   If that's the only file in your src path, the _site folder may not be created at all. I see output like:

   > eleventy-passthrough-test@0.1.0 build
   > eleventy --quiet
   
   [11ty] Wrote 0 files in 0.01 seconds (v2.0.1)

3. Using Passthrough File Copy is strictly an instruction to as-is copy one or more files from one path in your project to another path in the output directory. Eleventy doesn't treat these as templates, either. The Adding CSS, JS, Fonts documentation does include an example using Passthrough File Copy, but I believe the assumption there is that's a "normal" CSS file.

To your question:

is there a way to configure where files are outputted?

Yes! Sort of.

The easiest way to use eleventy-plugin-postcss is to place your input CSS files in a file path similar to where the output will be. So, I have a file at ./src/assets/stylesheets/styles.css that PostCSS processes via this plugin and generates an output file at ./_site/assets/stylesheets/styles.css. That's the simplest and most sensible approach to me and is how I organize my projects.

However. Eleventy supports template format chaining, so you could achieve what you'd like on a per-file basis by using another template language (like Liquid) with a file named ./src/some/arbitrary/file/path/styles.css.liquid:

---
permalink: "/styles/screen.css"
---

html {
  background: blue;
}

To my eye, that's a bit clunky, but it seems it's possible. I don't intend to add configuration to this plugin to support configurable output paths. If that's a critical feature for your project, you may want to see if a different community-built plugin supports that feature.

[!NOTE] I've done my best to come to reasonable conclusions based on what I could find in Eleventy's documentation and source code. Apologies if you find something that contradicts those conclusions! Let me know if you do, of course.

[Waoweens]

hi! sorry for my late response, i've not been in a good state this week

thank you for your insight on that behavior of _include. that feels like something that should be documented

i have solved my issue by moving everything that's not actual includes outside of _include and just being a bit more smart about directory placement

thank you for the plugin! i like the simplicity of it

i think i can close this now