From 862f9519644523a8fa173becd55cff4a7c164fff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20Pereira=20Mu=C3=B1oz?= Date: Sat, 6 Apr 2024 22:38:22 +0200 Subject: [PATCH] Make aliases affect safe-prefixed rules --- src/parsers/declarations.ts | 31 ++++++--- ...no-aliases-safe-both-prefix-false.snapshot | 43 ++++++++++++ .../no-aliases-safe-both-prefix-true.snapshot | 49 ++++++++++++++ ...th-aliases-safe-both-prefix-false.snapshot | 43 ++++++++++++ ...ith-aliases-safe-both-prefix-true.snapshot | 52 +++++++++++++++ ...no-aliases-safe-both-prefix-false.snapshot | 12 ++++ .../no-aliases-safe-both-prefix-true.snapshot | 19 ++++++ ...th-aliases-safe-both-prefix-false.snapshot | 13 ++++ ...ith-aliases-safe-both-prefix-true.snapshot | 23 +++++++ ...no-aliases-safe-both-prefix-false.snapshot | 37 +++++++++++ .../no-aliases-safe-both-prefix-true.snapshot | 46 +++++++++++++ ...th-aliases-safe-both-prefix-false.snapshot | 37 +++++++++++ ...ith-aliases-safe-both-prefix-true.snapshot | 46 +++++++++++++ tests/aliases-custom-declarations.test.ts | 66 +++++++++++++++++++ tests/constants/index.ts | 10 +++ tests/css/input-aliases.css | 22 +++++++ 16 files changed, 541 insertions(+), 8 deletions(-) create mode 100644 tests/__snapshots__/aliases-custom-declarations/combined/no-aliases-safe-both-prefix-false.snapshot create mode 100644 tests/__snapshots__/aliases-custom-declarations/combined/no-aliases-safe-both-prefix-true.snapshot create mode 100644 tests/__snapshots__/aliases-custom-declarations/combined/with-aliases-safe-both-prefix-false.snapshot create mode 100644 tests/__snapshots__/aliases-custom-declarations/combined/with-aliases-safe-both-prefix-true.snapshot create mode 100644 tests/__snapshots__/aliases-custom-declarations/diff/no-aliases-safe-both-prefix-false.snapshot create mode 100644 tests/__snapshots__/aliases-custom-declarations/diff/no-aliases-safe-both-prefix-true.snapshot create mode 100644 tests/__snapshots__/aliases-custom-declarations/diff/with-aliases-safe-both-prefix-false.snapshot create mode 100644 tests/__snapshots__/aliases-custom-declarations/diff/with-aliases-safe-both-prefix-true.snapshot create mode 100644 tests/__snapshots__/aliases-custom-declarations/override/no-aliases-safe-both-prefix-false.snapshot create mode 100644 tests/__snapshots__/aliases-custom-declarations/override/no-aliases-safe-both-prefix-true.snapshot create mode 100644 tests/__snapshots__/aliases-custom-declarations/override/with-aliases-safe-both-prefix-false.snapshot create mode 100644 tests/__snapshots__/aliases-custom-declarations/override/with-aliases-safe-both-prefix-true.snapshot create mode 100644 tests/aliases-custom-declarations.test.ts create mode 100644 tests/css/input-aliases.css diff --git a/src/parsers/declarations.ts b/src/parsers/declarations.ts index 022d4cd0..5e5b9b7c 100644 --- a/src/parsers/declarations.ts +++ b/src/parsers/declarations.ts @@ -178,18 +178,33 @@ export const parseDeclarations = ( const declPropUnprefixed = vendor.unprefixed(declProp); const declValue = decl.value.trim(); const declIndexes = Object.keys(declarationHashMap[declProp].indexes).map(Number); - const isAnimation = declPropUnprefixed === ANIMATION_PROP || declPropUnprefixed === ANIMATION_NAME_PROP; + const isAnimation = ( + declPropUnprefixed === ANIMATION_PROP || + declPropUnprefixed === ANIMATION_NAME_PROP || + aliases[declPropUnprefixed] === ANIMATION_PROP || + aliases[declPropUnprefixed] === ANIMATION_NAME_PROP + ); const declFlippedProp = declFlipped.prop.trim(); const declFlippedValue = declFlipped.value.trim(); - const overridenBy = declarations[declPropUnprefixed]; - const hasBeenOverriden = declarationsProps.includes(declPropUnprefixed) || ( - overridenBy - ? overridenBy.some((d: string): boolean => declarationsProps.indexOf(d) >= 0) - : false + const overridenBy = aliases[declPropUnprefixed] + ? declarations[aliases[declPropUnprefixed]] + : declarations[declPropUnprefixed]; + const hasBeenOverriden = ( + declarationsProps.includes(declPropUnprefixed) || + declarationsProps.includes(aliases[declPropUnprefixed]) || + ( + overridenBy + ? overridenBy.some((d: string): boolean => declarationsProps.indexOf(d) >= 0) + : false + ) ); - const overridesPrevious = checkOverrides(declPropUnprefixed, declarationsProps); + const overridesPrevious = aliases[declPropUnprefixed] + ? checkOverrides(aliases[declPropUnprefixed], declarationsProps) + : checkOverrides(declPropUnprefixed, declarationsProps); const isConflictedDeclaration = safeBothPrefix - ? !!allDeclarations[declPropUnprefixed] + ? aliases[declPropUnprefixed] + ? !!(allDeclarations[aliases[declPropUnprefixed]]) + : !!(allDeclarations[declPropUnprefixed]) : false; const sourceDirectiveValue = getSourceDirectiveValue( controlDirectives, diff --git a/tests/__snapshots__/aliases-custom-declarations/combined/no-aliases-safe-both-prefix-false.snapshot b/tests/__snapshots__/aliases-custom-declarations/combined/no-aliases-safe-both-prefix-false.snapshot new file mode 100644 index 00000000..6e40bd9f --- /dev/null +++ b/tests/__snapshots__/aliases-custom-declarations/combined/no-aliases-safe-both-prefix-false.snapshot @@ -0,0 +1,43 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`[[Mode: combined]] Aliases Tests: without aliases and safeBothPrefix false 1`] = ` +".test1 { + view-timeline: --row-a block; + animation-range: cover 0% cover 100%; + animation-timing-function: var(--timing-function); + animation-name: slide-in; +} + +[dir="ltr"] .test1 { + transform: translate3d(-21vh, 0, 0); +} + +[dir="rtl"] .test1 { + transform: translate3d(21vh, 0, 0); +} + +.test2 { + border: 1px solid; + border-color: #FF00FF; + color: white; + custom-border-width: 2px; +} + +.test3 { + custom-clip-background: text; + color: rgba(255, 242, 126, 1); + custom-padding: 20px; +} + +[dir="ltr"] .test3 { + background: linear-gradient(180deg, #fff27e 0%, #ffffff 100%); +} + +[dir="rtl"] .test3 { + background: linear-gradient(-180deg, #fff27e 0%, #ffffff 100%); +} + +[dir] .test3 { + background-position: top; +}" +`; diff --git a/tests/__snapshots__/aliases-custom-declarations/combined/no-aliases-safe-both-prefix-true.snapshot b/tests/__snapshots__/aliases-custom-declarations/combined/no-aliases-safe-both-prefix-true.snapshot new file mode 100644 index 00000000..6d854a6b --- /dev/null +++ b/tests/__snapshots__/aliases-custom-declarations/combined/no-aliases-safe-both-prefix-true.snapshot @@ -0,0 +1,49 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`[[Mode: combined]] Aliases Tests: without aliases and safeBothPrefix true 1`] = ` +".test1 { + view-timeline: --row-a block; + animation-range: cover 0% cover 100%; +} + +[dir] .test1 { + animation-timing-function: var(--timing-function); + animation-name: slide-in; +} + +[dir="ltr"] .test1 { + transform: translate3d(-21vh, 0, 0); +} + +[dir="rtl"] .test1 { + transform: translate3d(21vh, 0, 0); +} + +.test2 { + color: white; + custom-border-width: 2px; +} + +[dir] .test2 { + border: 1px solid; + border-color: #FF00FF; +} + +.test3 { + custom-clip-background: text; + color: rgba(255, 242, 126, 1); + custom-padding: 20px; +} + +[dir="ltr"] .test3 { + background: linear-gradient(180deg, #fff27e 0%, #ffffff 100%); +} + +[dir="rtl"] .test3 { + background: linear-gradient(-180deg, #fff27e 0%, #ffffff 100%); +} + +[dir] .test3 { + background-position: top; +}" +`; diff --git a/tests/__snapshots__/aliases-custom-declarations/combined/with-aliases-safe-both-prefix-false.snapshot b/tests/__snapshots__/aliases-custom-declarations/combined/with-aliases-safe-both-prefix-false.snapshot new file mode 100644 index 00000000..b7f3c2bb --- /dev/null +++ b/tests/__snapshots__/aliases-custom-declarations/combined/with-aliases-safe-both-prefix-false.snapshot @@ -0,0 +1,43 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`[[Mode: combined]] Aliases Tests: with aliases and safeBothPrefix false 1`] = ` +".test1 { + view-timeline: --row-a block; + animation-range: cover 0% cover 100%; + animation-timing-function: var(--timing-function); + animation-name: slide-in; +} + +[dir="ltr"] .test1 { + transform: translate3d(-21vh, 0, 0); +} + +[dir="rtl"] .test1 { + transform: translate3d(21vh, 0, 0); +} + +.test2 { + border: 1px solid; + border-color: #FF00FF; + color: white; + custom-border-width: 2px; +} + +.test3 { + color: rgba(255, 242, 126, 1); + custom-padding: 20px; +} + +[dir="ltr"] .test3 { + background: linear-gradient(180deg, #fff27e 0%, #ffffff 100%); +} + +[dir="rtl"] .test3 { + background: linear-gradient(-180deg, #fff27e 0%, #ffffff 100%); +} + +[dir] .test3 { + custom-clip-background: text; + background-position: top; +}" +`; diff --git a/tests/__snapshots__/aliases-custom-declarations/combined/with-aliases-safe-both-prefix-true.snapshot b/tests/__snapshots__/aliases-custom-declarations/combined/with-aliases-safe-both-prefix-true.snapshot new file mode 100644 index 00000000..9fc37ffa --- /dev/null +++ b/tests/__snapshots__/aliases-custom-declarations/combined/with-aliases-safe-both-prefix-true.snapshot @@ -0,0 +1,52 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`[[Mode: combined]] Aliases Tests: with aliases and safeBothPrefix true 1`] = ` +".test1 { + animation-range: cover 0% cover 100%; +} + +[dir] .test1 { + view-timeline: --row-a block; + animation-timing-function: var(--timing-function); + animation-name: slide-in; +} + +[dir="ltr"] .test1 { + transform: translate3d(-21vh, 0, 0); +} + +[dir="rtl"] .test1 { + transform: translate3d(21vh, 0, 0); +} + +.test2 { + color: white; +} + +[dir] .test2 { + border: 1px solid; + border-color: #FF00FF; + custom-border-width: 2px; +} + +.test3 { + color: rgba(255, 242, 126, 1); +} + +[dir] .test3 { + custom-padding: 20px; +} + +[dir="ltr"] .test3 { + background: linear-gradient(180deg, #fff27e 0%, #ffffff 100%); +} + +[dir="rtl"] .test3 { + background: linear-gradient(-180deg, #fff27e 0%, #ffffff 100%); +} + +[dir] .test3 { + custom-clip-background: text; + background-position: top; +}" +`; diff --git a/tests/__snapshots__/aliases-custom-declarations/diff/no-aliases-safe-both-prefix-false.snapshot b/tests/__snapshots__/aliases-custom-declarations/diff/no-aliases-safe-both-prefix-false.snapshot new file mode 100644 index 00000000..4f40d94d --- /dev/null +++ b/tests/__snapshots__/aliases-custom-declarations/diff/no-aliases-safe-both-prefix-false.snapshot @@ -0,0 +1,12 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`[[Mode: diff]] Aliases Tests: without aliases and safeBothPrefix false 1`] = ` +".test1 { + transform: translate3d(21vh, 0, 0); +} + +.test3 { + background: linear-gradient(-180deg, #fff27e 0%, #ffffff 100%); + background-position: top; +}" +`; diff --git a/tests/__snapshots__/aliases-custom-declarations/diff/no-aliases-safe-both-prefix-true.snapshot b/tests/__snapshots__/aliases-custom-declarations/diff/no-aliases-safe-both-prefix-true.snapshot new file mode 100644 index 00000000..bb58e301 --- /dev/null +++ b/tests/__snapshots__/aliases-custom-declarations/diff/no-aliases-safe-both-prefix-true.snapshot @@ -0,0 +1,19 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`[[Mode: diff]] Aliases Tests: without aliases and safeBothPrefix true 1`] = ` +".test1 { + transform: translate3d(21vh, 0, 0); + animation-timing-function: var(--timing-function); + animation-name: slide-in; +} + +.test2 { + border: 1px solid; + border-color: #FF00FF; +} + +.test3 { + background: linear-gradient(-180deg, #fff27e 0%, #ffffff 100%); + background-position: top; +}" +`; diff --git a/tests/__snapshots__/aliases-custom-declarations/diff/with-aliases-safe-both-prefix-false.snapshot b/tests/__snapshots__/aliases-custom-declarations/diff/with-aliases-safe-both-prefix-false.snapshot new file mode 100644 index 00000000..281ca6ba --- /dev/null +++ b/tests/__snapshots__/aliases-custom-declarations/diff/with-aliases-safe-both-prefix-false.snapshot @@ -0,0 +1,13 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`[[Mode: diff]] Aliases Tests: with aliases and safeBothPrefix false 1`] = ` +".test1 { + transform: translate3d(21vh, 0, 0); +} + +.test3 { + background: linear-gradient(-180deg, #fff27e 0%, #ffffff 100%); + custom-clip-background: text; + background-position: top; +}" +`; diff --git a/tests/__snapshots__/aliases-custom-declarations/diff/with-aliases-safe-both-prefix-true.snapshot b/tests/__snapshots__/aliases-custom-declarations/diff/with-aliases-safe-both-prefix-true.snapshot new file mode 100644 index 00000000..5f17bf26 --- /dev/null +++ b/tests/__snapshots__/aliases-custom-declarations/diff/with-aliases-safe-both-prefix-true.snapshot @@ -0,0 +1,23 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`[[Mode: diff]] Aliases Tests: with aliases and safeBothPrefix true 1`] = ` +".test1 { + transform: translate3d(21vh, 0, 0); + view-timeline: --row-a block; + animation-timing-function: var(--timing-function); + animation-name: slide-in; +} + +.test2 { + border: 1px solid; + border-color: #FF00FF; + custom-border-width: 2px; +} + +.test3 { + background: linear-gradient(-180deg, #fff27e 0%, #ffffff 100%); + custom-clip-background: text; + background-position: top; + custom-padding: 20px; +}" +`; diff --git a/tests/__snapshots__/aliases-custom-declarations/override/no-aliases-safe-both-prefix-false.snapshot b/tests/__snapshots__/aliases-custom-declarations/override/no-aliases-safe-both-prefix-false.snapshot new file mode 100644 index 00000000..20584d18 --- /dev/null +++ b/tests/__snapshots__/aliases-custom-declarations/override/no-aliases-safe-both-prefix-false.snapshot @@ -0,0 +1,37 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`[[Mode: override]] Aliases Tests: without aliases and safeBothPrefix false 1`] = ` +".test1 { + transform: translate3d(-21vh, 0, 0); + view-timeline: --row-a block; + animation-range: cover 0% cover 100%; + animation-timing-function: var(--timing-function); + animation-name: slide-in; +} + +[dir="rtl"] .test1 { + transform: translate3d(21vh, 0, 0); +} + +.test2 { + border: 1px solid; + border-color: #FF00FF; + color: white; + custom-border-width: 2px; +} + +.test3 { + background: linear-gradient(180deg, #fff27e 0%, #ffffff 100%); + custom-clip-background: text; + color: rgba(255, 242, 126, 1); + custom-padding: 20px; +} + +[dir="rtl"] .test3 { + background: linear-gradient(-180deg, #fff27e 0%, #ffffff 100%); +} + +[dir] .test3 { + background-position: top; +}" +`; diff --git a/tests/__snapshots__/aliases-custom-declarations/override/no-aliases-safe-both-prefix-true.snapshot b/tests/__snapshots__/aliases-custom-declarations/override/no-aliases-safe-both-prefix-true.snapshot new file mode 100644 index 00000000..c7e083b8 --- /dev/null +++ b/tests/__snapshots__/aliases-custom-declarations/override/no-aliases-safe-both-prefix-true.snapshot @@ -0,0 +1,46 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`[[Mode: override]] Aliases Tests: without aliases and safeBothPrefix true 1`] = ` +".test1 { + view-timeline: --row-a block; + animation-range: cover 0% cover 100%; +} + +[dir] .test1 { + transform: translate3d(-21vh, 0, 0); + animation-timing-function: var(--timing-function); + animation-name: slide-in; +} + +[dir="rtl"] .test1 { + transform: translate3d(21vh, 0, 0); +} + +.test2 { + color: white; + custom-border-width: 2px; +} + +[dir] .test2 { + border: 1px solid; + border-color: #FF00FF; +} + +.test3 { + custom-clip-background: text; + color: rgba(255, 242, 126, 1); + custom-padding: 20px; +} + +[dir] .test3 { + background: linear-gradient(180deg, #fff27e 0%, #ffffff 100%); +} + +[dir="rtl"] .test3 { + background: linear-gradient(-180deg, #fff27e 0%, #ffffff 100%); +} + +[dir] .test3 { + background-position: top; +}" +`; diff --git a/tests/__snapshots__/aliases-custom-declarations/override/with-aliases-safe-both-prefix-false.snapshot b/tests/__snapshots__/aliases-custom-declarations/override/with-aliases-safe-both-prefix-false.snapshot new file mode 100644 index 00000000..67580e6d --- /dev/null +++ b/tests/__snapshots__/aliases-custom-declarations/override/with-aliases-safe-both-prefix-false.snapshot @@ -0,0 +1,37 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`[[Mode: override]] Aliases Tests: with aliases and safeBothPrefix false 1`] = ` +".test1 { + transform: translate3d(-21vh, 0, 0); + view-timeline: --row-a block; + animation-range: cover 0% cover 100%; + animation-timing-function: var(--timing-function); + animation-name: slide-in; +} + +[dir="rtl"] .test1 { + transform: translate3d(21vh, 0, 0); +} + +.test2 { + border: 1px solid; + border-color: #FF00FF; + color: white; + custom-border-width: 2px; +} + +.test3 { + background: linear-gradient(180deg, #fff27e 0%, #ffffff 100%); + color: rgba(255, 242, 126, 1); + custom-padding: 20px; +} + +[dir="rtl"] .test3 { + background: linear-gradient(-180deg, #fff27e 0%, #ffffff 100%); +} + +[dir] .test3 { + custom-clip-background: text; + background-position: top; +}" +`; diff --git a/tests/__snapshots__/aliases-custom-declarations/override/with-aliases-safe-both-prefix-true.snapshot b/tests/__snapshots__/aliases-custom-declarations/override/with-aliases-safe-both-prefix-true.snapshot new file mode 100644 index 00000000..15fb9027 --- /dev/null +++ b/tests/__snapshots__/aliases-custom-declarations/override/with-aliases-safe-both-prefix-true.snapshot @@ -0,0 +1,46 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`[[Mode: override]] Aliases Tests: with aliases and safeBothPrefix true 1`] = ` +".test1 { + animation-range: cover 0% cover 100%; +} + +[dir] .test1 { + transform: translate3d(-21vh, 0, 0); + view-timeline: --row-a block; + animation-timing-function: var(--timing-function); + animation-name: slide-in; +} + +[dir="rtl"] .test1 { + transform: translate3d(21vh, 0, 0); +} + +.test2 { + color: white; +} + +[dir] .test2 { + border: 1px solid; + border-color: #FF00FF; + custom-border-width: 2px; +} + +.test3 { + color: rgba(255, 242, 126, 1); +} + +[dir] .test3 { + background: linear-gradient(180deg, #fff27e 0%, #ffffff 100%); + custom-padding: 20px; +} + +[dir="rtl"] .test3 { + background: linear-gradient(-180deg, #fff27e 0%, #ffffff 100%); +} + +[dir] .test3 { + custom-clip-background: text; + background-position: top; +}" +`; diff --git a/tests/aliases-custom-declarations.test.ts b/tests/aliases-custom-declarations.test.ts new file mode 100644 index 00000000..8d8836fe --- /dev/null +++ b/tests/aliases-custom-declarations.test.ts @@ -0,0 +1,66 @@ +import postcss from 'postcss'; +import postcssRTLCSS from '../src'; +import { PluginOptions } from '../src/@types'; +import { + readCSSFile, + runTests, + createSnapshotFileName +} from './utils'; +import { propsAliases } from './constants'; +import 'jest-specific-snapshot'; + +const BASE_NAME = 'aliases-custom-declarations'; + +const baseOptions: PluginOptions = { + aliases: propsAliases +}; + +runTests(baseOptions, (pluginOptions: PluginOptions): void => { + + describe(`[[Mode: ${pluginOptions.mode}]] Aliases Tests:`, (): void => { + + let input = ''; + + beforeEach(async (): Promise => { + input = input || await readCSSFile('input-aliases.css'); + }); + + it('without aliases and safeBothPrefix false', (): void => { + const options: PluginOptions = { ...pluginOptions, aliases: {} }; + const output = postcss([postcssRTLCSS(options)]).process(input); + expect(output.css).toMatchSpecificSnapshot( + createSnapshotFileName(BASE_NAME,'no-aliases-safe-both-prefix-false', pluginOptions.mode) + ); + expect(output.warnings()).toHaveLength(0); + }); + + it('without aliases and safeBothPrefix true', (): void => { + const options: PluginOptions = { ...pluginOptions, aliases: {}, safeBothPrefix: true }; + const output = postcss([postcssRTLCSS(options)]).process(input); + expect(output.css).toMatchSpecificSnapshot( + createSnapshotFileName(BASE_NAME,'no-aliases-safe-both-prefix-true', pluginOptions.mode) + ); + expect(output.warnings()).toHaveLength(0); + }); + + it('with aliases and safeBothPrefix false', (): void => { + const options: PluginOptions = { ...pluginOptions }; + const output = postcss([postcssRTLCSS(options)]).process(input); + expect(output.css).toMatchSpecificSnapshot( + createSnapshotFileName(BASE_NAME,'with-aliases-safe-both-prefix-false', pluginOptions.mode) + ); + expect(output.warnings()).toHaveLength(0); + }); + + it('with aliases and safeBothPrefix true', (): void => { + const options: PluginOptions = { ...pluginOptions, safeBothPrefix: true }; + const output = postcss([postcssRTLCSS(options)]).process(input); + expect(output.css).toMatchSpecificSnapshot( + createSnapshotFileName(BASE_NAME,'with-aliases-safe-both-prefix-true', pluginOptions.mode) + ); + expect(output.warnings()).toHaveLength(0); + }); + + }); + +}); \ No newline at end of file diff --git a/tests/constants/index.ts b/tests/constants/index.ts index b9f275e5..36185f46 100644 --- a/tests/constants/index.ts +++ b/tests/constants/index.ts @@ -1,5 +1,8 @@ const PADDING = 'padding'; const MARGIN = 'margin'; +const ANIMATION = 'animation'; +const BORDER_WIDTH = 'border-width'; +const BACKGROUND_CLIP = 'background-clip'; export const aliases = { '--small-padding': PADDING, @@ -7,4 +10,11 @@ export const aliases = { '--custom-margin': MARGIN, '--small-margin': MARGIN, '--large-margin': MARGIN +}; + +export const propsAliases = { + 'view-timeline': ANIMATION, + 'custom-border-width': BORDER_WIDTH, + 'custom-clip-background': BACKGROUND_CLIP, + 'custom-padding': PADDING }; \ No newline at end of file diff --git a/tests/css/input-aliases.css b/tests/css/input-aliases.css new file mode 100644 index 00000000..6f1be45e --- /dev/null +++ b/tests/css/input-aliases.css @@ -0,0 +1,22 @@ +.test1 { + transform: translate3d(-21vh, 0, 0); + view-timeline: --row-a block; + animation-range: cover 0% cover 100%; + animation-timing-function: var(--timing-function); + animation-name: slide-in; +} + +.test2 { + border: 1px solid; + border-color: #FF00FF; + color: white; + custom-border-width: 2px; +} + +.test3 { + background: linear-gradient(180deg, #fff27e 0%, #ffffff 100%); + custom-clip-background: text; + background-position: top; + color: rgba(255, 242, 126, 1); + custom-padding: 20px; +} \ No newline at end of file