Skip to content

Commit 555dc1a

Browse files
jquensejquense
committed
WIP
1 parent 2e87280 commit 555dc1a

File tree

2 files changed

+63
-57
lines changed

2 files changed

+63
-57
lines changed

‎index.js

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -45,23 +45,26 @@ function trimSelectors(selector) {
4545
}
4646

4747
function localizeNodez(rule, mode, options) {
48-
console.log(mode);
48+
// console.log(mode);
4949
const isScopePseudo = node =>
5050
node.value === ':local' || node.value === ':global';
5151

5252
const transform = (node, context) => {
5353
switch (node.type) {
5454
case 'root': {
55-
const childContext = { ...context, hasLocals: false };
55+
const childContext = { ...context };
5656
let overallIsGlobal;
5757

5858
node.each(childNode => {
59-
// isGlobal should not carry over across selectors:
59+
// isGlobal and hasLocals should not carry over across selectors:
6060
// `:global .foo, .bar -> .foo, :local(.bar)`
6161
childContext.isGlobal = context.isGlobal;
62+
childContext.hasLocals = false;
6263

6364
transform(childNode, childContext);
6465

66+
console.log(overallIsGlobal, childContext);
67+
6568
if (overallIsGlobal == null) {
6669
overallIsGlobal = childContext.isGlobal;
6770
} else {
@@ -72,7 +75,7 @@ function localizeNodez(rule, mode, options) {
7275
'" (multiple selectors must result in the same mode for the rule)'
7376
);
7477
}
75-
console.log(childContext.hasLocals);
78+
7679
if (childContext.hasLocals) {
7780
context.hasPureGlobals = false;
7881
}
@@ -81,12 +84,8 @@ function localizeNodez(rule, mode, options) {
8184
break;
8285
}
8386
case 'selector': {
84-
// const childContext = { ...context, hasLocals: false };
85-
8687
node.each(childNode => transform(childNode, context));
8788

88-
// context.isGlobal = childContext.isGlobal;
89-
9089
trimSelectors(node);
9190

9291
break;
@@ -104,13 +103,11 @@ function localizeNodez(rule, mode, options) {
104103
}
105104
case 'pseudo': {
106105
if (!isScopePseudo(node)) {
107-
// const childContext = {
108-
// ...context,
109-
// hasLocals: false,
110-
// };
106+
// This needs to not update `isGlobal` for tests to pass
107+
// the behavior seems _wrong_ tho.
108+
const childContext = { ...context };
109+
console.log('PSEUEDO', node.value, context);
111110
node.each(childNode => transform(childNode, context));
112-
113-
// if (childContext.hasLocals) context.hasLocals = true;
114111
break;
115112
}
116113

@@ -120,11 +117,11 @@ function localizeNodez(rule, mode, options) {
120117
);
121118
}
122119

123-
const isGlobal = node.value === ':global';
124-
125120
const isNested = !!node.length;
121+
const isGlobal = node.value === ':global';
126122
if (!isNested) {
127123
context.isGlobal = isGlobal;
124+
128125
context.shouldTrimTrainingWhitespace = !node.spaces.before;
129126
// console.log(node.spaces);
130127
node.remove();
@@ -148,6 +145,10 @@ function localizeNodez(rule, mode, options) {
148145
acc.concat(next.type === 'selector' ? next.nodes : next),
149146
[]
150147
);
148+
// console.log(context);
149+
if (childContext.hasLocals) {
150+
context.hasLocals = true;
151+
}
151152

152153
// console.log('asfasfasf', nodes);
153154

@@ -160,6 +161,7 @@ function localizeNodez(rule, mode, options) {
160161
first.spaces = { before, after: first.spaces.after };
161162
last.spaces = { before: last.spaces.before, after };
162163
}
164+
163165
nodes.forEach(childNode => {
164166
node.parent.insertBefore(node, childNode);
165167
});
@@ -192,11 +194,10 @@ function localizeNodez(rule, mode, options) {
192194
spaces,
193195
})
194196
);
195-
console.log('HERE');
197+
// console.log('HERE');
196198
context.hasLocals = true;
197-
} else {
198-
//node.spaces = spaces;
199199
}
200+
200201
break;
201202
}
202203
}

‎test.js

Lines changed: 43 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -312,23 +312,28 @@ const tests = [
312312
// input: ':import("~/lol.css") { foo: __foo; }',
313313
// expected: ':import("~/lol.css") { foo: __foo; }'
314314
// },
315-
{
316-
should: 'compile in pure mode',
317-
input: ':global(.foo).bar, [type="radio"] ~ .label, :not(.foo), #bar {}',
318-
options: { mode: 'pure' },
319-
expected:
320-
'.foo:local(.bar), [type="radio"] ~ :local(.label), :not(:local(.foo)), :local(#bar) {}',
321-
},
322315
// {
323-
// should: 'compile explict global element',
324-
// input: ':global(input) {}',
325-
// expected: 'input {}'
316+
// should: 'incorrectly handle nested selectors',
317+
// input: '.bar:not(:global .foo, .baz) {}',
318+
// expected: ':local(.bar):not(.foo, .baz) {}',
319+
// },
320+
// {
321+
// should: 'compile in pure mode',
322+
// input: ':global(.foo).bar, [type="radio"] ~ .label, :not(.foo), #bar {}',
323+
// options: { mode: 'pure' },
324+
// expected:
325+
// '.foo:local(.bar), [type="radio"] ~ :local(.label), :not(:local(.foo)), :local(#bar) {}',
326326
// },
327327
// {
328-
// should: 'compile explict global attribute',
329-
// input: ':global([type="radio"]), :not(:global [type="radio"]) {}',
330-
// expected: '[type="radio"], :not([type="radio"]) {}'
328+
// should: 'compile explict global element',
329+
// input: ':global(input) {}',
330+
// expected: 'input {}',
331331
// },
332+
{
333+
should: 'compile explict global attribute',
334+
input: ':global([type="radio"]), :not(:global [type="radio"]) {}',
335+
expected: '[type="radio"], :not([type="radio"]) {}',
336+
},
332337
// {
333338
// should: 'throw on invalid mode',
334339
// input: '',
@@ -343,83 +348,83 @@ const tests = [
343348
// {
344349
// should: 'throw on nested :locals',
345350
// input: ':local(:local(.foo)) {}',
346-
// error: /is not allowed inside/
351+
// error: /is not allowed inside/,
347352
// },
348353
// {
349354
// should: 'throw on nested :globals',
350355
// input: ':global(:global(.foo)) {}',
351-
// error: /is not allowed inside/
356+
// error: /is not allowed inside/,
352357
// },
353358
// {
354359
// should: 'throw on nested mixed',
355360
// input: ':local(:global(.foo)) {}',
356-
// error: /is not allowed inside/
361+
// error: /is not allowed inside/,
357362
// },
358363
// {
359364
// should: 'throw on nested broad :local',
360365
// input: ':global(:local .foo) {}',
361-
// error: /is not allowed inside/
366+
// error: /is not allowed inside/,
362367
// },
363368
// {
364369
// should: 'throw on incorrect spacing with broad :global',
365370
// input: '.foo :global.bar {}',
366-
// error: /Missing whitespace after :global/
371+
// error: /Missing whitespace after :global/,
367372
// },
368373
// {
369374
// should: 'throw on incorrect spacing with broad :local',
370375
// input: '.foo:local .bar {}',
371-
// error: /Missing whitespace before :local/
376+
// error: /Missing whitespace before :local/,
372377
// },
373378
// {
374379
// should: 'throw on not pure selector (global class)',
375380
// input: ':global(.foo) {}',
376381
// options: { mode: 'pure' },
377-
// error: /":global\(\.foo\)" is not pure/
382+
// error: /":global\(\.foo\)" is not pure/,
378383
// },
379384
// {
380385
// should: 'throw on not pure selector (with multiple 1)',
381386
// input: '.foo, :global(.bar) {}',
382387
// options: { mode: 'pure' },
383-
// error: /".foo, :global\(\.bar\)" is not pure/
388+
// error: /".foo, :global\(\.bar\)" is not pure/,
384389
// },
385390
// {
386391
// should: 'throw on not pure selector (with multiple 2)',
387392
// input: ':global(.bar), .foo {}',
388393
// options: { mode: 'pure' },
389-
// error: /":global\(\.bar\), .foo" is not pure/
394+
// error: /":global\(\.bar\), .foo" is not pure/,
390395
// },
391396
// {
392397
// should: 'throw on not pure selector (element)',
393398
// input: 'input {}',
394399
// options: { mode: 'pure' },
395-
// error: /"input" is not pure/
400+
// error: /"input" is not pure/,
396401
// },
397402
// {
398403
// should: 'throw on not pure selector (attribute)',
399404
// input: '[type="radio"] {}',
400405
// options: { mode: 'pure' },
401-
// error: /"\[type="radio"\]" is not pure/
406+
// error: /"\[type="radio"\]" is not pure/,
402407
// },
403408
// {
404409
// should: 'throw on not pure keyframes',
405410
// input: '@keyframes :global(foo) {}',
406411
// options: { mode: 'pure' },
407-
// error: /@keyframes :global\(\.\.\.\) is not allowed in pure mode/
412+
// error: /@keyframes :global\(\.\.\.\) is not allowed in pure mode/,
408413
// },
409414
// {
410415
// should: 'pass through global element',
411416
// input: 'input {}',
412-
// expected: 'input {}'
417+
// expected: 'input {}',
413418
// },
414419
// {
415420
// should: 'localise class and pass through element',
416421
// input: '.foo input {}',
417-
// expected: ':local(.foo) input {}'
422+
// expected: ':local(.foo) input {}',
418423
// },
419424
// {
420425
// should: 'pass through attribute selector',
421426
// input: '[type="radio"] {}',
422-
// expected: '[type="radio"] {}'
427+
// expected: '[type="radio"] {}',
423428
// },
424429
// {
425430
// should: 'not modify urls without option',
@@ -430,15 +435,15 @@ const tests = [
430435
// expected:
431436
// ':local(.a) { background: url(./image.png); }\n' +
432437
// '.b { background: url(image.png); }\n' +
433-
// ':local(.c) { background: url("./image.png"); }'
438+
// ':local(.c) { background: url("./image.png"); }',
434439
// },
435440
// {
436441
// should: 'rewrite url in local block',
437442
// input:
438443
// '.a { background: url(./image.png); }\n' +
439444
// ':global .b { background: url(image.png); }\n' +
440445
// '.c { background: url("./image.png"); }\n' +
441-
// '.c { background: url(\'./image.png\'); }\n' +
446+
// ".c { background: url('./image.png'); }\n" +
442447
// '.d { background: -webkit-image-set(url("./image.png") 1x, url("./image2x.png") 2x); }\n' +
443448
// '@font-face { src: url("./font.woff"); }\n' +
444449
// '@-webkit-font-face { src: url("./font.woff"); }\n' +
@@ -450,7 +455,7 @@ const tests = [
450455
// rewriteUrl: function(global, url) {
451456
// const mode = global ? 'global' : 'local';
452457
// return '(' + mode + ')' + url + '"' + mode + '"';
453-
// }
458+
// },
454459
// },
455460
// expected:
456461
// ':local(.a) { background: url((local\\)./image.png\\"local\\"); }\n' +
@@ -468,7 +473,7 @@ const tests = [
468473
// {
469474
// should: 'not crash on atrule without nodes',
470475
// input: '@charset "utf-8";',
471-
// expected: '@charset "utf-8";'
476+
// expected: '@charset "utf-8";',
472477
// },
473478
// {
474479
// should: 'not crash on a rule without nodes',
@@ -480,32 +485,32 @@ const tests = [
480485
// return root;
481486
// })(),
482487
// // postcss-less's stringify would honor `ruleWithoutBody` and omit the trailing `{}`
483-
// expected: ':local(.a) {\n :local(.b) {}\n}'
488+
// expected: ':local(.a) {\n :local(.b) {}\n}',
484489
// },
485490
// {
486491
// should: 'not break unicode characters',
487492
// input: '.a { content: "\\2193" }',
488-
// expected: ':local(.a) { content: "\\2193" }'
493+
// expected: ':local(.a) { content: "\\2193" }',
489494
// },
490495
// {
491496
// should: 'not break unicode characters',
492497
// input: '.a { content: "\\2193\\2193" }',
493-
// expected: ':local(.a) { content: "\\2193\\2193" }'
498+
// expected: ':local(.a) { content: "\\2193\\2193" }',
494499
// },
495500
// {
496501
// should: 'not break unicode characters',
497502
// input: '.a { content: "\\2193 \\2193" }',
498-
// expected: ':local(.a) { content: "\\2193 \\2193" }'
503+
// expected: ':local(.a) { content: "\\2193 \\2193" }',
499504
// },
500505
// {
501506
// should: 'not break unicode characters',
502507
// input: '.a { content: "\\2193\\2193\\2193" }',
503-
// expected: ':local(.a) { content: "\\2193\\2193\\2193" }'
508+
// expected: ':local(.a) { content: "\\2193\\2193\\2193" }',
504509
// },
505510
// {
506511
// should: 'not break unicode characters',
507512
// input: '.a { content: "\\2193 \\2193 \\2193" }',
508-
// expected: ':local(.a) { content: "\\2193 \\2193 \\2193" }'
513+
// expected: ':local(.a) { content: "\\2193 \\2193 \\2193" }',
509514
// },
510515
];
511516

0 commit comments

Comments
 (0)