feat: add keyframe support (#108)

Author: ayroblu

package.json

@@ -71,6 +71,7 @@
     "lodash.camelcase": "^4.3.0",
     "postcss": "^7.0.27",
     "postcss-filter-plugins": "^3.0.1",
+    "postcss-icss-keyframes": "^0.2.1",
     "postcss-icss-selectors": "^2.0.3",
     "postcss-load-config": "^2.1.0",
     "reserved-words": "^0.1.2",

src/@types/postcss-icss-keyframes.d.ts

@@ -0,0 +1,11 @@
+declare module 'postcss-icss-keyframes' {
+  import { Plugin } from 'postcss';
+  const plugin: Plugin<{
+    generateScopeName: (
+      keyframesName: string,
+      filepath: string,
+      css: string,
+    ) => void;
+  }>;
+  export = plugin;
+}

src/helpers/__tests__/__snapshots__/getDtsSnapshot.test.ts.snap

@@ -111,6 +111,7 @@ exports[`utils / cssSnapshots with file 'import.module.css' createExports should
   'childA': string;
   'childB': string;
   'nestedChild': string;
+  'fadeIn': string;
 };
 export default classes;
 export let classA: string;
@@ -119,6 +120,7 @@ export let parent: string;
 export let childA: string;
 export let childB: string;
 export let nestedChild: string;
+export let fadeIn: string;
 "
 `;
 
@@ -130,6 +132,7 @@ Object {
   "class-c": "import-module__class-c---2JDAJ",
   "classA": "import-module__classA---2fO5r",
   "class_d": "import-module__class_d---2Dims",
+  "fadeIn": "__import_module_css__fadeIn",
   "nestedChild": "import-module__nestedChild---1ZDxw",
   "parent": "import-module__parent---2kdvO",
 }
@@ -146,6 +149,7 @@ declare let classes: {
   'childA': string;
   'childB': string;
   'nestedChild': string;
+  'fadeIn': string;
 };
 export default classes;
 export let classA: string;
@@ -154,9 +158,10 @@ export let parent: string;
 export let childA: string;
 export let childB: string;
 export let nestedChild: string;
+export let fadeIn: string;
 
 export const __cssModule: true;
-export type AllClassNames = 'classA' | 'ClassB' | 'class-c' | 'class_d' | 'parent' | 'childA' | 'childB' | 'nestedChild';"
+export type AllClassNames = 'classA' | 'ClassB' | 'class-c' | 'class_d' | 'parent' | 'childA' | 'childB' | 'nestedChild' | 'fadeIn';"
 `;
 
 exports[`utils / cssSnapshots with file 'import.module.less' createExports should create an exports file 1`] = `
@@ -279,6 +284,7 @@ exports[`utils / cssSnapshots with file 'test.module.css' createExports should c
   'childA': string;
   'childB': string;
   'nestedChild': string;
+  'fadeIn': string;
 };
 export default classes;
 export let classA: string;
@@ -287,6 +293,7 @@ export let parent: string;
 export let childA: string;
 export let childB: string;
 export let nestedChild: string;
+export let fadeIn: string;
 "
 `;
 
@@ -298,6 +305,7 @@ Object {
   "class-c": "test-module__class-c---3Ouzp",
   "classA": "test-module__classA---KAOw8",
   "class_d": "test-module__class_d---3pjDe",
+  "fadeIn": "__test_module_css__fadeIn",
   "nestedChild": "test-module__nestedChild---v7rOR",
   "parent": "test-module__parent---2tsUX",
 }
@@ -314,6 +322,7 @@ declare let classes: {
   'childA': string;
   'childB': string;
   'nestedChild': string;
+  'fadeIn': string;
 };
 export default classes;
 export let classA: string;
@@ -322,9 +331,10 @@ export let parent: string;
 export let childA: string;
 export let childB: string;
 export let nestedChild: string;
+export let fadeIn: string;
 
 export const __cssModule: true;
-export type AllClassNames = 'classA' | 'ClassB' | 'class-c' | 'class_d' | 'parent' | 'childA' | 'childB' | 'nestedChild';"
+export type AllClassNames = 'classA' | 'ClassB' | 'class-c' | 'class_d' | 'parent' | 'childA' | 'childB' | 'nestedChild' | 'fadeIn';"
 `;
 
 exports[`utils / cssSnapshots with file 'test.module.less' createExports should create an exports file 1`] = `

src/helpers/__tests__/fixtures/test.module.css

@@ -25,3 +25,12 @@
     }
   }
 }
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

src/helpers/__tests__/getDtsSnapshot.test.ts

@@ -4,6 +4,7 @@ import { join } from 'path';
 import postcss from 'postcss';
 import postcssIcssSelectors from 'postcss-icss-selectors';
 import postcssImportSync from 'postcss-import-sync2';
+import postcssIcssKeyframes from 'postcss-icss-keyframes';
 import tsModule from 'typescript/lib/tsserverlibrary';
 import { getClasses } from '../getClasses';
 import { createExports } from '../createExports';
@@ -37,6 +38,7 @@ const compilerOptions: tsModule.CompilerOptions = {};
 const processor = postcss([
   postcssImportSync(),
   postcssIcssSelectors({ mode: 'local' }),
+  postcssIcssKeyframes(),
 ]);
 
 describe('utils / cssSnapshots', () => {

src/index.ts

@@ -3,6 +3,7 @@ import path from 'path';
 import dotenv from 'dotenv';
 import postcss, { AcceptedPlugin } from 'postcss';
 import postcssIcssSelectors from 'postcss-icss-selectors';
+import postcssIcssKeyframes from 'postcss-icss-keyframes';
 import postcssrc from 'postcss-load-config';
 import filter from 'postcss-filter-plugins';
 import tsModule from 'typescript/lib/tsserverlibrary';
@@ -99,6 +100,7 @@ function init({ typescript: ts }: { typescript: typeof tsModule }) {
     const processor = postcss([
       ...userPlugins,
       postcssIcssSelectors({ mode: 'local' }),
+      postcssIcssKeyframes(),
     ]);
 
     // Create matchers using options object.

yarn.lock

@@ -3788,6 +3788,15 @@ postcss-filter-plugins@^3.0.1:
   dependencies:
     postcss "^6.0.14"
 
+postcss-icss-keyframes@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/postcss-icss-keyframes/-/postcss-icss-keyframes-0.2.1.tgz#80c4455e0112b0f2f9c3c05ac7515062bb9ff295"
+  integrity sha1-gMRFXgESsPL5w8Bax1FQYruf8pU=
+  dependencies:
+    icss-utils "^3.0.1"
+    postcss "^6.0.2"
+    postcss-value-parser "^3.3.0"
+
 postcss-icss-selectors@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/postcss-icss-selectors/-/postcss-icss-selectors-2.0.3.tgz#27fa1afcaab6c602c866cbb298f3218e9bc1c9b3"
@@ -3817,7 +3826,7 @@ postcss-load-config@^2.1.0:
     cosmiconfig "^5.0.0"
     import-cwd "^2.0.0"
 
-postcss-value-parser@^3.3.1:
+postcss-value-parser@^3.3.0, postcss-value-parser@^3.3.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
   integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==