[RTL][SCSS] rtl:ignore is not respected during quasar build

[behnoodk]

When using scss or sass using the special syntax of #{"/* rtl:ignore */"}; for signaling the rtlcss to ignore this rule during build process, will not do anything and the direction will be flipped anyway.

Since #8073 these rtl:ignore rules are used in core positioning classes and this issue causes a RTL Quasar project to be pretty much unusable with current version because everything for example QHeader will have positioning problem and won't stretch to the whole width of screen.

Steps to reproduce on a freshly created Quasar v1.14.7 project:

1. set lang: 'fa-ir' and rtl:true in quasar.conf.js
2. quasar build && cd dist/spa && quasar serve
3. try closing the drawer and see the header will shrink to its content width.

This does not happen during development using quasar dev and happens only with quasar build which makes this a very tricky issue because the problem won't be seen until the project is deployed and everything during development looks fine.

[Saeid-Za]

Hello, I can reproduce this issue by following the steps, here's some additional info on the problem:
related CSS at the dev mode :

.fixed-top {
    top: 0;
    left: 0 /* rtl:ignore */;
    right: 0 /* rtl:ignore */;
}

and CSS at prod mode :

.fixed-top{top:0;left:0}
[dir=ltr] .fixed-top{right:0}
[dir=rtl] .fixed-top{left:0}

as we can see, the transformation process, was not ignored for these two line of CSS at prod mode, and there is no ignore comment in prod mode (stripped away by compilation process).

[pdanpdan]

can you both please

• state which version of @quasar/app are using
• do a rm -rf node_modules/ yarn.lock && yarn in your project folder and build it again and check if the problem is still present

[Saeid-Za]

A quick update:

• Version of @quasar/app : 2.1.10
• Doing a full delete & reinstall of npm packages had no effect.
• I can still reproduce the problem of ignore rules being ignored themselves (prod mode only) in version 2.1.8 (@quasar/app)
  • using .rotate-45 as an example.
• this issue is only limited on quasar code base, ignore rules work fine when used in developer land.

[behnoodk]

quasar info

Operating System - Linux(4.15.0-126-generic) - linux/x64
NodeJs - 12.20.0

Global packages
  NPM - 6.14.8
  yarn - 1.22.5
  @quasar/cli - 1.1.2
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 1.14.7 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app - 2.1.10 -- Quasar Framework local CLI
  @quasar/extras - 1.9.10 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 2.6.12 -- Reactive, component-oriented view layer for modern web interfaces.
  vue-router - 3.2.0 -- Official router for Vue.js 2
  vuex - 3.6.0 -- state management for Vue.js
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  @babel/core - 7.12.9 -- Babel compiler core.
  webpack - 4.44.2 -- Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
  webpack-dev-server - 3.11.0 -- Serves a webpack app. Updates the browser on changes.
  workbox-webpack-plugin - Not installed
  register-service-worker - 1.7.1 -- Script for registering service worker, with hooks
  typescript - 3.9.5 -- TypeScript is a language for application scale JavaScript development
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

do a rm -rf node_modules/ yarn.lock && yarn in your project folder and build it again and check if the problem is still present

I created an empty project from scratch so there is no point in doing that

[pdanpdan]

found something, I need a confirmation:

in the project folder, in node-modules/@quasar/app/lib/webpack/inject.style-rules.js
change line 152 to { sassOptions: { outputStyle: /* required for RTL */ 'expanded' } },
and line 156 to { sassOptions: { indentedSyntax: true, outputStyle: /* required for RTL */ 'expanded' } },
and see if it fixes the problems

[behnoodk]

and see if it fixes the problems

Yes. Proposed changes seems to fix the problem.

[rstoenescu]

Fix is available in "@quasar/app" v2.1.11.