simonwiles commented 3 years ago

🐛 bug report

🎛 Configuration (.babelrc, package.json, cli command)

package.json

  "scripts": {
    "dev": "parcel index.html",
    "build": "parcel build index.html"
  },
  "devDependencies": {
    "parcel": "^2.0.0-nightly.495",
    "postcss": "^8.2.2",
    "postcss-image-inliner": "^4.0.4"
  },
  "postcss": {
    "plugins": {
      "postcss-image-inliner": {
        "strict": true,
        "assetPaths": [
          "**/leaflet/dist"
        ]
      }
    }
  },
  "dependencies": {
    "leaflet": "^1.7.1"
  }
}

index.html

<html>

<head>
  <link rel="stylesheet" href="./styles.css">
  <link rel="stylesheet" href="./node_modules/leaflet/dist/leaflet.css">
</head>

<body>
  <p>Image is inlined as base64: <span class="red-circle"></span></p>
  <p>Image is <strong>not</strong> inlined: <span class="leaflet-control-layers-toggle"></span></p>
</body>

</html>

🤔 Expected Behavior

postcss-image-inliner should be invoked on both css files.

😯 Current Behavior

postcss-image-inliner is not invoked on the leaflet css. Note that the "strict": true config passed to postcss-image-inliner should make it fail if the assets can't be found, but the assetPaths config is not the issue -- the plugin code is never called (confirmed by littering the postcss-image-inliner js with console.log statements. It's invoked for styles.css but not for the leaflet css).

💁 Possible Solution

The same assets compile as expected if they're simply copied out of node_modules, so is there something that's explicitly preventing node_modules/**/*.css being processed?

🔦 Context

I'm writing some native web components, and I want to bundle all the needed assets into a single .js file, so I want to use import leafletStyles from "bundle-text:leaflet/dist/leaflet.css"; and write the leafletStyles into my component's shadowDom. But this problem surfaces even in with an html entrypoint and css included with <link> tags.

💻 Code Sample

https://github.com/simonwiles/parcel-postcss-image-inliner-example

🌍 Your Environment

Software	Version(s)
Parcel	2.0.0-nightly.495
Node	v14.15.3
npm/Yarn	yarn 1.22.5
Operating System	linux

mischnic commented 3 years ago

When searching for config files (Babel, Postcss, ....), we stop once node_modules is reached: https://github.com/parcel-bundler/parcel/blob/67aefd83f8a32813aa86c904952d6ceb63eb235c/packages/transformers/postcss/src/loadConfig.js#L71-L74

https://github.com/parcel-bundler/parcel/blob/67aefd83f8a32813aa86c904952d6ceb63eb235c/packages/core/utils/src/config.js#L28-L31

So leaflet isn't even processed with your config file.

Same applies to babelrc: files from node_modules aren't processed with your project's Babel config.

simonwiles commented 3 years ago

Thanks, that's clearer now (I wasn't really sure where to look previously). What I really want to do is load the (preprocessed) CSS from my own .js module using the bundle-text: named pipeline (see https://github.com/simonwiles/parcel-postcss-image-inliner-example/blob/main/script.js -- but it's for web components so I'll be writing the CSS to the shadow dom). Do you see any way to achieve this other than "vendoring-in" the assets to my own source tree?

Edit: the CSS is being minified by Parcel (cssnano?), so where is that config coming from? That's not part of the leaflet package.

mischnic commented 3 years ago

At the moment no. We are no opposed to feature, but it should be opt in (so you'd somehow specify "yes, do apply my postcssrc to node_modules/leaflet/*")...

the CSS is being minified by Parcel (cssnano?), so where is that config coming from? That's not part of the leaflet package.

The final bundle is minified, not the individual input assets. For optimizers/packagers, the config is read relative to the bundle output path.

yujingwyh commented 2 years ago

Hope to deal with it soon，file for node_modules not working when using postcss-pxtorem

parcel-bundler / parcel

PostCSS plugin not invoked for assets loaded from node_modules/ #5551