diff --git a/Gruntfile.js b/Gruntfile.js index a48351ec31..fd048b1cca 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -172,14 +172,29 @@ module.exports = function(grunt) { ] } }, - cssjanus: { - core: { - options: { + rtlcss: { + options: { + // rtlcss options + config: { + swapLeftRightInUrl: false, swapLtrRtlInUrl: false, - processContent: function( src ) { - return src.replace( /url\((.+?)\.css\)/g, 'url($1-rtl.css)' ); - } + autoRename: false, + preserveDirectives: true, + stringMap: [ + { + name: 'import-rtl-stylesheet', + search: [ '.css' ], + replace: [ '-rtl.css' ], + options: { + scope: 'url', + ignoreCase: false + } + } + ] }, + saveUnmodified: false + }, + core: { expand: true, cwd: SOURCE_DIR, dest: BUILD_DIR, @@ -190,11 +205,6 @@ module.exports = function(grunt) { ] }, colors: { - options: { - processContent: function( src ) { - return src.replace( /([^/]+)\.css/gi, '$1-rtl.css' ); - } - }, expand: true, cwd: BUILD_DIR, dest: BUILD_DIR, @@ -503,7 +513,7 @@ module.exports = function(grunt) { SOURCE_DIR + 'wp-admin/css/*.css', SOURCE_DIR + 'wp-includes/css/*.css' ], - tasks: ['cssjanus:dynamic'], + tasks: ['rtlcss:dynamic'], options: { spawn: false, interval: 2000 @@ -522,7 +532,7 @@ module.exports = function(grunt) { // Register tasks. // RTL task. - grunt.registerTask('rtl', ['cssjanus:core', 'cssjanus:colors']); + grunt.registerTask('rtl', ['rtlcss:core', 'rtlcss:colors']); // Color schemes task. grunt.registerTask('colors', ['sass:colors', 'autoprefixer:colors']); @@ -576,7 +586,7 @@ module.exports = function(grunt) { // // On `watch:all`, automatically updates the `copy:dynamic` and `clean:dynamic` // configurations so that only the changed files are updated. - // On `watch:rtl`, automatically updates the `cssjanus:dynamic` configuration. + // On `watch:rtl`, automatically updates the `rtlcss:dynamic` configuration. grunt.event.on('watch', function( action, filepath, target ) { if ( target !== 'all' && target !== 'rtl' ) { return; @@ -588,6 +598,6 @@ module.exports = function(grunt) { grunt.config(['clean', 'dynamic', 'src'], cleanSrc); grunt.config(['copy', 'dynamic', 'src'], copySrc); - grunt.config(['cssjanus', 'dynamic', 'src'], copySrc); + grunt.config(['rtlcss', 'dynamic', 'src'], copySrc); }); }; diff --git a/package.json b/package.json index 5668db6659..3fd05d84c0 100644 --- a/package.json +++ b/package.json @@ -22,10 +22,10 @@ "grunt-contrib-qunit": "~0.5.2", "grunt-contrib-uglify": "~0.6.0", "grunt-contrib-watch": "~0.6.1", - "grunt-cssjanus": "~0.2.4", "grunt-jsvalidate": "~0.2.2", "grunt-legacy-util": "^0.2.0", "grunt-patch-wordpress": "~0.3.0", + "grunt-rtlcss": "~1.5.1", "grunt-sass": "~0.16.0", "matchdep": "~0.3.0" } diff --git a/src/wp-admin/css/about.css b/src/wp-admin/css/about.css index 2e3d8ae9f2..8ce72b8ebd 100644 --- a/src/wp-admin/css/about.css +++ b/src/wp-admin/css/about.css @@ -263,6 +263,7 @@ opacity: 0; } +/* rtl:ignore */ .about-wrap .dfw-container .overlay-image.from-left { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); @@ -296,7 +297,7 @@ .about-wrap .feature-list svg { float: left; clear: left; - margin: 15px 15px 0 0 ; + margin: 15px 15px 0 0; height: 90px; width: 90px; background-color: #cccccc; diff --git a/src/wp-admin/css/admin-menu.css b/src/wp-admin/css/admin-menu.css index 729e432945..2076c5c450 100644 --- a/src/wp-admin/css/admin-menu.css +++ b/src/wp-admin/css/admin-menu.css @@ -592,6 +592,7 @@ ul#adminmenu > li.current > a.current:after { -moz-osx-font-smoothing: grayscale; } +/* rtl:ignore */ .folded #collapse-button div:after, .rtl #collapse-button div:after { -webkit-transform: rotate(180deg); @@ -723,6 +724,7 @@ li#wp-admin-bar-menu-toggle { background: none; } + /* rtl:ignore */ .auto-fold #collapse-button div:after { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index 300fbfa41c..51b6a7d9cf 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -390,12 +390,12 @@ ol.ol-decimal > li { margin: 0 0 0.5em; } -/* @noflip */ +/* rtl:ignore */ .ltr { direction: ltr; } -/* @noflip */ +/* rtl:ignore */ .code, code { font-family: Consolas, Monaco, monospace; @@ -2375,12 +2375,12 @@ div.action-links { background: #f3f3f3; } -/* @noflip */ +/* rtl:ignore */ #plugin-information .section { direction: ltr; } -/* @noflip */ +/* rtl:ignore */ #plugin-information .section ul, #plugin-information .section ol { list-style-type: disc; @@ -2408,7 +2408,7 @@ div.action-links { box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.3 ); } -/* @noflip */ +/* rtl:ignore */ #plugin-information #section-screenshots li p { font-style: italic; padding-left: 20px; @@ -2420,7 +2420,7 @@ div.action-links { border: 1px solid #ccc; } -/* @noflip */ +/* rtl:ignore */ #plugin-information .review { overflow: hidden; /* clearfix */ width: 100%; @@ -2432,7 +2432,7 @@ div.action-links { overflow: hidden; /* clearfix */ } -/* @noflip */ +/* rtl:ignore */ #plugin-information .review-title-section h4 { display: inline-block; float: left; @@ -2445,24 +2445,24 @@ div.action-links { padding-top: 2px; } -/* @noflip */ +/* rtl:ignore */ #plugin-information .reviewer-info .avatar { float: left; margin: 4px 6px 0 0; } -/* @noflip */ +/* rtl:ignore */ #plugin-information .reviewer-info .star-rating { float: left; } -/* @noflip */ +/* rtl:ignore */ #plugin-information .review-meta { float: left; margin-left: 0.75em; } -/* @noflip */ +/* rtl:ignore */ #plugin-information .review-body { float: left; width: 100%; @@ -2710,7 +2710,7 @@ img { outline: none; } -/* @noflip */ +/* rtl:ignore */ #template textarea, #docs-list { direction: ltr; diff --git a/src/wp-admin/css/edit.css b/src/wp-admin/css/edit.css index b1a1428cba..9c89c00886 100644 --- a/src/wp-admin/css/edit.css +++ b/src/wp-admin/css/edit.css @@ -1310,7 +1310,6 @@ table.links-table { transition-timing-function: ease-in-out; } -/* @noflip */ .focus-on #adminmenuback, .focus-on #adminmenuwrap { -webkit-transform: translateX( -100% ); @@ -1318,14 +1317,6 @@ table.links-table { transform: translateX( -100% ); } -/* @noflip */ -.rtl.focus-on #adminmenuback, -.rtl.focus-on #adminmenuwrap { - -webkit-transform: translateX( 100% ); - -ms-transform: translateX( 100% ); - transform: translateX( 100% ); -} - .focus-off #adminmenuback, .focus-off #adminmenuwrap { -webkit-transform: translateX( 0 ); diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css index 0758a02824..47de611809 100644 --- a/src/wp-admin/css/forms.css +++ b/src/wp-admin/css/forms.css @@ -61,7 +61,7 @@ textarea:focus { box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 ); } -/* @noflip */ +/* rtl:ignore */ input[type="email"], input[type="url"] { direction: ltr; diff --git a/src/wp-admin/css/install.css b/src/wp-admin/css/install.css index 57be437295..dbeb3e630b 100644 --- a/src/wp-admin/css/install.css +++ b/src/wp-admin/css/install.css @@ -237,7 +237,7 @@ submit { background-color: #ffebe8; } -/* @noflip */ +/* rtl:ignore */ #dbname, #uname, #pwd, diff --git a/src/wp-admin/css/themes.css b/src/wp-admin/css/themes.css index a1a8bb257f..1b9f276536 100644 --- a/src/wp-admin/css/themes.css +++ b/src/wp-admin/css/themes.css @@ -1524,6 +1524,7 @@ body.full-overlay-active { text-decoration: none !important; } +/* rtl:ignore */ .wp-full-overlay.collapsed .collapse-sidebar-arrow:before, .rtl .wp-full-overlay .collapse-sidebar-arrow:before { -webkit-transform: rotate(180deg); diff --git a/src/wp-includes/css/editor.css b/src/wp-includes/css/editor.css index d05a3fca78..0ebac83752 100644 --- a/src/wp-includes/css/editor.css +++ b/src/wp-includes/css/editor.css @@ -2112,12 +2112,12 @@ i.mce-i-hr:before { font-family: Tahoma, sans-serif; } -/* @noflip */ +/* rtl:ignore */ .mce-rtl .mce-flow-layout .mce-flow-layout-item > div { direction: rtl; } -/* @noflip */ +/* rtl:ignore */ .mce-rtl .mce-listbox i.mce-caret { left: 6px; } diff --git a/src/wp-includes/css/jquery-ui-dialog.css b/src/wp-includes/css/jquery-ui-dialog.css index 9383ad95c2..65de83a1cd 100644 --- a/src/wp-includes/css/jquery-ui-dialog.css +++ b/src/wp-includes/css/jquery-ui-dialog.css @@ -128,7 +128,7 @@ bottom: -5px; left: 0; } -/* @noflip */ +/* rtl:ignore */ .ui-resizable-e { cursor: e-resize; width: 7px; @@ -136,7 +136,7 @@ top: 0; height: 100%; } -/* @noflip */ +/* rtl:ignore */ .ui-resizable-w { cursor: w-resize; width: 7px; @@ -144,7 +144,7 @@ top: 0; height: 100%; } -/* @noflip */ +/* rtl:ignore */ .ui-resizable-se { cursor: se-resize; width: 12px; @@ -152,7 +152,7 @@ right: 1px; bottom: 1px; } -/* @noflip */ +/* rtl:ignore */ .ui-resizable-sw { cursor: sw-resize; width: 9px; @@ -160,7 +160,7 @@ left: -5px; bottom: -5px; } -/* @noflip */ +/* rtl:ignore */ .ui-resizable-nw { cursor: nw-resize; width: 9px; @@ -168,7 +168,7 @@ left: -5px; top: -5px; } -/* @noflip */ +/* rtl:ignore */ .ui-resizable-ne { cursor: ne-resize; width: 9px; diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css index d9ea92f775..2157a3c9ef 100644 --- a/src/wp-includes/css/media-views.css +++ b/src/wp-includes/css/media-views.css @@ -886,13 +886,11 @@ overflow: hidden; } -/* @noflip */ .wp-core-ui .attachment .thumbnail img { top: 0; left: 0; } -/* @noflip */ .wp-core-ui .attachment .thumbnail .centered { position: absolute; top: 0; diff --git a/src/wp-includes/css/wp-pointer.css b/src/wp-includes/css/wp-pointer.css index 1d69823f11..5c457b40dc 100644 --- a/src/wp-includes/css/wp-pointer.css +++ b/src/wp-includes/css/wp-pointer.css @@ -110,11 +110,11 @@ padding-bottom: 13px; } -/* @noflip */ +/* rtl:ignore */ .wp-pointer-left { padding-left: 13px; } -/* @noflip */ +/* rtl:ignore */ .wp-pointer-right { margin-left: -13px; padding-right: 13px; @@ -168,14 +168,14 @@ content: ' '; } -/* @noflip */ +/* rtl:ignore */ .wp-pointer-left .wp-pointer-arrow { left: 0; border-width: 13px 13px 13px 0; border-right-color: #ccc; } -/* @noflip */ +/* rtl:ignore */ .wp-pointer-left .wp-pointer-arrow-inner { left: 1px; margin-left: -13px; @@ -186,14 +186,14 @@ content: ' '; } -/* @noflip */ +/* rtl:ignore */ .wp-pointer-right .wp-pointer-arrow { right: 0; border-width: 13px 0 13px 13px; border-left-color: #ccc; } -/* @noflip */ +/* rtl:ignore */ .wp-pointer-right .wp-pointer-arrow-inner { right: 1px; margin-right: -13px;