title: How to add custom prefix to 3rd party CSS classes with Webpack/PostCSS?
body: <p>I am using <a href="https://github.com/rails/webpacker" rel="noreferrer">Webpacker</a> to build assets for a Rails app. I want to add custom prefixes to all of the class names coming from 3rd party CSS frameworks. For example, the styles from <a href="https://bulma.io/" rel="noreferrer">Bulma</a> should be transformed to use <code>bulma_button</code> as a selector instead of just <code>button</code>.</p>
  
  <p><a href="https://github.com/marceloucker/postcss-prefixer" rel="noreferrer"><code>postcss-prefixer</code></a> is a PostCSS plugin that appears to add custom prefixes to stylesheets like I want. However, I still need to make it only prefix the classes coming from a specific NPM package.</p>
  
  <p>This is where I am stuck on my path to prefixing the 3rd party styles: How can I apply a PostCSS plugin only to a certain <code>node_modules</code> directory and import the results into my entry point stylesheet? I have tried breaking up the loader pipeline provided by Webpacker and manipulating the <code>test</code>/<code>include</code>/<code>exclude</code> Webpack config values, but it seems I can only successfully impact the entire stylesheet that gets compiled including my styles that I do not want to prefix.</p>
  
  <p>Any help on the specific PostCSS plugin problem or the overall goal of prefixing 3rd party CSS is appreciated. I will link to a sample app if it is considered useful.</p>