Support to include some files or packages

[Leruiz]

We need to handle RTL for a part area. But now all css will be processed. Could include or. exclude option be supported?

[elchininet]

Hi @Leruiz, could you share what tool/configuration are you using?

A small repo with an example of your configuration will be appreciated.

[elchininet]

Hi @Leruiz, it seems that you already find a solution for your issue. Closing this issue.

[Saeid-Za]

Hello and thanks for the library ! I have the same request here. Here's the scenario: While developing RTL web pages There are 3rd party libraries that only support LTR. using this library we could trasform these libraries to corresponding RTL versions. but this transformation should only be applied to 3rd party libraries, not my CSS files.

So there should be an option to include / exclude files from applying these transformations.

[elchininet]

Hi @Saeid-Za,

As I asked @Leruiz, could you share what tool/configuration are you using or a small repo with your configuration?

The reason for this is that this tool is just a postcss plugin. It is postcss which processes the files and applies to those files the plugins that you have chosen. Normally postcss is used through other tools (Webpack, Gulp, Grunt, etc) and these tools have configurations to decide how to process your files.

[Saeid-Za]

@elchininet Thanks for responding. I see, this is rather a postcss scoped request than a postcss plugin request. I'm using webpack and postcss-loader for writing this include / exclude functionality.

const postcssRTL = require('postcss-rtlcss')

const postCssOpts = { plugins: [] }
const customPlugin = ctx => {
  const plugins = []
  const isVendorCss = vendorCssPaths.some(item => ctx.source.input.file.indexOf(item) !== -1)
  plugins.push(postcssRTL({source: isVendorCss ? 'ltr' : 'rtl'}))
  return plugins
}

postCssOpts.plugins.push(customPlugin)

rule.use('postcss-loader')
  .loader('postcss-loader')
  .options(postCssOpts)

[elchininet]

@Saeid-Za exactly, from postcss the plugin receives a root object and its task is to modify it. But deciding which file to process falls in an upper level.

It seems then that this configuration that you are using doesn't work. Do you have a public repo with your project to check it out?

[Saeid-Za]

i'm using Quasar, and recently it has been updated to a new version. in this update quasar switching from postcss-rtl to postcss-rtlcss as it's primary RTL transformer. unfortunately this new version, has a bug in transformation compared to previous version. It does not respect the source attribute (similar to fromRTL in postcss-rtl)

the snippet I posted earlier, was from the newer version (with some changes), Here's the original file and here's the old working file.

same principles were applied in both versions, if an specific condition was met, transformer would change it's assumption on direction on input CSS file, except the new version does not work.

[elchininet]

I'll check Quasar and your snippets to see if I can reproduce the issue. But just to double check, do you want to exclude some files from being processed by postcss-rtlcss or do you want to process all the files and just changing the source attribute per file?

[Saeid-Za]

Thanks ! I want to process all files and change source per case.

[elchininet]

I don't see any usage of postcss-rtlcss in Quasar, could you point me out to the specific commit?

And another question, how do you include the vendor CSS files? I can't find any reference to vendorCssPaths in the snippets that you shared.

Edit: It is difficult to test this without a repo, Quasar is the framework but it would be good you have a repo with an implementation. Could you create a minimum reproducible repo?

[Saeid-Za]

Hello ! I had changed the original file a bit to decrease the noise and irrelevant codes, that's why this is not a match to quasar's own file, and one of the links in the previous comment was pointing to a wrong file (i've updated it), sorry for confusion. After several hours of doing some trial and error, i've found out that postcss APIs had been changed from the previous version that quasar was depending on.

postcss config that are loaded with postcss-loader can either be an object or a function, returning that object. one of the fields in the returned object is plugin. previously this plugin could be a function, returning the plugin data, that's how the old working syntax was doing fine. it seems this behavior was changed in latest version of postcss / postcss-loader (Here and Here). The solution that I found out was to use the postcss config function to manipulate the returned config of plugin, somthing like this (in webpack,js):

const postcssRTL = require('postcss-rtlcss')

module.exports = {
  module: {
    rules: [
      {
        test: /\.(css)$/i,
        loader: "postcss-loader",
        options: {

          postcssOptions: (loaderContext) => {
              // assuming we have a list of 3rd party css libraries that we want to apply rtlcss on.
              const isVendorCss = vendorCssList.some(item => ctx.resourcePath.indexOf(item) === -1)
              return {
                plugins: [
                    postcssRTL({ source: isVendorCss ? 'ltr' : 'rtl' })
                ],
              };
            }

        },
      },
    ],
  },
};

Thanks for helping me and again Thanks for this amazing library.

[elchininet]

Oh, I'm glad that you solved it. Another solution would be using Rule.resourceQuery to execute a specific set of rules in the files that you want, but I think that your solution is clearer.