WordPress.org
Get WordPress

Make WordPress Core

Changeset 31573


Ignore:
Timestamp:
02/27/2015 01:40:03 PM (11 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.