Is it possible to use this package to process CSS-in-JS with PostCSS?

[veikkoeeva]

Hi!

Woud it be possible to process CSS-in-JS in Lit components with this? As for an example, I am thinking doing something like

module.exports = {
  syntax: 'postcss-lit',
  plugins: {
    "postcss-preset-env": {
      stage: 3,
      browsers: 'last 2 versions',
      features: {
        'lab-function': {
          preserve: true
        },
        'nesting-rules': true
      }
    }
  }
}

to process the new lab and lch color space definitions from TypeScript code.

I tried with https://github.com/Anidetrix/rollup-plugin-styles, but maybe there is a way that eludes me. Maybe possible looking at the code, so maybe I'm asking kindly advice too. :) Though in any case, maybe useful to record this here for others.

<edit: Found a Twitter note telling so, I believe, at https://twitter.com/43081j/status/1471097099362213894. Digging into this a bit more. :)

[43081j]

as long as you set the syntax, latest postcss should be able to handle it without any extra plugins etc.

just like in the config you wrote above. let me know where you get to with it and if it works

you should be able to do exactly as in the readme section here: https://github.com/43081j/postcss-lit#usage-with-postcss

this syntax means postcss just transforms your CSS in-place, inside the original JS/TS.

[veikkoeeva]

Should work helps too! I use https://github.com/Anidetrix/rollup-plugin-styles to read PostCSS configuration at https://github.com/veikkoeeva/openwc-miniflare/blob/main/rollup.config.js#L64 but when inspecting npm run build and checking output, I don't see those color spaces transformed. So, I think I need to find another way of making the transformation or just use the CLI instead of Rollup. Let's see... :)

[43081j]

ah yeah, rollup has been proving troublesome (as you can see in #23 )

basically, all the existing rollup plugins which integrate postcss rely on the concept of "extraction" or "injection". annoyingly, none of them just process the code and leave it alone...

i've opened an issue in rollup-plugin-postcss for this reason too. we don't want to extract or inject anything, we want to pass the source through postcss and use the output as-is.

for now, you could possibly run postcss cli against the sources, output to a temp dir and bundle that instead. bit of a pain though 🙈

[veikkoeeva]

@43081j Thanks! I suspected something like this after reading your excellent https://dev.to/43081j/using-tailwind-postcss-and-stylelint-with-lit-element-projects-2hb9. I'm bad debugger of these tools, but maybe this discussion now helps someone else also!

<edit: A tangential, but I see https://www.npmjs.com/package/rollup-plugin-styles was intended as an upgrade from rollup-plugin-postcss. It seem to have this same issue, though, unless emit could work somehow.

[43081j]

i have opened Anidetrix/rollup-plugin-styles#200, maybe they can help us out.

i suspect its because they copied the way @rollup/plugin-postcss works and so both lack the same functionality, unfortunately for us. they have intertwined two concerns: processing CSS, and extracting/bundling CSS.

because they made the assumption that everyone always wants to do both of those things, we don't seem to have a way to simply process the sources as-is.

[veikkoeeva]

I add https://parceljs.org/blog/parcel-css/ here. It may be a standalone tool like this is useful if one can otherwise extract CSS from the templates. Maybe the tooling ecosystem changes so that one extracts in whatever way the CSS from sources, pushes it through this CSS tool and then output as appropriate. Maybe this gets adopoted by PostCSS (or replaces it)!

[43081j]

yep i saw that release too. i'll have a look as it may be possible to extract the css beforehand, then pass it on to parcel.