Add Automated RTL Support

- Uses the Grunt RTLCSS plugin to automatically generate the stylesheet.
- Stylesheet enqueuing is handled in the theme.

Gruntfile.js

@@ -224,6 +224,38 @@ module.exports = function( grunt ) {
 					nonull: true
 				}]
 			}
+		},
+
+		// RTLCSS
+		rtlcss: {
+			options: {
+				config: {
+					swapLeftRightInUrl: false,
+					swapLtrRtlInUrl: false,
+					autoRename: false,
+					preserveDirectives: true
+				},
+				properties : [
+					{
+						name: 'swap-fontawesome-left-right-angles',
+						expr: /content/im,
+						action: function( prop, value ) {
+							if ( value === '"\\f105"' ) { // fontawesome-angle-left
+								value = '"\\f104"';
+							}
+							return { prop: prop, value: value };
+						}
+					}
+				]
+			},
+			main: {
+				expand: true,
+				ext: '-rtl.css',
+				src: [
+					'style.css',
+					'inc/woocommerce/css/woocommerce.css'
+				]
+			}
 		}
 	});
 
@@ -238,6 +270,7 @@ module.exports = function( grunt ) {
 	grunt.loadNpmTasks( 'grunt-contrib-copy' );
 	grunt.loadNpmTasks( 'grunt-shell' );
 	grunt.loadNpmTasks( 'grunt-potomo' );
+	grunt.loadNpmTasks( 'grunt-rtlcss' );
 
 	// Register tasks
 	grunt.registerTask( 'default', [

inc/functions/setup.php

@@ -143,7 +143,11 @@ function storefront_widgets_init() {
 function storefront_scripts() {
 	global $storefront_version;
 
-	wp_enqueue_style( 'storefront-style', get_stylesheet_uri(), '', $storefront_version );
+	if ( is_rtl() ) {
+		wp_enqueue_style( 'storefront-style', get_stylesheet_directory_uri() . '/style-rtl.css', $storefront_version );
+	} else {
+		wp_enqueue_style( 'storefront-style', get_stylesheet_uri(), '', $storefront_version );
+	}
 
 	wp_enqueue_script( 'storefront-navigation', get_template_directory_uri() . '/js/navigation.min.js', array(), '20120206', true );
 

inc/woocommerce/functions.php

@@ -85,7 +85,11 @@ if ( ! function_exists( 'storefront_cart_link_fragment' ) ) {
 function storefront_woocommerce_scripts() {
 	global $storefront_version;
 
-	wp_enqueue_style( 'storefront-woocommerce-style', get_template_directory_uri() . '/inc/woocommerce/css/woocommerce.css', $storefront_version );
+	if ( is_rtl() ) {
+		wp_enqueue_style( 'storefront-woocommerce-style', get_template_directory_uri() . '/inc/woocommerce/css/woocommerce-rtl.css', $storefront_version );
+	} else {
+		wp_enqueue_style( 'storefront-woocommerce-style', get_template_directory_uri() . '/inc/woocommerce/css/woocommerce.css', $storefront_version );
+	}
 }
 
 /**

package.json

@@ -16,6 +16,7 @@
     "grunt-contrib-uglify":   "~0.9.1",
     "grunt-contrib-watch":    "~0.6.1",
     "grunt-wp-i18n":          "^0.5.2",
+    "grunt-rtlcss":           "~1.6.0",
     "grunt-sass":             "^1.0.0",
     "node-sass":              "^3.2.0",
     "susy":                   "^2.2.5",