[wp-trac] [WordPress Trac] #31332: RTL CSS generation: Switch from CSSJanus to RTLCSS

[WordPress Trac]

#31332: RTL CSS generation: Switch from CSSJanus to RTLCSS
------------------------------+-----------------------
 Reporter:  ocean90           |      Owner:
     Type:  defect (bug)      |     Status:  new
 Priority:  normal            |  Milestone:  4.2
Component:  Build/Test Tools  |    Version:
 Severity:  normal            |   Keywords:  has-patch
  Focuses:                    |
------------------------------+-----------------------
 == Prologue

 Three days ago we were finally able to switch back from a ''temporarily''
 fork of grunt-cssjanus and CSSJanus to the official ones, see [31425]. The
 ''temporary'' fork was created 6 months ago by me to fix an issue related
 to `border-radius`, see #29038.
 This wasn't the first pin to a patched fork, the first one was 15 months
 ago, see [26610].

 After [31425] ([https://build.trac.wordpress.org/changeset/31406 build
 changeset r31406]), I had noticed that there is something wrong with text
 shadows. And I was right, it switches the y-coordinate instead of the
 x-coordinate. I've reported the
 [https://github.com/cssjanus/cssjanus/pull/32 issue upstream]. But I don't
 want to patch CSSJanus anymore.



 == RTLCSS

 So I did some research and found [RTLCSS by Mohammad Younes
 https://github.com/MohammadYounes/rtlcss]. Same as CSSJanus is RTLCSS a
 framework for converting LTR CSS to RTL. It supports the following CSS
 properties:

 `background`, `background-image`, `background-position`, `background-
 position-x`, `border-bottom-left-radius`, `border-bottom-right-radius`,
 `border-color`, `border-left`, `border-left-color`, `border-left-style`,
 `border-left-width`, `border-radius`, `border-right`, `border-right-
 color`, `border-right-style`, `border-right-width`, `border-style`,
 `border-top-left-radius`, `border-top-right-radius`, `border-width`, `box-
 shadow`, `clear`, `cursor`, `direction`, `float`, `left`, `margin`,
 `margin-left`, `margin-right`, `padding`, `padding-left`, `padding-right`,
 `right`, `text-align`, `text-shadow`, `transform`, `transform-origin`,
 `transition`, `transition-property`

 `transform`, `transform-origin`, `transition` and `transition-property`
 are not supported by CSSJanus. RTLCSS supports also multiple values for
 `box-shadow` and `text-shadow`.

 I also did a look at the source code of RTLCSS and it looks much better
 than CSSJanus, it benefits of using [https://github.com/postcss/postcss
 PostCSS] for parsing CSS. (PostCSS is also used by Autoprefixer. \o/)

 And coincidentally, I've found an issue related to parsing text shadows,
 sigh. But hey, it got [https://github.com/MohammadYounes/rtlcss/pull/20
 merged] in under 24 hours!



 == Can i haz a grunt task?

 Sure, there is [https://github.com/MohammadYounes/grunt-rtlcss grunt-
 rtlcss], also maintained by Mohammad. It supports everything what grunt-
 cssjanus does. (I only had to ask for a `generateExactDuplicates:false`
 option, see merged [https://github.com/MohammadYounes/grunt-rtlcss/pull/1
 pull request].)

 CSSJanus has a `processContent` option which I've replaced with a
 [https://github.com/MohammadYounes/rtlcss#stringmap-array stringMap] in
 RTLCSS:

 {{{
 {
         name: 'import-rtl-stylesheet',
         search: [ '.css' ],
         replace: [ '-rtl.css' ],
         options: {
                 scope: 'url',
                 ignoreCase: false
         }
 }
 }}}

 Other options we should use:

 {{{
 swapLeftRightInUrl: false,
 swapLtrRtlInUrl: false,
 autoRename: false, // Don't rename left/right in selectors
 preserveDirectives: true, // Don't remove the directives (optional,
 CSSJanus does this default)
 }}}

 Speaking of directives, CSSJanus has `/* @noflip */` while RTLCSS uses `/*
 rtl:ignore */` ([https://github.com/MohammadYounes/rtlcss#supported-
 processing-directives and others]).



 == The patch

 The attached patch adds `"grunt-rtlcss": "~1.5.1",` to our
 devDependencies, changes the RTL grunt task per above, and updates our
 stylesheets to use the new directive. Since RTLCSS supports `transform`
 too, we have to add some additional directives, like `about.css`. But we
 can also remove some, see `media-view.css`.

 I set this as a bug, since RTL text shadows are broken currently.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/31332>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform