Skip to content

Commit

Permalink
fix: πŸ› nth-child not being correctly globalified
Browse files Browse the repository at this point in the history
βœ… Closes: #224
  • Loading branch information
kaisermann committed Sep 25, 2020
1 parent 1bee2db commit fa7249f
Show file tree
Hide file tree
Showing 3 changed files with 75 additions and 33 deletions.
3 changes: 2 additions & 1 deletion src/modules/globalifySelector.ts
Expand Up @@ -4,10 +4,11 @@
* We use a negative lookbehind assertion to prevent matching
* escaped combinators like `\~`.
*/
const combinatorPattern = /(?<!\\)(?:\\\\)*([ >+~,]\s*)(?![^[]+\])/g;
const combinatorPattern = /(?<!\\)(?:\\\\)*([ >+~,]\s*)(?![^[]+\]|\d)/g;

export function globalifySelector(selector: string) {
const parts = selector.trim().split(combinatorPattern);

const modifiedSelector = parts
.map((selectorPart: string, index: number) => {
// if this is the separator
Expand Down
70 changes: 70 additions & 0 deletions test/modules/globalifySelector.test.ts
@@ -0,0 +1,70 @@
import { globalifySelector } from '../../src/modules/globalifySelector';

describe('globalifySelector', () => {
it('correctly treats CSS selectors with legal spaces', async () => {
const selector = '[attr="with spaces"]';

expect(globalifySelector(selector)).toEqual(
':global([attr="with spaces"])',
);
});

it('works with combinators', async () => {
expect(globalifySelector('ul + p')).toEqual(`:global(ul) + :global(p)`);
expect(globalifySelector('p > a')).toEqual(`:global(p) > :global(a)`);
expect(globalifySelector('p + p')).toEqual(`:global(p) + :global(p)`);
expect(globalifySelector('li a')).toEqual(`:global(li) :global(a)`);
expect(globalifySelector('div ~ a')).toEqual(`:global(div) ~ :global(a)`);
expect(globalifySelector('div, a')).toEqual(`:global(div), :global(a)`);
});

it('correctly treats selectors with escaped combinator characters', async () => {
const selector1 = '.\\~positive.\\!normal ~ .\\+foo';

expect(globalifySelector(selector1)).toEqual(
':global(.\\~positive.\\!normal) ~ :global(.\\+foo)',
);
});

it('works with nth-child', async () => {
expect(globalifySelector('tr:nth-child(odd)')).toEqual(
`:global(tr:nth-child(odd))`,
);
expect(globalifySelector('tr:nth-child(2n+1)')).toEqual(
`:global(tr:nth-child(2n+1))`,
);
expect(globalifySelector('tr:nth-child(even)')).toEqual(
`:global(tr:nth-child(even))`,
);
expect(globalifySelector('tr:nth-child(2n)')).toEqual(
`:global(tr:nth-child(2n))`,
);
expect(globalifySelector(':nth-child(7)')).toEqual(
`:global(:nth-child(7))`,
);
expect(globalifySelector(':nth-child(5n)')).toEqual(
`:global(:nth-child(5n))`,
);
expect(globalifySelector(':nth-child(n+7)')).toEqual(
`:global(:nth-child(n+7))`,
);
expect(globalifySelector(':nth-child(3n+4)')).toEqual(
`:global(:nth-child(3n+4))`,
);
expect(globalifySelector(':nth-child(-n+3)')).toEqual(
`:global(:nth-child(-n+3))`,
);
expect(globalifySelector('p:nth-child(n)')).toEqual(
`:global(p:nth-child(n))`,
);
expect(globalifySelector('p:nth-child(1)')).toEqual(
`:global(p:nth-child(1))`,
);
expect(globalifySelector('p:nth-child(0n+1)')).toEqual(
`:global(p:nth-child(0n+1))`,
);
expect(globalifySelector('p:nth-child(n+8):nth-child(-n+15)')).toEqual(
`:global(p:nth-child(n+8):nth-child(-n+15))`,
);
});
});
35 changes: 3 additions & 32 deletions test/modules.test.ts β†’ test/modules/modules.test.ts
@@ -1,13 +1,12 @@
import { resolve } from 'path';

import { getTestAppFilename, getFixtureContent } from './utils';
import { getTagInfo } from '../src/modules/tagInfo';
import { getTestAppFilename, getFixtureContent } from '../utils';
import { getTagInfo } from '../../src/modules/tagInfo';
import {
importAny,
getIncludePaths,
hasDepInstalled,
} from '../src/modules/utils';
import { globalifySelector } from '../src/modules/globalifySelector';
} from '../../src/modules/utils';

describe('importAny', () => {
it('should throw error when none exist', () => {
Expand Down Expand Up @@ -56,34 +55,6 @@ describe('getIncludePaths', () => {
});
});

describe('globalifySelector', () => {
it('correctly treats CSS selectors with legal spaces', async () => {
const selector = '[attr="with spaces"]';

expect(globalifySelector(selector)).toEqual(
':global([attr="with spaces"])',
);
});

it('correctly treats CSS combinators', async () => {
const selector1 = 'div > span';
const selector2 = 'div, span';

expect(globalifySelector(selector1)).toEqual(
':global(div) > :global(span)',
);
expect(globalifySelector(selector2)).toEqual(':global(div), :global(span)');
});

it('correctly treats selectors with escaped combinator characters', async () => {
const selector1 = '.\\~positive.\\!normal ~ .\\+foo';

expect(globalifySelector(selector1)).toEqual(
':global(.\\~positive.\\!normal) ~ :global(.\\+foo)',
);
});
});

describe(`get tag information`, () => {
it('should only include src files if content is empty', async () => {
let parsedFile = await getTagInfo({
Expand Down

0 comments on commit fa7249f

Please sign in to comment.