diff --git a/.changeset/warm-ladybugs-impress.md b/.changeset/warm-ladybugs-impress.md new file mode 100644 index 00000000000..29110284000 --- /dev/null +++ b/.changeset/warm-ladybugs-impress.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris-migrator': minor +--- + +Add migrations for animation: declarations (and rename `replace-sass-transition` to the more generic `replace-sass-animatable`). diff --git a/polaris-migrator/README.md b/polaris-migrator/README.md index 549e1e8f7e9..d924890d20f 100644 --- a/polaris-migrator/README.md +++ b/polaris-migrator/README.md @@ -235,9 +235,31 @@ Be aware that this may also create additional code changes in your codebase, we npx @shopify/polaris-migrator replace-sass-spacing ``` -### `replace-sass-transition` +### `replace-sass-animatable` -Replace timings (`ms`, `s`) and legacy Sass functions (`duration()`,`easing()`) in transition declarations (`transition`, `transition-duration`, `transition-delay`, and `transition-timing-function`) with the corresponding Polaris [motion](https://polaris.shopify.com/tokens/motion) token. +Replace timings (`ms`, `s`) and legacy Sass functions (`duration()`,`easing()`) with the corresponding Polaris [motion](https://polaris.shopify.com/tokens/motion) token. + +Accepts two command line arguments: + +- `--with-transition=`: (_default: `true`_) Migrate `transition` + declarations. +- `--with-animation=`: (_default: `true`_) Migrate `animation` + declarations. + +Declarations targeted: + +``` +transition +transition-duration +transition-delay +transition-timing-function +animation +animation-duration +animation-delay +animation-timing-function +``` + +Example changes: ```diff - transition-duration: 100ms; @@ -263,7 +285,7 @@ Replace timings (`ms`, `s`) and legacy Sass functions (`duration()`,`easing()`) ``` ```sh -npx @shopify/polaris-migrator replace-sass-transition +npx @shopify/polaris-migrator replace-sass-animatable ``` ## Creating Migrations diff --git a/polaris-migrator/package.json b/polaris-migrator/package.json index ba45387ee61..ad2e92ce723 100644 --- a/polaris-migrator/package.json +++ b/polaris-migrator/package.json @@ -35,6 +35,7 @@ "dependencies": { "@shopify/polaris-tokens": "^6.2.1", "chalk": "^4.1.0", + "falsey": "^1.0.0", "globby": "11.0.1", "is-git-clean": "^1.1.0", "jscodeshift": "^0.13.1", diff --git a/polaris-migrator/src/falsey.d.ts b/polaris-migrator/src/falsey.d.ts new file mode 100644 index 00000000000..94205e36ed0 --- /dev/null +++ b/polaris-migrator/src/falsey.d.ts @@ -0,0 +1,3 @@ +declare module 'falsey' { + export default function (val: any, keywords?: any | any[]): boolean; +} diff --git a/polaris-migrator/src/migrations/replace-sass-transition/replace-sass-transition.ts b/polaris-migrator/src/migrations/replace-sass-animatable/replace-sass-animatable.ts similarity index 69% rename from polaris-migrator/src/migrations/replace-sass-transition/replace-sass-transition.ts rename to polaris-migrator/src/migrations/replace-sass-animatable/replace-sass-animatable.ts index e14cbc2166a..19dfbf09e1f 100644 --- a/polaris-migrator/src/migrations/replace-sass-transition/replace-sass-transition.ts +++ b/polaris-migrator/src/migrations/replace-sass-animatable/replace-sass-animatable.ts @@ -4,6 +4,7 @@ import valueParser, { Node, FunctionNode, } from 'postcss-value-parser'; +import falsey from 'falsey'; import { namespace, @@ -13,6 +14,7 @@ import { isTransformableDuration, isPolarisVar, createSassMigrator, + PolarisMigrator, } from '../../utilities/sass'; import {isKeyOf} from '../../utilities/type-guards'; @@ -71,7 +73,7 @@ const easingFuncConstantsMap = { const deprecatedEasingFuncs = ['anticipate', 'excite', 'overshoot']; -// Per the spec for transition easing functions: +// Per the spec for easing functions: // https://w3c.github.io/csswg-drafts/css-easing/#easing-functions const cssEasingBuiltinFuncs = [ 'linear', @@ -100,10 +102,36 @@ function setNodeValue(node: Node, value: string): void { node.sourceEndIndex += sourceIndex; } +interface Options { + namespace?: string; + // later cooerced by falsey() + withTransition?: string; + // later cooerced by falsey() + withAnimation?: string; +} + export default createSassMigrator( - 'replace-sass-transition', - (_, {methods, options}, context) => { + 'replace-sass-animatable', + ( + _, + { + methods, + options, + }: { + methods: Parameters[1]['methods']; + options: Options; + }, + context, + ) => { const durationFunc = namespace('duration', options); + const withTransition = + typeof options.withTransition === 'undefined' + ? true + : !falsey(options.withTransition); + const withAnimation = + typeof options.withAnimation === 'undefined' + ? true + : !falsey(options.withAnimation); function migrateLegacySassEasingFunction( node: FunctionNode, @@ -150,10 +178,7 @@ export default createSassMigrator( }); } - function mutateTransitionDurationValue( - node: Node, - decl: Declaration, - ): void { + function mutateDurationValue(node: Node, decl: Declaration): void { if (isPolarisVar(node)) { return; } @@ -226,9 +251,10 @@ export default createSassMigrator( } } - function mutateTransitionFunctionValue( + function mutateTimingFunctionValue( node: Node, decl: Declaration, + {ignoreUnknownFunctions}: {ignoreUnknownFunctions: boolean}, ): void { if (isPolarisVar(node)) { return; @@ -244,17 +270,27 @@ export default createSassMigrator( } if (node.type === 'function') { - const easingFuncHandlers = { - [namespace('easing', options)]: migrateLegacySassEasingFunction, - // Per the spec, these can all be functions: - // https://w3c.github.io/csswg-drafts/css-easing/#easing-functions - linear: insertUnexpectedEasingFunctionComment, - 'cubic-bezier': insertUnexpectedEasingFunctionComment, - steps: insertUnexpectedEasingFunctionComment, - }; + if (node.value === namespace('easing', options)) { + migrateLegacySassEasingFunction(node, decl); + return; + } - if (isKeyOf(easingFuncHandlers, node.value)) { - easingFuncHandlers[node.value](node, decl); + if (ignoreUnknownFunctions) { + const easingFuncHandlers = { + [namespace('easing', options)]: migrateLegacySassEasingFunction, + // Per the spec, these can all be functions: + // https://w3c.github.io/csswg-drafts/css-easing/#easing-functions + linear: insertUnexpectedEasingFunctionComment, + 'cubic-bezier': insertUnexpectedEasingFunctionComment, + steps: insertUnexpectedEasingFunctionComment, + }; + + if (isKeyOf(easingFuncHandlers, node.value)) { + easingFuncHandlers[node.value](node, decl); + return; + } + } else { + insertUnexpectedEasingFunctionComment(node, decl); return; } } @@ -276,18 +312,21 @@ export default createSassMigrator( return; } - if (cssEasingBuiltinFuncs.includes(node.value)) { + if ( + !ignoreUnknownFunctions || + cssEasingBuiltinFuncs.includes(node.value) + ) { insertUnexpectedEasingFunctionComment(node, decl); } } } - function mutateTransitionDelayValue(node: Node, decl: Declaration): void { + function mutateDelayValue(node: Node, decl: Declaration): void { // For now, we treat delays like durations - return mutateTransitionDurationValue(node, decl); + return mutateDurationValue(node, decl); } - function mutateTransitionShorthandValue( + function mutateAnimatableShorthandValue( decl: Declaration, parsedValue: ParsedValue, ): void { @@ -309,8 +348,8 @@ export default createSassMigrator( // // Note that order is important within the items in this property: the // first value that can be parsed as a time is assigned to the - // transition-duration, and the second value that can be parsed as a - // time is assigned to transition-delay. + // transition-duration/animation-duration, and the second value that can + // be parsed as a time is assigned to transition-delay/animation-delay. // https://w3c.github.io/csswg-drafts/css-transitions-1/#transition-shorthand-property // // That sounds like an array to me! [0] is duration, [1] is delay. @@ -327,16 +366,18 @@ export default createSassMigrator( // This node could be either the property to animate, or an easing // function. We try mutate the easing function, but if not we assume // it's the property to animate and therefore do not leave a comment. - mutateTransitionFunctionValue(node, decl); + mutateTimingFunctionValue(node, decl, { + ignoreUnknownFunctions: true, + }); } }); if (timings[0]) { - mutateTransitionDurationValue(timings[0], decl); + mutateDurationValue(timings[0], decl); } if (timings[1]) { - mutateTransitionDelayValue(timings[1], decl); + mutateDelayValue(timings[1], decl); } }); } @@ -344,24 +385,50 @@ export default createSassMigrator( return (root) => { methods.walkDecls(root, (decl) => { const handlers: {[key: string]: () => void} = { - 'transition-duration': () => { - parsedValue.nodes.forEach((node) => { - mutateTransitionDurationValue(node, decl); - }); - }, - 'transition-delay': () => { - parsedValue.nodes.forEach((node) => { - mutateTransitionDelayValue(node, decl); - }); - }, - 'transition-timing-function': () => { - parsedValue.nodes.forEach((node) => { - mutateTransitionFunctionValue(node, decl); - }); - }, - transition: () => { - mutateTransitionShorthandValue(decl, parsedValue); - }, + ...(withTransition && { + 'transition-duration': () => { + parsedValue.nodes.forEach((node) => { + mutateDurationValue(node, decl); + }); + }, + 'transition-delay': () => { + parsedValue.nodes.forEach((node) => { + mutateDelayValue(node, decl); + }); + }, + 'transition-timing-function': () => { + parsedValue.nodes.forEach((node) => { + mutateTimingFunctionValue(node, decl, { + ignoreUnknownFunctions: false, + }); + }); + }, + transition: () => { + mutateAnimatableShorthandValue(decl, parsedValue); + }, + }), + ...(withAnimation && { + 'animation-duration': () => { + parsedValue.nodes.forEach((node) => { + mutateDurationValue(node, decl); + }); + }, + 'animation-delay': () => { + parsedValue.nodes.forEach((node) => { + mutateDelayValue(node, decl); + }); + }, + 'animation-timing-function': () => { + parsedValue.nodes.forEach((node) => { + mutateTimingFunctionValue(node, decl, { + ignoreUnknownFunctions: false, + }); + }); + }, + animation: () => { + mutateAnimatableShorthandValue(decl, parsedValue); + }, + }), }; if (!handlers[decl.prop]) { diff --git a/polaris-migrator/src/migrations/replace-sass-animatable/tests/animation-duration.input.scss b/polaris-migrator/src/migrations/replace-sass-animatable/tests/animation-duration.input.scss new file mode 100644 index 00000000000..36e782f09b5 --- /dev/null +++ b/polaris-migrator/src/migrations/replace-sass-animatable/tests/animation-duration.input.scss @@ -0,0 +1,58 @@ +.duration-simple-string-arg { + opacity: 1; + animation-duration: legacy-polaris-v8.duration('none'); + animation-duration: legacy-polaris-v8.duration('fast'); + animation-duration: legacy-polaris-v8.duration('base'); + animation-duration: legacy-polaris-v8.duration('slow'); + animation-duration: legacy-polaris-v8.duration('slower'); + animation-duration: legacy-polaris-v8.duration('slowest'); + animation-duration: legacy-polaris-v8.duration('nonsense'); +} + +.duration-simple-non-string-arg { + opacity: 1; + animation-duration: legacy-polaris-v8.duration(); + animation-duration: legacy-polaris-v8.duration(none); + animation-duration: legacy-polaris-v8.duration(fast); + animation-duration: legacy-polaris-v8.duration(base); + animation-duration: legacy-polaris-v8.duration(slow); + animation-duration: legacy-polaris-v8.duration(slower); + animation-duration: legacy-polaris-v8.duration(slowest); + animation-duration: legacy-polaris-v8.duration(nonsense); +} + +.duration-simple-constant { + opacity: 1; + animation-duration: 0; + animation-duration: 0ms; + animation-duration: 0s; + animation-duration: 50ms; + animation-duration: 0.05s; + animation-duration: 100ms; + animation-duration: 0.1s; + animation-duration: 150ms; + animation-duration: 0.15s; + animation-duration: 200ms; + animation-duration: 0.2s; + animation-duration: 250ms; + animation-duration: 0.25s; + animation-duration: 300ms; + animation-duration: 0.3s; + animation-duration: 350ms; + animation-duration: 0.35s; + animation-duration: 400ms; + animation-duration: 0.4s; + animation-duration: 450ms; + animation-duration: 0.45s; + animation-duration: 500ms; + animation-duration: 0.5s; + animation-duration: 5s; + animation-duration: 16.7s; +} + +.edges { + // foobar isn't a valid duration key + animation-duration: legacy-polaris-v8.duration(foobar); + // can't process variables + animation-duration: $foo; +} diff --git a/polaris-migrator/src/migrations/replace-sass-animatable/tests/animation-duration.output.scss b/polaris-migrator/src/migrations/replace-sass-animatable/tests/animation-duration.output.scss new file mode 100644 index 00000000000..e26598b8fc8 --- /dev/null +++ b/polaris-migrator/src/migrations/replace-sass-animatable/tests/animation-duration.output.scss @@ -0,0 +1,68 @@ +.duration-simple-string-arg { + opacity: 1; + animation-duration: var(--p-duration-0); + animation-duration: var(--p-duration-100); + animation-duration: var(--p-duration-200); + animation-duration: var(--p-duration-300); + animation-duration: var(--p-duration-400); + animation-duration: var(--p-duration-500); + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // warning: Unknown duration key 'nonsense'. + animation-duration: legacy-polaris-v8.duration('nonsense'); +} + +.duration-simple-non-string-arg { + opacity: 1; + animation-duration: var(--p-duration-200); + animation-duration: var(--p-duration-0); + animation-duration: var(--p-duration-100); + animation-duration: var(--p-duration-200); + animation-duration: var(--p-duration-300); + animation-duration: var(--p-duration-400); + animation-duration: var(--p-duration-500); + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // warning: Unknown duration key 'nonsense'. + animation-duration: legacy-polaris-v8.duration(nonsense); +} + +.duration-simple-constant { + opacity: 1; + animation-duration: var(--p-duration-0); + animation-duration: var(--p-duration-0); + animation-duration: var(--p-duration-0); + animation-duration: var(--p-duration-50); + animation-duration: var(--p-duration-50); + animation-duration: var(--p-duration-100); + animation-duration: var(--p-duration-100); + animation-duration: var(--p-duration-150); + animation-duration: var(--p-duration-150); + animation-duration: var(--p-duration-200); + animation-duration: var(--p-duration-200); + animation-duration: var(--p-duration-250); + animation-duration: var(--p-duration-250); + animation-duration: var(--p-duration-300); + animation-duration: var(--p-duration-300); + animation-duration: var(--p-duration-350); + animation-duration: var(--p-duration-350); + animation-duration: var(--p-duration-400); + animation-duration: var(--p-duration-400); + animation-duration: var(--p-duration-450); + animation-duration: var(--p-duration-450); + animation-duration: var(--p-duration-500); + animation-duration: var(--p-duration-500); + animation-duration: var(--p-duration-5000); + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // warning: No matching duration token for '16.7s'. + animation-duration: 16.7s; +} + +.edges { + // foobar isn't a valid duration key + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // warning: Unknown duration key 'foobar'. + animation-duration: legacy-polaris-v8.duration(foobar); + // can't process variables + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // warning: Cannot statically analyse SASS variable $foo. + animation-duration: $foo; +} diff --git a/polaris-migrator/src/migrations/replace-sass-animatable/tests/animation-only.input.scss b/polaris-migrator/src/migrations/replace-sass-animatable/tests/animation-only.input.scss new file mode 100644 index 00000000000..a309a519ef1 --- /dev/null +++ b/polaris-migrator/src/migrations/replace-sass-animatable/tests/animation-only.input.scss @@ -0,0 +1,10 @@ +.foo { + animation: fadeIn 300ms linear; + animation-duration: legacy-polaris-v8.duration(base); + animation-delay: legacy-polaris-v8.duration(); + animation-timing-function: legacy-polaris-v8.easing(base); + transition: fadeIn 300ms linear; + transition-duration: legacy-polaris-v8.duration(base); + transition-delay: legacy-polaris-v8.duration(); + transition-timing-function: legacy-polaris-v8.easing(base); +} diff --git a/polaris-migrator/src/migrations/replace-sass-animatable/tests/animation-only.output.scss b/polaris-migrator/src/migrations/replace-sass-animatable/tests/animation-only.output.scss new file mode 100644 index 00000000000..4fb0ef66f5c --- /dev/null +++ b/polaris-migrator/src/migrations/replace-sass-animatable/tests/animation-only.output.scss @@ -0,0 +1,10 @@ +.foo { + animation: fadeIn var(--p-duration-300) var(--p-linear); + animation-duration: var(--p-duration-200); + animation-delay: var(--p-duration-200); + animation-timing-function: var(--p-ease); + transition: fadeIn 300ms linear; + transition-duration: legacy-polaris-v8.duration(base); + transition-delay: legacy-polaris-v8.duration(); + transition-timing-function: legacy-polaris-v8.easing(base); +} diff --git a/polaris-migrator/src/migrations/replace-sass-animatable/tests/animation-timing-function.input.scss b/polaris-migrator/src/migrations/replace-sass-animatable/tests/animation-timing-function.input.scss new file mode 100644 index 00000000000..d154d5d6cac --- /dev/null +++ b/polaris-migrator/src/migrations/replace-sass-animatable/tests/animation-timing-function.input.scss @@ -0,0 +1,49 @@ +.easing-simple-string-arg { + opacity: 1; + animation-timing-function: legacy-polaris-v8.easing('anticipate'); + animation-timing-function: legacy-polaris-v8.easing('base'); + animation-timing-function: legacy-polaris-v8.easing('excite'); + animation-timing-function: legacy-polaris-v8.easing('in'); + animation-timing-function: legacy-polaris-v8.easing('out'); + animation-timing-function: legacy-polaris-v8.easing('overshoot'); + animation-timing-function: legacy-polaris-v8.easing('nonsense'); +} + +.easing-simple-non-string-arg { + opacity: 1; + animation-timing-function: legacy-polaris-v8.easing(); + animation-timing-function: legacy-polaris-v8.easing(anticipate); + animation-timing-function: legacy-polaris-v8.easing(base); + animation-timing-function: legacy-polaris-v8.easing(excite); + animation-timing-function: legacy-polaris-v8.easing(in); + animation-timing-function: legacy-polaris-v8.easing(out); + animation-timing-function: legacy-polaris-v8.easing(overshoot); + animation-timing-function: legacy-polaris-v8.easing(nonsense); +} + +.easing-simple-builtins { + opacity: 1; + animation-timing-function: linear; + // See: https://w3c.github.io/csswg-drafts/css-easing/#typedef-linear-easing-function + animation-timing-function: linear(1); + animation-timing-function: ease; + animation-timing-function: ease-in; + animation-timing-function: ease-out; + animation-timing-function: ease-in-out; + animation-timing-function: cubic-bezier(0, 0, 1, 1); + // See:https://w3c.github.io/csswg-drafts/css-easing/#typedef-step-easing-function + animation-timing-function: step-start; + animation-timing-function: step-end; + animation-timing-function: steps(1, jump-end); + animation-timing-function: nonsense; +} + +$easingFunc: 'ease-in'; +$foo: 'ease'; + +.edges { + // Can only handle hard coded values + animation-timing-function: legacy-polaris-v8.easing($easingFunc); + // can't process variables + animation-timing-function: $foo; +} diff --git a/polaris-migrator/src/migrations/replace-sass-animatable/tests/animation-timing-function.output.scss b/polaris-migrator/src/migrations/replace-sass-animatable/tests/animation-timing-function.output.scss new file mode 100644 index 00000000000..5655dd30fb5 --- /dev/null +++ b/polaris-migrator/src/migrations/replace-sass-animatable/tests/animation-timing-function.output.scss @@ -0,0 +1,81 @@ +.easing-simple-string-arg { + opacity: 1; + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // warning: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. + animation-timing-function: legacy-polaris-v8.easing('anticipate'); + animation-timing-function: var(--p-ease); + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // warning: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. + animation-timing-function: legacy-polaris-v8.easing('excite'); + animation-timing-function: var(--p-ease-in); + animation-timing-function: var(--p-ease-out); + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // warning: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. + animation-timing-function: legacy-polaris-v8.easing('overshoot'); + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // warning: Unexpected easing function 'nonsense'. + animation-timing-function: legacy-polaris-v8.easing('nonsense'); +} + +.easing-simple-non-string-arg { + opacity: 1; + animation-timing-function: var(--p-ease); + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // warning: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. + animation-timing-function: legacy-polaris-v8.easing(anticipate); + animation-timing-function: var(--p-ease); + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // warning: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. + animation-timing-function: legacy-polaris-v8.easing(excite); + animation-timing-function: var(--p-ease-in); + animation-timing-function: var(--p-ease-out); + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // warning: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. + animation-timing-function: legacy-polaris-v8.easing(overshoot); + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // warning: Unexpected easing function 'nonsense'. + animation-timing-function: legacy-polaris-v8.easing(nonsense); +} + +.easing-simple-builtins { + opacity: 1; + animation-timing-function: var(--p-linear); + // See: https://w3c.github.io/csswg-drafts/css-easing/#typedef-linear-easing-function + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // warning: Unexpected easing function 'linear'. See https://polaris.shopify.com/tokens/motion for possible values. + animation-timing-function: linear(1); + animation-timing-function: var(--p-ease); + animation-timing-function: var(--p-ease-in); + animation-timing-function: var(--p-ease-out); + animation-timing-function: var(--p-ease-in-out); + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // warning: Unexpected easing function 'cubic-bezier'. See https://polaris.shopify.com/tokens/motion for possible values. + animation-timing-function: cubic-bezier(0, 0, 1, 1); + // See:https://w3c.github.io/csswg-drafts/css-easing/#typedef-step-easing-function + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // warning: Unexpected easing function 'step-start'. See https://polaris.shopify.com/tokens/motion for possible values. + animation-timing-function: step-start; + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // warning: Unexpected easing function 'step-end'. See https://polaris.shopify.com/tokens/motion for possible values. + animation-timing-function: step-end; + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // warning: Unexpected easing function 'steps'. See https://polaris.shopify.com/tokens/motion for possible values. + animation-timing-function: steps(1, jump-end); + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // warning: Unexpected easing function 'nonsense'. See https://polaris.shopify.com/tokens/motion for possible values. + animation-timing-function: nonsense; +} + +$easingFunc: 'ease-in'; +$foo: 'ease'; + +.edges { + // Can only handle hard coded values + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // warning: Unexpected easing function '$easingFunc'. + animation-timing-function: legacy-polaris-v8.easing($easingFunc); + // can't process variables + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // warning: Cannot statically analyse SASS variable $foo. + animation-timing-function: $foo; +} diff --git a/polaris-migrator/src/migrations/replace-sass-animatable/tests/animation.input.scss b/polaris-migrator/src/migrations/replace-sass-animatable/tests/animation.input.scss new file mode 100644 index 00000000000..9be784dd06a --- /dev/null +++ b/polaris-migrator/src/migrations/replace-sass-animatable/tests/animation.input.scss @@ -0,0 +1,224 @@ +.easing-shorthand-string-arg { + opacity: 1; + animation: fadeIn 300ms legacy-polaris-v8.easing('anticipate'); + animation: fadeIn 300ms legacy-polaris-v8.easing('base'); + animation: fadeIn 300ms legacy-polaris-v8.easing('excite'); + animation: fadeIn 300ms legacy-polaris-v8.easing('in'); + animation: fadeIn 300ms legacy-polaris-v8.easing('out'); + animation: fadeIn 300ms legacy-polaris-v8.easing('overshoot'); +} + +.easing-shorthand-non-string-arg { + opacity: 1; + animation: fadeIn 300ms legacy-polaris-v8.easing(); + animation: fadeIn 300ms legacy-polaris-v8.easing(anticipate); + animation: fadeIn 300ms legacy-polaris-v8.easing(base); + animation: fadeIn 300ms legacy-polaris-v8.easing(excite); + animation: fadeIn 300ms legacy-polaris-v8.easing(in); + animation: fadeIn 300ms legacy-polaris-v8.easing(out); + animation: fadeIn 300ms legacy-polaris-v8.easing(overshoot); +} + +.easing-shorthand-builtins { + opacity: 1; + animation: fadeIn 300ms linear; + // See: https://w3c.github.io/csswg-drafts/css-easing/#typedef-linear-easing-function + animation: fadeIn 300ms linear(1); + animation: fadeIn 300ms ease; + animation: fadeIn 300ms ease-in; + animation: fadeIn 300ms ease-out; + animation: fadeIn 300ms ease-in-out; + animation: fadeIn 300ms cubic-bezier(0, 0, 1, 1); + // See:https://w3c.github.io/csswg-drafts/css-easing/#typedef-step-easing-function + animation: fadeIn 300ms step-start; + animation: fadeIn 300ms step-end; + animation: fadeIn 300ms steps(1, jump-end); +} + +.easing-multiple-string-arg { + opacity: 1; + animation: fadeIn 300ms legacy-polaris-v8.easing('anticipate'), + left 300ms legacy-polaris-v8.easing('anticipate'); + animation: fadeIn 300ms legacy-polaris-v8.easing('base'), + left 300ms legacy-polaris-v8.easing('base'); + animation: fadeIn 300ms legacy-polaris-v8.easing('excite'), + left 300ms legacy-polaris-v8.easing('excite'); + animation: fadeIn 300ms legacy-polaris-v8.easing('in'), + left 300ms legacy-polaris-v8.easing('in'); + animation: fadeIn 300ms legacy-polaris-v8.easing('out'), + left 300ms legacy-polaris-v8.easing('out'); + animation: fadeIn 300ms legacy-polaris-v8.easing('overshoot'), + left 300ms legacy-polaris-v8.easing('overshoot'); +} + +.easing-multiple-non-string-arg { + opacity: 1; + animation: fadeIn 300ms legacy-polaris-v8.easing(), + left 300ms legacy-polaris-v8.easing(); + animation: fadeIn 300ms legacy-polaris-v8.easing(anticipate), + left 300ms legacy-polaris-v8.easing(anticipate); + animation: fadeIn 300ms legacy-polaris-v8.easing(base), + left 300ms legacy-polaris-v8.easing(base); + animation: fadeIn 300ms legacy-polaris-v8.easing(excite), + left 300ms legacy-polaris-v8.easing(excite); + animation: fadeIn 300ms legacy-polaris-v8.easing(in), + left 300ms legacy-polaris-v8.easing(in); + animation: fadeIn 300ms legacy-polaris-v8.easing(out), + left 300ms legacy-polaris-v8.easing(out); + animation: fadeIn 300ms legacy-polaris-v8.easing(overshoot), + left 300ms legacy-polaris-v8.easing(overshoot); +} + +.easing-multiple-builtins { + opacity: 1; + animation: fadeIn 300ms linear, left 300ms linear; + // See: https://w3c.github.io/csswg-drafts/css-easing/#typedef-linear-easing-function + animation: fadeIn 300ms linear(1), left 300ms linear(1); + animation: fadeIn 300ms ease, left 300ms ease; + animation: fadeIn 300ms ease-in, left 300ms ease-in; + animation: fadeIn 300ms ease-out, left 300ms ease-out; + animation: fadeIn 300ms ease-in-out, left 300ms ease-in-out; + animation: fadeIn 300ms cubic-bezier(0, 0, 1, 1), + left 300ms cubic-bezier(0, 0, 1, 1); + // See:https://w3c.github.io/csswg-drafts/css-easing/#typedef-step-easing-function + animation: fadeIn 300ms step-start, left 300ms step-start; + animation: fadeIn 300ms step-end, left 300ms step-start; + animation: fadeIn 300ms steps(1, jump-end), left 300ms steps(1, jump-end); +} + +.duration-compound-string-arg { + opacity: 1; + animation: fadeIn legacy-polaris-v8.duration('none') linear; + animation: fadeIn legacy-polaris-v8.duration('fast') linear; + animation: fadeIn legacy-polaris-v8.duration('base') linear; + animation: fadeIn legacy-polaris-v8.duration('slow') linear; + animation: fadeIn legacy-polaris-v8.duration('slower') linear; + animation: fadeIn legacy-polaris-v8.duration('slowest') linear; +} + +.duration-compound-non-string-arg { + opacity: 1; + animation: fadeIn legacy-polaris-v8.duration() linear; + animation: fadeIn legacy-polaris-v8.duration(none) linear; + animation: fadeIn legacy-polaris-v8.duration(fast) linear; + animation: fadeIn legacy-polaris-v8.duration(base) linear; + animation: fadeIn legacy-polaris-v8.duration(slow) linear; + animation: fadeIn legacy-polaris-v8.duration(slower) linear; + animation: fadeIn legacy-polaris-v8.duration(slowest) linear; +} + +.duration-compound-constant { + opacity: 1; + animation: fadeIn 0 linear; + animation: fadeIn 0ms linear; + animation: fadeIn 0s linear; + animation: fadeIn 50ms linear; + animation: fadeIn 0.05s linear; + animation: fadeIn 100ms linear; + animation: fadeIn 0.1s linear; + animation: fadeIn 150ms linear; + animation: fadeIn 0.15s linear; + animation: fadeIn 200ms linear; + animation: fadeIn 0.2s linear; + animation: fadeIn 250ms linear; + animation: fadeIn 0.25s linear; + animation: fadeIn 300ms linear; + animation: fadeIn 0.3s linear; + animation: fadeIn 350ms linear; + animation: fadeIn 0.35s linear; + animation: fadeIn 400ms linear; + animation: fadeIn 0.4s linear; + animation: fadeIn 450ms linear; + animation: fadeIn 0.45s linear; + animation: fadeIn 500ms linear; + animation: fadeIn 0.5s linear; + animation: fadeIn 5s linear; +} + +.duration-multiple-string-arg { + opacity: 1; + animation: fadeIn legacy-polaris-v8.duration('none') linear, + left legacy-polaris-v8.duration('none') linear; + animation: fadeIn legacy-polaris-v8.duration('fast') linear, + left legacy-polaris-v8.duration('fast') linear; + animation: fadeIn legacy-polaris-v8.duration('base') linear, + left legacy-polaris-v8.duration('base') linear; + animation: fadeIn legacy-polaris-v8.duration('slow') linear, + left legacy-polaris-v8.duration('slow') linear; + animation: fadeIn legacy-polaris-v8.duration('slower') linear, + left legacy-polaris-v8.duration('slower') linear; + animation: fadeIn legacy-polaris-v8.duration('slowest') linear, + left legacy-polaris-v8.duration('slowest') linear; +} + +.duration-multiple-non-string-arg { + opacity: 1; + animation: fadeIn legacy-polaris-v8.duration() linear, + left legacy-polaris-v8.duration() linear; + animation: fadeIn legacy-polaris-v8.duration(none) linear, + left legacy-polaris-v8.duration(none) linear; + animation: fadeIn legacy-polaris-v8.duration(fast) linear, + left legacy-polaris-v8.duration(fast) linear; + animation: fadeIn legacy-polaris-v8.duration(base) linear, + left legacy-polaris-v8.duration(base) linear; + animation: fadeIn legacy-polaris-v8.duration(slow) linear, + left legacy-polaris-v8.duration(slow) linear; + animation: fadeIn legacy-polaris-v8.duration(slower) linear, + left legacy-polaris-v8.duration(slower) linear; + animation: fadeIn legacy-polaris-v8.duration(slowest) linear, + left legacy-polaris-v8.duration(slowest) linear; +} + +.duration-multiple-constant { + opacity: 1; + animation: fadeIn 0 linear, left 0 linear; + animation: fadeIn 0ms linear, left 0ms linear; + animation: fadeIn 0s linear, left 0s linear; + animation: fadeIn 50ms linear, left 50ms linear; + animation: fadeIn 0.05s linear, left 0.05s linear; + animation: fadeIn 100ms linear, left 100ms linear; + animation: fadeIn 0.1s linear, left 0.1s linear; + animation: fadeIn 150ms linear, left 150ms linear; + animation: fadeIn 0.15s linear, left 0.15s linear; + animation: fadeIn 200ms linear, left 200ms linear; + animation: fadeIn 0.2s linear, left 0.2s linear; + animation: fadeIn 250ms linear, left 250ms linear; + animation: fadeIn 0.25s linear, left 0.25s linear; + animation: fadeIn 300ms linear, left 300ms linear; + animation: fadeIn 0.3s linear, left 0.3s linear; + animation: fadeIn 350ms linear, left 350ms linear; + animation: fadeIn 0.35s linear, left 0.35s linear; + animation: fadeIn 400ms linear, left 400ms linear; + animation: fadeIn 0.4s linear, left 0.4s linear; + animation: fadeIn 450ms linear, left 450ms linear; + animation: fadeIn 0.45s linear, left 0.45s linear; + animation: fadeIn 500ms linear, left 500ms linear; + animation: fadeIn 0.5s linear, left 0.5s linear; + animation: fadeIn 5s linear, left 5s linear; +} + +$foo: 'ease-in'; + +.edges { + // sass calculation + animation: (legacy-polaris-v8.duration() - 33ms) fill linear 33ms; + // Duration comes after easing func + animation: fadeIn linear 0.5s; + // Duration + Delay + animation: fadeIn legacy-polaris-v8.duration(slower) linear + legacy-polaris-v8.duration(fast); + // Duration + Delay after easing func + animation: fadeIn linear legacy-polaris-v8.duration(slower) + legacy-polaris-v8.duration(fast); + // Without an easing function + animation: fill 300ms; + animation: fadeIn $foo 0.5s; + // Count and direction + animation: fadeIn linear 0.5s 1 forwards; + // animation name last + animation: linear 0.5s 1 forwards fadeIn; + // already uses polaris tokens + animation: var(--p-duration-500) var(--p-linear); + // partially uses polaris tokens + animation: var(--p-duration-500) linear; +} diff --git a/polaris-migrator/src/migrations/replace-sass-animatable/tests/animation.output.scss b/polaris-migrator/src/migrations/replace-sass-animatable/tests/animation.output.scss new file mode 100644 index 00000000000..d4d368c5740 --- /dev/null +++ b/polaris-migrator/src/migrations/replace-sass-animatable/tests/animation.output.scss @@ -0,0 +1,325 @@ +.easing-shorthand-string-arg { + opacity: 1; + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // warning: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. + // animation: fadeIn var(--p-duration-300) legacy-polaris-v8.easing("anticipate"); + animation: fadeIn 300ms legacy-polaris-v8.easing('anticipate'); + animation: fadeIn var(--p-duration-300) var(--p-ease); + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // warning: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. + // animation: fadeIn var(--p-duration-300) legacy-polaris-v8.easing("excite"); + animation: fadeIn 300ms legacy-polaris-v8.easing('excite'); + animation: fadeIn var(--p-duration-300) var(--p-ease-in); + animation: fadeIn var(--p-duration-300) var(--p-ease-out); + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // warning: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. + // animation: fadeIn var(--p-duration-300) legacy-polaris-v8.easing("overshoot"); + animation: fadeIn 300ms legacy-polaris-v8.easing('overshoot'); +} + +.easing-shorthand-non-string-arg { + opacity: 1; + animation: fadeIn var(--p-duration-300) var(--p-ease); + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // warning: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. + // animation: fadeIn var(--p-duration-300) legacy-polaris-v8.easing(anticipate); + animation: fadeIn 300ms legacy-polaris-v8.easing(anticipate); + animation: fadeIn var(--p-duration-300) var(--p-ease); + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // warning: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. + // animation: fadeIn var(--p-duration-300) legacy-polaris-v8.easing(excite); + animation: fadeIn 300ms legacy-polaris-v8.easing(excite); + animation: fadeIn var(--p-duration-300) var(--p-ease-in); + animation: fadeIn var(--p-duration-300) var(--p-ease-out); + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // warning: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. + // animation: fadeIn var(--p-duration-300) legacy-polaris-v8.easing(overshoot); + animation: fadeIn 300ms legacy-polaris-v8.easing(overshoot); +} + +.easing-shorthand-builtins { + opacity: 1; + animation: fadeIn var(--p-duration-300) var(--p-linear); + // See: https://w3c.github.io/csswg-drafts/css-easing/#typedef-linear-easing-function + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // warning: Unexpected easing function 'linear'. See https://polaris.shopify.com/tokens/motion for possible values. + // animation: fadeIn var(--p-duration-300) linear(1); + animation: fadeIn 300ms linear(1); + animation: fadeIn var(--p-duration-300) var(--p-ease); + animation: fadeIn var(--p-duration-300) var(--p-ease-in); + animation: fadeIn var(--p-duration-300) var(--p-ease-out); + animation: fadeIn var(--p-duration-300) var(--p-ease-in-out); + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // warning: Unexpected easing function 'cubic-bezier'. See https://polaris.shopify.com/tokens/motion for possible values. + // animation: fadeIn var(--p-duration-300) cubic-bezier(0, 0, 1, 1); + animation: fadeIn 300ms cubic-bezier(0, 0, 1, 1); + // See:https://w3c.github.io/csswg-drafts/css-easing/#typedef-step-easing-function + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // warning: Unexpected easing function 'step-start'. See https://polaris.shopify.com/tokens/motion for possible values. + // animation: fadeIn var(--p-duration-300) step-start; + animation: fadeIn 300ms step-start; + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // warning: Unexpected easing function 'step-end'. See https://polaris.shopify.com/tokens/motion for possible values. + // animation: fadeIn var(--p-duration-300) step-end; + animation: fadeIn 300ms step-end; + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // warning: Unexpected easing function 'steps'. See https://polaris.shopify.com/tokens/motion for possible values. + // animation: fadeIn var(--p-duration-300) steps(1, jump-end); + animation: fadeIn 300ms steps(1, jump-end); +} + +.easing-multiple-string-arg { + opacity: 1; + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // warning: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. + // animation: fadeIn var(--p-duration-300) legacy-polaris-v8.easing("anticipate"), left var(--p-duration-300) legacy-polaris-v8.easing("anticipate"); + animation: fadeIn 300ms legacy-polaris-v8.easing('anticipate'), + left 300ms legacy-polaris-v8.easing('anticipate'); + animation: fadeIn var(--p-duration-300) var(--p-ease), + left var(--p-duration-300) var(--p-ease); + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // warning: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. + // animation: fadeIn var(--p-duration-300) legacy-polaris-v8.easing("excite"), left var(--p-duration-300) legacy-polaris-v8.easing("excite"); + animation: fadeIn 300ms legacy-polaris-v8.easing('excite'), + left 300ms legacy-polaris-v8.easing('excite'); + animation: fadeIn var(--p-duration-300) var(--p-ease-in), + left var(--p-duration-300) var(--p-ease-in); + animation: fadeIn var(--p-duration-300) var(--p-ease-out), + left var(--p-duration-300) var(--p-ease-out); + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // warning: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. + // animation: fadeIn var(--p-duration-300) legacy-polaris-v8.easing("overshoot"), left var(--p-duration-300) legacy-polaris-v8.easing("overshoot"); + animation: fadeIn 300ms legacy-polaris-v8.easing('overshoot'), + left 300ms legacy-polaris-v8.easing('overshoot'); +} + +.easing-multiple-non-string-arg { + opacity: 1; + animation: fadeIn var(--p-duration-300) var(--p-ease), + left var(--p-duration-300) var(--p-ease); + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // warning: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. + // animation: fadeIn var(--p-duration-300) legacy-polaris-v8.easing(anticipate), left var(--p-duration-300) legacy-polaris-v8.easing(anticipate); + animation: fadeIn 300ms legacy-polaris-v8.easing(anticipate), + left 300ms legacy-polaris-v8.easing(anticipate); + animation: fadeIn var(--p-duration-300) var(--p-ease), + left var(--p-duration-300) var(--p-ease); + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // warning: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. + // animation: fadeIn var(--p-duration-300) legacy-polaris-v8.easing(excite), left var(--p-duration-300) legacy-polaris-v8.easing(excite); + animation: fadeIn 300ms legacy-polaris-v8.easing(excite), + left 300ms legacy-polaris-v8.easing(excite); + animation: fadeIn var(--p-duration-300) var(--p-ease-in), + left var(--p-duration-300) var(--p-ease-in); + animation: fadeIn var(--p-duration-300) var(--p-ease-out), + left var(--p-duration-300) var(--p-ease-out); + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // warning: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. + // animation: fadeIn var(--p-duration-300) legacy-polaris-v8.easing(overshoot), left var(--p-duration-300) legacy-polaris-v8.easing(overshoot); + animation: fadeIn 300ms legacy-polaris-v8.easing(overshoot), + left 300ms legacy-polaris-v8.easing(overshoot); +} + +.easing-multiple-builtins { + opacity: 1; + animation: fadeIn var(--p-duration-300) var(--p-linear), + left var(--p-duration-300) var(--p-linear); + // See: https://w3c.github.io/csswg-drafts/css-easing/#typedef-linear-easing-function + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // warning: Unexpected easing function 'linear'. See https://polaris.shopify.com/tokens/motion for possible values. + // animation: fadeIn var(--p-duration-300) linear(1), left var(--p-duration-300) linear(1); + animation: fadeIn 300ms linear(1), left 300ms linear(1); + animation: fadeIn var(--p-duration-300) var(--p-ease), + left var(--p-duration-300) var(--p-ease); + animation: fadeIn var(--p-duration-300) var(--p-ease-in), + left var(--p-duration-300) var(--p-ease-in); + animation: fadeIn var(--p-duration-300) var(--p-ease-out), + left var(--p-duration-300) var(--p-ease-out); + animation: fadeIn var(--p-duration-300) var(--p-ease-in-out), + left var(--p-duration-300) var(--p-ease-in-out); + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // warning: Unexpected easing function 'cubic-bezier'. See https://polaris.shopify.com/tokens/motion for possible values. + // animation: fadeIn var(--p-duration-300) cubic-bezier(0, 0, 1, 1), left var(--p-duration-300) cubic-bezier(0, 0, 1, 1); + animation: fadeIn 300ms cubic-bezier(0, 0, 1, 1), + left 300ms cubic-bezier(0, 0, 1, 1); + // See:https://w3c.github.io/csswg-drafts/css-easing/#typedef-step-easing-function + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // warning: Unexpected easing function 'step-start'. See https://polaris.shopify.com/tokens/motion for possible values. + // animation: fadeIn var(--p-duration-300) step-start, left var(--p-duration-300) step-start; + animation: fadeIn 300ms step-start, left 300ms step-start; + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // warning: Unexpected easing function 'step-end'. See https://polaris.shopify.com/tokens/motion for possible values. + // warning: Unexpected easing function 'step-start'. See https://polaris.shopify.com/tokens/motion for possible values. + // animation: fadeIn var(--p-duration-300) step-end, left var(--p-duration-300) step-start; + animation: fadeIn 300ms step-end, left 300ms step-start; + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // warning: Unexpected easing function 'steps'. See https://polaris.shopify.com/tokens/motion for possible values. + // animation: fadeIn var(--p-duration-300) steps(1, jump-end), left var(--p-duration-300) steps(1, jump-end); + animation: fadeIn 300ms steps(1, jump-end), left 300ms steps(1, jump-end); +} + +.duration-compound-string-arg { + opacity: 1; + animation: fadeIn var(--p-duration-0) var(--p-linear); + animation: fadeIn var(--p-duration-100) var(--p-linear); + animation: fadeIn var(--p-duration-200) var(--p-linear); + animation: fadeIn var(--p-duration-300) var(--p-linear); + animation: fadeIn var(--p-duration-400) var(--p-linear); + animation: fadeIn var(--p-duration-500) var(--p-linear); +} + +.duration-compound-non-string-arg { + opacity: 1; + animation: fadeIn var(--p-duration-200) var(--p-linear); + animation: fadeIn var(--p-duration-0) var(--p-linear); + animation: fadeIn var(--p-duration-100) var(--p-linear); + animation: fadeIn var(--p-duration-200) var(--p-linear); + animation: fadeIn var(--p-duration-300) var(--p-linear); + animation: fadeIn var(--p-duration-400) var(--p-linear); + animation: fadeIn var(--p-duration-500) var(--p-linear); +} + +.duration-compound-constant { + opacity: 1; + animation: fadeIn var(--p-duration-0) var(--p-linear); + animation: fadeIn var(--p-duration-0) var(--p-linear); + animation: fadeIn var(--p-duration-0) var(--p-linear); + animation: fadeIn var(--p-duration-50) var(--p-linear); + animation: fadeIn var(--p-duration-50) var(--p-linear); + animation: fadeIn var(--p-duration-100) var(--p-linear); + animation: fadeIn var(--p-duration-100) var(--p-linear); + animation: fadeIn var(--p-duration-150) var(--p-linear); + animation: fadeIn var(--p-duration-150) var(--p-linear); + animation: fadeIn var(--p-duration-200) var(--p-linear); + animation: fadeIn var(--p-duration-200) var(--p-linear); + animation: fadeIn var(--p-duration-250) var(--p-linear); + animation: fadeIn var(--p-duration-250) var(--p-linear); + animation: fadeIn var(--p-duration-300) var(--p-linear); + animation: fadeIn var(--p-duration-300) var(--p-linear); + animation: fadeIn var(--p-duration-350) var(--p-linear); + animation: fadeIn var(--p-duration-350) var(--p-linear); + animation: fadeIn var(--p-duration-400) var(--p-linear); + animation: fadeIn var(--p-duration-400) var(--p-linear); + animation: fadeIn var(--p-duration-450) var(--p-linear); + animation: fadeIn var(--p-duration-450) var(--p-linear); + animation: fadeIn var(--p-duration-500) var(--p-linear); + animation: fadeIn var(--p-duration-500) var(--p-linear); + animation: fadeIn var(--p-duration-5000) var(--p-linear); +} + +.duration-multiple-string-arg { + opacity: 1; + animation: fadeIn var(--p-duration-0) var(--p-linear), + left var(--p-duration-0) var(--p-linear); + animation: fadeIn var(--p-duration-100) var(--p-linear), + left var(--p-duration-100) var(--p-linear); + animation: fadeIn var(--p-duration-200) var(--p-linear), + left var(--p-duration-200) var(--p-linear); + animation: fadeIn var(--p-duration-300) var(--p-linear), + left var(--p-duration-300) var(--p-linear); + animation: fadeIn var(--p-duration-400) var(--p-linear), + left var(--p-duration-400) var(--p-linear); + animation: fadeIn var(--p-duration-500) var(--p-linear), + left var(--p-duration-500) var(--p-linear); +} + +.duration-multiple-non-string-arg { + opacity: 1; + animation: fadeIn var(--p-duration-200) var(--p-linear), + left var(--p-duration-200) var(--p-linear); + animation: fadeIn var(--p-duration-0) var(--p-linear), + left var(--p-duration-0) var(--p-linear); + animation: fadeIn var(--p-duration-100) var(--p-linear), + left var(--p-duration-100) var(--p-linear); + animation: fadeIn var(--p-duration-200) var(--p-linear), + left var(--p-duration-200) var(--p-linear); + animation: fadeIn var(--p-duration-300) var(--p-linear), + left var(--p-duration-300) var(--p-linear); + animation: fadeIn var(--p-duration-400) var(--p-linear), + left var(--p-duration-400) var(--p-linear); + animation: fadeIn var(--p-duration-500) var(--p-linear), + left var(--p-duration-500) var(--p-linear); +} + +.duration-multiple-constant { + opacity: 1; + animation: fadeIn var(--p-duration-0) var(--p-linear), + left var(--p-duration-0) var(--p-linear); + animation: fadeIn var(--p-duration-0) var(--p-linear), + left var(--p-duration-0) var(--p-linear); + animation: fadeIn var(--p-duration-0) var(--p-linear), + left var(--p-duration-0) var(--p-linear); + animation: fadeIn var(--p-duration-50) var(--p-linear), + left var(--p-duration-50) var(--p-linear); + animation: fadeIn var(--p-duration-50) var(--p-linear), + left var(--p-duration-50) var(--p-linear); + animation: fadeIn var(--p-duration-100) var(--p-linear), + left var(--p-duration-100) var(--p-linear); + animation: fadeIn var(--p-duration-100) var(--p-linear), + left var(--p-duration-100) var(--p-linear); + animation: fadeIn var(--p-duration-150) var(--p-linear), + left var(--p-duration-150) var(--p-linear); + animation: fadeIn var(--p-duration-150) var(--p-linear), + left var(--p-duration-150) var(--p-linear); + animation: fadeIn var(--p-duration-200) var(--p-linear), + left var(--p-duration-200) var(--p-linear); + animation: fadeIn var(--p-duration-200) var(--p-linear), + left var(--p-duration-200) var(--p-linear); + animation: fadeIn var(--p-duration-250) var(--p-linear), + left var(--p-duration-250) var(--p-linear); + animation: fadeIn var(--p-duration-250) var(--p-linear), + left var(--p-duration-250) var(--p-linear); + animation: fadeIn var(--p-duration-300) var(--p-linear), + left var(--p-duration-300) var(--p-linear); + animation: fadeIn var(--p-duration-300) var(--p-linear), + left var(--p-duration-300) var(--p-linear); + animation: fadeIn var(--p-duration-350) var(--p-linear), + left var(--p-duration-350) var(--p-linear); + animation: fadeIn var(--p-duration-350) var(--p-linear), + left var(--p-duration-350) var(--p-linear); + animation: fadeIn var(--p-duration-400) var(--p-linear), + left var(--p-duration-400) var(--p-linear); + animation: fadeIn var(--p-duration-400) var(--p-linear), + left var(--p-duration-400) var(--p-linear); + animation: fadeIn var(--p-duration-450) var(--p-linear), + left var(--p-duration-450) var(--p-linear); + animation: fadeIn var(--p-duration-450) var(--p-linear), + left var(--p-duration-450) var(--p-linear); + animation: fadeIn var(--p-duration-500) var(--p-linear), + left var(--p-duration-500) var(--p-linear); + animation: fadeIn var(--p-duration-500) var(--p-linear), + left var(--p-duration-500) var(--p-linear); + animation: fadeIn var(--p-duration-5000) var(--p-linear), + left var(--p-duration-5000) var(--p-linear); +} + +$foo: 'ease-in'; + +.edges { + // sass calculation + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // warning: Numeric operator detected. + // warning: No matching duration token for '33ms'. + // animation: (legacy-polaris-v8.duration() - 33ms) fill var(--p-linear) 33ms; + animation: (legacy-polaris-v8.duration() - 33ms) fill linear 33ms; + // Duration comes after easing func + animation: fadeIn var(--p-linear) var(--p-duration-500); + // Duration + Delay + animation: fadeIn var(--p-duration-400) var(--p-linear) var(--p-duration-100); + // Duration + Delay after easing func + animation: fadeIn var(--p-linear) var(--p-duration-400) var(--p-duration-100); + // Without an easing function + animation: fill var(--p-duration-300); + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // warning: Cannot statically analyse SASS variable $foo. + // animation: fadeIn $foo var(--p-duration-500); + animation: fadeIn $foo 0.5s; + // Count and direction + animation: fadeIn var(--p-linear) var(--p-duration-500) 1 forwards; + // animation name last + animation: var(--p-linear) var(--p-duration-500) 1 forwards fadeIn; + // already uses polaris tokens + animation: var(--p-duration-500) var(--p-linear); + // partially uses polaris tokens + animation: var(--p-duration-500) var(--p-linear); +} diff --git a/polaris-migrator/src/migrations/replace-sass-animatable/tests/neither.input.scss b/polaris-migrator/src/migrations/replace-sass-animatable/tests/neither.input.scss new file mode 100644 index 00000000000..a309a519ef1 --- /dev/null +++ b/polaris-migrator/src/migrations/replace-sass-animatable/tests/neither.input.scss @@ -0,0 +1,10 @@ +.foo { + animation: fadeIn 300ms linear; + animation-duration: legacy-polaris-v8.duration(base); + animation-delay: legacy-polaris-v8.duration(); + animation-timing-function: legacy-polaris-v8.easing(base); + transition: fadeIn 300ms linear; + transition-duration: legacy-polaris-v8.duration(base); + transition-delay: legacy-polaris-v8.duration(); + transition-timing-function: legacy-polaris-v8.easing(base); +} diff --git a/polaris-migrator/src/migrations/replace-sass-animatable/tests/neither.output.scss b/polaris-migrator/src/migrations/replace-sass-animatable/tests/neither.output.scss new file mode 100644 index 00000000000..a309a519ef1 --- /dev/null +++ b/polaris-migrator/src/migrations/replace-sass-animatable/tests/neither.output.scss @@ -0,0 +1,10 @@ +.foo { + animation: fadeIn 300ms linear; + animation-duration: legacy-polaris-v8.duration(base); + animation-delay: legacy-polaris-v8.duration(); + animation-timing-function: legacy-polaris-v8.easing(base); + transition: fadeIn 300ms linear; + transition-duration: legacy-polaris-v8.duration(base); + transition-delay: legacy-polaris-v8.duration(); + transition-timing-function: legacy-polaris-v8.easing(base); +} diff --git a/polaris-migrator/src/migrations/replace-sass-animatable/tests/replace-sass-animatable.test.ts b/polaris-migrator/src/migrations/replace-sass-animatable/tests/replace-sass-animatable.test.ts new file mode 100644 index 00000000000..1332d63da2d --- /dev/null +++ b/polaris-migrator/src/migrations/replace-sass-animatable/tests/replace-sass-animatable.test.ts @@ -0,0 +1,54 @@ +import {check} from '../../../utilities/testUtils'; + +const migration = 'replace-sass-animatable'; +const fixtures = [ + 'transition', + 'transition-duration', + 'transition-timing-function', + 'animation', + 'animation-duration', + 'animation-timing-function', +]; + +for (const fixture of fixtures) { + check(__dirname, { + fixture, + migration, + extension: 'scss', + options: { + namespace: 'legacy-polaris-v8', + }, + }); +} + +check(__dirname, { + fixture: 'transition-only', + migration, + extension: 'scss', + options: { + namespace: 'legacy-polaris-v8', + withTransition: 'true', + withAnimation: false, + }, +}); + +check(__dirname, { + fixture: 'animation-only', + migration, + extension: 'scss', + options: { + namespace: 'legacy-polaris-v8', + withTransition: 'false', + }, +}); + +check(__dirname, { + fixture: 'neither', + migration, + extension: 'scss', + options: { + namespace: 'legacy-polaris-v8', + withTransition: false, + withAnimation: false, + }, +}); diff --git a/polaris-migrator/src/migrations/replace-sass-animatable/tests/transition-duration.input.scss b/polaris-migrator/src/migrations/replace-sass-animatable/tests/transition-duration.input.scss new file mode 100644 index 00000000000..424b952669f --- /dev/null +++ b/polaris-migrator/src/migrations/replace-sass-animatable/tests/transition-duration.input.scss @@ -0,0 +1,60 @@ +.duration-simple-string-arg { + opacity: 1; + transition-duration: legacy-polaris-v8.duration('none'); + transition-duration: legacy-polaris-v8.duration('fast'); + transition-duration: legacy-polaris-v8.duration('base'); + transition-duration: legacy-polaris-v8.duration('slow'); + transition-duration: legacy-polaris-v8.duration('slower'); + transition-duration: legacy-polaris-v8.duration('slowest'); +} + +.duration-simple-non-string-arg { + opacity: 1; + transition-duration: legacy-polaris-v8.duration(); + transition-duration: legacy-polaris-v8.duration(none); + transition-duration: legacy-polaris-v8.duration(fast); + transition-duration: legacy-polaris-v8.duration(base); + transition-duration: legacy-polaris-v8.duration(slow); + transition-duration: legacy-polaris-v8.duration(slower); + transition-duration: legacy-polaris-v8.duration(slowest); +} + +.duration-simple-constant { + opacity: 1; + transition-duration: 0; + transition-duration: 0ms; + transition-duration: 0s; + transition-duration: 50ms; + transition-duration: 0.05s; + transition-duration: 100ms; + transition-duration: 0.1s; + transition-duration: 150ms; + transition-duration: 0.15s; + transition-duration: 200ms; + transition-duration: 0.2s; + transition-duration: 250ms; + transition-duration: 0.25s; + transition-duration: 300ms; + transition-duration: 0.3s; + transition-duration: 350ms; + transition-duration: 0.35s; + transition-duration: 400ms; + transition-duration: 0.4s; + transition-duration: 450ms; + transition-duration: 0.45s; + transition-duration: 500ms; + transition-duration: 0.5s; + transition-duration: 5s; +} + +$foo: 'ease'; + +.edges { + // sass calculation + // foobar isn't a valid duration key + transition-duration: legacy-polaris-v8.duration(foobar); + // can't process variables + transition-duration: $foo; + transition-delay: legacy-polaris-v8.duration('none'); + transition-timing-function: linear; +} diff --git a/polaris-migrator/src/migrations/replace-sass-animatable/tests/transition-duration.output.scss b/polaris-migrator/src/migrations/replace-sass-animatable/tests/transition-duration.output.scss new file mode 100644 index 00000000000..6a403b9ddc1 --- /dev/null +++ b/polaris-migrator/src/migrations/replace-sass-animatable/tests/transition-duration.output.scss @@ -0,0 +1,64 @@ +.duration-simple-string-arg { + opacity: 1; + transition-duration: var(--p-duration-0); + transition-duration: var(--p-duration-100); + transition-duration: var(--p-duration-200); + transition-duration: var(--p-duration-300); + transition-duration: var(--p-duration-400); + transition-duration: var(--p-duration-500); +} + +.duration-simple-non-string-arg { + opacity: 1; + transition-duration: var(--p-duration-200); + transition-duration: var(--p-duration-0); + transition-duration: var(--p-duration-100); + transition-duration: var(--p-duration-200); + transition-duration: var(--p-duration-300); + transition-duration: var(--p-duration-400); + transition-duration: var(--p-duration-500); +} + +.duration-simple-constant { + opacity: 1; + transition-duration: var(--p-duration-0); + transition-duration: var(--p-duration-0); + transition-duration: var(--p-duration-0); + transition-duration: var(--p-duration-50); + transition-duration: var(--p-duration-50); + transition-duration: var(--p-duration-100); + transition-duration: var(--p-duration-100); + transition-duration: var(--p-duration-150); + transition-duration: var(--p-duration-150); + transition-duration: var(--p-duration-200); + transition-duration: var(--p-duration-200); + transition-duration: var(--p-duration-250); + transition-duration: var(--p-duration-250); + transition-duration: var(--p-duration-300); + transition-duration: var(--p-duration-300); + transition-duration: var(--p-duration-350); + transition-duration: var(--p-duration-350); + transition-duration: var(--p-duration-400); + transition-duration: var(--p-duration-400); + transition-duration: var(--p-duration-450); + transition-duration: var(--p-duration-450); + transition-duration: var(--p-duration-500); + transition-duration: var(--p-duration-500); + transition-duration: var(--p-duration-5000); +} + +$foo: 'ease'; + +.edges { + // sass calculation + // foobar isn't a valid duration key + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // warning: Unknown duration key 'foobar'. + transition-duration: legacy-polaris-v8.duration(foobar); + // can't process variables + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // warning: Cannot statically analyse SASS variable $foo. + transition-duration: $foo; + transition-delay: var(--p-duration-0); + transition-timing-function: var(--p-linear); +} diff --git a/polaris-migrator/src/migrations/replace-sass-animatable/tests/transition-only.input.scss b/polaris-migrator/src/migrations/replace-sass-animatable/tests/transition-only.input.scss new file mode 100644 index 00000000000..a309a519ef1 --- /dev/null +++ b/polaris-migrator/src/migrations/replace-sass-animatable/tests/transition-only.input.scss @@ -0,0 +1,10 @@ +.foo { + animation: fadeIn 300ms linear; + animation-duration: legacy-polaris-v8.duration(base); + animation-delay: legacy-polaris-v8.duration(); + animation-timing-function: legacy-polaris-v8.easing(base); + transition: fadeIn 300ms linear; + transition-duration: legacy-polaris-v8.duration(base); + transition-delay: legacy-polaris-v8.duration(); + transition-timing-function: legacy-polaris-v8.easing(base); +} diff --git a/polaris-migrator/src/migrations/replace-sass-animatable/tests/transition-only.output.scss b/polaris-migrator/src/migrations/replace-sass-animatable/tests/transition-only.output.scss new file mode 100644 index 00000000000..dc611f99011 --- /dev/null +++ b/polaris-migrator/src/migrations/replace-sass-animatable/tests/transition-only.output.scss @@ -0,0 +1,10 @@ +.foo { + animation: fadeIn 300ms linear; + animation-duration: legacy-polaris-v8.duration(base); + animation-delay: legacy-polaris-v8.duration(); + animation-timing-function: legacy-polaris-v8.easing(base); + transition: fadeIn var(--p-duration-300) var(--p-linear); + transition-duration: var(--p-duration-200); + transition-delay: var(--p-duration-200); + transition-timing-function: var(--p-ease); +} diff --git a/polaris-migrator/src/migrations/replace-sass-animatable/tests/transition-timing-function.input.scss b/polaris-migrator/src/migrations/replace-sass-animatable/tests/transition-timing-function.input.scss new file mode 100644 index 00000000000..4adbf3c7394 --- /dev/null +++ b/polaris-migrator/src/migrations/replace-sass-animatable/tests/transition-timing-function.input.scss @@ -0,0 +1,48 @@ +.easing-simple-string-arg { + opacity: 1; + transition-timing-function: legacy-polaris-v8.easing('anticipate'); + transition-timing-function: legacy-polaris-v8.easing('base'); + transition-timing-function: legacy-polaris-v8.easing('excite'); + transition-timing-function: legacy-polaris-v8.easing('in'); + transition-timing-function: legacy-polaris-v8.easing('out'); + transition-timing-function: legacy-polaris-v8.easing('overshoot'); +} + +.easing-simple-non-string-arg { + opacity: 1; + transition-timing-function: legacy-polaris-v8.easing(); + transition-timing-function: legacy-polaris-v8.easing(anticipate); + transition-timing-function: legacy-polaris-v8.easing(base); + transition-timing-function: legacy-polaris-v8.easing(excite); + transition-timing-function: legacy-polaris-v8.easing(in); + transition-timing-function: legacy-polaris-v8.easing(out); + transition-timing-function: legacy-polaris-v8.easing(overshoot); +} + +.easing-simple-builtins { + opacity: 1; + transition-timing-function: linear; + // See: https://w3c.github.io/csswg-drafts/css-easing/#typedef-linear-easing-function + transition-timing-function: linear(1); + transition-timing-function: ease; + transition-timing-function: ease-in; + transition-timing-function: ease-out; + transition-timing-function: ease-in-out; + transition-timing-function: cubic-bezier(0, 0, 1, 1); + // See:https://w3c.github.io/csswg-drafts/css-easing/#typedef-step-easing-function + transition-timing-function: step-start; + transition-timing-function: step-end; + transition-timing-function: steps(1, jump-end); +} + +$easingFunc: 'ease-in'; +$foo: 'ease'; + +.edges { + // Unknown values are flagged + transition-timing-function: legacy-polaris-v8.easing(foobar); + // Can only handle hard coded values + transition-timing-function: legacy-polaris-v8.easing($easingFunc); + // can't process variables + transition-timing-function: $foo; +} diff --git a/polaris-migrator/src/migrations/replace-sass-animatable/tests/transition-timing-function.output.scss b/polaris-migrator/src/migrations/replace-sass-animatable/tests/transition-timing-function.output.scss new file mode 100644 index 00000000000..52c42ebd445 --- /dev/null +++ b/polaris-migrator/src/migrations/replace-sass-animatable/tests/transition-timing-function.output.scss @@ -0,0 +1,76 @@ +.easing-simple-string-arg { + opacity: 1; + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // warning: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. + transition-timing-function: legacy-polaris-v8.easing('anticipate'); + transition-timing-function: var(--p-ease); + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // warning: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. + transition-timing-function: legacy-polaris-v8.easing('excite'); + transition-timing-function: var(--p-ease-in); + transition-timing-function: var(--p-ease-out); + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // warning: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. + transition-timing-function: legacy-polaris-v8.easing('overshoot'); +} + +.easing-simple-non-string-arg { + opacity: 1; + transition-timing-function: var(--p-ease); + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // warning: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. + transition-timing-function: legacy-polaris-v8.easing(anticipate); + transition-timing-function: var(--p-ease); + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // warning: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. + transition-timing-function: legacy-polaris-v8.easing(excite); + transition-timing-function: var(--p-ease-in); + transition-timing-function: var(--p-ease-out); + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // warning: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. + transition-timing-function: legacy-polaris-v8.easing(overshoot); +} + +.easing-simple-builtins { + opacity: 1; + transition-timing-function: var(--p-linear); + // See: https://w3c.github.io/csswg-drafts/css-easing/#typedef-linear-easing-function + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // warning: Unexpected easing function 'linear'. See https://polaris.shopify.com/tokens/motion for possible values. + transition-timing-function: linear(1); + transition-timing-function: var(--p-ease); + transition-timing-function: var(--p-ease-in); + transition-timing-function: var(--p-ease-out); + transition-timing-function: var(--p-ease-in-out); + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // warning: Unexpected easing function 'cubic-bezier'. See https://polaris.shopify.com/tokens/motion for possible values. + transition-timing-function: cubic-bezier(0, 0, 1, 1); + // See:https://w3c.github.io/csswg-drafts/css-easing/#typedef-step-easing-function + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // warning: Unexpected easing function 'step-start'. See https://polaris.shopify.com/tokens/motion for possible values. + transition-timing-function: step-start; + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // warning: Unexpected easing function 'step-end'. See https://polaris.shopify.com/tokens/motion for possible values. + transition-timing-function: step-end; + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // warning: Unexpected easing function 'steps'. See https://polaris.shopify.com/tokens/motion for possible values. + transition-timing-function: steps(1, jump-end); +} + +$easingFunc: 'ease-in'; +$foo: 'ease'; + +.edges { + // Unknown values are flagged + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // warning: Unexpected easing function 'foobar'. + transition-timing-function: legacy-polaris-v8.easing(foobar); + // Can only handle hard coded values + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // warning: Unexpected easing function '$easingFunc'. + transition-timing-function: legacy-polaris-v8.easing($easingFunc); + // can't process variables + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // warning: Cannot statically analyse SASS variable $foo. + transition-timing-function: $foo; +} diff --git a/polaris-migrator/src/migrations/replace-sass-transition/tests/replace-sass-duration.input.scss b/polaris-migrator/src/migrations/replace-sass-animatable/tests/transition.input.scss similarity index 56% rename from polaris-migrator/src/migrations/replace-sass-transition/tests/replace-sass-duration.input.scss rename to polaris-migrator/src/migrations/replace-sass-animatable/tests/transition.input.scss index 11ea0ce75cf..4c891bfce7d 100644 --- a/polaris-migrator/src/migrations/replace-sass-transition/tests/replace-sass-duration.input.scss +++ b/polaris-migrator/src/migrations/replace-sass-animatable/tests/transition.input.scss @@ -1,52 +1,3 @@ -.duration-simple-string-arg { - opacity: 1; - transition-duration: legacy-polaris-v8.duration('none'); - transition-duration: legacy-polaris-v8.duration('fast'); - transition-duration: legacy-polaris-v8.duration('base'); - transition-duration: legacy-polaris-v8.duration('slow'); - transition-duration: legacy-polaris-v8.duration('slower'); - transition-duration: legacy-polaris-v8.duration('slowest'); -} - -.duration-simple-non-string-arg { - opacity: 1; - transition-duration: legacy-polaris-v8.duration(); - transition-duration: legacy-polaris-v8.duration(none); - transition-duration: legacy-polaris-v8.duration(fast); - transition-duration: legacy-polaris-v8.duration(base); - transition-duration: legacy-polaris-v8.duration(slow); - transition-duration: legacy-polaris-v8.duration(slower); - transition-duration: legacy-polaris-v8.duration(slowest); -} - -.duration-simple-constant { - opacity: 1; - transition-duration: 0; - transition-duration: 0ms; - transition-duration: 0s; - transition-duration: 50ms; - transition-duration: 0.05s; - transition-duration: 100ms; - transition-duration: 0.1s; - transition-duration: 150ms; - transition-duration: 0.15s; - transition-duration: 200ms; - transition-duration: 0.2s; - transition-duration: 250ms; - transition-duration: 0.25s; - transition-duration: 300ms; - transition-duration: 0.3s; - transition-duration: 350ms; - transition-duration: 0.35s; - transition-duration: 400ms; - transition-duration: 0.4s; - transition-duration: 450ms; - transition-duration: 0.45s; - transition-duration: 500ms; - transition-duration: 0.5s; - transition-duration: 5s; -} - .duration-compound-string-arg { opacity: 1; transition: opacity legacy-polaris-v8.duration('none') linear; @@ -158,6 +109,96 @@ transition: opacity 5s linear, left 5s linear; } +.easing-shorthand-string-arg { + opacity: 1; + transition: opacity 300ms legacy-polaris-v8.easing('anticipate'); + transition: opacity 300ms legacy-polaris-v8.easing('base'); + transition: opacity 300ms legacy-polaris-v8.easing('excite'); + transition: opacity 300ms legacy-polaris-v8.easing('in'); + transition: opacity 300ms legacy-polaris-v8.easing('out'); + transition: opacity 300ms legacy-polaris-v8.easing('overshoot'); +} + +.easing-shorthand-non-string-arg { + opacity: 1; + transition: opacity 300ms legacy-polaris-v8.easing(); + transition: opacity 300ms legacy-polaris-v8.easing(anticipate); + transition: opacity 300ms legacy-polaris-v8.easing(base); + transition: opacity 300ms legacy-polaris-v8.easing(excite); + transition: opacity 300ms legacy-polaris-v8.easing(in); + transition: opacity 300ms legacy-polaris-v8.easing(out); + transition: opacity 300ms legacy-polaris-v8.easing(overshoot); +} + +.easing-shorthand-builtins { + opacity: 1; + transition: opacity 300ms linear; + // See: https://w3c.github.io/csswg-drafts/css-easing/#typedef-linear-easing-function + transition: opacity 300ms linear(1); + transition: opacity 300ms ease; + transition: opacity 300ms ease-in; + transition: opacity 300ms ease-out; + transition: opacity 300ms ease-in-out; + transition: opacity 300ms cubic-bezier(0, 0, 1, 1); + // See:https://w3c.github.io/csswg-drafts/css-easing/#typedef-step-easing-function + transition: opacity 300ms step-start; + transition: opacity 300ms step-end; + transition: opacity 300ms steps(1, jump-end); +} + +.easing-multiple-string-arg { + opacity: 1; + transition: opacity 300ms legacy-polaris-v8.easing('anticipate'), + left 300ms legacy-polaris-v8.easing('anticipate'); + transition: opacity 300ms legacy-polaris-v8.easing('base'), + left 300ms legacy-polaris-v8.easing('base'); + transition: opacity 300ms legacy-polaris-v8.easing('excite'), + left 300ms legacy-polaris-v8.easing('excite'); + transition: opacity 300ms legacy-polaris-v8.easing('in'), + left 300ms legacy-polaris-v8.easing('in'); + transition: opacity 300ms legacy-polaris-v8.easing('out'), + left 300ms legacy-polaris-v8.easing('out'); + transition: opacity 300ms legacy-polaris-v8.easing('overshoot'), + left 300ms legacy-polaris-v8.easing('overshoot'); +} + +.easing-multiple-non-string-arg { + opacity: 1; + transition: opacity 300ms legacy-polaris-v8.easing(), + left 300ms legacy-polaris-v8.easing(); + transition: opacity 300ms legacy-polaris-v8.easing(anticipate), + left 300ms legacy-polaris-v8.easing(anticipate); + transition: opacity 300ms legacy-polaris-v8.easing(base), + left 300ms legacy-polaris-v8.easing(base); + transition: opacity 300ms legacy-polaris-v8.easing(excite), + left 300ms legacy-polaris-v8.easing(excite); + transition: opacity 300ms legacy-polaris-v8.easing(in), + left 300ms legacy-polaris-v8.easing(in); + transition: opacity 300ms legacy-polaris-v8.easing(out), + left 300ms legacy-polaris-v8.easing(out); + transition: opacity 300ms legacy-polaris-v8.easing(overshoot), + left 300ms legacy-polaris-v8.easing(overshoot); +} + +.easing-multiple-builtins { + opacity: 1; + transition: opacity 300ms linear, left 300ms linear; + // See: https://w3c.github.io/csswg-drafts/css-easing/#typedef-linear-easing-function + transition: opacity 300ms linear(1), left 300ms linear(1); + transition: opacity 300ms ease, left 300ms ease; + transition: opacity 300ms ease-in, left 300ms ease-in; + transition: opacity 300ms ease-out, left 300ms ease-out; + transition: opacity 300ms ease-in-out, left 300ms ease-in-out; + transition: opacity 300ms cubic-bezier(0, 0, 1, 1), + left 300ms cubic-bezier(0, 0, 1, 1); + // See:https://w3c.github.io/csswg-drafts/css-easing/#typedef-step-easing-function + transition: opacity 300ms step-start, left 300ms step-start; + transition: opacity 300ms step-end, left 300ms step-start; + transition: opacity 300ms steps(1, jump-end), left 300ms steps(1, jump-end); +} + +$foo: 'ease'; + .edges { // sass calculation transition: (legacy-polaris-v8.duration() - 33ms) fill linear 33ms; @@ -169,9 +210,11 @@ // Duration + Delay after easing func transition: opacity linear legacy-polaris-v8.duration(slower) legacy-polaris-v8.duration(fast); - // foobar isn't a valid duration key - transition-duration: legacy-polaris-v8.duration(foobar); - // can't process variables - transition-duration: $foo; transition: opacity $foo 0.5s; + // already uses polaris tokens + transition: var(--p-duration-500) var(--p-linear); + // partially uses polaris tokens + transition: var(--p-duration-500) linear; + // Without an easing function + transition: fill 300ms; } diff --git a/polaris-migrator/src/migrations/replace-sass-transition/tests/replace-sass-easing.output.scss b/polaris-migrator/src/migrations/replace-sass-animatable/tests/transition.output.scss similarity index 62% rename from polaris-migrator/src/migrations/replace-sass-transition/tests/replace-sass-easing.output.scss rename to polaris-migrator/src/migrations/replace-sass-animatable/tests/transition.output.scss index 538388962db..0dc467d4e3c 100644 --- a/polaris-migrator/src/migrations/replace-sass-transition/tests/replace-sass-easing.output.scss +++ b/polaris-migrator/src/migrations/replace-sass-animatable/tests/transition.output.scss @@ -1,60 +1,136 @@ -.easing-simple-string-arg { +.duration-compound-string-arg { opacity: 1; - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. - transition-timing-function: legacy-polaris-v8.easing('anticipate'); - transition-timing-function: var(--p-ease); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. - transition-timing-function: legacy-polaris-v8.easing('excite'); - transition-timing-function: var(--p-ease-in); - transition-timing-function: var(--p-ease-out); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. - transition-timing-function: legacy-polaris-v8.easing('overshoot'); + transition: opacity var(--p-duration-0) var(--p-linear); + transition: opacity var(--p-duration-100) var(--p-linear); + transition: opacity var(--p-duration-200) var(--p-linear); + transition: opacity var(--p-duration-300) var(--p-linear); + transition: opacity var(--p-duration-400) var(--p-linear); + transition: opacity var(--p-duration-500) var(--p-linear); } -.easing-simple-non-string-arg { +.duration-compound-non-string-arg { opacity: 1; - transition-timing-function: var(--p-ease); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. - transition-timing-function: legacy-polaris-v8.easing(anticipate); - transition-timing-function: var(--p-ease); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. - transition-timing-function: legacy-polaris-v8.easing(excite); - transition-timing-function: var(--p-ease-in); - transition-timing-function: var(--p-ease-out); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values. - transition-timing-function: legacy-polaris-v8.easing(overshoot); + transition: opacity var(--p-duration-200) var(--p-linear); + transition: opacity var(--p-duration-0) var(--p-linear); + transition: opacity var(--p-duration-100) var(--p-linear); + transition: opacity var(--p-duration-200) var(--p-linear); + transition: opacity var(--p-duration-300) var(--p-linear); + transition: opacity var(--p-duration-400) var(--p-linear); + transition: opacity var(--p-duration-500) var(--p-linear); } -.easing-simple-builtins { +.duration-compound-constant { opacity: 1; - transition-timing-function: var(--p-linear); - // See: https://w3c.github.io/csswg-drafts/css-easing/#typedef-linear-easing-function - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: Unexpected easing function 'linear'. See https://polaris.shopify.com/tokens/motion for possible values. - transition-timing-function: linear(1); - transition-timing-function: var(--p-ease); - transition-timing-function: var(--p-ease-in); - transition-timing-function: var(--p-ease-out); - transition-timing-function: var(--p-ease-in-out); - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: Unexpected easing function 'cubic-bezier'. See https://polaris.shopify.com/tokens/motion for possible values. - transition-timing-function: cubic-bezier(0, 0, 1, 1); - // See:https://w3c.github.io/csswg-drafts/css-easing/#typedef-step-easing-function - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: Unexpected easing function 'step-start'. See https://polaris.shopify.com/tokens/motion for possible values. - transition-timing-function: step-start; - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: Unexpected easing function 'step-end'. See https://polaris.shopify.com/tokens/motion for possible values. - transition-timing-function: step-end; - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: Unexpected easing function 'steps'. See https://polaris.shopify.com/tokens/motion for possible values. - transition-timing-function: steps(1, jump-end); + transition: opacity var(--p-duration-0) var(--p-linear); + transition: opacity var(--p-duration-0) var(--p-linear); + transition: opacity var(--p-duration-0) var(--p-linear); + transition: opacity var(--p-duration-50) var(--p-linear); + transition: opacity var(--p-duration-50) var(--p-linear); + transition: opacity var(--p-duration-100) var(--p-linear); + transition: opacity var(--p-duration-100) var(--p-linear); + transition: opacity var(--p-duration-150) var(--p-linear); + transition: opacity var(--p-duration-150) var(--p-linear); + transition: opacity var(--p-duration-200) var(--p-linear); + transition: opacity var(--p-duration-200) var(--p-linear); + transition: opacity var(--p-duration-250) var(--p-linear); + transition: opacity var(--p-duration-250) var(--p-linear); + transition: opacity var(--p-duration-300) var(--p-linear); + transition: opacity var(--p-duration-300) var(--p-linear); + transition: opacity var(--p-duration-350) var(--p-linear); + transition: opacity var(--p-duration-350) var(--p-linear); + transition: opacity var(--p-duration-400) var(--p-linear); + transition: opacity var(--p-duration-400) var(--p-linear); + transition: opacity var(--p-duration-450) var(--p-linear); + transition: opacity var(--p-duration-450) var(--p-linear); + transition: opacity var(--p-duration-500) var(--p-linear); + transition: opacity var(--p-duration-500) var(--p-linear); + transition: opacity var(--p-duration-5000) var(--p-linear); +} + +.duration-multiple-string-arg { + opacity: 1; + transition: opacity var(--p-duration-0) var(--p-linear), + left var(--p-duration-0) var(--p-linear); + transition: opacity var(--p-duration-100) var(--p-linear), + left var(--p-duration-100) var(--p-linear); + transition: opacity var(--p-duration-200) var(--p-linear), + left var(--p-duration-200) var(--p-linear); + transition: opacity var(--p-duration-300) var(--p-linear), + left var(--p-duration-300) var(--p-linear); + transition: opacity var(--p-duration-400) var(--p-linear), + left var(--p-duration-400) var(--p-linear); + transition: opacity var(--p-duration-500) var(--p-linear), + left var(--p-duration-500) var(--p-linear); +} + +.duration-multiple-non-string-arg { + opacity: 1; + transition: opacity var(--p-duration-200) var(--p-linear), + left var(--p-duration-200) var(--p-linear); + transition: opacity var(--p-duration-0) var(--p-linear), + left var(--p-duration-0) var(--p-linear); + transition: opacity var(--p-duration-100) var(--p-linear), + left var(--p-duration-100) var(--p-linear); + transition: opacity var(--p-duration-200) var(--p-linear), + left var(--p-duration-200) var(--p-linear); + transition: opacity var(--p-duration-300) var(--p-linear), + left var(--p-duration-300) var(--p-linear); + transition: opacity var(--p-duration-400) var(--p-linear), + left var(--p-duration-400) var(--p-linear); + transition: opacity var(--p-duration-500) var(--p-linear), + left var(--p-duration-500) var(--p-linear); +} + +.duration-multiple-constant { + opacity: 1; + transition: opacity var(--p-duration-0) var(--p-linear), + left var(--p-duration-0) var(--p-linear); + transition: opacity var(--p-duration-0) var(--p-linear), + left var(--p-duration-0) var(--p-linear); + transition: opacity var(--p-duration-0) var(--p-linear), + left var(--p-duration-0) var(--p-linear); + transition: opacity var(--p-duration-50) var(--p-linear), + left var(--p-duration-50) var(--p-linear); + transition: opacity var(--p-duration-50) var(--p-linear), + left var(--p-duration-50) var(--p-linear); + transition: opacity var(--p-duration-100) var(--p-linear), + left var(--p-duration-100) var(--p-linear); + transition: opacity var(--p-duration-100) var(--p-linear), + left var(--p-duration-100) var(--p-linear); + transition: opacity var(--p-duration-150) var(--p-linear), + left var(--p-duration-150) var(--p-linear); + transition: opacity var(--p-duration-150) var(--p-linear), + left var(--p-duration-150) var(--p-linear); + transition: opacity var(--p-duration-200) var(--p-linear), + left var(--p-duration-200) var(--p-linear); + transition: opacity var(--p-duration-200) var(--p-linear), + left var(--p-duration-200) var(--p-linear); + transition: opacity var(--p-duration-250) var(--p-linear), + left var(--p-duration-250) var(--p-linear); + transition: opacity var(--p-duration-250) var(--p-linear), + left var(--p-duration-250) var(--p-linear); + transition: opacity var(--p-duration-300) var(--p-linear), + left var(--p-duration-300) var(--p-linear); + transition: opacity var(--p-duration-300) var(--p-linear), + left var(--p-duration-300) var(--p-linear); + transition: opacity var(--p-duration-350) var(--p-linear), + left var(--p-duration-350) var(--p-linear); + transition: opacity var(--p-duration-350) var(--p-linear), + left var(--p-duration-350) var(--p-linear); + transition: opacity var(--p-duration-400) var(--p-linear), + left var(--p-duration-400) var(--p-linear); + transition: opacity var(--p-duration-400) var(--p-linear), + left var(--p-duration-400) var(--p-linear); + transition: opacity var(--p-duration-450) var(--p-linear), + left var(--p-duration-450) var(--p-linear); + transition: opacity var(--p-duration-450) var(--p-linear), + left var(--p-duration-450) var(--p-linear); + transition: opacity var(--p-duration-500) var(--p-linear), + left var(--p-duration-500) var(--p-linear); + transition: opacity var(--p-duration-500) var(--p-linear), + left var(--p-duration-500) var(--p-linear); + transition: opacity var(--p-duration-5000) var(--p-linear), + left var(--p-duration-5000) var(--p-linear); } .easing-shorthand-string-arg { @@ -217,25 +293,31 @@ transition: opacity 300ms steps(1, jump-end), left 300ms steps(1, jump-end); } -$easingFunc: 'ease-in'; +$foo: 'ease'; .edges { - // Without an easing function - transition: fill var(--p-duration-300); - // Unknown values are flagged - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: Unexpected easing function 'foobar'. - transition-timing-function: legacy-polaris-v8.easing(foobar); - // Can only handle hard coded values - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: Unexpected easing function '$easingFunc'. - transition-timing-function: legacy-polaris-v8.easing($easingFunc); - // can't process variables - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: Cannot statically analyse SASS variable $foo. - transition-timing-function: $foo; + // sass calculation + // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. + // warning: Numeric operator detected. + // warning: No matching duration token for '33ms'. + // transition: (legacy-polaris-v8.duration() - 33ms) fill var(--p-linear) 33ms; + transition: (legacy-polaris-v8.duration() - 33ms) fill linear 33ms; + // Duration comes after easing func + transition: opacity var(--p-linear) var(--p-duration-500); + // Duration + Delay + transition: opacity var(--p-duration-400) var(--p-linear) + var(--p-duration-100); + // Duration + Delay after easing func + transition: opacity var(--p-linear) var(--p-duration-400) + var(--p-duration-100); // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. // warning: Cannot statically analyse SASS variable $foo. // transition: opacity $foo var(--p-duration-500); transition: opacity $foo 0.5s; + // already uses polaris tokens + transition: var(--p-duration-500) var(--p-linear); + // partially uses polaris tokens + transition: var(--p-duration-500) var(--p-linear); + // Without an easing function + transition: fill var(--p-duration-300); } diff --git a/polaris-migrator/src/migrations/replace-sass-transition/tests/replace-sass-duration.output.scss b/polaris-migrator/src/migrations/replace-sass-transition/tests/replace-sass-duration.output.scss deleted file mode 100644 index 26bbdab8b6b..00000000000 --- a/polaris-migrator/src/migrations/replace-sass-transition/tests/replace-sass-duration.output.scss +++ /dev/null @@ -1,212 +0,0 @@ -.duration-simple-string-arg { - opacity: 1; - transition-duration: var(--p-duration-0); - transition-duration: var(--p-duration-100); - transition-duration: var(--p-duration-200); - transition-duration: var(--p-duration-300); - transition-duration: var(--p-duration-400); - transition-duration: var(--p-duration-500); -} - -.duration-simple-non-string-arg { - opacity: 1; - transition-duration: var(--p-duration-200); - transition-duration: var(--p-duration-0); - transition-duration: var(--p-duration-100); - transition-duration: var(--p-duration-200); - transition-duration: var(--p-duration-300); - transition-duration: var(--p-duration-400); - transition-duration: var(--p-duration-500); -} - -.duration-simple-constant { - opacity: 1; - transition-duration: var(--p-duration-0); - transition-duration: var(--p-duration-0); - transition-duration: var(--p-duration-0); - transition-duration: var(--p-duration-50); - transition-duration: var(--p-duration-50); - transition-duration: var(--p-duration-100); - transition-duration: var(--p-duration-100); - transition-duration: var(--p-duration-150); - transition-duration: var(--p-duration-150); - transition-duration: var(--p-duration-200); - transition-duration: var(--p-duration-200); - transition-duration: var(--p-duration-250); - transition-duration: var(--p-duration-250); - transition-duration: var(--p-duration-300); - transition-duration: var(--p-duration-300); - transition-duration: var(--p-duration-350); - transition-duration: var(--p-duration-350); - transition-duration: var(--p-duration-400); - transition-duration: var(--p-duration-400); - transition-duration: var(--p-duration-450); - transition-duration: var(--p-duration-450); - transition-duration: var(--p-duration-500); - transition-duration: var(--p-duration-500); - transition-duration: var(--p-duration-5000); -} - -.duration-compound-string-arg { - opacity: 1; - transition: opacity var(--p-duration-0) var(--p-linear); - transition: opacity var(--p-duration-100) var(--p-linear); - transition: opacity var(--p-duration-200) var(--p-linear); - transition: opacity var(--p-duration-300) var(--p-linear); - transition: opacity var(--p-duration-400) var(--p-linear); - transition: opacity var(--p-duration-500) var(--p-linear); -} - -.duration-compound-non-string-arg { - opacity: 1; - transition: opacity var(--p-duration-200) var(--p-linear); - transition: opacity var(--p-duration-0) var(--p-linear); - transition: opacity var(--p-duration-100) var(--p-linear); - transition: opacity var(--p-duration-200) var(--p-linear); - transition: opacity var(--p-duration-300) var(--p-linear); - transition: opacity var(--p-duration-400) var(--p-linear); - transition: opacity var(--p-duration-500) var(--p-linear); -} - -.duration-compound-constant { - opacity: 1; - transition: opacity var(--p-duration-0) var(--p-linear); - transition: opacity var(--p-duration-0) var(--p-linear); - transition: opacity var(--p-duration-0) var(--p-linear); - transition: opacity var(--p-duration-50) var(--p-linear); - transition: opacity var(--p-duration-50) var(--p-linear); - transition: opacity var(--p-duration-100) var(--p-linear); - transition: opacity var(--p-duration-100) var(--p-linear); - transition: opacity var(--p-duration-150) var(--p-linear); - transition: opacity var(--p-duration-150) var(--p-linear); - transition: opacity var(--p-duration-200) var(--p-linear); - transition: opacity var(--p-duration-200) var(--p-linear); - transition: opacity var(--p-duration-250) var(--p-linear); - transition: opacity var(--p-duration-250) var(--p-linear); - transition: opacity var(--p-duration-300) var(--p-linear); - transition: opacity var(--p-duration-300) var(--p-linear); - transition: opacity var(--p-duration-350) var(--p-linear); - transition: opacity var(--p-duration-350) var(--p-linear); - transition: opacity var(--p-duration-400) var(--p-linear); - transition: opacity var(--p-duration-400) var(--p-linear); - transition: opacity var(--p-duration-450) var(--p-linear); - transition: opacity var(--p-duration-450) var(--p-linear); - transition: opacity var(--p-duration-500) var(--p-linear); - transition: opacity var(--p-duration-500) var(--p-linear); - transition: opacity var(--p-duration-5000) var(--p-linear); -} - -.duration-multiple-string-arg { - opacity: 1; - transition: opacity var(--p-duration-0) var(--p-linear), - left var(--p-duration-0) var(--p-linear); - transition: opacity var(--p-duration-100) var(--p-linear), - left var(--p-duration-100) var(--p-linear); - transition: opacity var(--p-duration-200) var(--p-linear), - left var(--p-duration-200) var(--p-linear); - transition: opacity var(--p-duration-300) var(--p-linear), - left var(--p-duration-300) var(--p-linear); - transition: opacity var(--p-duration-400) var(--p-linear), - left var(--p-duration-400) var(--p-linear); - transition: opacity var(--p-duration-500) var(--p-linear), - left var(--p-duration-500) var(--p-linear); -} - -.duration-multiple-non-string-arg { - opacity: 1; - transition: opacity var(--p-duration-200) var(--p-linear), - left var(--p-duration-200) var(--p-linear); - transition: opacity var(--p-duration-0) var(--p-linear), - left var(--p-duration-0) var(--p-linear); - transition: opacity var(--p-duration-100) var(--p-linear), - left var(--p-duration-100) var(--p-linear); - transition: opacity var(--p-duration-200) var(--p-linear), - left var(--p-duration-200) var(--p-linear); - transition: opacity var(--p-duration-300) var(--p-linear), - left var(--p-duration-300) var(--p-linear); - transition: opacity var(--p-duration-400) var(--p-linear), - left var(--p-duration-400) var(--p-linear); - transition: opacity var(--p-duration-500) var(--p-linear), - left var(--p-duration-500) var(--p-linear); -} - -.duration-multiple-constant { - opacity: 1; - transition: opacity var(--p-duration-0) var(--p-linear), - left var(--p-duration-0) var(--p-linear); - transition: opacity var(--p-duration-0) var(--p-linear), - left var(--p-duration-0) var(--p-linear); - transition: opacity var(--p-duration-0) var(--p-linear), - left var(--p-duration-0) var(--p-linear); - transition: opacity var(--p-duration-50) var(--p-linear), - left var(--p-duration-50) var(--p-linear); - transition: opacity var(--p-duration-50) var(--p-linear), - left var(--p-duration-50) var(--p-linear); - transition: opacity var(--p-duration-100) var(--p-linear), - left var(--p-duration-100) var(--p-linear); - transition: opacity var(--p-duration-100) var(--p-linear), - left var(--p-duration-100) var(--p-linear); - transition: opacity var(--p-duration-150) var(--p-linear), - left var(--p-duration-150) var(--p-linear); - transition: opacity var(--p-duration-150) var(--p-linear), - left var(--p-duration-150) var(--p-linear); - transition: opacity var(--p-duration-200) var(--p-linear), - left var(--p-duration-200) var(--p-linear); - transition: opacity var(--p-duration-200) var(--p-linear), - left var(--p-duration-200) var(--p-linear); - transition: opacity var(--p-duration-250) var(--p-linear), - left var(--p-duration-250) var(--p-linear); - transition: opacity var(--p-duration-250) var(--p-linear), - left var(--p-duration-250) var(--p-linear); - transition: opacity var(--p-duration-300) var(--p-linear), - left var(--p-duration-300) var(--p-linear); - transition: opacity var(--p-duration-300) var(--p-linear), - left var(--p-duration-300) var(--p-linear); - transition: opacity var(--p-duration-350) var(--p-linear), - left var(--p-duration-350) var(--p-linear); - transition: opacity var(--p-duration-350) var(--p-linear), - left var(--p-duration-350) var(--p-linear); - transition: opacity var(--p-duration-400) var(--p-linear), - left var(--p-duration-400) var(--p-linear); - transition: opacity var(--p-duration-400) var(--p-linear), - left var(--p-duration-400) var(--p-linear); - transition: opacity var(--p-duration-450) var(--p-linear), - left var(--p-duration-450) var(--p-linear); - transition: opacity var(--p-duration-450) var(--p-linear), - left var(--p-duration-450) var(--p-linear); - transition: opacity var(--p-duration-500) var(--p-linear), - left var(--p-duration-500) var(--p-linear); - transition: opacity var(--p-duration-500) var(--p-linear), - left var(--p-duration-500) var(--p-linear); - transition: opacity var(--p-duration-5000) var(--p-linear), - left var(--p-duration-5000) var(--p-linear); -} - -.edges { - // sass calculation - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: Numeric operator detected. - // warning: No matching duration token for '33ms'. - // transition: (legacy-polaris-v8.duration() - 33ms) fill var(--p-linear) 33ms; - transition: (legacy-polaris-v8.duration() - 33ms) fill linear 33ms; - // Duration comes after easing func - transition: opacity var(--p-linear) var(--p-duration-500); - // Duration + Delay - transition: opacity var(--p-duration-400) var(--p-linear) - var(--p-duration-100); - // Duration + Delay after easing func - transition: opacity var(--p-linear) var(--p-duration-400) - var(--p-duration-100); - // foobar isn't a valid duration key - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: Unknown duration key 'foobar'. - transition-duration: legacy-polaris-v8.duration(foobar); - // can't process variables - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: Cannot statically analyse SASS variable $foo. - transition-duration: $foo; - // polaris-migrator: Unable to migrate the following expression. Please upgrade manually. - // warning: Cannot statically analyse SASS variable $foo. - // transition: opacity $foo var(--p-duration-500); - transition: opacity $foo 0.5s; -} diff --git a/polaris-migrator/src/migrations/replace-sass-transition/tests/replace-sass-easing.input.scss b/polaris-migrator/src/migrations/replace-sass-transition/tests/replace-sass-easing.input.scss deleted file mode 100644 index a786cc742fd..00000000000 --- a/polaris-migrator/src/migrations/replace-sass-transition/tests/replace-sass-easing.input.scss +++ /dev/null @@ -1,138 +0,0 @@ -.easing-simple-string-arg { - opacity: 1; - transition-timing-function: legacy-polaris-v8.easing('anticipate'); - transition-timing-function: legacy-polaris-v8.easing('base'); - transition-timing-function: legacy-polaris-v8.easing('excite'); - transition-timing-function: legacy-polaris-v8.easing('in'); - transition-timing-function: legacy-polaris-v8.easing('out'); - transition-timing-function: legacy-polaris-v8.easing('overshoot'); -} - -.easing-simple-non-string-arg { - opacity: 1; - transition-timing-function: legacy-polaris-v8.easing(); - transition-timing-function: legacy-polaris-v8.easing(anticipate); - transition-timing-function: legacy-polaris-v8.easing(base); - transition-timing-function: legacy-polaris-v8.easing(excite); - transition-timing-function: legacy-polaris-v8.easing(in); - transition-timing-function: legacy-polaris-v8.easing(out); - transition-timing-function: legacy-polaris-v8.easing(overshoot); -} - -.easing-simple-builtins { - opacity: 1; - transition-timing-function: linear; - // See: https://w3c.github.io/csswg-drafts/css-easing/#typedef-linear-easing-function - transition-timing-function: linear(1); - transition-timing-function: ease; - transition-timing-function: ease-in; - transition-timing-function: ease-out; - transition-timing-function: ease-in-out; - transition-timing-function: cubic-bezier(0, 0, 1, 1); - // See:https://w3c.github.io/csswg-drafts/css-easing/#typedef-step-easing-function - transition-timing-function: step-start; - transition-timing-function: step-end; - transition-timing-function: steps(1, jump-end); -} - -.easing-shorthand-string-arg { - opacity: 1; - transition: opacity 300ms legacy-polaris-v8.easing('anticipate'); - transition: opacity 300ms legacy-polaris-v8.easing('base'); - transition: opacity 300ms legacy-polaris-v8.easing('excite'); - transition: opacity 300ms legacy-polaris-v8.easing('in'); - transition: opacity 300ms legacy-polaris-v8.easing('out'); - transition: opacity 300ms legacy-polaris-v8.easing('overshoot'); -} - -.easing-shorthand-non-string-arg { - opacity: 1; - transition: opacity 300ms legacy-polaris-v8.easing(); - transition: opacity 300ms legacy-polaris-v8.easing(anticipate); - transition: opacity 300ms legacy-polaris-v8.easing(base); - transition: opacity 300ms legacy-polaris-v8.easing(excite); - transition: opacity 300ms legacy-polaris-v8.easing(in); - transition: opacity 300ms legacy-polaris-v8.easing(out); - transition: opacity 300ms legacy-polaris-v8.easing(overshoot); -} - -.easing-shorthand-builtins { - opacity: 1; - transition: opacity 300ms linear; - // See: https://w3c.github.io/csswg-drafts/css-easing/#typedef-linear-easing-function - transition: opacity 300ms linear(1); - transition: opacity 300ms ease; - transition: opacity 300ms ease-in; - transition: opacity 300ms ease-out; - transition: opacity 300ms ease-in-out; - transition: opacity 300ms cubic-bezier(0, 0, 1, 1); - // See:https://w3c.github.io/csswg-drafts/css-easing/#typedef-step-easing-function - transition: opacity 300ms step-start; - transition: opacity 300ms step-end; - transition: opacity 300ms steps(1, jump-end); -} - -.easing-multiple-string-arg { - opacity: 1; - transition: opacity 300ms legacy-polaris-v8.easing('anticipate'), - left 300ms legacy-polaris-v8.easing('anticipate'); - transition: opacity 300ms legacy-polaris-v8.easing('base'), - left 300ms legacy-polaris-v8.easing('base'); - transition: opacity 300ms legacy-polaris-v8.easing('excite'), - left 300ms legacy-polaris-v8.easing('excite'); - transition: opacity 300ms legacy-polaris-v8.easing('in'), - left 300ms legacy-polaris-v8.easing('in'); - transition: opacity 300ms legacy-polaris-v8.easing('out'), - left 300ms legacy-polaris-v8.easing('out'); - transition: opacity 300ms legacy-polaris-v8.easing('overshoot'), - left 300ms legacy-polaris-v8.easing('overshoot'); -} - -.easing-multiple-non-string-arg { - opacity: 1; - transition: opacity 300ms legacy-polaris-v8.easing(), - left 300ms legacy-polaris-v8.easing(); - transition: opacity 300ms legacy-polaris-v8.easing(anticipate), - left 300ms legacy-polaris-v8.easing(anticipate); - transition: opacity 300ms legacy-polaris-v8.easing(base), - left 300ms legacy-polaris-v8.easing(base); - transition: opacity 300ms legacy-polaris-v8.easing(excite), - left 300ms legacy-polaris-v8.easing(excite); - transition: opacity 300ms legacy-polaris-v8.easing(in), - left 300ms legacy-polaris-v8.easing(in); - transition: opacity 300ms legacy-polaris-v8.easing(out), - left 300ms legacy-polaris-v8.easing(out); - transition: opacity 300ms legacy-polaris-v8.easing(overshoot), - left 300ms legacy-polaris-v8.easing(overshoot); -} - -.easing-multiple-builtins { - opacity: 1; - transition: opacity 300ms linear, left 300ms linear; - // See: https://w3c.github.io/csswg-drafts/css-easing/#typedef-linear-easing-function - transition: opacity 300ms linear(1), left 300ms linear(1); - transition: opacity 300ms ease, left 300ms ease; - transition: opacity 300ms ease-in, left 300ms ease-in; - transition: opacity 300ms ease-out, left 300ms ease-out; - transition: opacity 300ms ease-in-out, left 300ms ease-in-out; - transition: opacity 300ms cubic-bezier(0, 0, 1, 1), - left 300ms cubic-bezier(0, 0, 1, 1); - // See:https://w3c.github.io/csswg-drafts/css-easing/#typedef-step-easing-function - transition: opacity 300ms step-start, left 300ms step-start; - transition: opacity 300ms step-end, left 300ms step-start; - transition: opacity 300ms steps(1, jump-end), left 300ms steps(1, jump-end); -} - -$easingFunc: 'ease-in'; - -.edges { - // Without an easing function - transition: fill 300ms; - // Unknown values are flagged - transition-timing-function: legacy-polaris-v8.easing(foobar); - // Can only handle hard coded values - transition-timing-function: legacy-polaris-v8.easing($easingFunc); - // can't process variables - transition-timing-function: $foo; - transition: opacity $foo 0.5s; -} diff --git a/polaris-migrator/src/migrations/replace-sass-transition/tests/replace-sass-transition.test.ts b/polaris-migrator/src/migrations/replace-sass-transition/tests/replace-sass-transition.test.ts deleted file mode 100644 index 0073e523e22..00000000000 --- a/polaris-migrator/src/migrations/replace-sass-transition/tests/replace-sass-transition.test.ts +++ /dev/null @@ -1,15 +0,0 @@ -import {check} from '../../../utilities/testUtils'; - -const migration = 'replace-sass-transition'; -const fixtures = ['replace-sass-duration', 'replace-sass-easing']; - -for (const fixture of fixtures) { - check(__dirname, { - fixture, - migration, - extension: 'scss', - options: { - namespace: 'legacy-polaris-v8', - }, - }); -} diff --git a/yarn.lock b/yarn.lock index b77d578f2ee..6e5c2c70a84 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10422,6 +10422,11 @@ extsprintf@^1.2.0: resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.1.tgz#8d172c064867f235c0c84a596806d279bf4bcc07" integrity sha512-Wrk35e8ydCKDj/ArClo1VrPVmN8zph5V4AtHwIuHhvMXsKf73UT3BOD+azBIW+3wOJ4FhEH7zyaJCFvChjYvMA== +"falsey@^1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/falsey/-/falsey-1.0.0.tgz#71bdd775c24edad9f2f5c015ce8be24400bb5d7d" + integrity sha512-zMDNZ/Ipd8MY0+346CPvhzP1AsiVyNfTOayJza4reAIWf72xbkuFUDcJNxSAsQE1b9Bu0wijKb8Ngnh/a7fI5w== + fast-deep-equal@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49"