[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                                |  Resolution:
 Keywords:  has-patch dev-feedback needs-testing  |     Focuses:
--------------------------------------------------+------------------
Description changed by ocean90:

Old description:

> == 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.

New description:

 == 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 [https://github.com/MohammadYounes/rtlcss
 RTLCSS by Mohammad Younes]. 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#comment:4>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform