Skip to content

Commit a347e6c

Browse files
evilaliv3evilaliv3
committed
Fix issue #64 
1 parent 6cb1a8c commit a347e6c

File tree

3 files changed

+39
-74
lines changed

3 files changed

+39
-74
lines changed

‎src/prefixes-config.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,13 @@ module.exports = ({prefix}) => ({
33
prefixes: {
44
ltr: `[${prefix}=ltr]`,
55
rtl: `[${prefix}=rtl]`,
6-
dir: `[${prefix}]`,
76
},
87
regex: new RegExp(`\\[${prefix}(=(\\w+|"\\w+"))?\\]`),
98
},
109
class: {
1110
prefixes: {
1211
ltr: `.${prefix}-ltr`,
1312
rtl: `.${prefix}-rtl`,
14-
dir: `.${prefix}`,
1513
},
1614
regex: new RegExp(`\\.${prefix}(-\\w+)?`),
1715
},

‎src/selectors.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,11 @@ const isRootSelector = (selector = '') => !!selector.match(/:root/);
88

99
const addDirToSelectors = (selectors = '', dir, options = {}) => {
1010
const {addPrefixToSelector, prefixType} = options;
11+
12+
if (options.prefix === 'dir' && (options.onlyDirection !== 'rtl' && ((options.fromRTL && dir === 'rtl') || (!options.fromRTL && dir === 'ltr')))) {
13+
return selectors;
14+
}
15+
1116
// we swap direction prefixes if we are converting rtl styles to ltr
1217
if (options.fromRTL) {
1318
switch (dir) {
@@ -20,7 +25,9 @@ const addDirToSelectors = (selectors = '', dir, options = {}) => {
2025
default:
2126
}
2227
}
28+
2329
const prefix = generatePrefixes(options)[prefixType].prefixes[dir];
30+
2431
if (!prefix) return selectors;
2532

2633
return selectors

‎src/test.js‎

Lines changed: 32 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -16,72 +16,38 @@ const run = (t, input, output, opts) => postcss([
1616
t.is(result.warnings().length, 0);
1717
});
1818

19-
test('Should NOT add [dir] prefix to symmetric rules', t => run(t,
19+
test('Should NOT vary symmetric rules', t => run(t,
2020
'a { font-size: 1em }',
2121
'a { font-size: 1em }'));
2222

23-
test('Should ONLY create LTR & RTL rules to asymmetric rules', t => run(t,
23+
test('Should ONLY split LTR & RTL rules in case of presence of asymmetric rules', t => run(t,
2424
'a { font-size: 1em; text-align: left }',
25-
'a { font-size: 1em }'
26-
+ '[dir=ltr] a { text-align: left }'
27-
+ '[dir=rtl] a { text-align: right }'));
28-
29-
test('Should add [dir] prefix to symmetric rules with direction related declarations', t => run(t,
30-
'a { text-align: center }',
31-
'[dir] a { text-align: center }'));
32-
33-
test('Should add [dir] prefix to symmetric rules with direction related declarations (2)', t => run(t,
34-
'a { font-size: 1em; text-align: center }',
35-
'a { font-size: 1em }'
36-
+ '[dir] a { text-align: center }'));
37-
38-
test('Should add [dir] prefix to symmetric rules with direction related declarations (3)', t => run(t,
39-
'a { text-align: left }'
40-
+ 'a { text-align: center }',
41-
'[dir=ltr] a { text-align: left }'
42-
+ '[dir=rtl] a { text-align: right }'
43-
+ '[dir] a { text-align: center }'));
44-
45-
test('Should add [dir] prefix to symmetric rules with direction related declarations (4)', t => run(t,
46-
'a { margin: 0 10px 0 0 }'
47-
+ 'a { margin-top: 20px }',
48-
'[dir=ltr] a { margin: 0 10px 0 0 }'
49-
+ '[dir=rtl] a { margin: 0 0 0 10px }'
50-
+ '[dir] a { margin-top: 20px }'));
51-
52-
test('Creates both LTR & RTL rules for asymmetric declarations', t => run(t,
53-
'a { text-align: left }',
54-
'[dir=ltr] a { text-align: left }'
55-
+ '[dir=rtl] a { text-align: right }'));
56-
57-
test('Removes original rule without symmetric declarations', t => run(t,
58-
'a { text-align: left }',
59-
'[dir=ltr] a { text-align: left }'
25+
'a { font-size: 1em; text-align: left }'
6026
+ '[dir=rtl] a { text-align: right }'));
6127

6228
test('Adds prefix to the html element', t => run(t,
6329
'html { text-align: left }',
64-
'html[dir=ltr] { text-align: left }'
30+
'html { text-align: left }'
6531
+ 'html[dir=rtl] { text-align: right }'));
6632

6733
test('Adds prefix to the html element with class', t => run(t,
6834
'html.foo { text-align: left }',
69-
'html[dir=ltr].foo { text-align: left }'
35+
'html.foo { text-align: left }'
7036
+ 'html[dir=rtl].foo { text-align: right }'));
7137

7238
test('Adds prefix to the :root element', t => run(t,
7339
':root { text-align: left }',
74-
'[dir=ltr]:root { text-align: left }'
40+
':root { text-align: left }'
7541
+ '[dir=rtl]:root { text-align: right }'));
7642

7743
test('Adds prefix to the :root element with class', t => run(t,
7844
':root.foo { text-align: left }',
79-
'[dir=ltr]:root.foo { text-align: left }'
45+
':root.foo { text-align: left }'
8046
+ '[dir=rtl]:root.foo { text-align: right }'));
8147

8248
test('Use custom `addPrefixToSelector` function', t => run(t,
8349
'a { text-align: left }',
84-
'[dir=ltr] > a { text-align: left }'
50+
'a { text-align: left }'
8551
+ '[dir=rtl] > a { text-align: right }',
8652
{
8753
addPrefixToSelector(selector, prefix) {
@@ -91,13 +57,13 @@ test('Use custom `addPrefixToSelector` function', t => run(t,
9157

9258
test('Should correctly process values containing commas', t => run(t,
9359
'div { background: url(\'http://placecage.com/400/400\') 0 0 }',
94-
'[dir=ltr] div { background: url(\'http://placecage.com/400/400\') 0 0 }'
60+
'div { background: url(\'http://placecage.com/400/400\') 0 0 }'
9561
+ '[dir=rtl] div { background: url(\'http://placecage.com/400/400\') 100% 0 }'));
9662

9763
test('Should correctly process values containing !important', t => run(t,
9864
'.test { margin-left: 0 !important; padding-left: 0 !important }',
9965

100-
'[dir=ltr] .test { margin-left: 0 !important; padding-left: 0 !important }'
66+
'.test { margin-left: 0 !important; padding-left: 0 !important }'
10167
+ '[dir=rtl] .test { margin-right: 0 !important; padding-right: 0 !important }'));
10268

10369
test('Shouldn not create unnecessary duplications with !important', t => run(t,
@@ -108,8 +74,7 @@ test('Shouldn not create unnecessary duplications with !important', t => run(t,
10874
test('Should correctly process values containing _display', t => run(t,
10975
'.test { float: left; _display: inline }',
11076

111-
'.test { _display: inline }'
112-
+ '[dir=ltr] .test { float: left }'
77+
'.test { _display: inline; float: left }'
11378
+ '[dir=rtl] .test { float: right }'));
11479

11580
test('Should ignore declarations prefixed with /* rtl:ignore */', t => run(t,
@@ -121,15 +86,15 @@ test('/* rtl:ignore */: Should leave other selectors alone', t => run(t,
12186
+ '.rtled { margin-left:0; padding-left:0 }',
12287

12388
'.test { margin-left:0 } '
124-
+ '[dir=ltr] .rtled { margin-left:0; padding-left:0 } '
89+
+ '.rtled { margin-left:0; padding-left:0 } '
12590
+ '[dir=rtl] .rtled { margin-right:0; padding-right:0 }'));
12691

12792
test('/* rtl:ignore */: should understand overrides', t => run(t,
12893
'.x { left: 0 } '
12994
+ '/* rtl:ignore */'
13095
+ '.x { direction: ltr }',
13196

132-
'[dir=ltr] .x { left: 0 }'
97+
'.x { left: 0 }'
13398
+ '[dir=rtl] .x { right: 0 }'
13499
+ '.x { direction: ltr }'));
135100

@@ -148,7 +113,7 @@ test('/* rtl:end:ignore */ stops ignore mode', t => run(t,
148113
+ '.bar { direction: ltr }',
149114

150115
'.foo { padding-left: 0 }'
151-
+ '[dir=ltr] .bar { direction: ltr }'
116+
+ '.bar { direction: ltr }'
152117
+ '[dir=rtl] .bar { direction: rtl }'));
153118

154119
test('/* rtl:ignore */ can be used inside /* rtl:begin:ignore */ and /* rtl:end:ignore */', t => run(t,
@@ -165,12 +130,11 @@ test('/* rtl:ignore */ can be used inside /* rtl:begin:ignore */ and /* rtl:end:
165130

166131
test('that it ignores normal comments ', t => run(t,
167132
'/* some comment */ .foo { padding-left: 0 }',
168-
'/* some comment */ [dir=ltr] .foo { padding-left: 0 } [dir=rtl] .foo { padding-right: 0 }'));
133+
'/* some comment */ .foo { padding-left: 0 } [dir=rtl] .foo { padding-right: 0 }'));
169134

170135
test('Value based ignore comments are honored', t => run(t,
171136
'.foo { margin-left: 12px; padding-left: 12px /* rtl:ignore */; }',
172-
'.foo { padding-left: 12px /* rtl:ignore */; }'
173-
+ '[dir=ltr] .foo { margin-left: 12px; }'
137+
'.foo { padding-left: 12px /* rtl:ignore */; margin-left: 12px; }'
174138
+ '[dir=rtl] .foo { margin-right: 12px; }'));
175139

176140
test('/*! rtl:ignore */ should consider as a valid directive', t => run(t,
@@ -184,7 +148,7 @@ test('/*! rtl:begin:ignore */ and /*! rtl:end:ignore */ should consider as a val
184148
+ '.bar { direction: ltr }',
185149

186150
'.foo { padding-left: 0 }'
187-
+ '[dir=ltr] .bar { direction: ltr }'
151+
+ '.bar { direction: ltr }'
188152
+ '[dir=rtl] .bar { direction: rtl }'));
189153

190154
test('Should add direction to flippable keyframes-animations', t => run(t,
@@ -197,7 +161,7 @@ test('Should handle multiple keyframes-animations', t => run(t,
197161
+ '@keyframes load6 { 100% { transform: rotate(1deg) } }'
198162
+ '@keyframes spinner { 100% { transform: rotate(-1deg) } }',
199163

200-
'[dir=ltr] .loader {animation: load6-ltr 1.7s infinite ease, spinner-ltr 1.7s infinite ease;}'
164+
'.loader {animation: load6-ltr 1.7s infinite ease, spinner-ltr 1.7s infinite ease;}'
201165
+ '[dir=rtl] .loader {animation: load6-rtl 1.7s infinite ease, spinner-rtl 1.7s infinite ease;}'
202166
+ '@keyframes load6-ltr { 100% { transform: rotate(1deg) } }'
203167
+ '@keyframes load6-rtl { 100% { transform: rotate(-1deg) } }'
@@ -216,15 +180,14 @@ test('/* rtl:end:ignore */ stops ignore mode for keyframes', t => run(t,
216180
'/* rtl:begin:ignore */ @keyframes bar { 100% { transform: rotate(360deg); } } /* rtl:end:ignore */'
217181
+ '.foo { left: 5px }',
218182
'@keyframes bar { 100% { transform: rotate(360deg); } }'
219-
+ '[dir=ltr] .foo { left: 5px }'
183+
+ '.foo { left: 5px }'
220184
+ '[dir=rtl] .foo { right: 5px }'));
221185

222186
test('Should create only LTR version', t => run(t,
223187
'a { font-size: 1em; text-align: left }'
224188
+ '@keyframes bar { 100% { transform: rotate(360deg); } }',
225189

226-
'a { font-size: 1em }'
227-
+ '[dir=ltr] a { text-align: left }'
190+
'a { font-size: 1em; text-align: left }'
228191
+ '@keyframes bar-ltr { 100% { transform: rotate(360deg); } }',
229192
{onlyDirection: 'ltr'}));
230193

@@ -239,33 +202,32 @@ test('Should create only RTL version', t => run(t,
239202

240203
test('Value replacement directives are honored', t => run(t,
241204
'.foo { font-weight: bold; flex-direction: row/* rtl:row-reverse */; }',
242-
'.foo { font-weight: bold; }[dir=ltr] .foo { flex-direction: row/* rtl:row-reverse */; }[dir=rtl] .foo { flex-direction: row-reverse; }'));
205+
'.foo { font-weight: bold; flex-direction: row/* rtl:row-reverse */; }[dir=rtl] .foo { flex-direction: row-reverse; }'));
243206

244207
test('Value prepend directives are honored', t => run(t,
245208
'.foo { font-weight: bold; font-family: "Droid Sans", "Helvetica Neue", Arial, sans-serif/*rtl:prepend:"Droid Arabic Kufi",*/; }',
246-
'.foo { font-weight: bold; }[dir=ltr] .foo { font-family: "Droid Sans", "Helvetica Neue", Arial, sans-serif/*rtl:prepend:"Droid Arabic Kufi",*/; }[dir=rtl] .foo { font-family: "Droid Arabic Kufi", "Droid Sans", "Helvetica Neue", Arial, sans-serif; }'));
209+
'.foo { font-weight: bold; font-family: "Droid Sans", "Helvetica Neue", Arial, sans-serif/*rtl:prepend:"Droid Arabic Kufi",*/; }[dir=rtl] .foo { font-family: "Droid Arabic Kufi", "Droid Sans", "Helvetica Neue", Arial, sans-serif; }'));
247210

248211
test('Value append directives are honored', t => run(t,
249212
'.foo { font-weight: bold; transform: rotate(45deg)/* rtl:append: scaleX(-1) */; }',
250-
'.foo { font-weight: bold; }[dir=ltr] .foo { transform: rotate(45deg)/* rtl:append: scaleX(-1) */; }[dir=rtl] .foo { transform: rotate(45deg) scaleX(-1); }'));
213+
'.foo { font-weight: bold; transform: rotate(45deg)/* rtl:append: scaleX(-1) */; }[dir=rtl] .foo { transform: rotate(45deg) scaleX(-1); }'));
251214

252215
test('Value based ignore important comments are honored', t => run(t,
253216
'.foo { margin-left: 12px; padding-left: 12px /*! rtl:ignore */; }',
254-
'.foo { padding-left: 12px /*! rtl:ignore */; }'
255-
+ '[dir=ltr] .foo { margin-left: 12px; }'
217+
'.foo { padding-left: 12px /*! rtl:ignore */; margin-left: 12px; }'
256218
+ '[dir=rtl] .foo { margin-right: 12px; }'));
257219

258220
test('Value replacement directives with important comments are honored', t => run(t,
259221
'.foo { font-weight: bold; flex-direction: row/*! rtl:row-reverse */; }',
260-
'.foo { font-weight: bold; }[dir=ltr] .foo { flex-direction: row/*! rtl:row-reverse */; }[dir=rtl] .foo { flex-direction: row-reverse; }'));
222+
'.foo { font-weight: bold; flex-direction: row/*! rtl:row-reverse */; }[dir=rtl] .foo { flex-direction: row-reverse; }'));
261223

262224
test('Value prepend directives with important comments are honored', t => run(t,
263225
'.foo { font-weight: bold; font-family: "Droid Sans", "Helvetica Neue", Arial, sans-serif/*!rtl:prepend:"Droid Arabic Kufi",*/; }',
264-
'.foo { font-weight: bold; }[dir=ltr] .foo { font-family: "Droid Sans", "Helvetica Neue", Arial, sans-serif/*!rtl:prepend:"Droid Arabic Kufi",*/; }[dir=rtl] .foo { font-family: "Droid Arabic Kufi", "Droid Sans", "Helvetica Neue", Arial, sans-serif; }'));
226+
'.foo { font-weight: bold; font-family: "Droid Sans", "Helvetica Neue", Arial, sans-serif/*!rtl:prepend:"Droid Arabic Kufi",*/; }[dir=rtl] .foo { font-family: "Droid Arabic Kufi", "Droid Sans", "Helvetica Neue", Arial, sans-serif; }'));
265227

266228
test('Value append directives with important comments are honored', t => run(t,
267229
'.foo { font-weight: bold; transform: rotate(45deg)/*! rtl:append: scaleX(-1) */; }',
268-
'.foo { font-weight: bold; }[dir=ltr] .foo { transform: rotate(45deg)/*! rtl:append: scaleX(-1) */; }[dir=rtl] .foo { transform: rotate(45deg) scaleX(-1); }'));
230+
'.foo { font-weight: bold; transform: rotate(45deg)/*! rtl:append: scaleX(-1) */; }[dir=rtl] .foo { transform: rotate(45deg) scaleX(-1); }'));
269231

270232
test('Should keep comments', t => run(t,
271233
'/* rtl:ignore */ a { text-align: left }',
@@ -287,7 +249,7 @@ test('Should respect custom prefix (class)', t => run(t,
287249
test('Should not swap "left" and "right" subparts of selectors', t => run(t,
288250
'.arrowLeft { margin-right: -3px }',
289251

290-
'[dir=ltr] .arrowLeft { margin-right: -3px }'
252+
'.arrowLeft { margin-right: -3px }'
291253
+ '[dir=rtl] .arrowLeft { margin-left: -3px }'));
292254

293255
test('Should respect multiline values', t => run(t,
@@ -296,7 +258,7 @@ test('Should respect multiline values', t => run(t,
296258
linear-gradient(to right, transparent, #000);
297259
}`,
298260

299-
`[dir=ltr] .multiline {
261+
`.multiline {
300262
background: rgba(0, 0, 0, 0, .5),
301263
linear-gradient(to right, transparent, #000);
302264
}`
@@ -308,7 +270,7 @@ test('Should respect multiline values', t => run(t,
308270
test('rtl:as: directive', t => run(t,
309271
':root { --padding /* rtl:as:padding */: 1px 2px 3px 4px }',
310272

311-
'[dir=ltr]:root { --padding /* rtl:as:padding */: 1px 2px 3px 4px }'
273+
':root { --padding /* rtl:as:padding */: 1px 2px 3px 4px }'
312274
+ '[dir=rtl]:root { --padding /* rtl:as:padding */: 1px 4px 3px 2px }'));
313275

314276
test('should ignore ignored @import', t => run(t,
@@ -321,15 +283,13 @@ test('should ignore ignored @import', t => run(t,
321283
test('should ignore blacklist properties', t => run(t,
322284
'.test {padding-left: 1rem;padding: 1rem 2rem 3rem 4rem}',
323285

324-
'.test {padding: 1rem 2rem 3rem 4rem}'
325-
+ '[dir=ltr] .test {padding-left: 1rem}'
286+
'.test {padding: 1rem 2rem 3rem 4rem;padding-left: 1rem}'
326287
+ '[dir=rtl] .test {padding-right: 1rem}',
327288
{blacklist: ['padding']}));
328289

329290
test('should process whitelist properties only', t => run(t,
330291
'.test {padding-left: 1rem;padding: 1rem 2rem 3rem 4rem}',
331292

332-
'.test {padding-left: 1rem}'
333-
+ '[dir=ltr] .test {padding: 1rem 2rem 3rem 4rem}'
293+
'.test {padding-left: 1rem;padding: 1rem 2rem 3rem 4rem}'
334294
+ '[dir=rtl] .test {padding: 1rem 4rem 3rem 2rem}',
335295
{whitelist: ['padding']}));

0 commit comments

Comments
 (0)