/* rtl:begin:ignore */ not working in build version of Vue App

[jd-solanki]

Version

3.11.0

Reproduction link

https://github.com/jd-0001/vue-cli-rtl-test

Environment info

System:
    OS: Linux 5.0 Ubuntu 18.04.3 LTS (Bionic Beaver)
    CPU: (4) x64 Intel(R) Core(TM) i3-2100 CPU @ 3.10GHz
  Binaries:
    Node: 10.15.3 - ~/.nvm/versions/node/v10.15.3/bin/node
    Yarn: 1.19.0 - /usr/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v10.15.3/bin/npm
  Browsers:
    Chrome: 77.0.3865.90
    Firefox: 69.0.2
  npmPackages:
    @chenfengyuan/vue-countdown: ^1.1.2 => 1.1.3 
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0 
    @vue/babel-plugin-transform-vue-jsx:  1.0.0 
    @vue/babel-preset-app:  3.0.0-beta.11 (3.11.0)
    @vue/babel-preset-jsx:  1.1.0 
    @vue/babel-sugar-functional-vue:  1.0.0 
    @vue/babel-sugar-inject-h:  1.0.0 
    @vue/babel-sugar-v-model:  1.0.0 
    @vue/babel-sugar-v-on:  1.1.0 
    @vue/cli-overlay:  3.11.0 
    @vue/cli-plugin-babel: ^3.7.0 => 3.11.0 
    @vue/cli-plugin-eslint: ^3.7.0 => 3.11.0 
    @vue/cli-service: ^3.7.0 => 3.11.0 
    @vue/cli-shared-utils:  3.11.0 
    @vue/component-compiler-utils:  3.0.0 
    @vue/preload-webpack-plugin:  1.1.1 
    @vue/web-component-wrapper:  1.2.0 
    ag-grid-vue: ^21.0.1 => 21.2.2 
    babel-helper-vue-jsx-merge-props:  2.0.3 
    babel-plugin-transform-vue-jsx:  4.0.1 
    eslint-plugin-vue:  4.7.1 
    vue: ^2.6.10 => 2.6.10 
    vue-acl: 4.0.7 => 4.0.7 
    vue-apexcharts: ^1.3.5 => 1.5.0 
    vue-awesome-swiper: ^3.1.3 => 3.1.3 
    vue-backtotop: ^1.6.1 => 1.6.1 
    vue-chartjs: ^3.4.2 => 3.4.2 
    vue-class-component:  7.1.0 
    vue-clickaway:  2.2.2 
    vue-clipboard2: ^0.3.0 => 0.3.1 
    vue-context: ^4.0.0 => 4.0.3 
    vue-e-bus:  1.0.0 
    vue-echarts: ^4.0.3 => 4.0.4 
    vue-eslint-parser:  2.0.3 
    vue-feather-icons: ^5.0.0 => 5.0.0 
    vue-flatpickr-component: ^8.1.2 => 8.1.3 
    vue-form-wizard: ^0.8.4 => 0.8.4 
    vue-fullcalendar: ^1.0.9 => 1.0.9 
    vue-hot-reload-api:  2.3.4 
    vue-i18n: ^8.11.2 => 8.14.1 
    vue-instantsearch: ^2.2.1 => 2.5.0 
    vue-loader:  15.7.1 
    vue-perfect-scrollbar: ^0.1.0 => 0.1.0 
    vue-prism-component: ^1.1.1 => 1.1.1 
    vue-property-decorator: ^8.1.1 => 8.2.2 
    vue-quill-editor: ^3.0.6 => 3.0.6 
    vue-router: ^3.0.6 => 3.1.3 
    vue-select: ^3.1.0 => 3.2.0 
    vue-server-renderer:  2.6.10 
    vue-simple-calendar: ^4.2.2 => 4.2.2 
    vue-simple-suggest: ^1.9.5 => 1.9.5 
    vue-star-rating: ^1.6.1 => 1.6.1 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.6.10 => 2.6.10 
    vue-template-es2015-compiler:  1.9.1 
    vue-tour: ^1.1.0 => 1.1.0 
    vue-tree-halower: ^1.8.0 => 1.8.1 
    vue-video-player: ^5.0.2 => 5.0.2 
    vue2-google-maps: ^0.10.6 => 0.10.7 
    vue2-hammer: ^2.1.2 => 2.1.2 
    vuecode.js: 0.0.27 => 0.0.27 
    vuedraggable: ^2.21.0 => 2.23.2 
    vuejs-datepicker: ^1.5.4 => 1.6.2 
    vuepress: 0.14.11 => 0.14.11 
    vuepress-html-webpack-plugin:  3.2.0 
    vuesax: ^3.10.8 => 3.10.8 
    vuex: ^3.1.1 => 3.1.1 
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

First run app in developement mode. Notice that heading have margin-right of 100px when you run "yarn serve".

But if you run "yarn build" and try to check build version, post-css's ignore comment is not counted and it's also converted for RTL version.

What is expected?

Due to / rtl:begin:ignore / margin-right should not be converted to margin-left

What is actually happening?

margin-right is get converted into margin-left

[vrushank]

I'm facing the same issue with the build. It's fine while running dev but not working with build.

[haoqunjiang]

Not a bug. Please use /*! rtl:begin:ignore */. See https://sass-lang.com/documentation/syntax/comments#in-scss compressed mode is automatically enabled in production mode. So, only comments start with /*! can be passed down to postcss.

I think we need to address this in the documentation.

[jd-solanki]

Hello @sodatea Thanks so much. Using /*! rtl:begin:ignore */ solves the issue.