Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
simonwiles opened this issue Dec 30, 2020 · 4 comments
Open

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

simonwiles opened this issue Dec 30, 2020 · 4 comments
Labels
CSS Preprocessing All the PostCSS, Less, SASS, etc issues ✨ Parcel 2 🙋‍♀️ Feature

Comments

@simonwiles
Copy link

🐛 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
@simonwiles simonwiles mentioned this issue Dec 30, 2020
Closed
@simonwiles simonwiles changed the title PostCSS plugin not PostCSS plugin not invoked for assets loaded from node_modules/ Dec 30, 2020
@mischnic
Copy link
Member

When searching for config files (Babel, Postcss, ....), we stop once node_modules is reached:

parcel/packages/transformers/postcss/src/loadConfig.js

Lines 71 to 74 in 67aefd8

let configFile: any = await config.getConfig(
['.postcssrc', '.postcssrc.json', '.postcssrc.js', 'postcss.config.js'],
{packageKey: 'postcss'},
);

parcel/packages/core/utils/src/config.js

Lines 28 to 31 in 67aefd8

// Don't traverse above the module root
if (path.basename(filepath) === 'node_modules') {
return null;
}

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.

@mischnic mischnic added 🙋‍♀️ Feature CSS Preprocessing All the PostCSS, Less, SASS, etc issues ✨ Parcel 2 labels Dec 30, 2020
@simonwiles
Copy link
Author

simonwiles commented Dec 30, 2020 •
edited

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
Copy link
Member

mischnic commented Dec 30, 2020 •
edited

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.

@mischnic mischnic mentioned this issue Jun 7, 2022
Closed
@yujingwyh
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
CSS Preprocessing All the PostCSS, Less, SASS, etc issues ✨ Parcel 2 🙋‍♀️ Feature
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@simonwiles @mischnic @yujingwyh