WordPress.org
Get WordPress

Make WordPress Core

Changeset 31573


Ignore:
Timestamp:
02/27/2015 01:40:03 PM (10 years ago)
Author:
ocean90
Message:

RTL CSS generation: Switch from CSSJanus to RTLCSS.

CSSJanus (introduced in [26107]), we had a great time with you, but sadly you don't like our fancy CSS.

RTLCSS is a framework for converting CSS from LTR to RTL, same as CSSJanus, with support for more CSS properties like transform, transition or multiple box and text shadows.

Changes:

  • devDependencies: Remove grunt-cssjanus, add grunt-rtlcss.
  • RTLCSS uses /* rtl:ignore */ to ignore a rule, switch existing /* @noflip */ to the new directive.
  • RTLCSS supports the transform property, means we can remove some ignore rules.
  • RTLCSS supports string maps for custom replace rules. This commit includes a rule import-rtl-stylesheet which replaces ".css" with "-rtl.css" in URLs.

Notes for core development:

  • The file generation task is still grunt rtl.
  • If you have used grunt cssjanus before, use grunt rtlcss now.
  • Remember the new directive /* rtl:ignore */.

fixes #31332.

Build: ​https://build.trac.wordpress.org/changeset/31554

Location:
trunk
Files:
13 edited

Legend:

