Fix/globalify nth child

CHANGELOG.md

@@ -1,3 +1,12 @@
+## [4.3.1](https://github.com/sveltejs/svelte-preprocess/compare/v4.3.0...v4.3.1) (2020-09-25)
+
+
+### Bug Fixes
+
+* 🐛 nth-child not being correctly globalified ([c78b260](https://github.com/sveltejs/svelte-preprocess/commit/c78b26038f12cd698d65a09f53fb798c6abb7f03)), closes [#224](https://github.com/sveltejs/svelte-preprocess/issues/224)
+
+
+
 # [4.3.0](https://github.com/sveltejs/svelte-preprocess/compare/v4.2.2...v4.3.0) (2020-09-16)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-preprocess",
-  "version": "4.3.0",
+  "version": "4.3.1",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

src/modules/globalifySelector.ts

@@ -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

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))`,
+    );
+  });
+});

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', () => {
@@ -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({