Generate RTL CSS assets (#8264)

assets/css/admin.rtl.css

@@ -0,0 +1,183 @@
+/* TODO: When merging into WooCommerce Core, integrate these icons into the WooCommerce.ttf icon font */
+@font-face {
+	font-family: 'WCPay';
+	src: url( '../fonts/WCPay.eot' );
+	src: url( '../fonts/WCPay.eot?#iefix' ) format( 'embedded-opentype' ),
+		url( '../fonts/WCPay.woff' ) format( 'woff' ),
+		url( '../fonts/WCPay.ttf' ) format( 'truetype' ),
+		url( '../fonts/WCPay.svg#WCPay' ) format( 'svg' );
+	font-weight: normal;
+	font-style: normal;
+}
+/* stylelint-disable selector-id-pattern */
+#adminmenu
+	#toplevel_page_wc-admin-path--payments-overview
+	.menu-icon-generic
+	div.wp-menu-image::before,
+#adminmenu
+	#toplevel_page_wc-admin-path--payments-connect
+	.menu-icon-generic
+	div.wp-menu-image::before,
+#adminmenu
+	#toplevel_page_wc-admin-path--payments-deposits
+	.menu-icon-generic
+	div.wp-menu-image::before {
+	font-family: 'WCPay' !important;
+	content: '\e900';
+	width: 24px;
+	font-size: 24px;
+	margin-top: -2px;
+}
+/* stylelint-enable selector-id-pattern */
+
+.payment-method__brand {
+	display: inline-block;
+	height: 20px;
+	height: 1.25rem;
+	width: 32px;
+	width: 2rem;
+	background-size: contain;
+	background-repeat: no-repeat;
+	border-radius: 2px;
+	outline: 1px solid rgba( 0, 0, 0, 0.25 );
+}
+
+.payment-method__brand--amex {
+	background-image: url( '../images/cards/amex.svg' );
+}
+
+.payment-method__brand--diners {
+	background-image: url( '../images/cards/diners.svg' );
+}
+
+.payment-method__brand--discover {
+	background-image: url( '../images/cards/discover.svg' );
+}
+
+.payment-method__brand--jcb {
+	background-image: url( '../images/cards/jcb.svg' );
+}
+
+.payment-method__brand--mastercard {
+	background-image: url( '../images/cards/mastercard.svg' );
+}
+
+.payment-method__brand--unionpay {
+	background-image: url( '../images/cards/unionpay.svg' );
+}
+
+.payment-method__brand--visa {
+	background-image: url( '../images/cards/visa.svg' );
+}
+
+.payment-method__brand--unknown {
+	background-image: url( '../images/cards/unknown.svg' );
+}
+
+.payment-method__brand--giropay {
+	background-image: url( '../images/payment-methods/giropay.svg' );
+}
+
+.payment-method__brand--eps {
+	background-image: url( '../images/payment-methods/eps.svg' );
+}
+
+.payment-method__brand--p24 {
+	background-image: url( '../images/payment-methods/p24.svg' );
+}
+
+.payment-method__brand--sepa_debit {
+	background-image: url( '../images/cards/sepa.svg' );
+}
+
+.payment-method__brand--sofort {
+	background-image: url( '../images/payment-methods/sofort.svg' );
+}
+
+.payment-method__brand--ideal {
+	background-image: url( '../images/payment-methods/ideal.svg' );
+}
+
+.payment-method__brand--google-pay {
+	background-image: url( '../images/cards/google-pay.svg' );
+}
+
+.payment-method__brand--apple-pay {
+	background-image: url( '../images/cards/apple-pay.svg' );
+}
+
+.payment-method__brand--bancontact {
+	background-image: url( '../images/payment-methods/bancontact.svg' );
+}
+
+.payment-method__brand--sepa_debit {
+	background-image: url( '../images/payment-methods/sepa-debit.svg' );
+}
+
+.payment-method__brand--au_becs_debit {
+	background-image: url( '../images/payment-methods/bank-debit.svg' );
+}
+
+.payment-method__brand--link {
+	background-image: url( '../images/payment-methods/link.svg' );
+}
+
+.payment-method__brand--afterpay_clearpay {
+	background-image: url( '../images/payment-methods/afterpay-icon.svg' );
+}
+
+.payment-method__brand--affirm {
+	background-image: url( '../images/payment-methods/affirm-icon.svg' );
+}
+
+.payment-method__brand--klarna {
+	background-image: url( '../images/payment-methods/klarna.svg' );
+}
+
+.wc_gateways tr[data-gateway_id='woocommerce_payments'] .payment-method__icon {
+	border: 1px solid #ddd;
+	border-radius: 2px;
+}
+
+.woocommerce-payments-page .woocommerce-inbox-message .components-dropdown {
+	position: absolute;
+}
+
+.wc-payment-gateway-method-name-woopay-wrapper {
+	display: flex;
+	justify-content: end;
+	align-items: center;
+}
+
+.wc-payment-gateway-method-name-woopay-wrapper img {
+	margin: 0 5px;
+	padding-top: 2px;
+}
+
+.wcpay-fraud-risk-meta-allow,
+.wcpay-fraud-risk-meta-review,
+.wcpay-fraud-risk-meta-blocked {
+	font-weight: 600;
+	font-size: 14px;
+}
+
+.wcpay-fraud-risk-meta-allow img {
+	margin: 0 0 0 5px;
+}
+
+.wcpay-fraud-risk-meta-review img,
+.wcpay-fraud-risk-meta-blocked img {
+	margin: 0 0 -3px 3px;
+}
+
+.wcpay-fraud-risk-meta-allow {
+	color: #008a20;
+}
+
+.wcpay-fraud-risk-meta-review {
+	color: #b26200;
+}
+
+.wcpay-fraud-risk-meta-blocked {
+	color: #b32d2e;
+}

assets/css/success.rtl.css

@@ -0,0 +1,11 @@
+.wc-payment-gateway-method-name-woopay-wrapper {
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	line-height: 1;
+}
+
+.wc-payment-gateway-method-name-woopay-wrapper img {
+	margin-left: 0.5rem;
+	padding-top: 4px;
+}

changelog/dev-6943-rtl-css-assets

@@ -0,0 +1,5 @@
+Significance: patch
+Type: dev
+Comment: Generate missing RTL CSS assets files
+
+

includes/admin/class-wc-payments-admin.php

@@ -320,14 +320,12 @@ public function add_payments_menu_for_treatment() {
 			]
 		);
 
