Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(makeStyles): fix insertion of keyframes (#20095)
* fix insertion of keyframes * Change files * fix snapshot * fix more UTs * add an example with multiple animations * fix multiple animations
- Loading branch information
1 parent
32414b7
commit af79644
Showing
11 changed files
with
231 additions
and
89 deletions.
There are no files selected for viewing
7 changes: 7 additions & 0 deletions
7
change/@fluentui-make-styles-ad78d37d-58a7-46c5-83a2-cac7cce8fcff.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| { | ||
| "type": "prerelease", | ||
| "comment": "fix insertion of keyframes", | ||
| "packageName": "@fluentui/make-styles", | ||
| "email": "olfedias@microsoft.com", | ||
| "dependentChangeType": "patch" | ||
| } |
7 changes: 7 additions & 0 deletions
7
change/@fluentui-react-make-styles-0c89fe8b-4478-430d-a761-fc6ead7c7eae.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| { | ||
| "type": "none", | ||
| "comment": "add section about keyframes to README", | ||
| "packageName": "@fluentui/react-make-styles", | ||
| "email": "olfedias@microsoft.com", | ||
| "dependentChangeType": "none" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
40 changes: 40 additions & 0 deletions
40
packages/make-styles/src/runtime/compileKeyframeCSS.test.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| import { compileKeyframeRule, compileKeyframesCSS } from './compileKeyframeCSS'; | ||
| import { MakeStyles } from '../types'; | ||
|
|
||
| describe('compileKeyframeRule', () => { | ||
| it('stringifies an object with keyframes', () => { | ||
| const keyframes: MakeStyles = { | ||
| from: { | ||
| transform: 'rotate(0deg)', | ||
| }, | ||
| to: { | ||
| transform: 'rotate(360deg)', | ||
| }, | ||
| }; | ||
| const result = compileKeyframeRule(keyframes); | ||
|
|
||
| expect(result).toMatchInlineSnapshot(`"from{transform:rotate(0deg);}to{transform:rotate(360deg);}"`); | ||
| }); | ||
| }); | ||
|
|
||
| describe('compileKeyframeCSS', () => { | ||
| it('creates CSS from strings with keyframes', () => { | ||
| const keyframes: MakeStyles = { | ||
| from: { | ||
| height: '10px', | ||
| }, | ||
| to: { | ||
| height: '50px', | ||
| }, | ||
| }; | ||
| const keyframesCSS = compileKeyframeRule(keyframes); | ||
| const result = compileKeyframesCSS('foo', keyframesCSS); | ||
|
|
||
| expect(result).toMatchInlineSnapshot(` | ||
| Array [ | ||
| "@-webkit-keyframes foo{from{height:10px;}to{height:50px;}}", | ||
| "@keyframes foo{from{height:10px;}to{height:50px;}}", | ||
| ] | ||
| `); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,19 +1,37 @@ | ||
| import { MakeStyles } from '../types'; | ||
| import { compile, middleware, serialize, stringify, prefixer } from 'stylis'; | ||
| import { compile, middleware, serialize, rulesheet, stringify, prefixer } from 'stylis'; | ||
| import { cssifyObject } from './utils/cssifyObject'; | ||
|
|
||
| export function compileKeyframeRule(frames: MakeStyles): string { | ||
| export function compileKeyframeRule(keyframeObject: MakeStyles): string { | ||
| let css: string = ''; | ||
|
|
||
| // eslint-disable-next-line guard-for-in | ||
| for (const percentage in frames) { | ||
| css += `${percentage}{${cssifyObject(frames[percentage])}}`; | ||
| for (const percentage in keyframeObject) { | ||
| css += `${percentage}{${cssifyObject(keyframeObject[percentage])}}`; | ||
| } | ||
|
|
||
| return css; | ||
| } | ||
|
|
||
| export function compileKeyframesCSS(animationName: string, framesCSS: string): string { | ||
| const cssRule = `@keyframes ${animationName} {${framesCSS}}`; | ||
| return serialize(compile(cssRule), middleware([prefixer, stringify])); | ||
| /** | ||
| * Creates CSS rules for insertion from passed CSS. | ||
| */ | ||
| export function compileKeyframesCSS(keyframeName: string, keyframeCSS: string): string[] { | ||
| const cssRule = `@keyframes ${keyframeName} {${keyframeCSS}}`; | ||
| const rules: string[] = []; | ||
|
|
||
| serialize( | ||
| compile(cssRule), | ||
| middleware([ | ||
| prefixer, | ||
| stringify, | ||
|
|
||
| // 💡 we are using `.insertRule()` API for DOM operations, which does not support | ||
| // insertion of multiple CSS rules in a single call. `rulesheet` plugin extracts | ||
| // individual rules to be used with this API | ||
| rulesheet(rule => rules.push(rule)), | ||
| ]), | ||
| ); | ||
|
|
||
| return rules; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.