Don't change dir pseudo-selector target

CSSJanus is taking :dir(ltr) as an URL, this fixes it by first turning
them into two temporarily tokens, then proceeding with URL change
logic, then putting back the original values, a similar pattern done
to swap ltr and rtl in the same place.

Bug: T371466
Change-Id: Ifb38c598c3147689d084ec2535849a8224b794a6

Author: ebraminio

src/cssjanus.js

@@ -96,6 +96,8 @@ function CSSJanus() {
 	var
 		// Tokens
 		temporaryToken = '`TMP`',
+		temporaryLtrToken = '`TMPLTR`',
+		temporaryRtlToken = '`TMPRTL`',
 		noFlipSingleToken = '`NOFLIP_SINGLE`',
 		noFlipClassToken = '`NOFLIP_CLASS`',
 		commentToken = '`COMMENT`',
@@ -139,6 +141,8 @@ function CSSJanus() {
 		suffixPattern = '(\\s*(?:!important\\s*)?[;}])',
 		// Regular expressions
 		temporaryTokenRegExp = /`TMP`/g,
+		temporaryLtrTokenRegExp = /`TMPLTR`/g,
+		temporaryRtlTokenRegExp = /`TMPRTL`/g,
 		commentRegExp = new RegExp( commentPattern, 'gi' ),
 		noFlipSingleRegExp = new RegExp( '(' + noFlipPattern + lookAheadNotOpenBracePattern + '[^;}]+;?)', 'gi' ),
 		noFlipClassRegExp = new RegExp( '(' + noFlipPattern + charsWithinSelectorPattern + '})', 'gi' ),
@@ -148,6 +152,8 @@ function CSSJanus() {
 		rightRegExp = new RegExp( nonLetterPattern + '(right)' + lookAheadNotLetterPattern + lookAheadNotClosingParenPattern + lookAheadNotOpenBracePattern, 'gi' ),
 		leftInUrlRegExp = new RegExp( nonLetterPattern + '(left)' + lookAheadForClosingParenPattern, 'gi' ),
 		rightInUrlRegExp = new RegExp( nonLetterPattern + '(right)' + lookAheadForClosingParenPattern, 'gi' ),
+		ltrDirSelector = /(:dir\( *)ltr( *\))/g,
+		rtlDirSelector = /(:dir\( *)rtl( *\))/g,
 		ltrInUrlRegExp = new RegExp( nonLetterPattern + '(ltr)' + lookAheadForClosingParenPattern, 'gi' ),
 		rtlInUrlRegExp = new RegExp( nonLetterPattern + '(rtl)' + lookAheadForClosingParenPattern, 'gi' ),
 		cursorEastRegExp = new RegExp( nonLetterPattern + '([ns]?)e-resize', 'gi' ),
@@ -348,9 +354,13 @@ function CSSJanus() {
 			if ( options.transformDirInUrl ) {
 				// Replace 'ltr' with 'rtl' and vice versa in background URLs
 				css = css
+					.replace( ltrDirSelector, '$1' + temporaryLtrToken + '$2' )
+					.replace( rtlDirSelector, '$1' + temporaryRtlToken + '$2' )
 					.replace( ltrInUrlRegExp, '$1' + temporaryToken )
 					.replace( rtlInUrlRegExp, '$1ltr' )
-					.replace( temporaryTokenRegExp, 'rtl' );
+					.replace( temporaryTokenRegExp, 'rtl' )
+					.replace( temporaryLtrTokenRegExp, 'ltr' )
+					.replace( temporaryRtlTokenRegExp, 'rtl' );
 			}
 			if ( options.transformEdgeInUrl ) {
 				// Replace 'left' with 'right' and vice versa in background URLs

test/data.json

@@ -904,6 +904,10 @@
 		]
 	},
 	"do not touch CSS Logical": {
+		"options": {
+			"transformDirInUrl": true,
+			"transformEdgeInUrl": true
+		},
 		"cases": [
 			[
 				"ul { margin-top: 0.3em; margin-right: 0; margin-bottom: 0; margin-left: 1.6em; margin-inline-start: 1.6em; margin-inline-end: 0; padding: 0; }",
@@ -925,6 +929,10 @@
 		]
 	},
 	"do not touch dir attribute selector and dir pseudo-class selector": {
+		"options": {
+			"transformDirInUrl": true,
+			"transformEdgeInUrl": true
+		},
 		"cases": [
 			[
 				"div[dir=rtl] { padding: 1em } html[ dir='ltr' ] { padding: 1em } div[dir=\"rtl\"] { padding: 1em }"