Add same level option

src/index.js

@@ -9,25 +9,23 @@ function addSelectors(container, modifierFunction) {
 	return rules;
 }
 
-function generator({ addVariant, e }) {
-	addVariant('direction', ({ container, separator }) => {
-		const result = container.clone({ nodes: [] });
+module.exports = function({ sameLevel = true } = {}) {
+	return function({ addVariant, e }) {
+		addVariant('direction', ({ container, separator }) => {
+			const result = container.clone({ nodes: [] });
 
-		['ltr', 'rtl'].forEach(dir => {
-			result.nodes = result.nodes.concat(
-				addSelectors(container, className => {
-					return [
-						`[dir='${dir}'] .${dir}${e(separator)}${className}`,
-						`[dir='${dir}'].${dir}${e(separator)}${className}`,
-					];
-				})
-			);
-		});
+			['ltr', 'rtl'].forEach(dir => {
+				result.nodes = result.nodes.concat(
+					addSelectors(container, className => {
+						return [
+							`[dir='${dir}'] .${dir}${e(separator)}${className}`,
+							... sameLevel ? [`[dir='${dir}'].${dir}${e(separator)}${className}`] : [],
+						];
+					})
+				);
+			});
 
-		return result;
-	});
-}
-
-module.exports = function() {
-	return generator;
+			return result;
+		});
+	}
 };

tests/variantGenerator.test.js

@@ -1,6 +1,7 @@
 const postcss = require('postcss');
 const tailwindcss = require('tailwindcss');
-const config = require('./config');
+const defaultConfig = require('tailwindcss/defaultConfig');
+const plugin = require('../src/index');
 
 test('it generates direction variants', () => {
 	const input = `
@@ -40,10 +41,58 @@ test('it generates direction variants', () => {
 		}
 	`;
 
-	return postcss([tailwindcss(config)])
+	return postcss([tailwindcss({ ...defaultConfig, plugins: [plugin()] })])
 		.process(input, { from: undefined })
 		.then(result => {
 			expect(result.css).toMatchCss(output);
 			expect(result.warnings().length).toBe(0);
 		});
 });
+
+test('it generates direction variants without same level', () => {
+	const input = `
+		@variants direction {
+			.banana { color: yellow; }
+			.tomato { color: red; }
+		}
+	`;
+
+	const output = `
+		.banana {
+			color: yellow;
+		}
+
+		.tomato {
+			color: red;
+		}
+
+		[dir='ltr'] .ltr\\:banana {
+			color: yellow;
+		}
+
+		[dir='ltr'] .ltr\\:tomato {
+			color: red;
+		}
+
+		[dir='rtl'] .rtl\\:banana {
+			color: yellow;
+		}
+
+		[dir='rtl'] .rtl\\:tomato {
+			color: red;
+		}
+	`;
+
+	return postcss([tailwindcss({
+		...defaultConfig,
+		plugins: [
+			plugin({
+				sameLevel: false
+			})
+		]
+	})]).process(input, { from: undefined })
+		.then(result => {
+			expect(result.css).toMatchCss(output);
+			expect(result.warnings().length).toBe(0);
+		});
+});