Unmodified
Added
Removed

  • trunk/Gruntfile.js

    r31547 r31573  
    173173            }
    174174        },
    175         cssjanus: {
     175        rtlcss: {
     176            options: {
     177                // rtlcss options
     178                config: {
     179                    swapLeftRightInUrl: false,
     180                    swapLtrRtlInUrl: false,
     181                    autoRename: false,
     182                    preserveDirectives: true,
     183                    stringMap: [
     184                        {
     185                            name: 'import-rtl-stylesheet',
     186                            search: [ '.css' ],
     187                            replace: [ '-rtl.css' ],
     188                            options: {
     189                                scope: 'url',
     190                                ignoreCase: false
     191                            }
     192                        }
     193                    ]
     194                },
     195                saveUnmodified: false
     196            },
    176197            core: {
    177                 options: {
    178                     swapLtrRtlInUrl: false,
    179                     processContent: function( src ) {
    180                         return src.replace( /url\((.+?)\.css\)/g, 'url($1-rtl.css)' );
    181                     }
    182                 },
    183198                expand: true,
    184199                cwd: SOURCE_DIR,
    … …  
    191206            },
    192207            colors: {
    193                 options: {
    194                     processContent: function( src ) {
    195                         return src.replace( /([^/]+)\.css/gi, '$1-rtl.css' );
    196                     }
    197                 },
    198208                expand: true,
    199209                cwd: BUILD_DIR,
    … …  
    504514                    SOURCE_DIR + 'wp-includes/css/*.css'
    505515                ],
    506                 tasks: ['cssjanus:dynamic'],
     516                tasks: ['rtlcss:dynamic'],
    507517                options: {
    508518                    spawn: false,
    … …  
    523533
    524534    // RTL task.
    525     grunt.registerTask('rtl', ['cssjanus:core', 'cssjanus:colors']);
     535    grunt.registerTask('rtl', ['rtlcss:core', 'rtlcss:colors']);
    526536
    527537    // Color schemes task.
    … …  
    577587    // On `watch:all`, automatically updates the `copy:dynamic` and `clean:dynamic`
    578588    // configurations so that only the changed files are updated.
    579     // On `watch:rtl`, automatically updates the `cssjanus:dynamic` configuration.
     589    // On `watch:rtl`, automatically updates the `rtlcss:dynamic` configuration.
    580590    grunt.event.on('watch', function( action, filepath, target ) {
    581591        if ( target !== 'all' && target !== 'rtl' ) {
    … …  
    589599        grunt.config(['clean', 'dynamic', 'src'], cleanSrc);
    590600        grunt.config(['copy', 'dynamic', 'src'], copySrc);
    591         grunt.config(['cssjanus', 'dynamic', 'src'], copySrc);
     601        grunt.config(['rtlcss', 'dynamic', 'src'], copySrc);
    592602    });
    593603};

  • trunk/package.json

    r31557 r31573  
    2323    "grunt-contrib-uglify": "~0.6.0",
    2424    "grunt-contrib-watch": "~0.6.1",
    25     "grunt-cssjanus": "~0.2.4",
    2625    "grunt-jsvalidate": "~0.2.2",
    2726    "grunt-legacy-util": "^0.2.0",
    2827    "grunt-patch-wordpress": "~0.3.0",
     28    "grunt-rtlcss": "~1.5.1",
    2929    "grunt-sass": "~0.16.0",
    3030    "matchdep": "~0.3.0"

  • trunk/src/wp-admin/css/about.css

    r31422 r31573  
    264264}
    265265
     266/* rtl:ignore */
    266267.about-wrap .dfw-container .overlay-image.from-left {
    267268    -webkit-transform: translate3d(-100%, 0, 0);
    … …  
    297298    float: left;
    298299    clear: left;
    299     margin: 15px 15px 0 0 ;
     300    margin: 15px 15px 0 0;
    300301    height: 90px;
    301302    width: 90px;

  • trunk/src/wp-admin/css/admin-menu.css

    r31564 r31573  
    593593}
    594594
     595/* rtl:ignore */
    595596.folded #collapse-button div:after,
    596597.rtl #collapse-button div:after {
    … …  
    724725    }
    725726
     727    /* rtl:ignore */
    726728    .auto-fold #collapse-button div:after {
    727729        -webkit-transform: rotate(180deg);

  • trunk/src/wp-admin/css/common.css

    r31569 r31573  
    391391}
    392392
    393 /* @noflip */
     393/* rtl:ignore */
    394394.ltr {
    395395    direction: ltr;
    396396}
    397397
    398 /* @noflip */
     398/* rtl:ignore */
    399399.code,
    400400code {
    … …  
    23762376}
    23772377
    2378 /* @noflip */
     2378/* rtl:ignore */
    23792379#plugin-information .section {
    23802380    direction: ltr;
    23812381}
    23822382
    2383 /* @noflip */
     2383/* rtl:ignore */
    23842384#plugin-information .section ul,
    23852385#plugin-information .section ol {
    … …  
    24092409}
    24102410
    2411 /* @noflip */
     2411/* rtl:ignore */
    24122412#plugin-information #section-screenshots li p {
    24132413    font-style: italic;
    … …  
    24212421}
    24222422
    2423 /* @noflip */
     2423/* rtl:ignore */
    24242424#plugin-information .review {
    24252425    overflow: hidden; /* clearfix */
    … …  
    24332433}
    24342434
    2435 /* @noflip */
     2435/* rtl:ignore */
    24362436#plugin-information .review-title-section h4 {
    24372437    display: inline-block;
    … …  
    24462446}
    24472447
    2448 /* @noflip */
     2448/* rtl:ignore */
    24492449#plugin-information .reviewer-info .avatar {
    24502450    float: left;
    … …  
    24522452}
    24532453
    2454 /* @noflip */
     2454/* rtl:ignore */
    24552455#plugin-information .reviewer-info .star-rating {
    24562456    float: left;
    24572457}
    24582458
    2459 /* @noflip */
     2459/* rtl:ignore */
    24602460#plugin-information .review-meta {
    24612461    float: left;
    … …  
    24632463}
    24642464
    2465 /* @noflip */
     2465/* rtl:ignore */
    24662466#plugin-information .review-body {
    24672467    float: left;
    … …  
    27112711}
    27122712
    2713 /* @noflip */
     2713/* rtl:ignore */
    27142714#template textarea,
    27152715#docs-list {

  • trunk/src/wp-admin/css/edit.css

    r31505 r31573  
    13111311}
    13121312
    1313 /* @noflip */
    13141313.focus-on #adminmenuback,
    13151314.focus-on #adminmenuwrap {
    … …  
    13171316    -ms-transform: translateX( -100% );
    13181317    transform: translateX( -100% );
    1319 }
    1320 
    1321 /* @noflip */
    1322 .rtl.focus-on #adminmenuback,
    1323 .rtl.focus-on #adminmenuwrap {
    1324     -webkit-transform: translateX( 100% );
    1325     -ms-transform: translateX( 100% );
    1326     transform: translateX( 100% );
    13271318}
    13281319

  • trunk/src/wp-admin/css/forms.css

    r31534 r31573  
    6262}
    6363
    64 /* @noflip */
     64/* rtl:ignore */
    6565input[type="email"],
    6666input[type="url"] {

  • trunk/src/wp-admin/css/install.css

    r31505 r31573  
    238238}
    239239
    240 /* @noflip */
     240/* rtl:ignore */
    241241#dbname,
    242242#uname,

  • trunk/src/wp-admin/css/themes.css

    r31519 r31573  
    15251525}
    15261526
     1527/* rtl:ignore */
    15271528.wp-full-overlay.collapsed .collapse-sidebar-arrow:before,
    15281529.rtl .wp-full-overlay .collapse-sidebar-arrow:before {

  • trunk/src/wp-includes/css/editor.css

    r31505 r31573  
    21132113}
    21142114
    2115 /* @noflip */
     2115/* rtl:ignore */
    21162116.mce-rtl .mce-flow-layout .mce-flow-layout-item > div {
    21172117    direction: rtl;
    21182118}
    21192119
    2120 /* @noflip */
     2120/* rtl:ignore */
    21212121.mce-rtl .mce-listbox i.mce-caret {
    21222122    left: 6px;

  • trunk/src/wp-includes/css/jquery-ui-dialog.css

    r31569 r31573  
    129129    left: 0;
    130130}
    131 /* @noflip */
     131/* rtl:ignore */
    132132.ui-resizable-e {
    133133    cursor: e-resize;
    … …  
    137137    height: 100%;
    138138}
    139 /* @noflip */
     139/* rtl:ignore */
    140140.ui-resizable-w {
    141141    cursor: w-resize;
    … …  
    145145    height: 100%;
    146146}
    147 /* @noflip */
     147/* rtl:ignore */
    148148.ui-resizable-se {
    149149    cursor: se-resize;
    … …  
    153153    bottom: 1px;
    154154}
    155 /* @noflip */
     155/* rtl:ignore */
    156156.ui-resizable-sw {
    157157    cursor: sw-resize;
    … …  
    161161    bottom: -5px;
    162162}
    163 /* @noflip */
     163/* rtl:ignore */
    164164.ui-resizable-nw {
    165165    cursor: nw-resize;
    … …  
    169169    top: -5px;
    170170}
    171 /* @noflip */
     171/* rtl:ignore */
    172172.ui-resizable-ne {
    173173    cursor: ne-resize;

  • trunk/src/wp-includes/css/media-views.css

    r31569 r31573  
    887887}
    888888
    889 /* @noflip */
    890889.wp-core-ui .attachment .thumbnail img {
    891890    top: 0;
    … …  
    893892}
    894893
    895 /* @noflip */
    896894.wp-core-ui .attachment .thumbnail .centered {
    897895    position: absolute;

  • trunk/src/wp-includes/css/wp-pointer.css

    r28897 r31573  
    111111}
    112112
    113 /* @noflip */
     113/* rtl:ignore */
    114114.wp-pointer-left {
    115115    padding-left: 13px;
    116116}
    117 /* @noflip */
     117/* rtl:ignore */
    118118.wp-pointer-right {
    119119    margin-left: -13px;
    … …  
    169169}
    170170
    171 /* @noflip */
     171/* rtl:ignore */
    172172.wp-pointer-left .wp-pointer-arrow {
    173173    left: 0;
    … …  
    176176}
    177177
    178 /* @noflip */
     178/* rtl:ignore */
    179179.wp-pointer-left .wp-pointer-arrow-inner {
    180180    left: 1px;
    … …  
    187187}
    188188
    189 /* @noflip */
     189/* rtl:ignore */
    190190.wp-pointer-right .wp-pointer-arrow {
    191191    right: 0;
    … …  
    194194}
    195195
    196 /* @noflip */
     196/* rtl:ignore */
    197197.wp-pointer-right .wp-pointer-arrow-inner {
    198198    right: 1px;
Note: See TracChangeset for help on using the changeset viewer.