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

sage
,
1

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',
      }),
    ],
  });
2

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

3

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