Roots Discourse

Separate Mix Routines - Plugin on Second Mix Routine Runs on First

I’m trying to create a admin.scss file that gets compiled with an additional PostCSS plugin to prefix the selectors for scoping purposes.

For some reason the “postcss-prefix-selector” plugin on the second mix clause is also affecting the first. Am I doing something wrong? Should I contact the plugin author or is this an issue with the way I am writing my mix file? If I remove the second clause the app.scss and editor.scss compile correctly without the prefixing.

I’m also not sure if there is a better way to do this as other than the prefixing the content app.css and admin.css should be the same.

Much thanks for any help.

mix
  .sass('resources/styles/app.scss', 'styles')
  .sass('resources/styles/editor.scss', 'styles')
  .options({
    processCssUrls: false,
    postCss: [require('tailwindcss')],
  });

mix
  .sass('resources/styles/admin.scss', 'styles')
  .options({
    processCssUrls: false,
    postCss: [
      require('tailwindcss'),
      require('postcss-prefix-selector')( {
        prefix: '.-preview',
      }),
    ],
  });

I was able to solve this by adding the PostCSS plugins to the sass methods instead of the options.

This is working as intended. All chaining off of mix is applying to the same object.
This:

mix
  .sass('resources/styles/app.scss', 'styles')
  .sass('resources/styles/editor.scss', 'styles');

mix
  .sass('resources/styles/admin.scss', 'styles');

…is functionally identical to this:

mix
  .sass('resources/styles/app.scss', 'styles')
  .sass('resources/styles/editor.scss', 'styles')
  .sass('resources/styles/admin.scss', 'styles');

Each call to .sass() is another per-file “build.”

1 Like