-		// RTL=false for these files as they aren't currently transpiled by webpack.
 		WC_Payments_Utils::enqueue_style(
 			'wcpay-admin-css',
 			plugins_url( 'assets/css/admin.css', WCPAY_PLUGIN_FILE ),
 			[],
 			WC_Payments::get_file_version( 'assets/css/admin.css' ),
 			'all',
-			false
 		);
 
 		$this->add_menu_notification_badge();
@@ -538,14 +536,12 @@ public function add_payments_menu() {
 			);
 		}
 
-		// RTL=false for these files as they aren't currently transpiled by webpack.
 		WC_Payments_Utils::enqueue_style(
 			'wcpay-admin-css',
 			plugins_url( 'assets/css/admin.css', WCPAY_PLUGIN_FILE ),
 			[],
 			WC_Payments::get_file_version( 'assets/css/admin.css' ),
 			'all',
-			false
 		);
 
 		$this->add_menu_notification_badge();

includes/class-wc-payments-order-success-page.php

@@ -149,14 +149,12 @@ public function enqueue_scripts() {
 			return;
 		}
 
-		// RTL=false for these files as they aren't currently transpiled by webpack.
 		WC_Payments_Utils::enqueue_style(
 			'wcpay-success-css',
 			plugins_url( 'assets/css/success.css', WCPAY_PLUGIN_FILE ),
 			[],
 			WC_Payments::get_file_version( 'assets/css/success.css' ),
 			'all',
-			false
 		);
 	}
 }

package.json

@@ -21,9 +21,10 @@
     "build:client": "NODE_ENV=production webpack",
     "build:deps": "rm -rf vendor && composer install --no-dev --optimize-autoloader",
     "build:release": "node tasks/release.js && mv release/$npm_package_name.zip .",
-    "postbuild:client": "npm run i18n:pot && npm run i18n:build",
+    "postbuild:client": "npm run i18n:pot && npm run i18n:build && npm run assets:rtl",
     "i18n:pot": "wpi18n makepot --domain-path languages --pot-file woocommerce-payments.pot --type plugin --main-file woocommerce-payments.php --exclude bin,dist,docker,node_modules,release,tasks,tests,vendor",
     "i18n:build": "php bin/combine-pot-files.php languages/woocommerce-payments-client.pot languages/woocommerce-payments.pot",
+    "assets:rtl": "rtlcss assets/css/admin.css && rtlcss assets/css/success.css",
     "test": "npm run test:js && npm run test:php",
     "test:js": "wp-scripts test-unit-js --config tests/js/jest.config.js",
     "test:watch": "npm run test:js -- --watch",