Excluding directory from PostCss? [For Ckeditor webkit config file ]

[aske-cph]

• Laravel Mix Version: 4.0.0
• Node Version : 12.10.0
• NPM Version: 6.11.3
• OS: Ubuntu18

Description:

I want to exclude a select node_modules folder from getting run through PostCss loader - so that files that have already been processed with custom webkit code is not run through the loader once again.

Right now i am getting this error:

@ multi ./resources/js/app.js ./resources/css/app.css

ERROR in ./node_modules/@ckeditor/ckeditor5-engine/theme/placeholder.css (./node_modules/css-loader??ref--6-1!./node_modules/postcss-loader/src??ref--6-2!./node_modules/style-loader??ref--12-0!./node_modules/postcss-loader/src??ref--12-1!./node_modules/@ckeditor/ckeditor5-engine/theme/placeholder.css)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError

(2:1) Unknown word

  1 |
> 2 | var content = require("!!../../../postcss-loader/src/index.js??ref--12-1!./placeholder.css");

Steps To Reproduce:

I am using this custom code : ckeditor/ckeditor5-vue#23 (comment)
that seemingly works perfectly - but not with Laravels new Jetstream scaffolding that includes code for including TailwindCss and then running everything through PostCss.

My webpack.mix.js looks like this:

const mix = require('laravel-mix');

const CKEditorWebpackPlugin = require('@ckeditor/ckeditor5-dev-webpack-plugin');
const CKEStyles = require('@ckeditor/ckeditor5-dev-utils').styles;
const CKERegex = {
    svg: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
    css: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css/,
};

Mix.listen('configReady', webpackConfig => {
    const rules = webpackConfig.module.rules;
    const targetSVG = /(\.(png|jpe?g|gif|webp)$|^((?!font).)*\.svg$)/;
    const targetFont = /(\.(woff2?|ttf|eot|otf)$|font.*\.svg$)/;
    const targetCSS = /\.css$/;

    // exclude CKE regex from mix's default rules
    for (let rule of rules) {
        if (rule.test.toString() === targetSVG.toString()) {
            rule.exclude = CKERegex.svg;
        } else if (rule.test.toString() === targetFont.toString()) {
            rule.exclude = CKERegex.svg;
        } else if (rule.test.toString() === targetCSS.toString()) {
            rule.exclude = CKERegex.css;
        }
    }

});

mix.webpackConfig({
                      plugins: [
                          new CKEditorWebpackPlugin({
                                                        language: 'en',
                                                    }),
                      ],
                      module: {
                          rules: [
                              {
                                  test: CKERegex.svg,
                                  use: ['raw-loader'],
                              },
                              {
                                  test: CKERegex.css,
                                  use: [
                                      {
                                          loader: 'style-loader',
                                          options: {
                                              singleton: true,
                                          },
                                      },
                                      {
                                          loader: 'postcss-loader',
                                          options: CKEStyles.getPostCssConfig({
                                                                                  themeImporter: {
                                                                                      themePath: require.resolve('@ckeditor/ckeditor5-theme-lark'),
                                                                                  },
                                                                                  minify: true,
                                                                              }),
                                      },
                                  ],
                              },
                          ],
                      },
                  });

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        require('tailwindcss'),
    ]);

It seems to me that i need to exclude the entire /@ckeditor folder from .postCss - but i have not figured out how.
Anyone know if it's possible for example with the laravel-mix-postcss-config package?

[JeffreyWay]

I'm not sure, but you might research a PostCSS plugin like this: https://github.com/anyley/postcss-exclude-files