Add tests for nesting

mrmckeb · Feb 18, 2023 · 6f34a3c · 6f34a3c
1 parent 481a5e7
commit 6f34a3c
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 0 deletions.
diff --git a/src/helpers/__tests__/__snapshots__/getDtsSnapshot.test.ts.snap b/src/helpers/__tests__/__snapshots__/getDtsSnapshot.test.ts.snap
@@ -328,6 +328,56 @@ export const __cssModule: true;
 export type AllClassNames = 'foo' | 'bar' | 'baz' | 'col-1' | 'col-2' | 'col-3' | 'local-class-1' | 'inside-local' | 'inside-1-name-2' | 'inside-2-name-1';"
 `;
 
+exports[`utils / cssSnapshots with file 'postcss.module.css' createExports should create an exports file 1`] = `
+"declare let classes: {
+  'classA': string;
+  'nestedA': string;
+  'nested_B': string;
+  'deeplyNested': string;
+  'nested-c': string;
+  'parent': string;
+};
+export default classes;
+export let classA: string;
+export let nestedA: string;
+export let nested_B: string;
+export let deeplyNested: string;
+export let parent: string;
+"
+`;
+
+exports[`utils / cssSnapshots with file 'postcss.module.css' getCssExports should return an object matching expected CSS 1`] = `
+{
+  "classA": "classA",
+  "deeplyNested": "deeplyNested",
+  "nested-c": "nested-c",
+  "nestedA": "nestedA",
+  "nested_B": "nested_B",
+  "parent": "parent",
+}
+`;
+
+exports[`utils / cssSnapshots with file 'postcss.module.css' with a custom template should transform the generated dts 1`] = `
+"/* eslint-disable */
+declare let classes: {
+  'classA': string;
+  'nestedA': string;
+  'nested_B': string;
+  'deeplyNested': string;
+  'nested-c': string;
+  'parent': string;
+};
+export default classes;
+export let classA: string;
+export let nestedA: string;
+export let nested_B: string;
+export let deeplyNested: string;
+export let parent: string;
+
+export const __cssModule: true;
+export type AllClassNames = 'classA' | 'nestedA' | 'nested_B' | 'deeplyNested' | 'nested-c' | 'parent';"
+`;
+
 exports[`utils / cssSnapshots with file 'test.module.css' createExports should create an exports file 1`] = `
 "declare let classes: {
   'classA': string;

diff --git a/src/helpers/__tests__/fixtures/postcss.module.css b/src/helpers/__tests__/fixtures/postcss.module.css
@@ -0,0 +1,18 @@
+.classA {
+  .nestedA {
+    color: rebeccapurple;
+  }
+  .nested_B {
+    .deeplyNested {
+      color: rebeccapurple;
+    }
+  }
+
+  /* https://www.w3.org/TR/css-nesting-1/ */
+  & .nested-c {
+    color: rebeccapurple;
+  }
+  .parent & {
+    color: rebeccapurple;
+  }
+}
diff --git a/src/helpers/__tests__/getDtsSnapshot.test.ts b/src/helpers/__tests__/getDtsSnapshot.test.ts
@@ -1,6 +1,7 @@
 import { readFileSync } from 'fs';
 import { join } from 'path';
 import postcssImportSync from 'postcss-import-sync2';
+import postcssPresetEnv from 'postcss-preset-env';
 import tsModule from 'typescript/lib/tsserverlibrary';
 import { CSSExportsWithSourceMap, getCssExports } from '../getCssExports';
 import { createDtsExports } from '../createDtsExports';
@@ -16,6 +17,7 @@ const testFileNames = [
   'import.module.css',
   'import.module.less',
   'import.module.styl',
+  'postcss.module.css',
   'test.module.css',
   'test.module.less',
   'test.module.sass',
@@ -35,6 +37,12 @@ const compilerOptions: tsModule.CompilerOptions = {};
 const processor = getProcessor([
   // For testing PostCSS import support/functionality.
   postcssImportSync(),
+  postcssPresetEnv({
+    stage: 3,
+    features: {
+      'nesting-rules': true,
+    },
+  }),
 ]);
 
 describe('utils / cssSnapshots', () => {