diff --git a/package.json b/package.json index c7fb87b..825d5cf 100644 --- a/package.json +++ b/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", diff --git a/src/@types/postcss-icss-keyframes.d.ts b/src/@types/postcss-icss-keyframes.d.ts new file mode 100644 index 0000000..750c149 --- /dev/null +++ b/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; +} diff --git a/src/helpers/__tests__/__snapshots__/getDtsSnapshot.test.ts.snap b/src/helpers/__tests__/__snapshots__/getDtsSnapshot.test.ts.snap index 8c9bf13..a860341 100644 --- a/src/helpers/__tests__/__snapshots__/getDtsSnapshot.test.ts.snap +++ b/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`] = ` diff --git a/src/helpers/__tests__/fixtures/test.module.css b/src/helpers/__tests__/fixtures/test.module.css index e5f1e08..8aa5bb0 100644 --- a/src/helpers/__tests__/fixtures/test.module.css +++ b/src/helpers/__tests__/fixtures/test.module.css @@ -25,3 +25,12 @@ } } } + +@keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} diff --git a/src/helpers/__tests__/getDtsSnapshot.test.ts b/src/helpers/__tests__/getDtsSnapshot.test.ts index e778503..b66483e 100644 --- a/src/helpers/__tests__/getDtsSnapshot.test.ts +++ b/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', () => { diff --git a/src/index.ts b/src/index.ts index a00236e..c4a6489 100644 --- a/src/index.ts +++ b/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. diff --git a/yarn.lock b/yarn.lock index 507b517..0679185 100644 --- a/yarn.lock +++ b/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==