Wrap @import to ignore

[p3yman]

Hi,
I want to ignore a package that is importing from node_modules. What can i do about it?
I tried 2 ways:
First one:

/*rtl:begin:ignore*/
@import '~leaflet/dist/leaflet.css';
/*rtl:begin:ignore*/

And second one:

@import '~@assets/css/begin-rtl-ignore.css';
@import '~leaflet/dist/leaflet.css';
@import '~@assets/css/end-rtl-ignore.css';

But neither works! any solution?

[FaridAghili]

Looking forward to it

[jd-solanki]

+1

[vkalinichev]

@peyman3d @FaridAghili @jd-0001

Is problem still actual?

I add test for it, and it passes

[FaridAghili]

@vkalinichev
I've tested it right now.

app.scss:

@import '~bootstrap/dist/css/bootstrap.css';

/*rtl:begin:ignore*/
@import '~owl.carousel/dist/assets/owl.carousel.css';
/*rtl:end:ignore*/

// more codes ...

It's expected that OwlCarousel be ignored here (Cause it supports RTL by default and doesn't need to be RTLed), but it's still processed and RTLed.

laravel-mix: 5.0.1
postcss-rtl: 1.7.0

[vkalinichev]

Hmm... Can you provide your postcss config? Maybe another plugins strips out the ignore-directives or something like that?

[FaridAghili]

I'm using laravel-mix in a Laravel project.

webpack.mix.js file:

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

mix.sass('resources/sass/app.scss', 'public/css')
    .options({
        postCss: [
            require('postcss-rtl')({
                onlyDirection: 'rtl'
            })
        ]
    });

package.json file:

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "bootstrap": "^4.4.1",
        "cross-env": "^7.0",
        "jquery": "^3.4.1",
        "laravel-mix": "^5.0.1",
        "owl.carousel": "^2.3.4",
        "popper.js": "^1.16.1",
        "postcss-rtl": "^1.7.0",
        "resolve-url-loader": "^3.1.1",
        "sass": "^1.25.0",
        "sass-loader": "^8.0.2",
        "vue-template-compiler": "^2.6.11"
    }
}

[owen-soak]

Experiencing the same issue with Owl Carousel
/*rtl:begin:ignore*/ @import '~owl.carousel/dist/assets/owl.carousel.css'; /*rtl:end:ignore*/

[miladmeidanshahi]

the same issue I can't ignore CSS files

[mhrabiee]

Probably is a Webpack issue in production mode. (When comments are striped).
Fixed via /* ! */

/*! rtl:begin:ignore */
@import '~leaflet/dist/leaflet.css';
/*! rtl:end:ignore */

Tested in Nuxt 2.12 & Laravel Mix 4

[miladmeidanshahi]

@mhrabiee does't work on quasar framework :(

[FaridAghili]

@mhrabiee @miladmeidanshahi doesn't work on laravel-mix 5 neither.

also tried this with no success.

[hbsoftco]

@mhrabiee
How did you import postcss-rtl at nuxt.config.js?
Please share it.

dadash kheili giram :))

[mhrabiee]

@mhrabiee
How did you import postcss-rtl at nuxt.config.js?
Please share it.

dadash kheili giram :))

@hbsoftco

npm i postcss-rtl --save-dev

nuxt.config.js

  build: {
    /*
     ** You can extend webpack config here
     */
    postcss: {
      plugins: {
        'postcss-rtl': {}
      }
    }
  }

[mustafa-online]

Any solution for this on Quasar? 😢

[miladmeidanshahi]

In new Quasar:

If you have been using quasar.conf.js > build > rtl in the form of an Object, then you must match these options now, since we've switched from the unmaintained postcss-rtl to postcss-rtlcss package.

[ahmedqasid]

@miladmeidanshahi We are facing the same issue with Quasar, would you clarify the solution you used or explain your comment

In new Quasar:

If you have been using quasar.conf.js > build > rtl in the form of an Object, then you must match these options now, since we've switched from the unmaintained postcss-rtl to postcss-rtlcss package.

[AbdElRahmanAshraf99]

Thanks to @ahmedqasid for helping me doing the solution that I will discuss with you.

In Quasar, you can create your own plugin and add use it.
And I will show you the steps of this solution:

Step 1. Create your plugin

// add-ignore-rtl-plugin.mjs

import postcss from 'postcss';

const prefixSuffixPlugin = postcss.plugin('postcss-prefix-suffix', (options = {}) => {
  const {prefix = '/*! rtl:begin:ignore */', suffix = '/*! rtl:end:ignore */', include = [/ag-grid/]} = options;
  return (root, result) => {
    const fileName = result.opts.from;
    if (include.some(pattern => pattern.test(fileName))) {
      const cssContent = root.toString();
      const newContent = `${prefix}\n${cssContent}\n${suffix}`;
      result.root = postcss.parse(newContent);
    }
  };
});

export default prefixSuffixPlugin;

Step 2. Add your plugin to CSS preprocessors:

// postcss.config.mjs

import autoprefixer from 'autoprefixer'
import rtlcss from 'postcss-rtlcss'
import tailwindcss from 'tailwindcss'
import prefixSuffixPlugin from './add-ignore-rtl-plugin.mjs'

export default {
  plugins: [
    tailwindcss(),
    autoprefixer(),
    prefixSuffixPlugin(),
    rtlcss()
  ]
}

This will add ignore prefix and suffix comments to any file in the AG-Grid library.
@mustafa-online @miladmeidanshahi