Allow custom PostCSS plugins in CSS plugin

[ewired]

No description provided.

[shadowtime2000]

What about instead having the nesting be inside the plugins = [] because some people may not like that. We could move the import plugin, but since that requires some special configuration it makes sense to keep it.

[ewired]

I also think nesting should be left out of the default and left up to the user to add. I kept it in my PR considering there may be existing setups relying on nesting.

[shadowtime2000]

That makes sense.

[ewired]

It successfully works with these plugins:

import css from "./css.js";
// import css from "https://deno.land/x/lume/plugins/css.js";
import pfm from "https://esm.sh/postcss-font-magician";
import autoprefixer from "https://esm.sh/autoprefixer";
import presetEnv from "https://esm.sh/postcss-preset-env";
import csso from "https://esm.sh/postcss-csso";
site.use(css([pfm(), autoprefixer(), presetEnv(), csso()]));

[shadowtime2000]

@ewired Pretty nice, but I believe esm.sh will also put in an import to the esm.sh postcss because Autoprefixer and other libraries require postcss, so this may cause some longer build times, but I don't know for sure.

[oscarotero]

Hi, thanks for this contribution.

In previous versions of Lume, the css plugin includes also presetEnv, but it was removed in 0.9.12 (v0.9.11...v0.9.12) because the versions automatically converted by jspm.dev started to fail.

My initial idea for this plugin was to be library agnostic. I mean, internally it uses postcss, but in the future it could switch to other library (In fact, initially it was using stylecow), so the user only need to know that using it, the css will be loaded, fixed, optimized and that's all. This is why the plugin name is just css and not postcss, or sass, etc.

But, that being said, I see that the ability to configure this plugin is useful so I'm okay with this proposal. The only change I'd recommend is use an object, so we can add more options in the future. For example:

site.use(css({
    postcssPlugins: [autoprefixer(), csso()]
}));

And about the nesting plugin, I'm agree with @shadowtime2000 that it should be used in the default plugin config but it should be able to be removed (for example, presetEnv includes this plugin, and postcss has a different version (https://github.com/postcss/postcss-nested) more similar to sass.

[oscarotero]

Thanks! 👍