Parcel: I want to convert a inline-loaded css string with postCSS.

[march23hare]

🙋 feature request

I want to convert a css file with postCSS, when the css file is loaded into js file by fs.readFileSync function call.

🤔 Expected Behavior

/* style.css */
:root {
    --font-color: blue;
}

```
/* MyElement.css */
div {
color: var(--font-color);
}

/* MyElement.js /
import fs from 'fs';
const style = fs.readFileSync('MyElement.css', 'utf-8');
/ vanilla js custom elements */
export default class MyElement extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = <style>${style}</style>;
}
// ...

where input files like above, I expected that the shadowRoot.innerHTML like below...

``` javascript
"<style>div { 
    color: blue;
    color: var(--font-color);
}</style>"

😯 Current Behavior

Currently postCSS doesn't affect to it.

"<style>div { 
    color: var(--font-color);
}</style>"

💁 Possible Solution

Sorry... I have no idea...
It might possible that I wrote the style code in js file driectly as a string value then convert it with babel plugins...

🔦 Context

💻 Examples

https://github.com/march23hare/parcel-scaffolding-web-components/tree/test-shadow-DOM

[DeMoorJasper]

This should automatically happen in parcel 1.10+

[march23hare]

This should automatically happen in parcel 1.10+

I updated Parcel 1.10+ but it still not worked.

[DeMoorJasper]

@march23hare that's strange it should run through postCSS.

Not sure if your example is a real example of the code. As that wouldn't work, I originally thought it was inside html files, inlining through JS would require running postCSS first and then fs.readFile it from inside parcel, it's pretty hacky.

[jhpratt]

@DeMoorJasper How can this be done such that it works in the browser? I'm doing something nearly identical, and am running into difficulties. Parcel looks like a great tool, but this coupled with the _very_ large overhead (turning my 49k bundle into 69k) is making me question its effectiveness.

[march23hare]

@DeMoorJasper How can this be done such that it works in the browser? I'm doing something nearly identical, and am running into difficulties. Parcel looks like a great tool, but this coupled with the _very_ large overhead (turning my 49k bundle into 69k) is making me question its effectiveness.

I just choose Polymer CLI + Polymer LitElement instead of Parcel.js + WebComponent. My purpose was using Web Component(Custom Element, Shadow DOM) for a project. I couldn't find out a way but an alternative.

[jhpratt]

@march23hare I'm using LitElement now, and it works great. The only "problem" I have is that each custom element needs its own CSS file, since there's no way to inline it. I looked into creating a Babel plugin to transform CSS inside a tagged template literal, but unfortunately that's not possible due to PostCSS allowing async plugins (and Babel not).