Changeset 26107

Timestamp:

11/12/2013 09:18:45 PM (13 years ago)

Author:

nacin

Message:

Use CSSJanus via a Grunt task to generate right-to-left CSS.

RTL files are now created on build for core CSS files. These files replace the LTR file completely, rather than being in addition to the existing LTR file.

Benefits:

• For the user: less CSS is served in RTL, less HTTP requests on the frontend, and less work for the browser.
• For the core developer: Let the tools do the work.

Notes for core development:

• The file generation task is grunt rtl.
• grunt watch now handles generating RTL files in /build when a CSS file in /src is saved.
• /src is now locked to LTR. RTL testing must occur via /build. When attempting to run an RTL text direction with /src, an admin notice will display.

Expect RTL bugs. Please report them.

props yoavf.
see #24977.

Location:

trunk

Files:

• Gruntfile.js (modified) (5 diffs)
• package.json (modified) (1 diff)
• src/wp-admin/css/color-picker-rtl.css (deleted)
• src/wp-admin/css/customize-controls-rtl.css (deleted)
• src/wp-admin/css/ie-rtl.css (deleted)
• src/wp-admin/css/media-rtl.css (deleted)
• src/wp-admin/css/wp-admin-rtl.css (deleted)
• src/wp-admin/css/wp-admin.css (modified) (2 diffs)
• src/wp-includes/class.wp-styles.php (modified) (2 diffs)
• src/wp-includes/css/admin-bar-rtl.css (deleted)
• src/wp-includes/css/media-views-rtl.css (deleted)
• src/wp-includes/locale.php (modified) (1 diff)
• src/wp-includes/script-loader.php (modified) (2 diffs)

trunk/Gruntfile.js

@@ -89 +89 @@
                                         '!wp-admin/css/farbtastic.css'
                                 ]
+                        },
+                        rtl: {
+                                expand: true,
+                                cwd: BUILD_DIR,
+                                dest: BUILD_DIR,
+                                ext: '.min.css',
+                                src: [
+                                        'wp-admin/css/*-rtl.css',
+                                        'wp-includes/css/*-rtl.css'
+                                ]
+                        }
+                },
+                cssjanus: {
+                        core: {
+                                expand: true,
+                                cwd: SOURCE_DIR,
+                                dest: BUILD_DIR,
+                                ext: '-rtl.css',
+                                src: [
+                                        'wp-admin/css/*.css',
+                                        'wp-includes/css/*.css',
+                                        // Temporary exceptions while .rtl body classes are in use
+                                        '!wp-admin/css/colors-fresh.css',
+                                        '!wp-admin/css/install.css',
+                                        '!wp-includes/css/editor.css',
+                                        '!wp-includes/css/wp-pointer.css',
+                                        // Farbtastic is deprecated, uses .rtl classes.
+                                        '!wp-admin/css/farbtastic.css'
+                                ]
+                        },
+                        dynamic: {
+                                expand: true,
+                                cwd: SOURCE_DIR,
+                                dest: BUILD_DIR,
+                                ext: '-rtl.css',
+                                src: []
                         }
                 },
@@ -258 +294 @@
                                 }
                         },
+                        rtl: {
+                                files: [
+                                        SOURCE_DIR + 'wp-admin/css/*.css',
+                                        SOURCE_DIR + 'wp-includes/css/*.css'
+                                ],
+                                tasks: ['cssjanus:dynamic'],
+                                options: {
+                                        spawn: false,
+                                        interval: 2000
+                                }
+                        },
                         test: {
                                 files: ['tests/qunit/**'],
@@ -269 +316 @@
         // Copy task.
         grunt.registerTask('copy:all', ['copy:files', 'copy:version']);
-        
+
+        // RTL task.
+        grunt.registerTask('rtl', ['cssjanus:core']);
+
         // Build task.
-        grunt.registerTask('build', ['clean:all', 'copy:all', 'cssmin:core', 'uglify:core',
-                'uglify:tinymce', 'concat:tinymce', 'compress:tinymce', 'clean:tinymce']);
+        grunt.registerTask('build', ['clean:all', 'copy:all', 'rtl', 'cssmin:core', 'cssmin:rtl',
+                'uglify:core', 'uglify:tinymce', 'concat:tinymce', 'compress:tinymce', 'clean:tinymce']);
 
         // Testing tasks.
@@ -294 +344 @@
         // 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.
         grunt.event.on('watch', function( action, filepath, target ) {
-                if ( target !== 'all' ) {
+                if ( target !== 'all' && target !== 'rtl' ) {
                         return;
                 }
@@ -305 +356 @@
                 grunt.config(['clean', 'dynamic', 'src'], cleanSrc);
                 grunt.config(['copy', 'dynamic', 'src'], copySrc);
+                grunt.config(['cssjanus', 'dynamic', 'src'], copySrc);
         });
 };

trunk/package.json

@@ -20 +20 @@
     "grunt-contrib-concat": "~0.3.0",
     "grunt-contrib-jshint": "~0.7.0",
+    "grunt-cssjanus": "~0.1.0",
     "matchdep": "~0.1.2"
   }

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

@@ -3511 +3511 @@
 }
 
-.rtl #lost-connection-notice .spinner {
-        float: right;
-        margin: 0 0 0 5px;
-}
-
 #titlediv {
         position: relative;
@@ -8182 +8177 @@
 }
 
-.rtl #dashboard_right_now p.musub {
-        padding-left: 0;
-        padding-right: 16px;
-}
-
 #dashboard_right_now td.b a.musublink {
         font-size: 16px;

trunk/src/wp-includes/class.wp-styles.php

@@ -66 +66 @@
                 $title = isset($obj->extra['title']) ? "title='" . esc_attr( $obj->extra['title'] ) . "'" : '';
 
-                $end_cond = $tag = '';
-                if ( isset($obj->extra['conditional']) && $obj->extra['conditional'] ) {
-                        $tag .= "<!--[if {$obj->extra['conditional']}]>\n";
-                        $end_cond = "<![endif]-->\n";
-                }
-
-                $tag .= apply_filters( 'style_loader_tag', "<link rel='$rel' id='$handle-css' $title href='$href' type='text/css' media='$media' />\n", $handle );
+                $tag = apply_filters( 'style_loader_tag', "<link rel='$rel' id='$handle-css' $title href='$href' type='text/css' media='$media' />\n", $handle );
                 if ( 'rtl' === $this->text_direction && isset($obj->extra['rtl']) && $obj->extra['rtl'] ) {
-                        if ( is_bool( $obj->extra['rtl'] ) ) {
+                        if ( is_bool( $obj->extra['rtl'] ) || 'replace' === $obj->extra['rtl'] ) {
                                 $suffix = isset( $obj->extra['suffix'] ) ? $obj->extra['suffix'] : '';
                                 $rtl_href = str_replace( "{$suffix}.css", "-rtl{$suffix}.css", $this->_css_href( $obj->src , $ver, "$handle-rtl" ));
@@ -81 +75 @@
                         }
 
-                        $tag .= apply_filters( 'style_loader_tag', "<link rel='$rel' id='$handle-rtl-css' $title href='$rtl_href' type='text/css' media='$media' />\n", $handle );
+                        $rtl_tag = apply_filters( 'style_loader_tag', "<link rel='$rel' id='$handle-rtl-css' $title href='$rtl_href' type='text/css' media='$media' />\n", $handle );
+
+                        if ( $obj->extra['rtl'] === 'replace' ) {
+                                $tag = $rtl_tag;
+                        } else {
+                                $tag .= $rtl_tag;
+                        }
                 }
 
-                $tag .= $end_cond;
+                if ( isset($obj->extra['conditional']) && $obj->extra['conditional'] ) {
+                        $tag = "<!--[if {$obj->extra['conditional']}]>\n" . $tag . "<![endif]-->\n";
+                }
 
                 if ( $this->do_concat ) {

trunk/src/wp-includes/locale.php

@@ -184 +184 @@
                 elseif ( 'rtl' == _x( 'ltr', 'text direction' ) )
                         $this->text_direction = 'rtl';
+
+                if ( 'rtl' === $this->text_direction && strpos( $GLOBALS['wp_version'], '-src' ) ) {
+                        $this->text_direction = 'ltr';
+                        add_action( 'all_admin_notices', array( $this, 'rtl_src_admin_notice' ) );
+                }
+        }
+
+        function rtl_src_admin_notice() {
+                echo '<div class="error"><p>' . 'The <code>build</code> directory of the develop repository must be used for RTL.' . '</p></div>';
         }
 

trunk/src/wp-includes/script-loader.php

@@ -553 +553 @@
 
         $rtl_styles = array( 'wp-admin', 'ie', 'media', 'admin-bar', 'customize-controls', 'media-views', 'wp-color-picker' );
-        // Any rtl stylesheets that don't have a .min version
-        $no_suffix = array( 'farbtastic' );
 
         $styles->add( 'wp-admin', "/wp-admin/css/wp-admin$suffix.css", array( 'open-sans', 'dashicons' ) );
@@ -593 +591 @@
 
         foreach ( $rtl_styles as $rtl_style ) {
-                $styles->add_data( $rtl_style, 'rtl', true );
-                if ( $suffix && ! in_array( $rtl_style, $no_suffix ) )
-                        $styles->add_data( $rtl_style, 'suffix', $suffix );
+                $styles->add_data( $rtl_style, 'rtl', 'replace' );
         }
 }