From a6ca84e1c3a1755b814e6a14ffe4cb28f8c4ecea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20Pereira=20Mu=C3=B1oz?= Date: Sun, 12 May 2024 19:38:11 +0200 Subject: [PATCH 01/13] Lint tests files --- package.json | 2 +- tests/aliases-custom-declarations.test.ts | 84 +++++------ tests/aliases-variables.test.ts | 106 +++++++------- tests/basic-options.test.ts | 128 ++++++++-------- tests/constants/index.ts | 18 +-- tests/empty-rules.test.ts | 2 +- tests/nested-rules.test.ts | 88 +++++------ tests/noflip.test.ts | 40 ++--- tests/overriding.test.ts | 54 +++---- tests/prefixed.test.ts | 92 ++++++------ tests/prefixes.test.ts | 170 +++++++++++----------- tests/rule-names.test.ts | 146 +++++++++---------- tests/safe-prefix.test.ts | 92 ++++++------ tests/string-map.test.ts | 124 ++++++++-------- 14 files changed, 573 insertions(+), 573 deletions(-) diff --git a/package.json b/package.json index 74ce5278..1066b1cf 100644 --- a/package.json +++ b/package.json @@ -47,7 +47,7 @@ ], "scripts": { "test": "jest --clearCache && jest --verbose", - "lint": "eslint src/**/*.ts", + "lint": "eslint \"src/**/*.ts\" \"tests/**/*.ts\"", "clean": "./scripts/clean.sh", "copy": "./scripts/copy.sh", "modify-dts": "replace-in-file --configFile=config.replace.js", diff --git a/tests/aliases-custom-declarations.test.ts b/tests/aliases-custom-declarations.test.ts index 8d8836fe..868764f5 100644 --- a/tests/aliases-custom-declarations.test.ts +++ b/tests/aliases-custom-declarations.test.ts @@ -2,9 +2,9 @@ import postcss from 'postcss'; import postcssRTLCSS from '../src'; import { PluginOptions } from '../src/@types'; import { - readCSSFile, - runTests, - createSnapshotFileName + readCSSFile, + runTests, + createSnapshotFileName } from './utils'; import { propsAliases } from './constants'; import 'jest-specific-snapshot'; @@ -17,50 +17,50 @@ const baseOptions: PluginOptions = { runTests(baseOptions, (pluginOptions: PluginOptions): void => { - describe(`[[Mode: ${pluginOptions.mode}]] Aliases Tests:`, (): void => { - - let input = ''; + describe(`[[Mode: ${pluginOptions.mode}]] Aliases Tests:`, (): void => { + + let input = ''; - beforeEach(async (): Promise => { - input = input || await readCSSFile('input-aliases.css'); - }); + 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 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('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 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); - }); + 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/aliases-variables.test.ts b/tests/aliases-variables.test.ts index 58a97632..3054bbd5 100644 --- a/tests/aliases-variables.test.ts +++ b/tests/aliases-variables.test.ts @@ -2,9 +2,9 @@ import postcss from 'postcss'; import postcssRTLCSS from '../src'; import { PluginOptions } from '../src/@types'; import { - readCSSFile, - runTests, - createSnapshotFileName + readCSSFile, + runTests, + createSnapshotFileName } from './utils'; import { aliases } from './constants'; import 'jest-specific-snapshot'; @@ -15,59 +15,59 @@ const baseOptions: PluginOptions = { aliases }; runTests(baseOptions, (pluginOptions: PluginOptions): void => { - describe(`[[Mode: ${pluginOptions.mode}]] Variables Tests:`, (): void => { + describe(`[[Mode: ${pluginOptions.mode}]] Variables Tests:`, (): void => { - let input = ''; - - beforeEach(async (): Promise => { - input = input || await readCSSFile('input-variables.css'); - }); - - it('aliases default', (): void => { - const options: PluginOptions = { ...pluginOptions, aliases: {} }; - const output = postcss([postcssRTLCSS(options)]).process(input); - expect(output.css).toMatchSpecificSnapshot( - createSnapshotFileName(BASE_NAME,'aliases-default', pluginOptions.mode) - ); - expect(output.warnings()).toHaveLength(0); - }); - - it('aliases map', (): void => { - const options: PluginOptions = { ...pluginOptions }; - const output = postcss([postcssRTLCSS(options)]).process(input); - expect(output.css).toMatchSpecificSnapshot( - createSnapshotFileName(BASE_NAME,'aliases-map', pluginOptions.mode) - ); - expect(output.warnings()).toHaveLength(0); - }); - - it('wrong aliases', (): void => { - const options: PluginOptions = { ...pluginOptions, aliases: {base: true, parse: false} as unknown as Record }; - const output = postcss([postcssRTLCSS(options)]).process(input); - expect(output.css).toMatchSpecificSnapshot( - createSnapshotFileName(BASE_NAME,'wrong-aliases', pluginOptions.mode) - ); - expect(output.warnings()).toHaveLength(0); - }); + let input = ''; - it('processEnv = true', (): void => { - const options: PluginOptions = { ...pluginOptions }; - const output = postcss([postcssRTLCSS(options)]).process(input); - expect(output.css).toMatchSpecificSnapshot( - createSnapshotFileName(BASE_NAME,'process-env-true', pluginOptions.mode) - ); - expect(output.warnings()).toHaveLength(0); - }); + beforeEach(async (): Promise => { + input = input || await readCSSFile('input-variables.css'); + }); + + it('aliases default', (): void => { + const options: PluginOptions = { ...pluginOptions, aliases: {} }; + const output = postcss([postcssRTLCSS(options)]).process(input); + expect(output.css).toMatchSpecificSnapshot( + createSnapshotFileName(BASE_NAME,'aliases-default', pluginOptions.mode) + ); + expect(output.warnings()).toHaveLength(0); + }); + + it('aliases map', (): void => { + const options: PluginOptions = { ...pluginOptions }; + const output = postcss([postcssRTLCSS(options)]).process(input); + expect(output.css).toMatchSpecificSnapshot( + createSnapshotFileName(BASE_NAME,'aliases-map', pluginOptions.mode) + ); + expect(output.warnings()).toHaveLength(0); + }); + + it('wrong aliases', (): void => { + const options: PluginOptions = { ...pluginOptions, aliases: {base: true, parse: false} as unknown as Record }; + const output = postcss([postcssRTLCSS(options)]).process(input); + expect(output.css).toMatchSpecificSnapshot( + createSnapshotFileName(BASE_NAME,'wrong-aliases', pluginOptions.mode) + ); + expect(output.warnings()).toHaveLength(0); + }); + + it('processEnv = true', (): void => { + const options: PluginOptions = { ...pluginOptions }; + const output = postcss([postcssRTLCSS(options)]).process(input); + expect(output.css).toMatchSpecificSnapshot( + createSnapshotFileName(BASE_NAME,'process-env-true', pluginOptions.mode) + ); + expect(output.warnings()).toHaveLength(0); + }); + + it('processEnv = false', (): void => { + const options: PluginOptions = { ...pluginOptions, processEnv: false }; + const output = postcss([postcssRTLCSS(options)]).process(input); + expect(output.css).toMatchSpecificSnapshot( + createSnapshotFileName(BASE_NAME,'process-env-false', pluginOptions.mode) + ); + expect(output.warnings()).toHaveLength(0); + }); - it('processEnv = false', (): void => { - const options: PluginOptions = { ...pluginOptions, processEnv: false }; - const output = postcss([postcssRTLCSS(options)]).process(input); - expect(output.css).toMatchSpecificSnapshot( - createSnapshotFileName(BASE_NAME,'process-env-false', pluginOptions.mode) - ); - expect(output.warnings()).toHaveLength(0); }); - - }); }); \ No newline at end of file diff --git a/tests/basic-options.test.ts b/tests/basic-options.test.ts index 071c285c..d5f353dc 100644 --- a/tests/basic-options.test.ts +++ b/tests/basic-options.test.ts @@ -2,9 +2,9 @@ import postcss from 'postcss'; import postcssRTLCSS from '../src'; import { PluginOptions, Source } from '../src/@types'; import { - readCSSFile, - runTests, - createSnapshotFileName + readCSSFile, + runTests, + createSnapshotFileName } from './utils'; import 'jest-specific-snapshot'; @@ -12,68 +12,68 @@ const BASE_NAME = 'basic-options'; runTests({}, (pluginOptions: PluginOptions): void => { - describe(`[[Mode: ${pluginOptions.mode}]] Basic Options Tests: `, (): void => { + describe(`[[Mode: ${pluginOptions.mode}]] Basic Options Tests: `, (): void => { + + let input = ''; + + beforeEach(async (): Promise => { + input = input || await readCSSFile('input.css'); + }); + + it('Basic', (): void => { + const options: PluginOptions = { ...pluginOptions }; + const output = postcss([postcssRTLCSS(options)]).process(input); + expect(output.css).toMatchSpecificSnapshot( + createSnapshotFileName(BASE_NAME,'basic', pluginOptions.mode) + ); + expect(output.warnings()).toHaveLength(0); + }); + + it('{source: rtl}', (): void => { + const options: PluginOptions = { ...pluginOptions, source: Source.rtl }; + const output = postcss([postcssRTLCSS(options)]).process(input); + expect(output.css).toMatchSpecificSnapshot( + createSnapshotFileName(BASE_NAME,'source-rtl', pluginOptions.mode) + ); + expect(output.warnings()).toHaveLength(0); + }); + + it('{processUrls: true}', (): void => { + const options: PluginOptions = { ...pluginOptions, processUrls: true }; + const output = postcss([postcssRTLCSS(options)]).process(input); + expect(output.css).toMatchSpecificSnapshot( + createSnapshotFileName(BASE_NAME,'process-url-true', pluginOptions.mode) + ); + expect(output.warnings()).toHaveLength(0); + }); + + it('{processKeyFrames: true}', (): void => { + const options: PluginOptions = { ...pluginOptions, processKeyFrames: true }; + const output = postcss([postcssRTLCSS(options)]).process(input); + expect(output.css).toMatchSpecificSnapshot( + createSnapshotFileName(BASE_NAME,'process-keyframes-true', pluginOptions.mode) + ); + expect(output.warnings()).toHaveLength(0); + }); + + it('{source: rtl, processKeyFrames: true}', (): void => { + const options: PluginOptions = { ...pluginOptions, source: Source.rtl, processKeyFrames: true }; + const output = postcss([postcssRTLCSS(options)]).process(input); + expect(output.css).toMatchSpecificSnapshot( + createSnapshotFileName(BASE_NAME,'source-rtl-and-process-keyframes-true', pluginOptions.mode) + ); + expect(output.warnings()).toHaveLength(0); + }); + + it('{useCalc: true}', (): void => { + const options: PluginOptions = { ...pluginOptions, useCalc: true }; + const output = postcss([postcssRTLCSS(options)]).process(input); + expect(output.css).toMatchSpecificSnapshot( + createSnapshotFileName(BASE_NAME,'use-calc-true', pluginOptions.mode) + ); + expect(output.warnings()).toHaveLength(0); + }); - let input = ''; - - beforeEach(async (): Promise => { - input = input || await readCSSFile('input.css'); - }); - - it('Basic', (): void => { - const options: PluginOptions = { ...pluginOptions }; - const output = postcss([postcssRTLCSS(options)]).process(input); - expect(output.css).toMatchSpecificSnapshot( - createSnapshotFileName(BASE_NAME,'basic', pluginOptions.mode) - ); - expect(output.warnings()).toHaveLength(0); - }); - - it('{source: rtl}', (): void => { - const options: PluginOptions = { ...pluginOptions, source: Source.rtl }; - const output = postcss([postcssRTLCSS(options)]).process(input); - expect(output.css).toMatchSpecificSnapshot( - createSnapshotFileName(BASE_NAME,'source-rtl', pluginOptions.mode) - ); - expect(output.warnings()).toHaveLength(0); - }); - - it('{processUrls: true}', (): void => { - const options: PluginOptions = { ...pluginOptions, processUrls: true }; - const output = postcss([postcssRTLCSS(options)]).process(input); - expect(output.css).toMatchSpecificSnapshot( - createSnapshotFileName(BASE_NAME,'process-url-true', pluginOptions.mode) - ); - expect(output.warnings()).toHaveLength(0); - }); - - it('{processKeyFrames: true}', (): void => { - const options: PluginOptions = { ...pluginOptions, processKeyFrames: true }; - const output = postcss([postcssRTLCSS(options)]).process(input); - expect(output.css).toMatchSpecificSnapshot( - createSnapshotFileName(BASE_NAME,'process-keyframes-true', pluginOptions.mode) - ); - expect(output.warnings()).toHaveLength(0); - }); - - it('{source: rtl, processKeyFrames: true}', (): void => { - const options: PluginOptions = { ...pluginOptions, source: Source.rtl, processKeyFrames: true }; - const output = postcss([postcssRTLCSS(options)]).process(input); - expect(output.css).toMatchSpecificSnapshot( - createSnapshotFileName(BASE_NAME,'source-rtl-and-process-keyframes-true', pluginOptions.mode) - ); - expect(output.warnings()).toHaveLength(0); - }); - - it('{useCalc: true}', (): void => { - const options: PluginOptions = { ...pluginOptions, useCalc: true }; - const output = postcss([postcssRTLCSS(options)]).process(input); - expect(output.css).toMatchSpecificSnapshot( - createSnapshotFileName(BASE_NAME,'use-calc-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 36185f46..921e1ec0 100644 --- a/tests/constants/index.ts +++ b/tests/constants/index.ts @@ -5,16 +5,16 @@ const BORDER_WIDTH = 'border-width'; const BACKGROUND_CLIP = 'background-clip'; export const aliases = { - '--small-padding': PADDING, - '--large-padding': PADDING, - '--custom-margin': MARGIN, - '--small-margin': MARGIN, - '--large-margin': MARGIN + '--small-padding': PADDING, + '--large-padding': PADDING, + '--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 + '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/empty-rules.test.ts b/tests/empty-rules.test.ts index 23872a89..2a401ba8 100644 --- a/tests/empty-rules.test.ts +++ b/tests/empty-rules.test.ts @@ -25,6 +25,6 @@ runTests({}, (pluginOptions: PluginOptions): void => { createSnapshotFileName(BASE_NAME,'basic', pluginOptions.mode) ); expect(output.warnings()).toHaveLength(0); - }); + }); }); }); \ No newline at end of file diff --git a/tests/nested-rules.test.ts b/tests/nested-rules.test.ts index 442478ef..cb8a8854 100644 --- a/tests/nested-rules.test.ts +++ b/tests/nested-rules.test.ts @@ -2,9 +2,9 @@ import postcss from 'postcss'; import postcssRTLCSS from '../src'; import { PluginOptions, Source } from '../src/@types'; import { - readCSSFile, - runTests, - createSnapshotFileName + readCSSFile, + runTests, + createSnapshotFileName } from './utils'; import 'jest-specific-snapshot'; @@ -12,50 +12,50 @@ const BASE_NAME = 'nested-rules'; runTests({}, (pluginOptions: PluginOptions): void => { - describe(`[[Mode: ${pluginOptions.mode}]] Nested rules tests: `, (): void => { + describe(`[[Mode: ${pluginOptions.mode}]] Nested rules tests: `, (): void => { - let input = ''; - - beforeEach(async (): Promise => { - input = input || await readCSSFile('input-nested.scss'); - }); - - it('{source: rtl}', (): void => { - const options: PluginOptions = { ...pluginOptions, source: Source.rtl }; - const output = postcss([postcssRTLCSS(options)]).process(input); - expect(output.css).toMatchSpecificSnapshot( - createSnapshotFileName(BASE_NAME,'source-rtl', pluginOptions.mode) - ); - expect(output.warnings()).toHaveLength(0); - }); + let input = ''; - it('{source: rtl} processRuleNames: true', (): void => { - const options: PluginOptions = { ...pluginOptions, source: Source.rtl, processRuleNames: true }; - const output = postcss([postcssRTLCSS(options)]).process(input); - expect(output.css).toMatchSpecificSnapshot( - createSnapshotFileName(BASE_NAME,'source-rtl-process-rule-names-true', pluginOptions.mode) - ); - expect(output.warnings()).toHaveLength(0); - }); - - it('{source: ltr}', (): void => { - const options: PluginOptions = { ...pluginOptions, source: Source.ltr }; - const output = postcss([postcssRTLCSS(options)]).process(input); - expect(output.css).toMatchSpecificSnapshot( - createSnapshotFileName(BASE_NAME,'source-ltr', pluginOptions.mode) - ); - expect(output.warnings()).toHaveLength(0); - }); + beforeEach(async (): Promise => { + input = input || await readCSSFile('input-nested.scss'); + }); + + it('{source: rtl}', (): void => { + const options: PluginOptions = { ...pluginOptions, source: Source.rtl }; + const output = postcss([postcssRTLCSS(options)]).process(input); + expect(output.css).toMatchSpecificSnapshot( + createSnapshotFileName(BASE_NAME,'source-rtl', pluginOptions.mode) + ); + expect(output.warnings()).toHaveLength(0); + }); + + it('{source: rtl} processRuleNames: true', (): void => { + const options: PluginOptions = { ...pluginOptions, source: Source.rtl, processRuleNames: true }; + const output = postcss([postcssRTLCSS(options)]).process(input); + expect(output.css).toMatchSpecificSnapshot( + createSnapshotFileName(BASE_NAME,'source-rtl-process-rule-names-true', pluginOptions.mode) + ); + expect(output.warnings()).toHaveLength(0); + }); + + it('{source: ltr}', (): void => { + const options: PluginOptions = { ...pluginOptions, source: Source.ltr }; + const output = postcss([postcssRTLCSS(options)]).process(input); + expect(output.css).toMatchSpecificSnapshot( + createSnapshotFileName(BASE_NAME,'source-ltr', pluginOptions.mode) + ); + expect(output.warnings()).toHaveLength(0); + }); + + it('{source: ltr} processRuleNames: true', (): void => { + const options: PluginOptions = { ...pluginOptions, source: Source.ltr, processRuleNames: true }; + const output = postcss([postcssRTLCSS(options)]).process(input); + expect(output.css).toMatchSpecificSnapshot( + createSnapshotFileName(BASE_NAME,'source-ltr-process-rule-names-true', pluginOptions.mode) + ); + expect(output.warnings()).toHaveLength(0); + }); - it('{source: ltr} processRuleNames: true', (): void => { - const options: PluginOptions = { ...pluginOptions, source: Source.ltr, processRuleNames: true }; - const output = postcss([postcssRTLCSS(options)]).process(input); - expect(output.css).toMatchSpecificSnapshot( - createSnapshotFileName(BASE_NAME,'source-ltr-process-rule-names-true', pluginOptions.mode) - ); - expect(output.warnings()).toHaveLength(0); }); - - }); }); \ No newline at end of file diff --git a/tests/noflip.test.ts b/tests/noflip.test.ts index b040a32f..a78c7d53 100644 --- a/tests/noflip.test.ts +++ b/tests/noflip.test.ts @@ -2,9 +2,9 @@ import postcss from 'postcss'; import postcssRTLCSS from '../src'; import { PluginOptions, Mode } from '../src/@types'; import { - readCSSFile, - runTests, - createSnapshotFileName + readCSSFile, + runTests, + createSnapshotFileName } from './utils'; import 'jest-specific-snapshot'; @@ -12,24 +12,24 @@ const BASE_NAME = 'noflip'; runTests({}, (pluginOptions: PluginOptions): void => { - describe(`[[Mode: ${pluginOptions.mode}]] Combined Tests: `, (): void => { + describe(`[[Mode: ${pluginOptions.mode}]] Combined Tests: `, (): void => { + + let input = ''; + + beforeEach(async (): Promise => { + input = input || await readCSSFile('input-noflip.css'); + }); + + it('No Flip', (): void => { + const output = pluginOptions.mode === Mode.combined + ? postcss([postcssRTLCSS()]).process(input) + : postcss([postcssRTLCSS(pluginOptions)]).process(input); + expect(output.css).toMatchSpecificSnapshot( + createSnapshotFileName(BASE_NAME,'no-flip', pluginOptions.mode) + ); + expect(output.warnings()).toHaveLength(0); + }); - let input = ''; - - beforeEach(async (): Promise => { - input = input || await readCSSFile('input-noflip.css'); - }); - - it('No Flip', (): void => { - const output = pluginOptions.mode === Mode.combined - ? postcss([postcssRTLCSS()]).process(input) - : postcss([postcssRTLCSS(pluginOptions)]).process(input); - expect(output.css).toMatchSpecificSnapshot( - createSnapshotFileName(BASE_NAME,'no-flip', pluginOptions.mode) - ); - expect(output.warnings()).toHaveLength(0); }); - - }); }); \ No newline at end of file diff --git a/tests/overriding.test.ts b/tests/overriding.test.ts index 24d7bca2..a7f79d13 100644 --- a/tests/overriding.test.ts +++ b/tests/overriding.test.ts @@ -2,9 +2,9 @@ import postcss from 'postcss'; import postcssRTLCSS from '../src'; import { PluginOptions } from '../src/@types'; import { - readCSSFile, - runTests, - createSnapshotFileName + readCSSFile, + runTests, + createSnapshotFileName } from './utils'; import 'jest-specific-snapshot'; @@ -12,32 +12,32 @@ const BASE_NAME = 'overriding'; runTests({}, (pluginOptions: PluginOptions): void => { - describe(`[[Mode: ${pluginOptions.mode}]] Overriding Tests: `, (): void => { + describe(`[[Mode: ${pluginOptions.mode}]] Overriding Tests: `, (): void => { - let input = ''; - - beforeEach(async (): Promise => { - input = input || await readCSSFile('overriding.css'); - }); - - it('Basic', (): void => { - const options: PluginOptions = { ...pluginOptions }; - const output = postcss([postcssRTLCSS(options)]).process(input); - expect(output.css).toMatchSpecificSnapshot( - createSnapshotFileName(BASE_NAME,'basic', pluginOptions.mode) - ); - expect(output.warnings()).toHaveLength(0); - }); + let input = ''; + + beforeEach(async (): Promise => { + input = input || await readCSSFile('overriding.css'); + }); + + it('Basic', (): void => { + const options: PluginOptions = { ...pluginOptions }; + const output = postcss([postcssRTLCSS(options)]).process(input); + expect(output.css).toMatchSpecificSnapshot( + createSnapshotFileName(BASE_NAME,'basic', pluginOptions.mode) + ); + expect(output.warnings()).toHaveLength(0); + }); + + it('With safeBothPrefix', (): void => { + const options: PluginOptions = { ...pluginOptions, safeBothPrefix: true }; + const output = postcss([postcssRTLCSS(options)]).process(input); + expect(output.css).toMatchSpecificSnapshot( + createSnapshotFileName(BASE_NAME,'with-safe-both-prefix', pluginOptions.mode) + ); + expect(output.warnings()).toHaveLength(0); + }); - it('With safeBothPrefix', (): void => { - const options: PluginOptions = { ...pluginOptions, safeBothPrefix: true }; - const output = postcss([postcssRTLCSS(options)]).process(input); - expect(output.css).toMatchSpecificSnapshot( - createSnapshotFileName(BASE_NAME,'with-safe-both-prefix', pluginOptions.mode) - ); - expect(output.warnings()).toHaveLength(0); }); - - }); }); \ No newline at end of file diff --git a/tests/prefixed.test.ts b/tests/prefixed.test.ts index 5ac5085c..5dcee213 100644 --- a/tests/prefixed.test.ts +++ b/tests/prefixed.test.ts @@ -2,9 +2,9 @@ import postcss from 'postcss'; import postcssRTLCSS from '../src'; import { PluginOptions } from '../src/@types'; import { - readCSSFile, - runTests, - createSnapshotFileName + readCSSFile, + runTests, + createSnapshotFileName } from './utils'; import 'jest-specific-snapshot'; @@ -12,50 +12,50 @@ const BASE_NAME = 'prefixed'; runTests({ processUrls: true }, (pluginOptions: PluginOptions): void => { - describe(`[[Mode: ${pluginOptions.mode}]] Prefixed Tests: `, (): void => { + describe(`[[Mode: ${pluginOptions.mode}]] Prefixed Tests: `, (): void => { + + let input = ''; + + beforeEach(async (): Promise => { + input = input || await readCSSFile('input-prefixed.css'); + }); + + it('Prefixed default', (): void => { + const options: PluginOptions = { ...pluginOptions }; + const output = postcss([postcssRTLCSS(options)]).process(input); + expect(output.css).toMatchSpecificSnapshot( + createSnapshotFileName(BASE_NAME,'prefixed-default', pluginOptions.mode) + ); + expect(output.warnings()).toHaveLength(0); + }); + + it('Custom prefixes', (): void => { + const options: PluginOptions = { ...pluginOptions, rtlPrefix: '.rtl', ltrPrefix: '.ltr' }; + const output = postcss([postcssRTLCSS(options)]).process(input); + expect(output.css).toMatchSpecificSnapshot( + createSnapshotFileName(BASE_NAME,'custom-prefixes', pluginOptions.mode) + ); + expect(output.warnings()).toHaveLength(0); + }); + + it('Prefixed with array', (): void => { + const options: PluginOptions = { ...pluginOptions, rtlPrefix: ['.rtl', '[dir="rtl"]'], ltrPrefix: ['.ltr', '[dir="ltr"]'] }; + const output = postcss([postcssRTLCSS(options)]).process(input); + expect(output.css).toMatchSpecificSnapshot( + createSnapshotFileName(BASE_NAME,'prefixed-with-array', pluginOptions.mode) + ); + expect(output.warnings()).toHaveLength(0); + }); + + it('ignorePrefixedRules false', (): void => { + const options: PluginOptions = { ...pluginOptions, ignorePrefixedRules: false }; + const output = postcss([postcssRTLCSS(options)]).process(input); + expect(output.css).toMatchSpecificSnapshot( + createSnapshotFileName(BASE_NAME,'ignore-prefixed-rules-false', pluginOptions.mode) + ); + expect(output.warnings()).toHaveLength(0); + }); - let input = ''; - - beforeEach(async (): Promise => { - input = input || await readCSSFile('input-prefixed.css'); - }); - - it('Prefixed default', (): void => { - const options: PluginOptions = { ...pluginOptions }; - const output = postcss([postcssRTLCSS(options)]).process(input); - expect(output.css).toMatchSpecificSnapshot( - createSnapshotFileName(BASE_NAME,'prefixed-default', pluginOptions.mode) - ); - expect(output.warnings()).toHaveLength(0); - }); - - it('Custom prefixes', (): void => { - const options: PluginOptions = { ...pluginOptions, rtlPrefix: '.rtl', ltrPrefix: '.ltr' }; - const output = postcss([postcssRTLCSS(options)]).process(input); - expect(output.css).toMatchSpecificSnapshot( - createSnapshotFileName(BASE_NAME,'custom-prefixes', pluginOptions.mode) - ); - expect(output.warnings()).toHaveLength(0); - }); - - it('Prefixed with array', (): void => { - const options: PluginOptions = { ...pluginOptions, rtlPrefix: ['.rtl', '[dir="rtl"]'], ltrPrefix: ['.ltr', '[dir="ltr"]'] }; - const output = postcss([postcssRTLCSS(options)]).process(input); - expect(output.css).toMatchSpecificSnapshot( - createSnapshotFileName(BASE_NAME,'prefixed-with-array', pluginOptions.mode) - ); - expect(output.warnings()).toHaveLength(0); - }); - - it('ignorePrefixedRules false', (): void => { - const options: PluginOptions = { ...pluginOptions, ignorePrefixedRules: false }; - const output = postcss([postcssRTLCSS(options)]).process(input); - expect(output.css).toMatchSpecificSnapshot( - createSnapshotFileName(BASE_NAME,'ignore-prefixed-rules-false', pluginOptions.mode) - ); - expect(output.warnings()).toHaveLength(0); }); - - }); }); \ No newline at end of file diff --git a/tests/prefixes.test.ts b/tests/prefixes.test.ts index adf5dc62..691741d4 100644 --- a/tests/prefixes.test.ts +++ b/tests/prefixes.test.ts @@ -2,9 +2,9 @@ import postcss from 'postcss'; import postcssRTLCSS from '../src'; import { PluginOptions } from '../src/@types'; import { - readCSSFile, - runTests, - createSnapshotFileName + readCSSFile, + runTests, + createSnapshotFileName } from './utils'; import 'jest-specific-snapshot'; @@ -12,91 +12,91 @@ const BASE_NAME = 'prefixes'; runTests({}, (pluginOptions: PluginOptions): void => { - describe(`[[Mode: ${pluginOptions.mode}]] Prefixes Tests: `, (): void => { + describe(`[[Mode: ${pluginOptions.mode}]] Prefixes Tests: `, (): void => { - let input = ''; - - beforeEach(async (): Promise => { - input = input || await readCSSFile('input.css'); - }); - - it('custom ltrPrefix and rtlPrefix', (): void => { - const options: PluginOptions = { - ...pluginOptions, - ltrPrefix: '.ltr', - rtlPrefix: '.rtl', - bothPrefix: ['.ltr', '.rtl'] - }; - const output = postcss([postcssRTLCSS(options)]).process(input); - expect(output.css).toMatchSpecificSnapshot( - createSnapshotFileName(BASE_NAME,'custom-ltr-and-rtl-prefix', pluginOptions.mode) - ); - expect(output.warnings()).toHaveLength(0); - }); - - it('custom ltrPrefix and rtlPrefix properties as arrays', (): void => { - const options: PluginOptions = { - ...pluginOptions, - ltrPrefix: ['.ltr', '.left-to-right'], - rtlPrefix: ['.rtl', '.right-to-left'], - bothPrefix: ['.ltr', '.left-to-right', '.rtl', '.right-to-left'] - }; - const output = postcss([postcssRTLCSS(options)]).process(input); - expect(output.css).toMatchSpecificSnapshot( - createSnapshotFileName(BASE_NAME,'custom-ltr-and-rtl-prefix-as-arrays', pluginOptions.mode) - ); - expect(output.warnings()).toHaveLength(0); - }); - - it('custom ltrPrefix, rtlPrefix, and bothPrefix properties as arrays and processUrls: true', (): void => { - const options: PluginOptions = { - ...pluginOptions, - ltrPrefix: ['.ltr', '.left-to-right'], - rtlPrefix: ['.rtl', '.right-to-left'], - bothPrefix: ['.ltr', '.left-to-right', '.rtl', '.right-to-left'], - processUrls: true - }; - const output = postcss([postcssRTLCSS(options)]).process(input); - expect(output.css).toMatchSpecificSnapshot( - createSnapshotFileName(BASE_NAME,'custom-ltr-rtl-and-both-prefix-as-arrays-and-process-urls-true', pluginOptions.mode) - ); - expect(output.warnings()).toHaveLength(0); - }); + let input = ''; - it('prefixSelectorTransformer with default prefixes', (): void => { - const transformer = (prefix: string, selector: string) => { - if (!selector.startsWith('html') && selector.indexOf(':root') < 0) { - return `${prefix} > ${selector}`; - } - }; - const options: PluginOptions = { ...pluginOptions, prefixSelectorTransformer: transformer }; - const output = postcss([postcssRTLCSS(options)]).process(input); - expect(output.css).toMatchSpecificSnapshot( - createSnapshotFileName(BASE_NAME,'prefix-selector-transformer-with-default-prefixes', pluginOptions.mode) - ); - expect(output.warnings()).toHaveLength(0); - }); + beforeEach(async (): Promise => { + input = input || await readCSSFile('input.css'); + }); + + it('custom ltrPrefix and rtlPrefix', (): void => { + const options: PluginOptions = { + ...pluginOptions, + ltrPrefix: '.ltr', + rtlPrefix: '.rtl', + bothPrefix: ['.ltr', '.rtl'] + }; + const output = postcss([postcssRTLCSS(options)]).process(input); + expect(output.css).toMatchSpecificSnapshot( + createSnapshotFileName(BASE_NAME,'custom-ltr-and-rtl-prefix', pluginOptions.mode) + ); + expect(output.warnings()).toHaveLength(0); + }); + + it('custom ltrPrefix and rtlPrefix properties as arrays', (): void => { + const options: PluginOptions = { + ...pluginOptions, + ltrPrefix: ['.ltr', '.left-to-right'], + rtlPrefix: ['.rtl', '.right-to-left'], + bothPrefix: ['.ltr', '.left-to-right', '.rtl', '.right-to-left'] + }; + const output = postcss([postcssRTLCSS(options)]).process(input); + expect(output.css).toMatchSpecificSnapshot( + createSnapshotFileName(BASE_NAME,'custom-ltr-and-rtl-prefix-as-arrays', pluginOptions.mode) + ); + expect(output.warnings()).toHaveLength(0); + }); + + it('custom ltrPrefix, rtlPrefix, and bothPrefix properties as arrays and processUrls: true', (): void => { + const options: PluginOptions = { + ...pluginOptions, + ltrPrefix: ['.ltr', '.left-to-right'], + rtlPrefix: ['.rtl', '.right-to-left'], + bothPrefix: ['.ltr', '.left-to-right', '.rtl', '.right-to-left'], + processUrls: true + }; + const output = postcss([postcssRTLCSS(options)]).process(input); + expect(output.css).toMatchSpecificSnapshot( + createSnapshotFileName(BASE_NAME,'custom-ltr-rtl-and-both-prefix-as-arrays-and-process-urls-true', pluginOptions.mode) + ); + expect(output.warnings()).toHaveLength(0); + }); + + it('prefixSelectorTransformer with default prefixes', (): void => { + const transformer = (prefix: string, selector: string) => { + if (!selector.startsWith('html') && selector.indexOf(':root') < 0) { + return `${prefix} > ${selector}`; + } + }; + const options: PluginOptions = { ...pluginOptions, prefixSelectorTransformer: transformer }; + const output = postcss([postcssRTLCSS(options)]).process(input); + expect(output.css).toMatchSpecificSnapshot( + createSnapshotFileName(BASE_NAME,'prefix-selector-transformer-with-default-prefixes', pluginOptions.mode) + ); + expect(output.warnings()).toHaveLength(0); + }); + + it('prefixSelectorTransformer with custom ltrPrefix and rtlPrefix', (): void => { + const transformer = (prefix: string, selector: string) => { + if (!selector.startsWith('html') && selector.indexOf(':root') < 0) { + return `${prefix}${selector}`; + } + }; + const options: PluginOptions = { + ...pluginOptions, + prefixSelectorTransformer: transformer, + ltrPrefix: '.ltr', + rtlPrefix: '.rtl', + bothPrefix: ['.ltr', '.rtl'] + }; + const output = postcss([postcssRTLCSS(options)]).process(input); + expect(output.css).toMatchSpecificSnapshot( + createSnapshotFileName(BASE_NAME,'prefix-selector-transformer-with-custom-ltr-and-rtl-prefixes', pluginOptions.mode) + ); + expect(output.warnings()).toHaveLength(0); + }); - it('prefixSelectorTransformer with custom ltrPrefix and rtlPrefix', (): void => { - const transformer = (prefix: string, selector: string) => { - if (!selector.startsWith('html') && selector.indexOf(':root') < 0) { - return `${prefix}${selector}`; - } - }; - const options: PluginOptions = { - ...pluginOptions, - prefixSelectorTransformer: transformer, - ltrPrefix: '.ltr', - rtlPrefix: '.rtl', - bothPrefix: ['.ltr', '.rtl'] - }; - const output = postcss([postcssRTLCSS(options)]).process(input); - expect(output.css).toMatchSpecificSnapshot( - createSnapshotFileName(BASE_NAME,'prefix-selector-transformer-with-custom-ltr-and-rtl-prefixes', pluginOptions.mode) - ); - expect(output.warnings()).toHaveLength(0); }); - - }); }); \ No newline at end of file diff --git a/tests/rule-names.test.ts b/tests/rule-names.test.ts index 772a7a43..f944bbfc 100644 --- a/tests/rule-names.test.ts +++ b/tests/rule-names.test.ts @@ -2,9 +2,9 @@ import postcss from 'postcss'; import postcssRTLCSS from '../src'; import { PluginOptions, Source } from '../src/@types'; import { - readCSSFile, - runTests, - createSnapshotFileName + readCSSFile, + runTests, + createSnapshotFileName } from './utils'; import 'jest-specific-snapshot'; @@ -12,80 +12,80 @@ const BASE_NAME = 'rule-names'; runTests({}, (pluginOptions: PluginOptions): void => { - describe(`[[Mode: ${pluginOptions.mode}]] processRuleNames Tests: `, (): void => { + describe(`[[Mode: ${pluginOptions.mode}]] processRuleNames Tests: `, (): void => { - let input = ''; - - beforeEach(async (): Promise => { - input = input || await readCSSFile('input.css'); - }); - - it('processRuleNames: true', (): void => { - const options: PluginOptions = { ...pluginOptions, processRuleNames: true }; - const output = postcss([postcssRTLCSS(options)]).process(input); - expect(output.css).toMatchSpecificSnapshot( - createSnapshotFileName(BASE_NAME,'process-rules-names-true', pluginOptions.mode) - ); - expect(output.warnings()).toHaveLength(0); - }); - - it('processRuleNames: true, greedy: true', (): void => { - const options: PluginOptions = { ...pluginOptions, processRuleNames: true, greedy: true }; - const output = postcss([postcssRTLCSS(options)]).process(input); - expect(output.css).toMatchSpecificSnapshot( - createSnapshotFileName(BASE_NAME,'process-rules-names-true-greedy-true', pluginOptions.mode) - ); - expect(output.warnings()).toHaveLength(0); - }); + let input = ''; - it('processRuleNames: true, with source rtl greedy: true', (): void => { - const options: PluginOptions = { ...pluginOptions, processRuleNames: true, greedy: true, source: Source.rtl }; - const output = postcss([postcssRTLCSS(options)]).process(input); - expect(output.css).toMatchSpecificSnapshot( - createSnapshotFileName(BASE_NAME,'process-rules-names-true-source-rtl-greedy-true', pluginOptions.mode) - ); - expect(output.warnings()).toHaveLength(0); - }); - - it('processRuleNames: true with custom string map', (): void => { - const stringMap: PluginOptions['stringMap'] = [ - {search: 'left', replace: 'right'}, - {search: 'prev', replace: 'next'} - ]; - const options: PluginOptions = { ...pluginOptions, processRuleNames: true, stringMap }; - const output = postcss([postcssRTLCSS(options)]).process(input); - expect(output.css).toMatchSpecificSnapshot( - createSnapshotFileName(BASE_NAME,'process-rules-names-true-with-custom-string-map', pluginOptions.mode) - ); - expect(output.warnings()).toHaveLength(0); - }); + beforeEach(async (): Promise => { + input = input || await readCSSFile('input.css'); + }); - it('processRuleNames: true with custom string map and greedy: true', (): void => { - const stringMap: PluginOptions['stringMap'] = [ - {search: 'left', replace: 'right'}, - {search: 'prev', replace: 'next'} - ]; - const options: PluginOptions = { ...pluginOptions, processRuleNames: true, greedy: true, stringMap }; - const output = postcss([postcssRTLCSS(options)]).process(input); - expect(output.css).toMatchSpecificSnapshot( - createSnapshotFileName(BASE_NAME,'process-rules-names-true-with-custom-string-map-and-greedy-true', pluginOptions.mode) - ); - expect(output.warnings()).toHaveLength(0); - }); + it('processRuleNames: true', (): void => { + const options: PluginOptions = { ...pluginOptions, processRuleNames: true }; + const output = postcss([postcssRTLCSS(options)]).process(input); + expect(output.css).toMatchSpecificSnapshot( + createSnapshotFileName(BASE_NAME,'process-rules-names-true', pluginOptions.mode) + ); + expect(output.warnings()).toHaveLength(0); + }); + + it('processRuleNames: true, greedy: true', (): void => { + const options: PluginOptions = { ...pluginOptions, processRuleNames: true, greedy: true }; + const output = postcss([postcssRTLCSS(options)]).process(input); + expect(output.css).toMatchSpecificSnapshot( + createSnapshotFileName(BASE_NAME,'process-rules-names-true-greedy-true', pluginOptions.mode) + ); + expect(output.warnings()).toHaveLength(0); + }); + + it('processRuleNames: true, with source rtl greedy: true', (): void => { + const options: PluginOptions = { ...pluginOptions, processRuleNames: true, greedy: true, source: Source.rtl }; + const output = postcss([postcssRTLCSS(options)]).process(input); + expect(output.css).toMatchSpecificSnapshot( + createSnapshotFileName(BASE_NAME,'process-rules-names-true-source-rtl-greedy-true', pluginOptions.mode) + ); + expect(output.warnings()).toHaveLength(0); + }); + + it('processRuleNames: true with custom string map', (): void => { + const stringMap: PluginOptions['stringMap'] = [ + {search: 'left', replace: 'right'}, + {search: 'prev', replace: 'next'} + ]; + const options: PluginOptions = { ...pluginOptions, processRuleNames: true, stringMap }; + const output = postcss([postcssRTLCSS(options)]).process(input); + expect(output.css).toMatchSpecificSnapshot( + createSnapshotFileName(BASE_NAME,'process-rules-names-true-with-custom-string-map', pluginOptions.mode) + ); + expect(output.warnings()).toHaveLength(0); + }); + + it('processRuleNames: true with custom string map and greedy: true', (): void => { + const stringMap: PluginOptions['stringMap'] = [ + {search: 'left', replace: 'right'}, + {search: 'prev', replace: 'next'} + ]; + const options: PluginOptions = { ...pluginOptions, processRuleNames: true, greedy: true, stringMap }; + const output = postcss([postcssRTLCSS(options)]).process(input); + expect(output.css).toMatchSpecificSnapshot( + createSnapshotFileName(BASE_NAME,'process-rules-names-true-with-custom-string-map-and-greedy-true', pluginOptions.mode) + ); + expect(output.warnings()).toHaveLength(0); + }); + + it('processRuleNames: true with custom string map, source rtl and greedy: true', (): void => { + const stringMap: PluginOptions['stringMap'] = [ + {search: 'left', replace: 'right'}, + {search: 'prev', replace: 'next'} + ]; + const options: PluginOptions = { ...pluginOptions, processRuleNames: true, greedy: true, stringMap, source: Source.rtl }; + const output = postcss([postcssRTLCSS(options)]).process(input); + expect(output.css).toMatchSpecificSnapshot( + createSnapshotFileName(BASE_NAME,'process-rules-names-true-with-custom-string-map-rtl-and-greedy-true', pluginOptions.mode) + ); + expect(output.warnings()).toHaveLength(0); + }); - it('processRuleNames: true with custom string map, source rtl and greedy: true', (): void => { - const stringMap: PluginOptions['stringMap'] = [ - {search: 'left', replace: 'right'}, - {search: 'prev', replace: 'next'} - ]; - const options: PluginOptions = { ...pluginOptions, processRuleNames: true, greedy: true, stringMap, source: Source.rtl }; - const output = postcss([postcssRTLCSS(options)]).process(input); - expect(output.css).toMatchSpecificSnapshot( - createSnapshotFileName(BASE_NAME,'process-rules-names-true-with-custom-string-map-rtl-and-greedy-true', pluginOptions.mode) - ); - expect(output.warnings()).toHaveLength(0); }); - - }); }); \ No newline at end of file diff --git a/tests/safe-prefix.test.ts b/tests/safe-prefix.test.ts index 136a08ea..ef50cc99 100644 --- a/tests/safe-prefix.test.ts +++ b/tests/safe-prefix.test.ts @@ -2,9 +2,9 @@ import postcss from 'postcss'; import postcssRTLCSS from '../src'; import { PluginOptions, Source } from '../src/@types'; import { - readCSSFile, - runTests, - createSnapshotFileName + readCSSFile, + runTests, + createSnapshotFileName } from './utils'; import 'jest-specific-snapshot'; @@ -12,50 +12,50 @@ const BASE_NAME = 'safe-prefix'; runTests({}, (pluginOptions: PluginOptions): void => { - describe(`[[Mode: ${pluginOptions.mode}]] safeBothPrefix Option Tests: `, (): void => { + describe(`[[Mode: ${pluginOptions.mode}]] safeBothPrefix Option Tests: `, (): void => { + + let input = ''; + + beforeEach(async (): Promise => { + input = input || await readCSSFile('input.css'); + }); + + it('{safeBothPrefix: true}', (): void => { + const options: PluginOptions = { ...pluginOptions, safeBothPrefix: true }; + const output = postcss([postcssRTLCSS(options)]).process(input); + expect(output.css).toMatchSpecificSnapshot( + createSnapshotFileName(BASE_NAME,'safe-both-prefix-true', pluginOptions.mode) + ); + expect(output.warnings()).toHaveLength(0); + }); + + it('{safeBothPrefix: true} and {source: rtl}', (): void => { + const options: PluginOptions = { ...pluginOptions, source: Source.rtl, safeBothPrefix: true }; + const output = postcss([postcssRTLCSS(options)]).process(input); + expect(output.css).toMatchSpecificSnapshot( + createSnapshotFileName(BASE_NAME,'safe-both-prefix-true-rtl', pluginOptions.mode) + ); + expect(output.warnings()).toHaveLength(0); + }); + + it('{safeBothPrefix: true} and {processUrls: true}', (): void => { + const options: PluginOptions = { ...pluginOptions, safeBothPrefix: true, processUrls: true }; + const output = postcss([postcssRTLCSS(options)]).process(input); + expect(output.css).toMatchSpecificSnapshot( + createSnapshotFileName(BASE_NAME,'safe-both-prefix-true-process-urls-true', pluginOptions.mode) + ); + expect(output.warnings()).toHaveLength(0); + }); + + it('{safeBothPrefix: true} and {processKeyFrames: true}', (): void => { + const options: PluginOptions = { ...pluginOptions, safeBothPrefix: true, processKeyFrames: true }; + const output = postcss([postcssRTLCSS(options)]).process(input); + expect(output.css).toMatchSpecificSnapshot( + createSnapshotFileName(BASE_NAME,'safe-both-prefix-true-process-keyframes-true', pluginOptions.mode) + ); + expect(output.warnings()).toHaveLength(0); + }); - let input = ''; - - beforeEach(async (): Promise => { - input = input || await readCSSFile('input.css'); - }); - - it('{safeBothPrefix: true}', (): void => { - const options: PluginOptions = { ...pluginOptions, safeBothPrefix: true }; - const output = postcss([postcssRTLCSS(options)]).process(input); - expect(output.css).toMatchSpecificSnapshot( - createSnapshotFileName(BASE_NAME,'safe-both-prefix-true', pluginOptions.mode) - ); - expect(output.warnings()).toHaveLength(0); - }); - - it('{safeBothPrefix: true} and {source: rtl}', (): void => { - const options: PluginOptions = { ...pluginOptions, source: Source.rtl, safeBothPrefix: true }; - const output = postcss([postcssRTLCSS(options)]).process(input); - expect(output.css).toMatchSpecificSnapshot( - createSnapshotFileName(BASE_NAME,'safe-both-prefix-true-rtl', pluginOptions.mode) - ); - expect(output.warnings()).toHaveLength(0); - }); - - it('{safeBothPrefix: true} and {processUrls: true}', (): void => { - const options: PluginOptions = { ...pluginOptions, safeBothPrefix: true, processUrls: true }; - const output = postcss([postcssRTLCSS(options)]).process(input); - expect(output.css).toMatchSpecificSnapshot( - createSnapshotFileName(BASE_NAME,'safe-both-prefix-true-process-urls-true', pluginOptions.mode) - ); - expect(output.warnings()).toHaveLength(0); - }); - - it('{safeBothPrefix: true} and {processKeyFrames: true}', (): void => { - const options: PluginOptions = { ...pluginOptions, safeBothPrefix: true, processKeyFrames: true }; - const output = postcss([postcssRTLCSS(options)]).process(input); - expect(output.css).toMatchSpecificSnapshot( - createSnapshotFileName(BASE_NAME,'safe-both-prefix-true-process-keyframes-true', pluginOptions.mode) - ); - expect(output.warnings()).toHaveLength(0); }); - - }); }); \ No newline at end of file diff --git a/tests/string-map.test.ts b/tests/string-map.test.ts index 5241af41..26e0066e 100644 --- a/tests/string-map.test.ts +++ b/tests/string-map.test.ts @@ -2,9 +2,9 @@ import postcss from 'postcss'; import postcssRTLCSS from '../src'; import { PluginOptions } from '../src/@types'; import { - readCSSFile, - runTests, - createSnapshotFileName + readCSSFile, + runTests, + createSnapshotFileName } from './utils'; import 'jest-specific-snapshot'; @@ -12,66 +12,66 @@ const BASE_NAME = 'string-map'; runTests({}, (pluginOptions: PluginOptions): void => { - describe(`[[Mode: ${pluginOptions.mode}]] String Map Tests: `, (): void => { + describe(`[[Mode: ${pluginOptions.mode}]] String Map Tests: `, (): void => { + + let input = ''; + + beforeEach(async (): Promise => { + input = input || await readCSSFile('input.css'); + }); + + it('custom string map and processUrls: true', (): void => { + const stringMap: PluginOptions['stringMap'] = [ + {name: 'left-right', search: 'left', replace: 'right'}, + {name: 'ltr-rtl', search: 'ltr', replace: 'rtl'}, + {name: 'prev-next', search: 'prev', replace: 'next'} + ]; + const options: PluginOptions = { ...pluginOptions, processUrls: true, stringMap }; + const output = postcss([postcssRTLCSS(options)]).process(input); + expect(output.css).toMatchSpecificSnapshot( + createSnapshotFileName(BASE_NAME,'custom-string-map-process-urls-true', pluginOptions.mode) + ); + expect(output.warnings()).toHaveLength(0); + }); + + it('custom string map without names and processUrls: true', (): void => { + const stringMap: PluginOptions['stringMap'] = [ + {search: 'left', replace: 'right'}, + {search: 'ltr', replace: 'rtl'}, + {search: ['prev', 'Prev'], replace: ['next', 'Next']} + ]; + const options: PluginOptions = { ...pluginOptions, processUrls: true, stringMap }; + const output = postcss([postcssRTLCSS(options)]).process(input); + expect(output.css).toMatchSpecificSnapshot( + createSnapshotFileName(BASE_NAME,'custom-string-map-without-names-process-urls-true', pluginOptions.mode) + ); + expect(output.warnings()).toHaveLength(0); + }); + + it('custom no-valid string map and processUrls: true (different types)', (): void => { + const stringMap: PluginOptions['stringMap'] = [ + {search: ['left', 'rtl'], replace: 'right'} + ]; + const options: PluginOptions = { ...pluginOptions, processUrls: true, stringMap }; + const output = postcss([postcssRTLCSS(options)]).process(input); + expect(output.css).toMatchSpecificSnapshot( + createSnapshotFileName(BASE_NAME,'custom-non-valid-string-different-types-map-process-urls-true', pluginOptions.mode) + ); + expect(output.warnings()).toHaveLength(0); + }); + + it('custom no-valid string map and processUrls: true (different lenghts)', (): void => { + const stringMap: PluginOptions['stringMap'] = [ + {search: ['left', 'rtl'], replace: ['right']} + ]; + const options: PluginOptions = { ...pluginOptions, processUrls: true, stringMap }; + const output = postcss([postcssRTLCSS(options)]).process(input); + expect(output.css).toMatchSpecificSnapshot( + createSnapshotFileName(BASE_NAME,'custom-non-valid-string-different-lengths-map-process-urls-true', pluginOptions.mode) + ); + expect(output.warnings()).toHaveLength(0); + }); - let input = ''; - - beforeEach(async (): Promise => { - input = input || await readCSSFile('input.css'); - }); - - it('custom string map and processUrls: true', (): void => { - const stringMap: PluginOptions['stringMap'] = [ - {name: 'left-right', search: 'left', replace: 'right'}, - {name: 'ltr-rtl', search: 'ltr', replace: 'rtl'}, - {name: 'prev-next', search: 'prev', replace: 'next'} - ]; - const options: PluginOptions = { ...pluginOptions, processUrls: true, stringMap }; - const output = postcss([postcssRTLCSS(options)]).process(input); - expect(output.css).toMatchSpecificSnapshot( - createSnapshotFileName(BASE_NAME,'custom-string-map-process-urls-true', pluginOptions.mode) - ); - expect(output.warnings()).toHaveLength(0); - }); - - it('custom string map without names and processUrls: true', (): void => { - const stringMap: PluginOptions['stringMap'] = [ - {search: 'left', replace: 'right'}, - {search: 'ltr', replace: 'rtl'}, - {search: ['prev', 'Prev'], replace: ['next', 'Next']} - ]; - const options: PluginOptions = { ...pluginOptions, processUrls: true, stringMap }; - const output = postcss([postcssRTLCSS(options)]).process(input); - expect(output.css).toMatchSpecificSnapshot( - createSnapshotFileName(BASE_NAME,'custom-string-map-without-names-process-urls-true', pluginOptions.mode) - ); - expect(output.warnings()).toHaveLength(0); - }); - - it('custom no-valid string map and processUrls: true (different types)', (): void => { - const stringMap: PluginOptions['stringMap'] = [ - {search: ['left', 'rtl'], replace: 'right'} - ]; - const options: PluginOptions = { ...pluginOptions, processUrls: true, stringMap }; - const output = postcss([postcssRTLCSS(options)]).process(input); - expect(output.css).toMatchSpecificSnapshot( - createSnapshotFileName(BASE_NAME,'custom-non-valid-string-different-types-map-process-urls-true', pluginOptions.mode) - ); - expect(output.warnings()).toHaveLength(0); - }); - - it('custom no-valid string map and processUrls: true (different lenghts)', (): void => { - const stringMap: PluginOptions['stringMap'] = [ - {search: ['left', 'rtl'], replace: ['right']} - ]; - const options: PluginOptions = { ...pluginOptions, processUrls: true, stringMap }; - const output = postcss([postcssRTLCSS(options)]).process(input); - expect(output.css).toMatchSpecificSnapshot( - createSnapshotFileName(BASE_NAME,'custom-non-valid-string-different-lengths-map-process-urls-true', pluginOptions.mode) - ); - expect(output.warnings()).toHaveLength(0); }); - - }); }); \ No newline at end of file From b13a8b8cc93f8e18d12f449185c0d32155eff604 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Sun, 12 May 2024 23:16:17 +0000 Subject: [PATCH 02/13] [Dependencies]: Bump the dependencies-dev group with 4 updates Bumps the dependencies-dev group with 4 updates: [@types/eslint](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/eslint), [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node), [globals](https://github.com/sindresorhus/globals) and [rimraf](https://github.com/isaacs/rimraf). Updates `@types/eslint` from 8.56.9 to 8.56.10 - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/eslint) Updates `@types/node` from 20.12.8 to 20.12.11 - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node) Updates `globals` from 15.1.0 to 15.2.0 - [Release notes](https://github.com/sindresorhus/globals/releases) - [Commits](https://github.com/sindresorhus/globals/compare/v15.1.0...v15.2.0) Updates `rimraf` from 5.0.5 to 5.0.7 - [Changelog](https://github.com/isaacs/rimraf/blob/main/CHANGELOG.md) - [Commits](https://github.com/isaacs/rimraf/compare/v5.0.5...v5.0.7) --- updated-dependencies: - dependency-name: "@types/eslint" dependency-type: direct:development update-type: version-update:semver-patch dependency-group: dependencies-dev - dependency-name: "@types/node" dependency-type: direct:development update-type: version-update:semver-patch dependency-group: dependencies-dev - dependency-name: globals dependency-type: direct:development update-type: version-update:semver-minor dependency-group: dependencies-dev - dependency-name: rimraf dependency-type: direct:development update-type: version-update:semver-patch dependency-group: dependencies-dev ... Signed-off-by: dependabot[bot] --- package.json | 8 ++-- pnpm-lock.yaml | 124 ++++++++++++++++++++++++------------------------- 2 files changed, 66 insertions(+), 66 deletions(-) diff --git a/package.json b/package.json index 1066b1cf..50abcced 100644 --- a/package.json +++ b/package.json @@ -69,19 +69,19 @@ "devDependencies": { "@rollup/plugin-json": "^6.1.0", "@rollup/plugin-terser": "^0.4.4", - "@types/eslint": "^8.56.9", + "@types/eslint": "^8.56.10", "@types/jest": "^29.5.12", "@types/jest-specific-snapshot": "^0.5.9", - "@types/node": "^20.12.8", + "@types/node": "^20.12.11", "@types/rtlcss": "^3.5.4", "eslint": "^9.2.0", "eslint-plugin-jest": "^28.5.0", - "globals": "^15.1.0", + "globals": "^15.2.0", "jest": "^29.7.0", "jest-specific-snapshot": "^8.0.0", "postcss": "^8.4.26", "replace-in-file": "^7.1.0", - "rimraf": "^5.0.5", + "rimraf": "^5.0.7", "rollup": "^4.17.2", "rollup-plugin-ts": "^3.4.5", "ts-jest": "^29.1.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5e462cc8..391c5c29 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -17,8 +17,8 @@ devDependencies: specifier: ^0.4.4 version: 0.4.4(rollup@4.17.2) '@types/eslint': - specifier: ^8.56.9 - version: 8.56.9 + specifier: ^8.56.10 + version: 8.56.10 '@types/jest': specifier: ^29.5.12 version: 29.5.12 @@ -26,8 +26,8 @@ devDependencies: specifier: ^0.5.9 version: 0.5.9 '@types/node': - specifier: ^20.12.8 - version: 20.12.8 + specifier: ^20.12.11 + version: 20.12.11 '@types/rtlcss': specifier: ^3.5.4 version: 3.5.4 @@ -38,11 +38,11 @@ devDependencies: specifier: ^28.5.0 version: 28.5.0(eslint@9.2.0)(jest@29.7.0)(typescript@5.4.5) globals: - specifier: ^15.1.0 - version: 15.1.0 + specifier: ^15.2.0 + version: 15.2.0 jest: specifier: ^29.7.0 - version: 29.7.0(@types/node@20.12.8) + version: 29.7.0(@types/node@20.12.11) jest-specific-snapshot: specifier: ^8.0.0 version: 8.0.0(jest@29.7.0) @@ -53,8 +53,8 @@ devDependencies: specifier: ^7.1.0 version: 7.1.0 rimraf: - specifier: ^5.0.5 - version: 5.0.5 + specifier: ^5.0.7 + version: 5.0.7 rollup: specifier: ^4.17.2 version: 4.17.2 @@ -509,7 +509,7 @@ packages: engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} dependencies: '@jest/types': 29.6.3 - '@types/node': 20.12.8 + '@types/node': 20.12.11 chalk: 4.1.2 jest-message-util: 29.7.0 jest-util: 29.7.0 @@ -530,14 +530,14 @@ packages: '@jest/test-result': 29.7.0 '@jest/transform': 29.7.0 '@jest/types': 29.6.3 - '@types/node': 20.12.8 + '@types/node': 20.12.11 ansi-escapes: 4.3.2 chalk: 4.1.2 ci-info: 3.9.0 exit: 0.1.2 graceful-fs: 4.2.11 jest-changed-files: 29.7.0 - jest-config: 29.7.0(@types/node@20.12.8) + jest-config: 29.7.0(@types/node@20.12.11) jest-haste-map: 29.7.0 jest-message-util: 29.7.0 jest-regex-util: 29.6.3 @@ -565,7 +565,7 @@ packages: dependencies: '@jest/fake-timers': 29.7.0 '@jest/types': 29.6.3 - '@types/node': 20.12.8 + '@types/node': 20.12.11 jest-mock: 29.7.0 dev: true @@ -592,7 +592,7 @@ packages: dependencies: '@jest/types': 29.6.3 '@sinonjs/fake-timers': 10.3.0 - '@types/node': 20.12.8 + '@types/node': 20.12.11 jest-message-util: 29.7.0 jest-mock: 29.7.0 jest-util: 29.7.0 @@ -625,7 +625,7 @@ packages: '@jest/transform': 29.7.0 '@jest/types': 29.6.3 '@jridgewell/trace-mapping': 0.3.25 - '@types/node': 20.12.8 + '@types/node': 20.12.11 chalk: 4.1.2 collect-v8-coverage: 1.0.2 exit: 0.1.2 @@ -713,7 +713,7 @@ packages: '@jest/schemas': 29.6.3 '@types/istanbul-lib-coverage': 2.0.6 '@types/istanbul-reports': 3.0.4 - '@types/node': 20.12.8 + '@types/node': 20.12.11 '@types/yargs': 17.0.32 chalk: 4.1.2 dev: true @@ -1003,8 +1003,8 @@ packages: '@babel/types': 7.24.0 dev: true - /@types/eslint@8.56.9: - resolution: {integrity: sha512-W4W3KcqzjJ0sHg2vAq9vfml6OhsJ53TcUjUqfzzZf/EChUtwspszj/S0pzMxnfRcO55/iGq47dscXw71Fxc4Zg==} + /@types/eslint@8.56.10: + resolution: {integrity: sha512-Shavhk87gCtY2fhXDctcfS3e6FdxWkCx1iUZ9eEUbh7rTqlZT0/IzOkCOVt0fCjcFuZ9FPYfuezTBImfHCDBGQ==} dependencies: '@types/estree': 1.0.5 '@types/json-schema': 7.0.15 @@ -1017,7 +1017,7 @@ packages: /@types/graceful-fs@4.1.9: resolution: {integrity: sha512-olP3sd1qOEe5dXTSaFvQG+02VdRXcdytWLAZsAq1PecU8uqQAhkrnbli7DagjtXKW/Bl7YJbUsa8MPcuc8LHEQ==} dependencies: - '@types/node': 20.12.8 + '@types/node': 20.12.11 dev: true /@types/istanbul-lib-coverage@2.0.6: @@ -1057,8 +1057,8 @@ packages: resolution: {integrity: sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==} dev: true - /@types/node@20.12.8: - resolution: {integrity: sha512-NU0rJLJnshZWdE/097cdCBbyW1h4hEg0xpovcoAQYHl8dnEyp/NAOiE45pvc+Bd1Dt+2r94v2eGFpQJ4R7g+2w==} + /@types/node@20.12.11: + resolution: {integrity: sha512-vDg9PZ/zi+Nqp6boSOT7plNuthRugEKixDv5sFTIpkE89MmNtEArAShI4mxuX2+UrLEe9pxC1vm2cjm9YlWbJw==} dependencies: undici-types: 5.26.5 dev: true @@ -1575,7 +1575,7 @@ packages: resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==} dev: true - /create-jest@29.7.0(@types/node@20.12.8): + /create-jest@29.7.0(@types/node@20.12.11): resolution: {integrity: sha512-Adz2bdH0Vq3F53KEMJOoftQFutWCukm6J24wbPWRO4k1kMY7gS7ds/uoJkNuV8wDCtWWnuwGcJwpWcih+zEW1Q==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} hasBin: true @@ -1584,7 +1584,7 @@ packages: chalk: 4.1.2 exit: 0.1.2 graceful-fs: 4.2.11 - jest-config: 29.7.0(@types/node@20.12.8) + jest-config: 29.7.0(@types/node@20.12.11) jest-util: 29.7.0 prompts: 2.4.2 transitivePeerDependencies: @@ -1718,7 +1718,7 @@ packages: dependencies: '@typescript-eslint/utils': 7.8.0(eslint@9.2.0)(typescript@5.4.5) eslint: 9.2.0 - jest: 29.7.0(@types/node@20.12.8) + jest: 29.7.0(@types/node@20.12.11) transitivePeerDependencies: - supports-color - typescript @@ -1994,16 +1994,16 @@ packages: is-glob: 4.0.3 dev: true - /glob@10.3.10: - resolution: {integrity: sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==} - engines: {node: '>=16 || 14 >=14.17'} + /glob@10.3.15: + resolution: {integrity: sha512-0c6RlJt1TICLyvJYIApxb8GsXoai0KUP7AxKKAtsYXdgJR1mGEUa7DgwShbdk1nly0PYoZj01xd4hzbq3fsjpw==} + engines: {node: '>=16 || 14 >=14.18'} hasBin: true dependencies: foreground-child: 3.1.1 jackspeak: 2.3.6 minimatch: 9.0.4 - minipass: 7.0.4 - path-scurry: 1.10.1 + minipass: 7.1.1 + path-scurry: 1.11.1 dev: true /glob@7.2.3: @@ -2038,8 +2038,8 @@ packages: engines: {node: '>=18'} dev: true - /globals@15.1.0: - resolution: {integrity: sha512-926gJqg+4mkxwYKiFvoomM4J0kWESfk3qfTvRL2/oc/tK/eTDBbrfcKnSa2KtfdxB5onoL7D3A3qIHQFpd4+UA==} + /globals@15.2.0: + resolution: {integrity: sha512-FQ5YwCHZM3nCmtb5FzEWwdUc9K5d3V/w9mzcz8iGD1gC/aOTHc6PouYu0kkKipNJqHAT7m51sqzQjEjIP+cK0A==} engines: {node: '>=18'} dev: true @@ -2273,7 +2273,7 @@ packages: '@jest/expect': 29.7.0 '@jest/test-result': 29.7.0 '@jest/types': 29.6.3 - '@types/node': 20.12.8 + '@types/node': 20.12.11 chalk: 4.1.2 co: 4.6.0 dedent: 1.5.1 @@ -2294,7 +2294,7 @@ packages: - supports-color dev: true - /jest-cli@29.7.0(@types/node@20.12.8): + /jest-cli@29.7.0(@types/node@20.12.11): resolution: {integrity: sha512-OVVobw2IubN/GSYsxETi+gOe7Ka59EFMR/twOU3Jb2GnKKeMGJB5SGUUrEz3SFVmJASUdZUzy83sLNNQ2gZslg==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} hasBin: true @@ -2308,10 +2308,10 @@ packages: '@jest/test-result': 29.7.0 '@jest/types': 29.6.3 chalk: 4.1.2 - create-jest: 29.7.0(@types/node@20.12.8) + create-jest: 29.7.0(@types/node@20.12.11) exit: 0.1.2 import-local: 3.1.0 - jest-config: 29.7.0(@types/node@20.12.8) + jest-config: 29.7.0(@types/node@20.12.11) jest-util: 29.7.0 jest-validate: 29.7.0 yargs: 17.7.2 @@ -2322,7 +2322,7 @@ packages: - ts-node dev: true - /jest-config@29.7.0(@types/node@20.12.8): + /jest-config@29.7.0(@types/node@20.12.11): resolution: {integrity: sha512-uXbpfeQ7R6TZBqI3/TxCU4q4ttk3u0PJeC+E0zbfSoSjq6bJ7buBPxzQPL0ifrkY4DNu4JUdk0ImlBUYi840eQ==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} peerDependencies: @@ -2337,7 +2337,7 @@ packages: '@babel/core': 7.24.3 '@jest/test-sequencer': 29.7.0 '@jest/types': 29.6.3 - '@types/node': 20.12.8 + '@types/node': 20.12.11 babel-jest: 29.7.0(@babel/core@7.24.3) chalk: 4.1.2 ci-info: 3.9.0 @@ -2397,7 +2397,7 @@ packages: '@jest/environment': 29.7.0 '@jest/fake-timers': 29.7.0 '@jest/types': 29.6.3 - '@types/node': 20.12.8 + '@types/node': 20.12.11 jest-mock: 29.7.0 jest-util: 29.7.0 dev: true @@ -2413,7 +2413,7 @@ packages: dependencies: '@jest/types': 29.6.3 '@types/graceful-fs': 4.1.9 - '@types/node': 20.12.8 + '@types/node': 20.12.11 anymatch: 3.1.3 fb-watchman: 2.0.2 graceful-fs: 4.2.11 @@ -2464,7 +2464,7 @@ packages: engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} dependencies: '@jest/types': 29.6.3 - '@types/node': 20.12.8 + '@types/node': 20.12.11 jest-util: 29.7.0 dev: true @@ -2519,7 +2519,7 @@ packages: '@jest/test-result': 29.7.0 '@jest/transform': 29.7.0 '@jest/types': 29.6.3 - '@types/node': 20.12.8 + '@types/node': 20.12.11 chalk: 4.1.2 emittery: 0.13.1 graceful-fs: 4.2.11 @@ -2550,7 +2550,7 @@ packages: '@jest/test-result': 29.7.0 '@jest/transform': 29.7.0 '@jest/types': 29.6.3 - '@types/node': 20.12.8 + '@types/node': 20.12.11 chalk: 4.1.2 cjs-module-lexer: 1.2.3 collect-v8-coverage: 1.0.2 @@ -2602,7 +2602,7 @@ packages: peerDependencies: jest: '>= 29.0.0' dependencies: - jest: 29.7.0(@types/node@20.12.8) + jest: 29.7.0(@types/node@20.12.11) jest-snapshot: 29.7.0 transitivePeerDependencies: - supports-color @@ -2613,7 +2613,7 @@ packages: engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} dependencies: '@jest/types': 29.6.3 - '@types/node': 20.12.8 + '@types/node': 20.12.11 chalk: 4.1.2 ci-info: 3.9.0 graceful-fs: 4.2.11 @@ -2638,7 +2638,7 @@ packages: dependencies: '@jest/test-result': 29.7.0 '@jest/types': 29.6.3 - '@types/node': 20.12.8 + '@types/node': 20.12.11 ansi-escapes: 4.3.2 chalk: 4.1.2 emittery: 0.13.1 @@ -2650,13 +2650,13 @@ packages: resolution: {integrity: sha512-eIz2msL/EzL9UFTFFx7jBTkeZfku0yUAyZZZmJ93H2TYEiroIx2PQjEXcwYtYl8zXCxb+PAmA2hLIt/6ZEkPHw==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} dependencies: - '@types/node': 20.12.8 + '@types/node': 20.12.11 jest-util: 29.7.0 merge-stream: 2.0.0 supports-color: 8.1.1 dev: true - /jest@29.7.0(@types/node@20.12.8): + /jest@29.7.0(@types/node@20.12.11): resolution: {integrity: sha512-NIy3oAFp9shda19hy4HK0HRTWKtPJmGdnvywu01nOqNC2vZg+Z+fvJDxpMQA88eb2I9EcafcdjYgsDthnYTvGw==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} hasBin: true @@ -2669,7 +2669,7 @@ packages: '@jest/core': 29.7.0 '@jest/types': 29.6.3 import-local: 3.1.0 - jest-cli: 29.7.0(@types/node@20.12.8) + jest-cli: 29.7.0(@types/node@20.12.11) transitivePeerDependencies: - '@types/node' - babel-plugin-macros @@ -2774,8 +2774,8 @@ packages: resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==} dev: true - /lru-cache@10.2.0: - resolution: {integrity: sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q==} + /lru-cache@10.2.2: + resolution: {integrity: sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ==} engines: {node: 14 || >=16.14} dev: true @@ -2858,8 +2858,8 @@ packages: brace-expansion: 2.0.1 dev: true - /minipass@7.0.4: - resolution: {integrity: sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==} + /minipass@7.1.1: + resolution: {integrity: sha512-UZ7eQ+h8ywIRAW1hIEl2AqdwzJucU/Kp59+8kkZeSvafXhZjul247BvIJjEVFVeON6d7lM46XX1HXCduKAS8VA==} engines: {node: '>=16 || 14 >=14.17'} dev: true @@ -2995,12 +2995,12 @@ packages: resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==} dev: true - /path-scurry@1.10.1: - resolution: {integrity: sha512-MkhCqzzBEpPvxxQ71Md0b1Kk51W01lrYvlMzSUaIzNsODdd7mqhiimSZlr+VegAz5Z6Vzt9Xg2ttE//XBhH3EQ==} - engines: {node: '>=16 || 14 >=14.17'} + /path-scurry@1.11.1: + resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==} + engines: {node: '>=16 || 14 >=14.18'} dependencies: - lru-cache: 10.2.0 - minipass: 7.0.4 + lru-cache: 10.2.2 + minipass: 7.1.1 dev: true /path-type@4.0.0: @@ -3132,12 +3132,12 @@ packages: engines: {iojs: '>=1.0.0', node: '>=0.10.0'} dev: true - /rimraf@5.0.5: - resolution: {integrity: sha512-CqDakW+hMe/Bz202FPEymy68P+G50RfMQK+Qo5YUqc9SPipvbGjCGKd0RSKEelbsfQuw3g5NZDSrlZZAJurH1A==} - engines: {node: '>=14'} + /rimraf@5.0.7: + resolution: {integrity: sha512-nV6YcJo5wbLW77m+8KjH8aB/7/rxQy9SZ0HY5shnwULfS+9nmTtVXAJET5NdZmCzA4fPI/Hm1wo/Po/4mopOdg==} + engines: {node: '>=14.18'} hasBin: true dependencies: - glob: 10.3.10 + glob: 10.3.15 dev: true /rollup-plugin-ts@3.4.5(@babel/core@7.24.3)(rollup@4.17.2)(typescript@5.4.5): @@ -3481,7 +3481,7 @@ packages: '@babel/core': 7.24.3 bs-logger: 0.2.6 fast-json-stable-stringify: 2.1.0 - jest: 29.7.0(@types/node@20.12.8) + jest: 29.7.0(@types/node@20.12.11) jest-util: 29.7.0 json5: 2.2.3 lodash.memoize: 4.1.2 From 2db8cf0271619f11082765a63b4cd5cce974e931 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Sun, 12 May 2024 03:51:02 +0000 Subject: [PATCH 03/13] [Playground dependencies]: Bump the dependencies-dev group Bumps the dependencies-dev group in /playground with 4 updates: [@types/eslint](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/eslint), [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node), [@types/react](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/react) and [globals](https://github.com/sindresorhus/globals). Updates `@types/eslint` from 8.56.9 to 8.56.10 - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/eslint) Updates `@types/node` from 20.12.8 to 20.12.11 - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node) Updates `@types/react` from 18.3.1 to 18.3.2 - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/react) Updates `globals` from 15.1.0 to 15.2.0 - [Release notes](https://github.com/sindresorhus/globals/releases) - [Commits](https://github.com/sindresorhus/globals/compare/v15.1.0...v15.2.0) --- updated-dependencies: - dependency-name: "@types/eslint" dependency-type: direct:development update-type: version-update:semver-patch dependency-group: dependencies-dev - dependency-name: "@types/node" dependency-type: direct:development update-type: version-update:semver-patch dependency-group: dependencies-dev - dependency-name: "@types/react" dependency-type: direct:development update-type: version-update:semver-patch dependency-group: dependencies-dev - dependency-name: globals dependency-type: direct:development update-type: version-update:semver-minor dependency-group: dependencies-dev ... Signed-off-by: dependabot[bot] --- playground/package.json | 8 ++--- playground/pnpm-lock.yaml | 62 +++++++++++++++++++-------------------- 2 files changed, 35 insertions(+), 35 deletions(-) diff --git a/playground/package.json b/playground/package.json index 15a0c913..20e55fb9 100644 --- a/playground/package.json +++ b/playground/package.json @@ -34,9 +34,9 @@ "@babel/preset-env": "^7.24.5", "@babel/preset-react": "^7.24.1", "@babel/preset-typescript": "^7.24.1", - "@types/eslint": "^8.56.9", - "@types/node": "^20.12.8", - "@types/react": "^18.3.1", + "@types/eslint": "^8.56.10", + "@types/node": "^20.12.11", + "@types/react": "^18.3.2", "@types/react-dom": "^18.3.0", "autoprefixer": "^10.4.19", "babel-loader": "^9.1.3", @@ -48,7 +48,7 @@ "eslint-plugin-react": "^7.34.1", "eslint-utils": "^3.0.0", "file-loader": "^6.2.0", - "globals": "^15.1.0", + "globals": "^15.2.0", "html-webpack-plugin": "^5.6.0", "mini-css-extract-plugin": "^2.9.0", "monaco-editor-webpack-plugin": "^7.1.0", diff --git a/playground/pnpm-lock.yaml b/playground/pnpm-lock.yaml index ef5ecf8e..53791411 100644 --- a/playground/pnpm-lock.yaml +++ b/playground/pnpm-lock.yaml @@ -38,14 +38,14 @@ devDependencies: specifier: ^7.24.1 version: 7.24.1(@babel/core@7.24.5) '@types/eslint': - specifier: ^8.56.9 - version: 8.56.9 + specifier: ^8.56.10 + version: 8.56.10 '@types/node': - specifier: ^20.12.8 - version: 20.12.8 + specifier: ^20.12.11 + version: 20.12.11 '@types/react': - specifier: ^18.3.1 - version: 18.3.1 + specifier: ^18.3.2 + version: 18.3.2 '@types/react-dom': specifier: ^18.3.0 version: 18.3.0 @@ -80,8 +80,8 @@ devDependencies: specifier: ^6.2.0 version: 6.2.0(webpack@5.91.0) globals: - specifier: ^15.1.0 - version: 15.1.0 + specifier: ^15.2.0 + version: 15.2.0 html-webpack-plugin: specifier: ^5.6.0 version: 5.6.0(webpack@5.91.0) @@ -1649,37 +1649,37 @@ packages: resolution: {integrity: sha512-fB3Zu92ucau0iQ0JMCFQE7b/dv8Ot07NI3KaZIkIUNXq82k4eBAqUaneXfleGY9JWskeS9y+u0nXMyspcuQrCg==} dependencies: '@types/connect': 3.4.38 - '@types/node': 20.12.8 + '@types/node': 20.12.11 dev: true /@types/bonjour@3.5.13: resolution: {integrity: sha512-z9fJ5Im06zvUL548KvYNecEVlA7cVDkGUi6kZusb04mpyEFKCIZJvloCcmpmLaIahDpOQGHaHmG6imtPMmPXGQ==} dependencies: - '@types/node': 20.12.8 + '@types/node': 20.12.11 dev: true /@types/connect-history-api-fallback@1.5.4: resolution: {integrity: sha512-n6Cr2xS1h4uAulPRdlw6Jl6s1oG8KrVilPN2yUITEs+K48EzMJJ3W1xy8K5eWuFvjp3R74AOIGSmp2UfBJ8HFw==} dependencies: '@types/express-serve-static-core': 4.17.43 - '@types/node': 20.12.8 + '@types/node': 20.12.11 dev: true /@types/connect@3.4.38: resolution: {integrity: sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==} dependencies: - '@types/node': 20.12.8 + '@types/node': 20.12.11 dev: true /@types/eslint-scope@3.7.7: resolution: {integrity: sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==} dependencies: - '@types/eslint': 8.56.9 + '@types/eslint': 8.56.10 '@types/estree': 1.0.5 dev: true - /@types/eslint@8.56.9: - resolution: {integrity: sha512-W4W3KcqzjJ0sHg2vAq9vfml6OhsJ53TcUjUqfzzZf/EChUtwspszj/S0pzMxnfRcO55/iGq47dscXw71Fxc4Zg==} + /@types/eslint@8.56.10: + resolution: {integrity: sha512-Shavhk87gCtY2fhXDctcfS3e6FdxWkCx1iUZ9eEUbh7rTqlZT0/IzOkCOVt0fCjcFuZ9FPYfuezTBImfHCDBGQ==} dependencies: '@types/estree': 1.0.5 '@types/json-schema': 7.0.15 @@ -1692,7 +1692,7 @@ packages: /@types/express-serve-static-core@4.17.43: resolution: {integrity: sha512-oaYtiBirUOPQGSWNGPWnzyAFJ0BP3cwvN4oWZQY+zUBwpVIGsKUkpBpSztp74drYcjavs7SKFZ4DX1V2QeN8rg==} dependencies: - '@types/node': 20.12.8 + '@types/node': 20.12.11 '@types/qs': 6.9.14 '@types/range-parser': 1.2.7 '@types/send': 0.17.4 @@ -1711,7 +1711,7 @@ packages: resolution: {integrity: sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==} dependencies: '@types/minimatch': 5.1.2 - '@types/node': 20.12.8 + '@types/node': 20.12.11 dev: true /@types/html-minifier-terser@6.1.0: @@ -1725,7 +1725,7 @@ packages: /@types/http-proxy@1.17.14: resolution: {integrity: sha512-SSrD0c1OQzlFX7pGu1eXxSEjemej64aaNPRhhVYUGqXh0BtldAAx37MG8btcumvpgKyZp1F5Gn3JkktdxiFv6w==} dependencies: - '@types/node': 20.12.8 + '@types/node': 20.12.11 dev: true /@types/json-schema@7.0.15: @@ -1751,11 +1751,11 @@ packages: /@types/node-forge@1.3.11: resolution: {integrity: sha512-FQx220y22OKNTqaByeBGqHWYz4cl94tpcxeFdvBo3wjG6XPBuZ0BNgNZRV5J5TFmmcsJ4IzsLkmGRiQbnYsBEQ==} dependencies: - '@types/node': 20.12.8 + '@types/node': 20.12.11 dev: true - /@types/node@20.12.8: - resolution: {integrity: sha512-NU0rJLJnshZWdE/097cdCBbyW1h4hEg0xpovcoAQYHl8dnEyp/NAOiE45pvc+Bd1Dt+2r94v2eGFpQJ4R7g+2w==} + /@types/node@20.12.11: + resolution: {integrity: sha512-vDg9PZ/zi+Nqp6boSOT7plNuthRugEKixDv5sFTIpkE89MmNtEArAShI4mxuX2+UrLEe9pxC1vm2cjm9YlWbJw==} dependencies: undici-types: 5.26.5 dev: true @@ -1779,11 +1779,11 @@ packages: /@types/react-dom@18.3.0: resolution: {integrity: sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==} dependencies: - '@types/react': 18.3.1 + '@types/react': 18.3.2 dev: true - /@types/react@18.3.1: - resolution: {integrity: sha512-V0kuGBX3+prX+DQ/7r2qsv1NsdfnCLnTgnRJ1pYnxykBhGMz+qj+box5lq7XsO5mtZsBqpjwwTu/7wszPfMBcw==} + /@types/react@18.3.2: + resolution: {integrity: sha512-Btgg89dAnqD4vV7R3hlwOxgqobUQKgx3MmrQRi0yYbs/P0ym8XozIAlkqVilPqHQwXs4e9Tf63rrCgl58BcO4w==} dependencies: '@types/prop-types': 15.7.12 csstype: 3.1.3 @@ -1801,7 +1801,7 @@ packages: resolution: {integrity: sha512-x2EM6TJOybec7c52BX0ZspPodMsQUd5L6PRwOunVyVUhXiBSKf3AezDL8Dgvgt5o0UfKNfuA0eMLr2wLT4AiBA==} dependencies: '@types/mime': 1.3.5 - '@types/node': 20.12.8 + '@types/node': 20.12.11 dev: true /@types/serve-index@1.9.4: @@ -1815,19 +1815,19 @@ packages: dependencies: '@types/http-errors': 2.0.4 '@types/mime': 3.0.4 - '@types/node': 20.12.8 + '@types/node': 20.12.11 dev: true /@types/sockjs@0.3.36: resolution: {integrity: sha512-MK9V6NzAS1+Ud7JV9lJLFqW85VbC9dq3LmwZCuBe4wBDgKC0Kj/jd8Xl+nSviU+Qc3+m7umHHyHg//2KSa0a0Q==} dependencies: - '@types/node': 20.12.8 + '@types/node': 20.12.11 dev: true /@types/ws@8.5.10: resolution: {integrity: sha512-vmQSUcfalpIq0R9q7uTo2lXs6eGIpt9wtnLdMv9LVpIjCA/+ufZRozlVoVelIYixx1ugCBKDhn89vnsEGOCx9A==} dependencies: - '@types/node': 20.12.8 + '@types/node': 20.12.11 dev: true /@typescript-eslint/eslint-plugin@7.8.0(@typescript-eslint/parser@7.8.0)(eslint@9.2.0)(typescript@5.4.5): @@ -4182,8 +4182,8 @@ packages: engines: {node: '>=18'} dev: true - /globals@15.1.0: - resolution: {integrity: sha512-926gJqg+4mkxwYKiFvoomM4J0kWESfk3qfTvRL2/oc/tK/eTDBbrfcKnSa2KtfdxB5onoL7D3A3qIHQFpd4+UA==} + /globals@15.2.0: + resolution: {integrity: sha512-FQ5YwCHZM3nCmtb5FzEWwdUc9K5d3V/w9mzcz8iGD1gC/aOTHc6PouYu0kkKipNJqHAT7m51sqzQjEjIP+cK0A==} engines: {node: '>=18'} dev: true @@ -4895,7 +4895,7 @@ packages: resolution: {integrity: sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==} engines: {node: '>= 10.13.0'} dependencies: - '@types/node': 20.12.8 + '@types/node': 20.12.11 merge-stream: 2.0.0 supports-color: 8.1.1 dev: true From 6dfb18bced2249ada946925a620be15f54756be5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20Pereira=20Mu=C3=B1oz?= Date: Mon, 13 May 2024 18:37:35 +0200 Subject: [PATCH 04/13] Add support for prefixes in `::view-transition` rules --- CHANGELOG.md | 4 ++++ README.md | 2 +- src/constants/index.ts | 1 + src/utilities/selectors.ts | 4 ++++ .../basic-options/combined/basic.snapshot | 16 +++++++++++++++ .../combined/process-keyframes-true.snapshot | 16 +++++++++++++++ .../combined/process-url-true.snapshot | 16 +++++++++++++++ ...ce-rtl-and-process-keyframes-true.snapshot | 16 +++++++++++++++ .../combined/source-rtl.snapshot | 16 +++++++++++++++ .../combined/use-calc-true.snapshot | 16 +++++++++++++++ .../basic-options/diff/basic.snapshot | 6 ++++++ .../diff/process-keyframes-true.snapshot | 6 ++++++ .../diff/process-url-true.snapshot | 6 ++++++ ...ce-rtl-and-process-keyframes-true.snapshot | 6 ++++++ .../basic-options/diff/source-rtl.snapshot | 6 ++++++ .../basic-options/diff/use-calc-true.snapshot | 6 ++++++ .../basic-options/override/basic.snapshot | 13 ++++++++++++ .../override/process-keyframes-true.snapshot | 13 ++++++++++++ .../override/process-url-true.snapshot | 13 ++++++++++++ ...ce-rtl-and-process-keyframes-true.snapshot | 13 ++++++++++++ .../override/source-rtl.snapshot | 13 ++++++++++++ .../override/use-calc-true.snapshot | 13 ++++++++++++ ...stom-ltr-and-rtl-prefix-as-arrays.snapshot | 20 +++++++++++++++++++ .../custom-ltr-and-rtl-prefix.snapshot | 16 +++++++++++++++ ...x-as-arrays-and-process-urls-true.snapshot | 20 +++++++++++++++++++ ...-with-custom-ltr-and-rtl-prefixes.snapshot | 16 +++++++++++++++ ...transformer-with-default-prefixes.snapshot | 16 +++++++++++++++ ...stom-ltr-and-rtl-prefix-as-arrays.snapshot | 6 ++++++ .../diff/custom-ltr-and-rtl-prefix.snapshot | 6 ++++++ ...x-as-arrays-and-process-urls-true.snapshot | 6 ++++++ ...-with-custom-ltr-and-rtl-prefixes.snapshot | 6 ++++++ ...transformer-with-default-prefixes.snapshot | 6 ++++++ ...stom-ltr-and-rtl-prefix-as-arrays.snapshot | 15 ++++++++++++++ .../custom-ltr-and-rtl-prefix.snapshot | 13 ++++++++++++ ...x-as-arrays-and-process-urls-true.snapshot | 15 ++++++++++++++ ...-with-custom-ltr-and-rtl-prefixes.snapshot | 13 ++++++++++++ ...transformer-with-default-prefixes.snapshot | 13 ++++++++++++ ...cess-rules-names-true-greedy-true.snapshot | 16 +++++++++++++++ ...names-true-source-rtl-greedy-true.snapshot | 16 +++++++++++++++ ...custom-string-map-and-greedy-true.snapshot | 16 +++++++++++++++ ...om-string-map-rtl-and-greedy-true.snapshot | 16 +++++++++++++++ ...names-true-with-custom-string-map.snapshot | 16 +++++++++++++++ .../process-rules-names-true.snapshot | 16 +++++++++++++++ ...cess-rules-names-true-greedy-true.snapshot | 6 ++++++ ...names-true-source-rtl-greedy-true.snapshot | 6 ++++++ ...custom-string-map-and-greedy-true.snapshot | 6 ++++++ ...om-string-map-rtl-and-greedy-true.snapshot | 6 ++++++ ...names-true-with-custom-string-map.snapshot | 6 ++++++ .../diff/process-rules-names-true.snapshot | 6 ++++++ ...cess-rules-names-true-greedy-true.snapshot | 13 ++++++++++++ ...names-true-source-rtl-greedy-true.snapshot | 13 ++++++++++++ ...custom-string-map-and-greedy-true.snapshot | 13 ++++++++++++ ...om-string-map-rtl-and-greedy-true.snapshot | 13 ++++++++++++ ...names-true-with-custom-string-map.snapshot | 13 ++++++++++++ .../process-rules-names-true.snapshot | 13 ++++++++++++ ...refix-true-process-keyframes-true.snapshot | 20 +++++++++++++++++++ ...oth-prefix-true-process-urls-true.snapshot | 20 +++++++++++++++++++ .../safe-both-prefix-true-rtl.snapshot | 20 +++++++++++++++++++ .../combined/safe-both-prefix-true.snapshot | 20 +++++++++++++++++++ ...refix-true-process-keyframes-true.snapshot | 7 +++++++ ...oth-prefix-true-process-urls-true.snapshot | 7 +++++++ .../diff/safe-both-prefix-true-rtl.snapshot | 7 +++++++ .../diff/safe-both-prefix-true.snapshot | 7 +++++++ ...refix-true-process-keyframes-true.snapshot | 17 ++++++++++++++++ ...oth-prefix-true-process-urls-true.snapshot | 17 ++++++++++++++++ .../safe-both-prefix-true-rtl.snapshot | 17 ++++++++++++++++ .../override/safe-both-prefix-true.snapshot | 17 ++++++++++++++++ ...ent-lengths-map-process-urls-true.snapshot | 16 +++++++++++++++ ...erent-types-map-process-urls-true.snapshot | 16 +++++++++++++++ ...stom-string-map-process-urls-true.snapshot | 16 +++++++++++++++ ...p-without-names-process-urls-true.snapshot | 16 +++++++++++++++ ...ent-lengths-map-process-urls-true.snapshot | 6 ++++++ ...erent-types-map-process-urls-true.snapshot | 6 ++++++ ...stom-string-map-process-urls-true.snapshot | 6 ++++++ ...p-without-names-process-urls-true.snapshot | 6 ++++++ ...ent-lengths-map-process-urls-true.snapshot | 13 ++++++++++++ ...erent-types-map-process-urls-true.snapshot | 13 ++++++++++++ ...stom-string-map-process-urls-true.snapshot | 13 ++++++++++++ ...p-without-names-process-urls-true.snapshot | 13 ++++++++++++ tests/css/input.css | 7 +++++++ tests/prefixes.test.ts | 6 +++++- 81 files changed, 945 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 949a5090..1bbde7f8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ # Changelog +## [5.1.3] - 2024-05-13 + +- Add support for prefixes in `::view-transition` rules + ## [5.1.2] - 2024-04-16 - Remove preinstall script diff --git a/README.md b/README.md index c023c887..94ca95a9 100644 --- a/README.md +++ b/README.md @@ -584,7 +584,7 @@ This function will be used to transform the selectors and prefixing them at our >Notes: >* If the function doesn‘t return a string, the default prefixing logic will be used. ->* If this function is used, be aware that rules using `html` or `:root` will follow the custom prefixing logic. You should cover these cases. +>* If this function is used, be aware that rules using `html`, `:root` or `:::view-transition` will follow the custom prefixing logic. You should cover these cases. ##### input diff --git a/src/constants/index.ts b/src/constants/index.ts index 9f4384a1..db354487 100644 --- a/src/constants/index.ts +++ b/src/constants/index.ts @@ -14,6 +14,7 @@ export const RTL_CONTROL_DIRECTIVE_REG_EXP = /^\/\*!? *rtl:?(begin|end)?:(\w+):? export const FLIP_PROPERTY_REGEXP = /(right|left)/i; export const HTML_SELECTOR_REGEXP = /^(html)(?=\W|$)/; export const ROOT_SELECTOR_REGEXP = /(:root)(?=\W|$)/; +export const VIEW_TRANSITION_REGEXP = /^(::view-transition(?:-(?:new|old|group|image-pair))?\()/; export const REG_EXP_CHARACTERS_REG_EXP = /[.?*+^$[\]\\(){}|-]/g; export const LAST_WORD_CHARACTER_REG_EXP = /\w$/; diff --git a/src/utilities/selectors.ts b/src/utilities/selectors.ts index 5c0a3152..7274e646 100644 --- a/src/utilities/selectors.ts +++ b/src/utilities/selectors.ts @@ -3,6 +3,7 @@ import { strings, Mode, Source } from '@types'; import { HTML_SELECTOR_REGEXP, ROOT_SELECTOR_REGEXP, + VIEW_TRANSITION_REGEXP, STRING_TYPE } from '@constants'; import { store } from '@data/store'; @@ -20,6 +21,9 @@ const addPrefix = (prefix: string, selector: string): string => { if (ROOT_SELECTOR_REGEXP.test(selector)) { return selector.replace(ROOT_SELECTOR_REGEXP, `${prefix}$1`); } + if (VIEW_TRANSITION_REGEXP.test(selector)) { + return selector.replace(VIEW_TRANSITION_REGEXP, `${prefix}$1`); + } return `${prefix} ${selector}`; }; diff --git a/tests/__snapshots__/basic-options/combined/basic.snapshot b/tests/__snapshots__/basic-options/combined/basic.snapshot index 403977d0..683a73ab 100644 --- a/tests/__snapshots__/basic-options/combined/basic.snapshot +++ b/tests/__snapshots__/basic-options/combined/basic.snapshot @@ -626,6 +626,22 @@ html[dir="rtl"] .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + transform: scaleX(1.5); + height: 100%; +} + +[dir="ltr"]::view-transition-old(root), +[dir="ltr"]::view-transition-new(root) { + right: 0; +} + +[dir="rtl"]::view-transition-old(root), +[dir="rtl"]::view-transition-new(root) { + left: 0; +} + [dir="ltr"] .test51 { border-left: 1px solid #FFF; } diff --git a/tests/__snapshots__/basic-options/combined/process-keyframes-true.snapshot b/tests/__snapshots__/basic-options/combined/process-keyframes-true.snapshot index 435f605c..ac35c859 100644 --- a/tests/__snapshots__/basic-options/combined/process-keyframes-true.snapshot +++ b/tests/__snapshots__/basic-options/combined/process-keyframes-true.snapshot @@ -694,6 +694,22 @@ html[dir="rtl"] .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + transform: scaleX(1.5); + height: 100%; +} + +[dir="ltr"]::view-transition-old(root), +[dir="ltr"]::view-transition-new(root) { + right: 0; +} + +[dir="rtl"]::view-transition-old(root), +[dir="rtl"]::view-transition-new(root) { + left: 0; +} + [dir="ltr"] .test51 { border-left: 1px solid #FFF; } diff --git a/tests/__snapshots__/basic-options/combined/process-url-true.snapshot b/tests/__snapshots__/basic-options/combined/process-url-true.snapshot index 14a6233a..2d334d0b 100644 --- a/tests/__snapshots__/basic-options/combined/process-url-true.snapshot +++ b/tests/__snapshots__/basic-options/combined/process-url-true.snapshot @@ -638,6 +638,22 @@ html[dir="rtl"] .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + transform: scaleX(1.5); + height: 100%; +} + +[dir="ltr"]::view-transition-old(root), +[dir="ltr"]::view-transition-new(root) { + right: 0; +} + +[dir="rtl"]::view-transition-old(root), +[dir="rtl"]::view-transition-new(root) { + left: 0; +} + [dir="ltr"] .test51 { border-left: 1px solid #FFF; } diff --git a/tests/__snapshots__/basic-options/combined/source-rtl-and-process-keyframes-true.snapshot b/tests/__snapshots__/basic-options/combined/source-rtl-and-process-keyframes-true.snapshot index a93e1244..c56218ea 100644 --- a/tests/__snapshots__/basic-options/combined/source-rtl-and-process-keyframes-true.snapshot +++ b/tests/__snapshots__/basic-options/combined/source-rtl-and-process-keyframes-true.snapshot @@ -694,6 +694,22 @@ html[dir="ltr"] .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + transform: scaleX(1.5); + height: 100%; +} + +[dir="rtl"]::view-transition-old(root), +[dir="rtl"]::view-transition-new(root) { + right: 0; +} + +[dir="ltr"]::view-transition-old(root), +[dir="ltr"]::view-transition-new(root) { + left: 0; +} + [dir="rtl"] .test51 { border-left: 1px solid #FFF; } diff --git a/tests/__snapshots__/basic-options/combined/source-rtl.snapshot b/tests/__snapshots__/basic-options/combined/source-rtl.snapshot index 712213ef..011371ef 100644 --- a/tests/__snapshots__/basic-options/combined/source-rtl.snapshot +++ b/tests/__snapshots__/basic-options/combined/source-rtl.snapshot @@ -626,6 +626,22 @@ html[dir="ltr"] .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + transform: scaleX(1.5); + height: 100%; +} + +[dir="rtl"]::view-transition-old(root), +[dir="rtl"]::view-transition-new(root) { + right: 0; +} + +[dir="ltr"]::view-transition-old(root), +[dir="ltr"]::view-transition-new(root) { + left: 0; +} + [dir="rtl"] .test51 { border-left: 1px solid #FFF; } diff --git a/tests/__snapshots__/basic-options/combined/use-calc-true.snapshot b/tests/__snapshots__/basic-options/combined/use-calc-true.snapshot index 5d1d1a66..4601aeba 100644 --- a/tests/__snapshots__/basic-options/combined/use-calc-true.snapshot +++ b/tests/__snapshots__/basic-options/combined/use-calc-true.snapshot @@ -627,6 +627,22 @@ html[dir="rtl"] .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + transform: scaleX(1.5); + height: 100%; +} + +[dir="ltr"]::view-transition-old(root), +[dir="ltr"]::view-transition-new(root) { + right: 0; +} + +[dir="rtl"]::view-transition-old(root), +[dir="rtl"]::view-transition-new(root) { + left: 0; +} + [dir="ltr"] .test51 { border-left: 1px solid #FFF; } diff --git a/tests/__snapshots__/basic-options/diff/basic.snapshot b/tests/__snapshots__/basic-options/diff/basic.snapshot index 658befaf..35ead1de 100644 --- a/tests/__snapshots__/basic-options/diff/basic.snapshot +++ b/tests/__snapshots__/basic-options/diff/basic.snapshot @@ -191,6 +191,12 @@ html .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + right: auto; + left: 0; +} + .test51 { border-left: none; border-right: 1px solid #FFF; diff --git a/tests/__snapshots__/basic-options/diff/process-keyframes-true.snapshot b/tests/__snapshots__/basic-options/diff/process-keyframes-true.snapshot index f77dbfe9..fecd25d6 100644 --- a/tests/__snapshots__/basic-options/diff/process-keyframes-true.snapshot +++ b/tests/__snapshots__/basic-options/diff/process-keyframes-true.snapshot @@ -253,6 +253,12 @@ html .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + right: auto; + left: 0; +} + .test51 { border-left: none; border-right: 1px solid #FFF; diff --git a/tests/__snapshots__/basic-options/diff/process-url-true.snapshot b/tests/__snapshots__/basic-options/diff/process-url-true.snapshot index fcc048c0..885680f8 100644 --- a/tests/__snapshots__/basic-options/diff/process-url-true.snapshot +++ b/tests/__snapshots__/basic-options/diff/process-url-true.snapshot @@ -201,6 +201,12 @@ html .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + right: auto; + left: 0; +} + .test51 { border-left: none; border-right: 1px solid #FFF; diff --git a/tests/__snapshots__/basic-options/diff/source-rtl-and-process-keyframes-true.snapshot b/tests/__snapshots__/basic-options/diff/source-rtl-and-process-keyframes-true.snapshot index f8643118..6a89080d 100644 --- a/tests/__snapshots__/basic-options/diff/source-rtl-and-process-keyframes-true.snapshot +++ b/tests/__snapshots__/basic-options/diff/source-rtl-and-process-keyframes-true.snapshot @@ -253,6 +253,12 @@ html .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + right: auto; + left: 0; +} + .test51 { border-left: none; border-right: 1px solid #FFF; diff --git a/tests/__snapshots__/basic-options/diff/source-rtl.snapshot b/tests/__snapshots__/basic-options/diff/source-rtl.snapshot index 625a5661..d20bd275 100644 --- a/tests/__snapshots__/basic-options/diff/source-rtl.snapshot +++ b/tests/__snapshots__/basic-options/diff/source-rtl.snapshot @@ -191,6 +191,12 @@ html .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + right: auto; + left: 0; +} + .test51 { border-left: none; border-right: 1px solid #FFF; diff --git a/tests/__snapshots__/basic-options/diff/use-calc-true.snapshot b/tests/__snapshots__/basic-options/diff/use-calc-true.snapshot index 3698bcdf..f00ae798 100644 --- a/tests/__snapshots__/basic-options/diff/use-calc-true.snapshot +++ b/tests/__snapshots__/basic-options/diff/use-calc-true.snapshot @@ -192,6 +192,12 @@ html .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + right: auto; + left: 0; +} + .test51 { border-left: none; border-right: 1px solid #FFF; diff --git a/tests/__snapshots__/basic-options/override/basic.snapshot b/tests/__snapshots__/basic-options/override/basic.snapshot index d5f257da..901cc51a 100644 --- a/tests/__snapshots__/basic-options/override/basic.snapshot +++ b/tests/__snapshots__/basic-options/override/basic.snapshot @@ -577,6 +577,19 @@ html[dir="rtl"] .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + transform: scaleX(1.5); + height: 100%; + right: 0; +} + +[dir="rtl"]::view-transition-old(root), +[dir="rtl"]::view-transition-new(root) { + right: auto; + left: 0; +} + .test51 { border-left: 1px solid #FFF; } diff --git a/tests/__snapshots__/basic-options/override/process-keyframes-true.snapshot b/tests/__snapshots__/basic-options/override/process-keyframes-true.snapshot index 383e6154..846ee60b 100644 --- a/tests/__snapshots__/basic-options/override/process-keyframes-true.snapshot +++ b/tests/__snapshots__/basic-options/override/process-keyframes-true.snapshot @@ -639,6 +639,19 @@ html[dir="rtl"] .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + transform: scaleX(1.5); + height: 100%; + right: 0; +} + +[dir="rtl"]::view-transition-old(root), +[dir="rtl"]::view-transition-new(root) { + right: auto; + left: 0; +} + .test51 { border-left: 1px solid #FFF; } diff --git a/tests/__snapshots__/basic-options/override/process-url-true.snapshot b/tests/__snapshots__/basic-options/override/process-url-true.snapshot index 8b3d6903..72f6574d 100644 --- a/tests/__snapshots__/basic-options/override/process-url-true.snapshot +++ b/tests/__snapshots__/basic-options/override/process-url-true.snapshot @@ -589,6 +589,19 @@ html[dir="rtl"] .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + transform: scaleX(1.5); + height: 100%; + right: 0; +} + +[dir="rtl"]::view-transition-old(root), +[dir="rtl"]::view-transition-new(root) { + right: auto; + left: 0; +} + .test51 { border-left: 1px solid #FFF; } diff --git a/tests/__snapshots__/basic-options/override/source-rtl-and-process-keyframes-true.snapshot b/tests/__snapshots__/basic-options/override/source-rtl-and-process-keyframes-true.snapshot index 657bb609..0e8449b1 100644 --- a/tests/__snapshots__/basic-options/override/source-rtl-and-process-keyframes-true.snapshot +++ b/tests/__snapshots__/basic-options/override/source-rtl-and-process-keyframes-true.snapshot @@ -633,6 +633,19 @@ html[dir="ltr"] .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + transform: scaleX(1.5); + height: 100%; + right: 0; +} + +[dir="ltr"]::view-transition-old(root), +[dir="ltr"]::view-transition-new(root) { + right: auto; + left: 0; +} + .test51 { border-left: 1px solid #FFF; } diff --git a/tests/__snapshots__/basic-options/override/source-rtl.snapshot b/tests/__snapshots__/basic-options/override/source-rtl.snapshot index 284530ea..642fe392 100644 --- a/tests/__snapshots__/basic-options/override/source-rtl.snapshot +++ b/tests/__snapshots__/basic-options/override/source-rtl.snapshot @@ -571,6 +571,19 @@ html[dir="ltr"] .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + transform: scaleX(1.5); + height: 100%; + right: 0; +} + +[dir="ltr"]::view-transition-old(root), +[dir="ltr"]::view-transition-new(root) { + right: auto; + left: 0; +} + .test51 { border-left: 1px solid #FFF; } diff --git a/tests/__snapshots__/basic-options/override/use-calc-true.snapshot b/tests/__snapshots__/basic-options/override/use-calc-true.snapshot index d1197091..f7c5a410 100644 --- a/tests/__snapshots__/basic-options/override/use-calc-true.snapshot +++ b/tests/__snapshots__/basic-options/override/use-calc-true.snapshot @@ -578,6 +578,19 @@ html[dir="rtl"] .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + transform: scaleX(1.5); + height: 100%; + right: 0; +} + +[dir="rtl"]::view-transition-old(root), +[dir="rtl"]::view-transition-new(root) { + right: auto; + left: 0; +} + .test51 { border-left: 1px solid #FFF; } diff --git a/tests/__snapshots__/prefixes/combined/custom-ltr-and-rtl-prefix-as-arrays.snapshot b/tests/__snapshots__/prefixes/combined/custom-ltr-and-rtl-prefix-as-arrays.snapshot index 1487113a..ec652992 100644 --- a/tests/__snapshots__/prefixes/combined/custom-ltr-and-rtl-prefix-as-arrays.snapshot +++ b/tests/__snapshots__/prefixes/combined/custom-ltr-and-rtl-prefix-as-arrays.snapshot @@ -636,6 +636,26 @@ html.rtl .test50, html.right-to-left .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + transform: scaleX(1.5); + height: 100%; +} + +.ltr::view-transition-old(root), +.left-to-right::view-transition-old(root), +.ltr::view-transition-new(root), +.left-to-right::view-transition-new(root) { + right: 0; +} + +.rtl::view-transition-old(root), +.right-to-left::view-transition-old(root), +.rtl::view-transition-new(root), +.right-to-left::view-transition-new(root) { + left: 0; +} + .ltr .test51, .left-to-right .test51 { border-left: 1px solid #FFF; } diff --git a/tests/__snapshots__/prefixes/combined/custom-ltr-and-rtl-prefix.snapshot b/tests/__snapshots__/prefixes/combined/custom-ltr-and-rtl-prefix.snapshot index 0583ab0c..485d3b9d 100644 --- a/tests/__snapshots__/prefixes/combined/custom-ltr-and-rtl-prefix.snapshot +++ b/tests/__snapshots__/prefixes/combined/custom-ltr-and-rtl-prefix.snapshot @@ -626,6 +626,22 @@ html.rtl .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + transform: scaleX(1.5); + height: 100%; +} + +.ltr::view-transition-old(root), +.ltr::view-transition-new(root) { + right: 0; +} + +.rtl::view-transition-old(root), +.rtl::view-transition-new(root) { + left: 0; +} + .ltr .test51 { border-left: 1px solid #FFF; } diff --git a/tests/__snapshots__/prefixes/combined/custom-ltr-rtl-and-both-prefix-as-arrays-and-process-urls-true.snapshot b/tests/__snapshots__/prefixes/combined/custom-ltr-rtl-and-both-prefix-as-arrays-and-process-urls-true.snapshot index bcc8a522..3a75d96a 100644 --- a/tests/__snapshots__/prefixes/combined/custom-ltr-rtl-and-both-prefix-as-arrays-and-process-urls-true.snapshot +++ b/tests/__snapshots__/prefixes/combined/custom-ltr-rtl-and-both-prefix-as-arrays-and-process-urls-true.snapshot @@ -648,6 +648,26 @@ html.rtl .test50, html.right-to-left .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + transform: scaleX(1.5); + height: 100%; +} + +.ltr::view-transition-old(root), +.left-to-right::view-transition-old(root), +.ltr::view-transition-new(root), +.left-to-right::view-transition-new(root) { + right: 0; +} + +.rtl::view-transition-old(root), +.right-to-left::view-transition-old(root), +.rtl::view-transition-new(root), +.right-to-left::view-transition-new(root) { + left: 0; +} + .ltr .test51, .left-to-right .test51 { border-left: 1px solid #FFF; } diff --git a/tests/__snapshots__/prefixes/combined/prefix-selector-transformer-with-custom-ltr-and-rtl-prefixes.snapshot b/tests/__snapshots__/prefixes/combined/prefix-selector-transformer-with-custom-ltr-and-rtl-prefixes.snapshot index b6309f41..7cbd90e6 100644 --- a/tests/__snapshots__/prefixes/combined/prefix-selector-transformer-with-custom-ltr-and-rtl-prefixes.snapshot +++ b/tests/__snapshots__/prefixes/combined/prefix-selector-transformer-with-custom-ltr-and-rtl-prefixes.snapshot @@ -626,6 +626,22 @@ html.rtl .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + transform: scaleX(1.5); + height: 100%; +} + +.ltr::view-transition-old(root), +.ltr::view-transition-new(root) { + right: 0; +} + +.rtl::view-transition-old(root), +.rtl::view-transition-new(root) { + left: 0; +} + .ltr.test51 { border-left: 1px solid #FFF; } diff --git a/tests/__snapshots__/prefixes/combined/prefix-selector-transformer-with-default-prefixes.snapshot b/tests/__snapshots__/prefixes/combined/prefix-selector-transformer-with-default-prefixes.snapshot index 2d96d4d9..133dba05 100644 --- a/tests/__snapshots__/prefixes/combined/prefix-selector-transformer-with-default-prefixes.snapshot +++ b/tests/__snapshots__/prefixes/combined/prefix-selector-transformer-with-default-prefixes.snapshot @@ -626,6 +626,22 @@ html[dir="rtl"] .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + transform: scaleX(1.5); + height: 100%; +} + +[dir="ltr"] > ::view-transition-old(root), +[dir="ltr"] > ::view-transition-new(root) { + right: 0; +} + +[dir="rtl"] > ::view-transition-old(root), +[dir="rtl"] > ::view-transition-new(root) { + left: 0; +} + [dir="ltr"] > .test51 { border-left: 1px solid #FFF; } diff --git a/tests/__snapshots__/prefixes/diff/custom-ltr-and-rtl-prefix-as-arrays.snapshot b/tests/__snapshots__/prefixes/diff/custom-ltr-and-rtl-prefix-as-arrays.snapshot index b65ee09f..3e802b6a 100644 --- a/tests/__snapshots__/prefixes/diff/custom-ltr-and-rtl-prefix-as-arrays.snapshot +++ b/tests/__snapshots__/prefixes/diff/custom-ltr-and-rtl-prefix-as-arrays.snapshot @@ -191,6 +191,12 @@ html .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + right: auto; + left: 0; +} + .test51 { border-left: none; border-right: 1px solid #FFF; diff --git a/tests/__snapshots__/prefixes/diff/custom-ltr-and-rtl-prefix.snapshot b/tests/__snapshots__/prefixes/diff/custom-ltr-and-rtl-prefix.snapshot index 9bad61a0..6daed3e0 100644 --- a/tests/__snapshots__/prefixes/diff/custom-ltr-and-rtl-prefix.snapshot +++ b/tests/__snapshots__/prefixes/diff/custom-ltr-and-rtl-prefix.snapshot @@ -191,6 +191,12 @@ html .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + right: auto; + left: 0; +} + .test51 { border-left: none; border-right: 1px solid #FFF; diff --git a/tests/__snapshots__/prefixes/diff/custom-ltr-rtl-and-both-prefix-as-arrays-and-process-urls-true.snapshot b/tests/__snapshots__/prefixes/diff/custom-ltr-rtl-and-both-prefix-as-arrays-and-process-urls-true.snapshot index bf4fdf05..9a2f6f05 100644 --- a/tests/__snapshots__/prefixes/diff/custom-ltr-rtl-and-both-prefix-as-arrays-and-process-urls-true.snapshot +++ b/tests/__snapshots__/prefixes/diff/custom-ltr-rtl-and-both-prefix-as-arrays-and-process-urls-true.snapshot @@ -201,6 +201,12 @@ html .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + right: auto; + left: 0; +} + .test51 { border-left: none; border-right: 1px solid #FFF; diff --git a/tests/__snapshots__/prefixes/diff/prefix-selector-transformer-with-custom-ltr-and-rtl-prefixes.snapshot b/tests/__snapshots__/prefixes/diff/prefix-selector-transformer-with-custom-ltr-and-rtl-prefixes.snapshot index e5282c94..87f54d8d 100644 --- a/tests/__snapshots__/prefixes/diff/prefix-selector-transformer-with-custom-ltr-and-rtl-prefixes.snapshot +++ b/tests/__snapshots__/prefixes/diff/prefix-selector-transformer-with-custom-ltr-and-rtl-prefixes.snapshot @@ -191,6 +191,12 @@ html .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + right: auto; + left: 0; +} + .test51 { border-left: none; border-right: 1px solid #FFF; diff --git a/tests/__snapshots__/prefixes/diff/prefix-selector-transformer-with-default-prefixes.snapshot b/tests/__snapshots__/prefixes/diff/prefix-selector-transformer-with-default-prefixes.snapshot index 6f9c6703..f9a86858 100644 --- a/tests/__snapshots__/prefixes/diff/prefix-selector-transformer-with-default-prefixes.snapshot +++ b/tests/__snapshots__/prefixes/diff/prefix-selector-transformer-with-default-prefixes.snapshot @@ -191,6 +191,12 @@ html .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + right: auto; + left: 0; +} + .test51 { border-left: none; border-right: 1px solid #FFF; diff --git a/tests/__snapshots__/prefixes/override/custom-ltr-and-rtl-prefix-as-arrays.snapshot b/tests/__snapshots__/prefixes/override/custom-ltr-and-rtl-prefix-as-arrays.snapshot index 17733644..6c891559 100644 --- a/tests/__snapshots__/prefixes/override/custom-ltr-and-rtl-prefix-as-arrays.snapshot +++ b/tests/__snapshots__/prefixes/override/custom-ltr-and-rtl-prefix-as-arrays.snapshot @@ -582,6 +582,21 @@ html.rtl .test50, html.right-to-left .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + transform: scaleX(1.5); + height: 100%; + right: 0; +} + +.rtl::view-transition-old(root), +.right-to-left::view-transition-old(root), +.rtl::view-transition-new(root), +.right-to-left::view-transition-new(root) { + right: auto; + left: 0; +} + .test51 { border-left: 1px solid #FFF; } diff --git a/tests/__snapshots__/prefixes/override/custom-ltr-and-rtl-prefix.snapshot b/tests/__snapshots__/prefixes/override/custom-ltr-and-rtl-prefix.snapshot index 125d646a..1833dece 100644 --- a/tests/__snapshots__/prefixes/override/custom-ltr-and-rtl-prefix.snapshot +++ b/tests/__snapshots__/prefixes/override/custom-ltr-and-rtl-prefix.snapshot @@ -577,6 +577,19 @@ html.rtl .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + transform: scaleX(1.5); + height: 100%; + right: 0; +} + +.rtl::view-transition-old(root), +.rtl::view-transition-new(root) { + right: auto; + left: 0; +} + .test51 { border-left: 1px solid #FFF; } diff --git a/tests/__snapshots__/prefixes/override/custom-ltr-rtl-and-both-prefix-as-arrays-and-process-urls-true.snapshot b/tests/__snapshots__/prefixes/override/custom-ltr-rtl-and-both-prefix-as-arrays-and-process-urls-true.snapshot index 59604399..1b17010b 100644 --- a/tests/__snapshots__/prefixes/override/custom-ltr-rtl-and-both-prefix-as-arrays-and-process-urls-true.snapshot +++ b/tests/__snapshots__/prefixes/override/custom-ltr-rtl-and-both-prefix-as-arrays-and-process-urls-true.snapshot @@ -594,6 +594,21 @@ html.rtl .test50, html.right-to-left .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + transform: scaleX(1.5); + height: 100%; + right: 0; +} + +.rtl::view-transition-old(root), +.right-to-left::view-transition-old(root), +.rtl::view-transition-new(root), +.right-to-left::view-transition-new(root) { + right: auto; + left: 0; +} + .test51 { border-left: 1px solid #FFF; } diff --git a/tests/__snapshots__/prefixes/override/prefix-selector-transformer-with-custom-ltr-and-rtl-prefixes.snapshot b/tests/__snapshots__/prefixes/override/prefix-selector-transformer-with-custom-ltr-and-rtl-prefixes.snapshot index 57f09930..8450e09d 100644 --- a/tests/__snapshots__/prefixes/override/prefix-selector-transformer-with-custom-ltr-and-rtl-prefixes.snapshot +++ b/tests/__snapshots__/prefixes/override/prefix-selector-transformer-with-custom-ltr-and-rtl-prefixes.snapshot @@ -577,6 +577,19 @@ html.rtl .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + transform: scaleX(1.5); + height: 100%; + right: 0; +} + +.rtl::view-transition-old(root), +.rtl::view-transition-new(root) { + right: auto; + left: 0; +} + .test51 { border-left: 1px solid #FFF; } diff --git a/tests/__snapshots__/prefixes/override/prefix-selector-transformer-with-default-prefixes.snapshot b/tests/__snapshots__/prefixes/override/prefix-selector-transformer-with-default-prefixes.snapshot index 377d20d2..bb83bfba 100644 --- a/tests/__snapshots__/prefixes/override/prefix-selector-transformer-with-default-prefixes.snapshot +++ b/tests/__snapshots__/prefixes/override/prefix-selector-transformer-with-default-prefixes.snapshot @@ -577,6 +577,19 @@ html[dir="rtl"] .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + transform: scaleX(1.5); + height: 100%; + right: 0; +} + +[dir="rtl"] > ::view-transition-old(root), +[dir="rtl"] > ::view-transition-new(root) { + right: auto; + left: 0; +} + .test51 { border-left: 1px solid #FFF; } diff --git a/tests/__snapshots__/rule-names/combined/process-rules-names-true-greedy-true.snapshot b/tests/__snapshots__/rule-names/combined/process-rules-names-true-greedy-true.snapshot index ef82beb9..8d56f828 100644 --- a/tests/__snapshots__/rule-names/combined/process-rules-names-true-greedy-true.snapshot +++ b/tests/__snapshots__/rule-names/combined/process-rules-names-true-greedy-true.snapshot @@ -634,6 +634,22 @@ html[dir="rtl"] .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + transform: scaleX(1.5); + height: 100%; +} + +[dir="ltr"]::view-transition-old(root), +[dir="ltr"]::view-transition-new(root) { + right: 0; +} + +[dir="rtl"]::view-transition-old(root), +[dir="rtl"]::view-transition-new(root) { + left: 0; +} + [dir="ltr"] .test51 { border-left: 1px solid #FFF; } diff --git a/tests/__snapshots__/rule-names/combined/process-rules-names-true-source-rtl-greedy-true.snapshot b/tests/__snapshots__/rule-names/combined/process-rules-names-true-source-rtl-greedy-true.snapshot index 97ec68d3..1c48e427 100644 --- a/tests/__snapshots__/rule-names/combined/process-rules-names-true-source-rtl-greedy-true.snapshot +++ b/tests/__snapshots__/rule-names/combined/process-rules-names-true-source-rtl-greedy-true.snapshot @@ -634,6 +634,22 @@ html[dir="ltr"] .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + transform: scaleX(1.5); + height: 100%; +} + +[dir="rtl"]::view-transition-old(root), +[dir="rtl"]::view-transition-new(root) { + right: 0; +} + +[dir="ltr"]::view-transition-old(root), +[dir="ltr"]::view-transition-new(root) { + left: 0; +} + [dir="rtl"] .test51 { border-left: 1px solid #FFF; } diff --git a/tests/__snapshots__/rule-names/combined/process-rules-names-true-with-custom-string-map-and-greedy-true.snapshot b/tests/__snapshots__/rule-names/combined/process-rules-names-true-with-custom-string-map-and-greedy-true.snapshot index 59417897..ffef8992 100644 --- a/tests/__snapshots__/rule-names/combined/process-rules-names-true-with-custom-string-map-and-greedy-true.snapshot +++ b/tests/__snapshots__/rule-names/combined/process-rules-names-true-with-custom-string-map-and-greedy-true.snapshot @@ -642,6 +642,22 @@ html[dir="rtl"] .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + transform: scaleX(1.5); + height: 100%; +} + +[dir="ltr"]::view-transition-old(root), +[dir="ltr"]::view-transition-new(root) { + right: 0; +} + +[dir="rtl"]::view-transition-old(root), +[dir="rtl"]::view-transition-new(root) { + left: 0; +} + [dir="ltr"] .test51 { border-left: 1px solid #FFF; } diff --git a/tests/__snapshots__/rule-names/combined/process-rules-names-true-with-custom-string-map-rtl-and-greedy-true.snapshot b/tests/__snapshots__/rule-names/combined/process-rules-names-true-with-custom-string-map-rtl-and-greedy-true.snapshot index 8af91686..64637a2d 100644 --- a/tests/__snapshots__/rule-names/combined/process-rules-names-true-with-custom-string-map-rtl-and-greedy-true.snapshot +++ b/tests/__snapshots__/rule-names/combined/process-rules-names-true-with-custom-string-map-rtl-and-greedy-true.snapshot @@ -642,6 +642,22 @@ html[dir="ltr"] .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + transform: scaleX(1.5); + height: 100%; +} + +[dir="rtl"]::view-transition-old(root), +[dir="rtl"]::view-transition-new(root) { + right: 0; +} + +[dir="ltr"]::view-transition-old(root), +[dir="ltr"]::view-transition-new(root) { + left: 0; +} + [dir="rtl"] .test51 { border-left: 1px solid #FFF; } diff --git a/tests/__snapshots__/rule-names/combined/process-rules-names-true-with-custom-string-map.snapshot b/tests/__snapshots__/rule-names/combined/process-rules-names-true-with-custom-string-map.snapshot index 7308dda5..dced14fe 100644 --- a/tests/__snapshots__/rule-names/combined/process-rules-names-true-with-custom-string-map.snapshot +++ b/tests/__snapshots__/rule-names/combined/process-rules-names-true-with-custom-string-map.snapshot @@ -634,6 +634,22 @@ html[dir="rtl"] .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + transform: scaleX(1.5); + height: 100%; +} + +[dir="ltr"]::view-transition-old(root), +[dir="ltr"]::view-transition-new(root) { + right: 0; +} + +[dir="rtl"]::view-transition-old(root), +[dir="rtl"]::view-transition-new(root) { + left: 0; +} + [dir="ltr"] .test51 { border-left: 1px solid #FFF; } diff --git a/tests/__snapshots__/rule-names/combined/process-rules-names-true.snapshot b/tests/__snapshots__/rule-names/combined/process-rules-names-true.snapshot index cf9eea5a..3065bb38 100644 --- a/tests/__snapshots__/rule-names/combined/process-rules-names-true.snapshot +++ b/tests/__snapshots__/rule-names/combined/process-rules-names-true.snapshot @@ -626,6 +626,22 @@ html[dir="rtl"] .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + transform: scaleX(1.5); + height: 100%; +} + +[dir="ltr"]::view-transition-old(root), +[dir="ltr"]::view-transition-new(root) { + right: 0; +} + +[dir="rtl"]::view-transition-old(root), +[dir="rtl"]::view-transition-new(root) { + left: 0; +} + [dir="ltr"] .test51 { border-left: 1px solid #FFF; } diff --git a/tests/__snapshots__/rule-names/diff/process-rules-names-true-greedy-true.snapshot b/tests/__snapshots__/rule-names/diff/process-rules-names-true-greedy-true.snapshot index c4dd0920..2648c3d7 100644 --- a/tests/__snapshots__/rule-names/diff/process-rules-names-true-greedy-true.snapshot +++ b/tests/__snapshots__/rule-names/diff/process-rules-names-true-greedy-true.snapshot @@ -199,6 +199,12 @@ html .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + right: auto; + left: 0; +} + .test51 { border-left: none; border-right: 1px solid #FFF; diff --git a/tests/__snapshots__/rule-names/diff/process-rules-names-true-source-rtl-greedy-true.snapshot b/tests/__snapshots__/rule-names/diff/process-rules-names-true-source-rtl-greedy-true.snapshot index 8a354bef..9e97cf35 100644 --- a/tests/__snapshots__/rule-names/diff/process-rules-names-true-source-rtl-greedy-true.snapshot +++ b/tests/__snapshots__/rule-names/diff/process-rules-names-true-source-rtl-greedy-true.snapshot @@ -199,6 +199,12 @@ html .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + right: auto; + left: 0; +} + .test51 { border-left: none; border-right: 1px solid #FFF; diff --git a/tests/__snapshots__/rule-names/diff/process-rules-names-true-with-custom-string-map-and-greedy-true.snapshot b/tests/__snapshots__/rule-names/diff/process-rules-names-true-with-custom-string-map-and-greedy-true.snapshot index b81f31a6..8dfd0c37 100644 --- a/tests/__snapshots__/rule-names/diff/process-rules-names-true-with-custom-string-map-and-greedy-true.snapshot +++ b/tests/__snapshots__/rule-names/diff/process-rules-names-true-with-custom-string-map-and-greedy-true.snapshot @@ -207,6 +207,12 @@ html .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + right: auto; + left: 0; +} + .test51 { border-left: none; border-right: 1px solid #FFF; diff --git a/tests/__snapshots__/rule-names/diff/process-rules-names-true-with-custom-string-map-rtl-and-greedy-true.snapshot b/tests/__snapshots__/rule-names/diff/process-rules-names-true-with-custom-string-map-rtl-and-greedy-true.snapshot index 64b12e47..7628fb79 100644 --- a/tests/__snapshots__/rule-names/diff/process-rules-names-true-with-custom-string-map-rtl-and-greedy-true.snapshot +++ b/tests/__snapshots__/rule-names/diff/process-rules-names-true-with-custom-string-map-rtl-and-greedy-true.snapshot @@ -207,6 +207,12 @@ html .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + right: auto; + left: 0; +} + .test51 { border-left: none; border-right: 1px solid #FFF; diff --git a/tests/__snapshots__/rule-names/diff/process-rules-names-true-with-custom-string-map.snapshot b/tests/__snapshots__/rule-names/diff/process-rules-names-true-with-custom-string-map.snapshot index 9a493f93..c9895c1e 100644 --- a/tests/__snapshots__/rule-names/diff/process-rules-names-true-with-custom-string-map.snapshot +++ b/tests/__snapshots__/rule-names/diff/process-rules-names-true-with-custom-string-map.snapshot @@ -199,6 +199,12 @@ html .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + right: auto; + left: 0; +} + .test51 { border-left: none; border-right: 1px solid #FFF; diff --git a/tests/__snapshots__/rule-names/diff/process-rules-names-true.snapshot b/tests/__snapshots__/rule-names/diff/process-rules-names-true.snapshot index b858cba5..98f73fba 100644 --- a/tests/__snapshots__/rule-names/diff/process-rules-names-true.snapshot +++ b/tests/__snapshots__/rule-names/diff/process-rules-names-true.snapshot @@ -191,6 +191,12 @@ html .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + right: auto; + left: 0; +} + .test51 { border-left: none; border-right: 1px solid #FFF; diff --git a/tests/__snapshots__/rule-names/override/process-rules-names-true-greedy-true.snapshot b/tests/__snapshots__/rule-names/override/process-rules-names-true-greedy-true.snapshot index 05702f61..76ed39ec 100644 --- a/tests/__snapshots__/rule-names/override/process-rules-names-true-greedy-true.snapshot +++ b/tests/__snapshots__/rule-names/override/process-rules-names-true-greedy-true.snapshot @@ -585,6 +585,19 @@ html[dir="rtl"] .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + transform: scaleX(1.5); + height: 100%; + right: 0; +} + +[dir="rtl"]::view-transition-old(root), +[dir="rtl"]::view-transition-new(root) { + right: auto; + left: 0; +} + .test51 { border-left: 1px solid #FFF; } diff --git a/tests/__snapshots__/rule-names/override/process-rules-names-true-source-rtl-greedy-true.snapshot b/tests/__snapshots__/rule-names/override/process-rules-names-true-source-rtl-greedy-true.snapshot index c51131bb..6610d45e 100644 --- a/tests/__snapshots__/rule-names/override/process-rules-names-true-source-rtl-greedy-true.snapshot +++ b/tests/__snapshots__/rule-names/override/process-rules-names-true-source-rtl-greedy-true.snapshot @@ -579,6 +579,19 @@ html[dir="ltr"] .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + transform: scaleX(1.5); + height: 100%; + right: 0; +} + +[dir="ltr"]::view-transition-old(root), +[dir="ltr"]::view-transition-new(root) { + right: auto; + left: 0; +} + .test51 { border-left: 1px solid #FFF; } diff --git a/tests/__snapshots__/rule-names/override/process-rules-names-true-with-custom-string-map-and-greedy-true.snapshot b/tests/__snapshots__/rule-names/override/process-rules-names-true-with-custom-string-map-and-greedy-true.snapshot index 20de4e25..05241fa5 100644 --- a/tests/__snapshots__/rule-names/override/process-rules-names-true-with-custom-string-map-and-greedy-true.snapshot +++ b/tests/__snapshots__/rule-names/override/process-rules-names-true-with-custom-string-map-and-greedy-true.snapshot @@ -593,6 +593,19 @@ html[dir="rtl"] .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + transform: scaleX(1.5); + height: 100%; + right: 0; +} + +[dir="rtl"]::view-transition-old(root), +[dir="rtl"]::view-transition-new(root) { + right: auto; + left: 0; +} + .test51 { border-left: 1px solid #FFF; } diff --git a/tests/__snapshots__/rule-names/override/process-rules-names-true-with-custom-string-map-rtl-and-greedy-true.snapshot b/tests/__snapshots__/rule-names/override/process-rules-names-true-with-custom-string-map-rtl-and-greedy-true.snapshot index e8743000..4f3db80a 100644 --- a/tests/__snapshots__/rule-names/override/process-rules-names-true-with-custom-string-map-rtl-and-greedy-true.snapshot +++ b/tests/__snapshots__/rule-names/override/process-rules-names-true-with-custom-string-map-rtl-and-greedy-true.snapshot @@ -587,6 +587,19 @@ html[dir="ltr"] .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + transform: scaleX(1.5); + height: 100%; + right: 0; +} + +[dir="ltr"]::view-transition-old(root), +[dir="ltr"]::view-transition-new(root) { + right: auto; + left: 0; +} + .test51 { border-left: 1px solid #FFF; } diff --git a/tests/__snapshots__/rule-names/override/process-rules-names-true-with-custom-string-map.snapshot b/tests/__snapshots__/rule-names/override/process-rules-names-true-with-custom-string-map.snapshot index 3737e07b..b6d5dbb5 100644 --- a/tests/__snapshots__/rule-names/override/process-rules-names-true-with-custom-string-map.snapshot +++ b/tests/__snapshots__/rule-names/override/process-rules-names-true-with-custom-string-map.snapshot @@ -585,6 +585,19 @@ html[dir="rtl"] .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + transform: scaleX(1.5); + height: 100%; + right: 0; +} + +[dir="rtl"]::view-transition-old(root), +[dir="rtl"]::view-transition-new(root) { + right: auto; + left: 0; +} + .test51 { border-left: 1px solid #FFF; } diff --git a/tests/__snapshots__/rule-names/override/process-rules-names-true.snapshot b/tests/__snapshots__/rule-names/override/process-rules-names-true.snapshot index 203db44a..2b7ed78a 100644 --- a/tests/__snapshots__/rule-names/override/process-rules-names-true.snapshot +++ b/tests/__snapshots__/rule-names/override/process-rules-names-true.snapshot @@ -577,6 +577,19 @@ html[dir="rtl"] .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + transform: scaleX(1.5); + height: 100%; + right: 0; +} + +[dir="rtl"]::view-transition-old(root), +[dir="rtl"]::view-transition-new(root) { + right: auto; + left: 0; +} + .test51 { border-left: 1px solid #FFF; } diff --git a/tests/__snapshots__/safe-prefix/combined/safe-both-prefix-true-process-keyframes-true.snapshot b/tests/__snapshots__/safe-prefix/combined/safe-both-prefix-true-process-keyframes-true.snapshot index 257979e3..b4809626 100644 --- a/tests/__snapshots__/safe-prefix/combined/safe-both-prefix-true-process-keyframes-true.snapshot +++ b/tests/__snapshots__/safe-prefix/combined/safe-both-prefix-true-process-keyframes-true.snapshot @@ -709,6 +709,26 @@ html[dir="rtl"] .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + height: 100%; +} + +[dir]::view-transition-old(root), +[dir]::view-transition-new(root) { + transform: scaleX(1.5); +} + +[dir="ltr"]::view-transition-old(root), +[dir="ltr"]::view-transition-new(root) { + right: 0; +} + +[dir="rtl"]::view-transition-old(root), +[dir="rtl"]::view-transition-new(root) { + left: 0; +} + [dir="ltr"] .test51 { border-left: 1px solid #FFF; } diff --git a/tests/__snapshots__/safe-prefix/combined/safe-both-prefix-true-process-urls-true.snapshot b/tests/__snapshots__/safe-prefix/combined/safe-both-prefix-true-process-urls-true.snapshot index 9f3eed2e..c5d4b32b 100644 --- a/tests/__snapshots__/safe-prefix/combined/safe-both-prefix-true-process-urls-true.snapshot +++ b/tests/__snapshots__/safe-prefix/combined/safe-both-prefix-true-process-urls-true.snapshot @@ -653,6 +653,26 @@ html[dir="rtl"] .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + height: 100%; +} + +[dir]::view-transition-old(root), +[dir]::view-transition-new(root) { + transform: scaleX(1.5); +} + +[dir="ltr"]::view-transition-old(root), +[dir="ltr"]::view-transition-new(root) { + right: 0; +} + +[dir="rtl"]::view-transition-old(root), +[dir="rtl"]::view-transition-new(root) { + left: 0; +} + [dir="ltr"] .test51 { border-left: 1px solid #FFF; } diff --git a/tests/__snapshots__/safe-prefix/combined/safe-both-prefix-true-rtl.snapshot b/tests/__snapshots__/safe-prefix/combined/safe-both-prefix-true-rtl.snapshot index 6a7cdf96..4fc8d16c 100644 --- a/tests/__snapshots__/safe-prefix/combined/safe-both-prefix-true-rtl.snapshot +++ b/tests/__snapshots__/safe-prefix/combined/safe-both-prefix-true-rtl.snapshot @@ -644,6 +644,26 @@ html[dir="ltr"] .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + height: 100%; +} + +[dir]::view-transition-old(root), +[dir]::view-transition-new(root) { + transform: scaleX(1.5); +} + +[dir="rtl"]::view-transition-old(root), +[dir="rtl"]::view-transition-new(root) { + right: 0; +} + +[dir="ltr"]::view-transition-old(root), +[dir="ltr"]::view-transition-new(root) { + left: 0; +} + [dir="rtl"] .test51 { border-left: 1px solid #FFF; } diff --git a/tests/__snapshots__/safe-prefix/combined/safe-both-prefix-true.snapshot b/tests/__snapshots__/safe-prefix/combined/safe-both-prefix-true.snapshot index 94443441..07c97e66 100644 --- a/tests/__snapshots__/safe-prefix/combined/safe-both-prefix-true.snapshot +++ b/tests/__snapshots__/safe-prefix/combined/safe-both-prefix-true.snapshot @@ -644,6 +644,26 @@ html[dir="rtl"] .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + height: 100%; +} + +[dir]::view-transition-old(root), +[dir]::view-transition-new(root) { + transform: scaleX(1.5); +} + +[dir="ltr"]::view-transition-old(root), +[dir="ltr"]::view-transition-new(root) { + right: 0; +} + +[dir="rtl"]::view-transition-old(root), +[dir="rtl"]::view-transition-new(root) { + left: 0; +} + [dir="ltr"] .test51 { border-left: 1px solid #FFF; } diff --git a/tests/__snapshots__/safe-prefix/diff/safe-both-prefix-true-process-keyframes-true.snapshot b/tests/__snapshots__/safe-prefix/diff/safe-both-prefix-true-process-keyframes-true.snapshot index f808b9de..f9444e2d 100644 --- a/tests/__snapshots__/safe-prefix/diff/safe-both-prefix-true-process-keyframes-true.snapshot +++ b/tests/__snapshots__/safe-prefix/diff/safe-both-prefix-true-process-keyframes-true.snapshot @@ -313,6 +313,13 @@ html .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + transform: scaleX(1.5); + right: auto; + left: 0; +} + .test51 { border-left: none; border-right: 1px solid #FFF; diff --git a/tests/__snapshots__/safe-prefix/diff/safe-both-prefix-true-process-urls-true.snapshot b/tests/__snapshots__/safe-prefix/diff/safe-both-prefix-true-process-urls-true.snapshot index c3b5cc30..48f2ea34 100644 --- a/tests/__snapshots__/safe-prefix/diff/safe-both-prefix-true-process-urls-true.snapshot +++ b/tests/__snapshots__/safe-prefix/diff/safe-both-prefix-true-process-urls-true.snapshot @@ -269,6 +269,13 @@ html .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + transform: scaleX(1.5); + right: auto; + left: 0; +} + .test51 { border-left: none; border-right: 1px solid #FFF; diff --git a/tests/__snapshots__/safe-prefix/diff/safe-both-prefix-true-rtl.snapshot b/tests/__snapshots__/safe-prefix/diff/safe-both-prefix-true-rtl.snapshot index 2dc80c13..bc0c7313 100644 --- a/tests/__snapshots__/safe-prefix/diff/safe-both-prefix-true-rtl.snapshot +++ b/tests/__snapshots__/safe-prefix/diff/safe-both-prefix-true-rtl.snapshot @@ -269,6 +269,13 @@ html .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + transform: scaleX(1.5); + right: auto; + left: 0; +} + .test51 { border-left: none; border-right: 1px solid #FFF; diff --git a/tests/__snapshots__/safe-prefix/diff/safe-both-prefix-true.snapshot b/tests/__snapshots__/safe-prefix/diff/safe-both-prefix-true.snapshot index 56509170..8dee8be6 100644 --- a/tests/__snapshots__/safe-prefix/diff/safe-both-prefix-true.snapshot +++ b/tests/__snapshots__/safe-prefix/diff/safe-both-prefix-true.snapshot @@ -269,6 +269,13 @@ html .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + transform: scaleX(1.5); + right: auto; + left: 0; +} + .test51 { border-left: none; border-right: 1px solid #FFF; diff --git a/tests/__snapshots__/safe-prefix/override/safe-both-prefix-true-process-keyframes-true.snapshot b/tests/__snapshots__/safe-prefix/override/safe-both-prefix-true-process-keyframes-true.snapshot index 60e517c1..effd53ab 100644 --- a/tests/__snapshots__/safe-prefix/override/safe-both-prefix-true-process-keyframes-true.snapshot +++ b/tests/__snapshots__/safe-prefix/override/safe-both-prefix-true-process-keyframes-true.snapshot @@ -694,6 +694,23 @@ html[dir="rtl"] .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + height: 100%; +} + +[dir]::view-transition-old(root), +[dir]::view-transition-new(root) { + transform: scaleX(1.5); + right: 0; +} + +[dir="rtl"]::view-transition-old(root), +[dir="rtl"]::view-transition-new(root) { + right: auto; + left: 0; +} + [dir] .test51 { border-left: 1px solid #FFF; } diff --git a/tests/__snapshots__/safe-prefix/override/safe-both-prefix-true-process-urls-true.snapshot b/tests/__snapshots__/safe-prefix/override/safe-both-prefix-true-process-urls-true.snapshot index c029a620..8073dc2c 100644 --- a/tests/__snapshots__/safe-prefix/override/safe-both-prefix-true-process-urls-true.snapshot +++ b/tests/__snapshots__/safe-prefix/override/safe-both-prefix-true-process-urls-true.snapshot @@ -644,6 +644,23 @@ html[dir="rtl"] .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + height: 100%; +} + +[dir]::view-transition-old(root), +[dir]::view-transition-new(root) { + transform: scaleX(1.5); + right: 0; +} + +[dir="rtl"]::view-transition-old(root), +[dir="rtl"]::view-transition-new(root) { + right: auto; + left: 0; +} + [dir] .test51 { border-left: 1px solid #FFF; } diff --git a/tests/__snapshots__/safe-prefix/override/safe-both-prefix-true-rtl.snapshot b/tests/__snapshots__/safe-prefix/override/safe-both-prefix-true-rtl.snapshot index 570a2f54..eca85b81 100644 --- a/tests/__snapshots__/safe-prefix/override/safe-both-prefix-true-rtl.snapshot +++ b/tests/__snapshots__/safe-prefix/override/safe-both-prefix-true-rtl.snapshot @@ -626,6 +626,23 @@ html[dir="ltr"] .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + height: 100%; +} + +[dir]::view-transition-old(root), +[dir]::view-transition-new(root) { + transform: scaleX(1.5); + right: 0; +} + +[dir="ltr"]::view-transition-old(root), +[dir="ltr"]::view-transition-new(root) { + right: auto; + left: 0; +} + [dir] .test51 { border-left: 1px solid #FFF; } diff --git a/tests/__snapshots__/safe-prefix/override/safe-both-prefix-true.snapshot b/tests/__snapshots__/safe-prefix/override/safe-both-prefix-true.snapshot index 0c1d712f..c1e60bd1 100644 --- a/tests/__snapshots__/safe-prefix/override/safe-both-prefix-true.snapshot +++ b/tests/__snapshots__/safe-prefix/override/safe-both-prefix-true.snapshot @@ -632,6 +632,23 @@ html[dir="rtl"] .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + height: 100%; +} + +[dir]::view-transition-old(root), +[dir]::view-transition-new(root) { + transform: scaleX(1.5); + right: 0; +} + +[dir="rtl"]::view-transition-old(root), +[dir="rtl"]::view-transition-new(root) { + right: auto; + left: 0; +} + [dir] .test51 { border-left: 1px solid #FFF; } diff --git a/tests/__snapshots__/string-map/combined/custom-non-valid-string-different-lengths-map-process-urls-true.snapshot b/tests/__snapshots__/string-map/combined/custom-non-valid-string-different-lengths-map-process-urls-true.snapshot index 68136d2d..a4a8ec40 100644 --- a/tests/__snapshots__/string-map/combined/custom-non-valid-string-different-lengths-map-process-urls-true.snapshot +++ b/tests/__snapshots__/string-map/combined/custom-non-valid-string-different-lengths-map-process-urls-true.snapshot @@ -638,6 +638,22 @@ html[dir="rtl"] .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + transform: scaleX(1.5); + height: 100%; +} + +[dir="ltr"]::view-transition-old(root), +[dir="ltr"]::view-transition-new(root) { + right: 0; +} + +[dir="rtl"]::view-transition-old(root), +[dir="rtl"]::view-transition-new(root) { + left: 0; +} + [dir="ltr"] .test51 { border-left: 1px solid #FFF; } diff --git a/tests/__snapshots__/string-map/combined/custom-non-valid-string-different-types-map-process-urls-true.snapshot b/tests/__snapshots__/string-map/combined/custom-non-valid-string-different-types-map-process-urls-true.snapshot index e3d13749..d00395a9 100644 --- a/tests/__snapshots__/string-map/combined/custom-non-valid-string-different-types-map-process-urls-true.snapshot +++ b/tests/__snapshots__/string-map/combined/custom-non-valid-string-different-types-map-process-urls-true.snapshot @@ -638,6 +638,22 @@ html[dir="rtl"] .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + transform: scaleX(1.5); + height: 100%; +} + +[dir="ltr"]::view-transition-old(root), +[dir="ltr"]::view-transition-new(root) { + right: 0; +} + +[dir="rtl"]::view-transition-old(root), +[dir="rtl"]::view-transition-new(root) { + left: 0; +} + [dir="ltr"] .test51 { border-left: 1px solid #FFF; } diff --git a/tests/__snapshots__/string-map/combined/custom-string-map-process-urls-true.snapshot b/tests/__snapshots__/string-map/combined/custom-string-map-process-urls-true.snapshot index bb445159..6a7ff4a5 100644 --- a/tests/__snapshots__/string-map/combined/custom-string-map-process-urls-true.snapshot +++ b/tests/__snapshots__/string-map/combined/custom-string-map-process-urls-true.snapshot @@ -638,6 +638,22 @@ html[dir="rtl"] .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + transform: scaleX(1.5); + height: 100%; +} + +[dir="ltr"]::view-transition-old(root), +[dir="ltr"]::view-transition-new(root) { + right: 0; +} + +[dir="rtl"]::view-transition-old(root), +[dir="rtl"]::view-transition-new(root) { + left: 0; +} + [dir="ltr"] .test51 { border-left: 1px solid #FFF; } diff --git a/tests/__snapshots__/string-map/combined/custom-string-map-without-names-process-urls-true.snapshot b/tests/__snapshots__/string-map/combined/custom-string-map-without-names-process-urls-true.snapshot index f7307be7..8886e297 100644 --- a/tests/__snapshots__/string-map/combined/custom-string-map-without-names-process-urls-true.snapshot +++ b/tests/__snapshots__/string-map/combined/custom-string-map-without-names-process-urls-true.snapshot @@ -638,6 +638,22 @@ html[dir="rtl"] .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + transform: scaleX(1.5); + height: 100%; +} + +[dir="ltr"]::view-transition-old(root), +[dir="ltr"]::view-transition-new(root) { + right: 0; +} + +[dir="rtl"]::view-transition-old(root), +[dir="rtl"]::view-transition-new(root) { + left: 0; +} + [dir="ltr"] .test51 { border-left: 1px solid #FFF; } diff --git a/tests/__snapshots__/string-map/diff/custom-non-valid-string-different-lengths-map-process-urls-true.snapshot b/tests/__snapshots__/string-map/diff/custom-non-valid-string-different-lengths-map-process-urls-true.snapshot index 051ea4ac..87890482 100644 --- a/tests/__snapshots__/string-map/diff/custom-non-valid-string-different-lengths-map-process-urls-true.snapshot +++ b/tests/__snapshots__/string-map/diff/custom-non-valid-string-different-lengths-map-process-urls-true.snapshot @@ -201,6 +201,12 @@ html .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + right: auto; + left: 0; +} + .test51 { border-left: none; border-right: 1px solid #FFF; diff --git a/tests/__snapshots__/string-map/diff/custom-non-valid-string-different-types-map-process-urls-true.snapshot b/tests/__snapshots__/string-map/diff/custom-non-valid-string-different-types-map-process-urls-true.snapshot index 44328a80..668288cd 100644 --- a/tests/__snapshots__/string-map/diff/custom-non-valid-string-different-types-map-process-urls-true.snapshot +++ b/tests/__snapshots__/string-map/diff/custom-non-valid-string-different-types-map-process-urls-true.snapshot @@ -201,6 +201,12 @@ html .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + right: auto; + left: 0; +} + .test51 { border-left: none; border-right: 1px solid #FFF; diff --git a/tests/__snapshots__/string-map/diff/custom-string-map-process-urls-true.snapshot b/tests/__snapshots__/string-map/diff/custom-string-map-process-urls-true.snapshot index fafe3620..944a2755 100644 --- a/tests/__snapshots__/string-map/diff/custom-string-map-process-urls-true.snapshot +++ b/tests/__snapshots__/string-map/diff/custom-string-map-process-urls-true.snapshot @@ -201,6 +201,12 @@ html .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + right: auto; + left: 0; +} + .test51 { border-left: none; border-right: 1px solid #FFF; diff --git a/tests/__snapshots__/string-map/diff/custom-string-map-without-names-process-urls-true.snapshot b/tests/__snapshots__/string-map/diff/custom-string-map-without-names-process-urls-true.snapshot index c641653a..0091146a 100644 --- a/tests/__snapshots__/string-map/diff/custom-string-map-without-names-process-urls-true.snapshot +++ b/tests/__snapshots__/string-map/diff/custom-string-map-without-names-process-urls-true.snapshot @@ -201,6 +201,12 @@ html .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + right: auto; + left: 0; +} + .test51 { border-left: none; border-right: 1px solid #FFF; diff --git a/tests/__snapshots__/string-map/override/custom-non-valid-string-different-lengths-map-process-urls-true.snapshot b/tests/__snapshots__/string-map/override/custom-non-valid-string-different-lengths-map-process-urls-true.snapshot index 8b36703a..925270e0 100644 --- a/tests/__snapshots__/string-map/override/custom-non-valid-string-different-lengths-map-process-urls-true.snapshot +++ b/tests/__snapshots__/string-map/override/custom-non-valid-string-different-lengths-map-process-urls-true.snapshot @@ -589,6 +589,19 @@ html[dir="rtl"] .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + transform: scaleX(1.5); + height: 100%; + right: 0; +} + +[dir="rtl"]::view-transition-old(root), +[dir="rtl"]::view-transition-new(root) { + right: auto; + left: 0; +} + .test51 { border-left: 1px solid #FFF; } diff --git a/tests/__snapshots__/string-map/override/custom-non-valid-string-different-types-map-process-urls-true.snapshot b/tests/__snapshots__/string-map/override/custom-non-valid-string-different-types-map-process-urls-true.snapshot index 155d4c2a..bf8883e9 100644 --- a/tests/__snapshots__/string-map/override/custom-non-valid-string-different-types-map-process-urls-true.snapshot +++ b/tests/__snapshots__/string-map/override/custom-non-valid-string-different-types-map-process-urls-true.snapshot @@ -589,6 +589,19 @@ html[dir="rtl"] .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + transform: scaleX(1.5); + height: 100%; + right: 0; +} + +[dir="rtl"]::view-transition-old(root), +[dir="rtl"]::view-transition-new(root) { + right: auto; + left: 0; +} + .test51 { border-left: 1px solid #FFF; } diff --git a/tests/__snapshots__/string-map/override/custom-string-map-process-urls-true.snapshot b/tests/__snapshots__/string-map/override/custom-string-map-process-urls-true.snapshot index 42170535..36780a79 100644 --- a/tests/__snapshots__/string-map/override/custom-string-map-process-urls-true.snapshot +++ b/tests/__snapshots__/string-map/override/custom-string-map-process-urls-true.snapshot @@ -589,6 +589,19 @@ html[dir="rtl"] .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + transform: scaleX(1.5); + height: 100%; + right: 0; +} + +[dir="rtl"]::view-transition-old(root), +[dir="rtl"]::view-transition-new(root) { + right: auto; + left: 0; +} + .test51 { border-left: 1px solid #FFF; } diff --git a/tests/__snapshots__/string-map/override/custom-string-map-without-names-process-urls-true.snapshot b/tests/__snapshots__/string-map/override/custom-string-map-without-names-process-urls-true.snapshot index 9caee87b..b482dd68 100644 --- a/tests/__snapshots__/string-map/override/custom-string-map-without-names-process-urls-true.snapshot +++ b/tests/__snapshots__/string-map/override/custom-string-map-without-names-process-urls-true.snapshot @@ -589,6 +589,19 @@ html[dir="rtl"] .test50 { right: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + transform: scaleX(1.5); + height: 100%; + right: 0; +} + +[dir="rtl"]::view-transition-old(root), +[dir="rtl"]::view-transition-new(root) { + right: auto; + left: 0; +} + .test51 { border-left: 1px solid #FFF; } diff --git a/tests/css/input.css b/tests/css/input.css index 32ef5713..daeda0d7 100644 --- a/tests/css/input.css +++ b/tests/css/input.css @@ -433,6 +433,13 @@ html .test50 { left: 10px; } +::view-transition-old(root), +::view-transition-new(root) { + transform: scaleX(1.5); + height: 100%; + right: 0; +} + .test51 { border-left: 1px solid #FFF; border: none; diff --git a/tests/prefixes.test.ts b/tests/prefixes.test.ts index 691741d4..980eb120 100644 --- a/tests/prefixes.test.ts +++ b/tests/prefixes.test.ts @@ -79,7 +79,11 @@ runTests({}, (pluginOptions: PluginOptions): void => { it('prefixSelectorTransformer with custom ltrPrefix and rtlPrefix', (): void => { const transformer = (prefix: string, selector: string) => { - if (!selector.startsWith('html') && selector.indexOf(':root') < 0) { + if ( + !selector.startsWith('html') && + !selector.startsWith('::view-transition') && + selector.indexOf(':root') < 0 + ) { return `${prefix}${selector}`; } }; From 4e4dabccd7a879f75d9396580bdece56eb5af2fa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20Pereira=20Mu=C3=B1oz?= Date: Thu, 16 May 2024 08:37:56 +0200 Subject: [PATCH 05/13] Update CHANGELOG --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1bbde7f8..442193b1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ # Changelog -## [5.1.3] - 2024-05-13 +## [5.2.0] - 2024-05-16 - Add support for prefixes in `::view-transition` rules From 6a46c651c867d8d98fefbf1f6f7a94205ef04152 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20Pereira=20Mu=C3=B1oz?= Date: Thu, 16 May 2024 08:39:47 +0200 Subject: [PATCH 06/13] 5.2.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 50abcced..492f20d3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "postcss-rtlcss", - "version": "5.1.2", + "version": "5.2.0", "description": "PostCSS plugin to build Cascading Style Sheets (CSS) with Left-To-Right (LTR) and Right-To-Left (RTL) rules", "keywords": [ "postcss", From ad0ac3078bee8d3efe3c148c140ec65d55176d14 Mon Sep 17 00:00:00 2001 From: Aleen Date: Thu, 9 May 2024 11:38:59 +0800 Subject: [PATCH 07/13] Support specifying processors during processing CSS declarations --- README.md | 57 ++ src/@types/index.ts | 6 + src/data/store.ts | 8 +- src/parsers/declarations.ts | 5 +- .../process-declaration-plugins.snapshot | 616 ++++++++++++++++++ tests/basic-options.test.ts | 21 +- 6 files changed, 708 insertions(+), 5 deletions(-) create mode 100644 tests/__snapshots__/basic-options/combined/process-declaration-plugins.snapshot diff --git a/README.md b/README.md index 94ca95a9..5bc6a117 100644 --- a/README.md +++ b/README.md @@ -382,6 +382,7 @@ All the options are optional, and a default value will be used if any of them is | stringMap | `PluginStringMap[]` | Check below | An array of strings maps that will be used to make the replacements of the declarations' URLs and to match the names of the rules if `processRuleNames` is `true` | | greedy | `boolean` | `false` | When greedy is `true`, the matches of `stringMap` will not take into account word boundaries | | aliases | `Record` | `{}` | A strings map to treat some declarations as others | +| processDeclarationPlugins | `Array<{name: string, priority: number, processors: PluginProcessor[]}>` | `[]` | Plugins applied when processing CSS declarations | --- @@ -1447,6 +1448,62 @@ const options = { --- +#### processDeclarationPlugins + +
Expand +

+ +Sometimes, we can register some plugins when processing CSS declarations via the `processDeclarationPlugins` options, which is helpful when we need to avoid unexpected flipping situations like `background-position`. + +##### input + +```css +.test { + background-position: 0 100%; +} +``` + +##### Convert `0` to `100%` (default) + +##### output + +```css +.test { + background-position: 100% 100%; +} +``` + +##### Set a plugin to avoid flipping + +```javascript +const options = { + processDeclarationPlugins: [ + { + name: 'avoid-flipping-background', + priority: 99, // above the core RTLCSS plugin which has a priority value of 100 + processors: [{ + expr: /(background|object)(-position(-x)?|-image)?$/i, + action: (prop, value) => ({prop, value})} + ] + } + ] +}; +``` + +##### output + +```css +.test { + background-position: 0 100%; +} +``` + +

+ +
+ +--- + Control Directives --- diff --git a/src/@types/index.ts b/src/@types/index.ts index 4bcc49e0..93a14478 100644 --- a/src/@types/index.ts +++ b/src/@types/index.ts @@ -39,6 +39,11 @@ export interface PluginStringMap { replace: strings; } +export interface PluginProcessor { + expr: RegExp; + action: (prop: string, value: string, context: object) => object; +} + export type PrefixSelectorTransformer = (prefix: string, selector: string) => string | void; export interface PluginOptions { @@ -58,6 +63,7 @@ export interface PluginOptions { stringMap?: PluginStringMap[]; greedy?: boolean; aliases?: Record; + processDeclarationPlugins?: Array<{ name: string, priority: number, processors: PluginProcessor[] }>; } export interface PluginOptionsNormalized extends Omit, 'stringMap' | 'prefixSelectorTransformer'> { diff --git a/src/data/store.ts b/src/data/store.ts index 8d23ee7f..ed7558dd 100644 --- a/src/data/store.ts +++ b/src/data/store.ts @@ -143,7 +143,8 @@ const defaultOptions = (): PluginOptionsNormalized => ({ useCalc: false, stringMap: getRTLCSSStringMap(defaultStringMap), greedy: false, - aliases: {} + aliases: {}, + processDeclarationPlugins: [] }); const store: Store = { @@ -217,7 +218,10 @@ const normalizeOptions = (options: PluginOptions): PluginOptionsNormalized => { if (options.aliases && isObjectWithStringKeys(options.aliases)) { returnOptions.aliases = options.aliases; } - return returnOptions; + return { + ...returnOptions, + processDeclarationPlugins: (options.processDeclarationPlugins || []).map(plugin => ({...plugin, directives: {control: {}, value: []}})) + }; }; const initStore = (options: PluginOptions): void => { diff --git a/src/parsers/declarations.ts b/src/parsers/declarations.ts index 5e5b9b7c..5394a65a 100644 --- a/src/parsers/declarations.ts +++ b/src/parsers/declarations.ts @@ -59,7 +59,8 @@ export const parseDeclarations = ( useCalc, stringMap, greedy, - aliases + aliases, + processDeclarationPlugins } = store.options; const deleteDeclarations: Declaration[] = []; @@ -160,7 +161,7 @@ export const parseDeclarations = ( stringMap, greedy, aliases - }); + }, processDeclarationPlugins); /* the source could be undefined in certain cases but not during the tests */ /* istanbul ignore next */ diff --git a/tests/__snapshots__/basic-options/combined/process-declaration-plugins.snapshot b/tests/__snapshots__/basic-options/combined/process-declaration-plugins.snapshot new file mode 100644 index 00000000..05794ce4 --- /dev/null +++ b/tests/__snapshots__/basic-options/combined/process-declaration-plugins.snapshot @@ -0,0 +1,616 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`[[Mode: combined]] Basic Options Tests: {processDeclarationPlugins} 1`] = ` +".test1, .test2 { + background: url("/folder/subfolder/icons/ltr/chevron-left.png"); + background-color: #FFF; + background-position: 10px 20px; + color: #666; + width: 100%; +} + +[dir="ltr"] .test1, [dir="ltr"] .test2 { + border-radius: 0 2px 0 8px; + padding-right: 20px; + text-align: left; + transform: translate(-50%, 50%); +} + +[dir="rtl"] .test1, [dir="rtl"] .test2 { + border-radius: 2px 0 8px 0; + padding-left: 20px; + text-align: right; + transform: translate(50%, 50%); +} + +.test2 { + color: red; + text-align: left; + text-align: center; +} + +/* Comment not related to rtl */ +.test3 { + margin: 1px 2px 3px; + padding: 10px 20px; + /* Property comment not related to rtl */ + text-align: center; +} + +[dir="ltr"] .test3 { + direction: ltr; +} + +[dir="rtl"] .test3 { + direction: rtl; +} + +.test4 { + font-size: 10px; + border-color: red; + transform-origin: 10px 20px; + transform: scale(0.5, 0.5); +} + +[dir="ltr"] .test4 { + border-radius: 2px 4px 8px 16px; + text-shadow: red 99px -1px 1px, blue 99px 2px 1px; +} + +[dir="rtl"] .test4 { + border-radius: 4px 2px 16px 8px; + text-shadow: red -99px -1px 1px, blue -99px 2px 1px; +} + +.test5, +.test6, +.test7 { + background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C); + border: 1px solid 2px; + box-sizing: border-box; + position: absolute; +} + +[dir="ltr"] .test5, +[dir="ltr"] .test6, +[dir="ltr"] .test7 { + border-color: #666 #777 #888 #999; + border-width: 1px 2px 3px 4px; + left: 100px; + transform: translateX(5px); +} + +[dir="rtl"] .test5, +[dir="rtl"] .test6, +[dir="rtl"] .test7 { + border-color: #666 #999 #888 #777; + border-width: 1px 4px 3px 2px; + right: 100px; + transform: translateX(-5px); +} + +/*rtl:novalid:ignore*/ +.test8 { + background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%); + display: flex; + padding-left: 10%; +} + +.test9, .test10 { + background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), + linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%), + linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%); + padding: 0px 2px 3px 4px; +} + +[dir="ltr"] .test9, [dir="ltr"] .test10 { + left: 5px; +} + +[dir="rtl"] .test9, [dir="rtl"] .test10 { + right: 5px; +} + +[dir="ltr"] .test11:hover, +[dir="ltr"] .test11:active { + font-family: Arial, Helvetica; + font-size: 20px; + color: '#FFF'; + transform: translateY(10px); + padding: 10px; +} + +[dir="rtl"] .test11:hover, +[dir="rtl"] .test11:active { + font-family: "Droid Arabic Kufi", Arial, Helvetica; + font-size: 30px; + color: #000; + transform: translateY(10px) scaleX(-1); + padding: 10px 20px; +} + +#test12, #test13 { + left: 10px; + position: relative; + text-align: right; +} + +.test14 .test15 span { + border-left-color: #777; + margin: 10px 20px 30px 40px; + transform: translate(100%, 10%); +} + +.test16 { + padding-right: 10px; +} + +[dir="ltr"] .test16:hover { + padding-right: 20px; +} + +[dir="rtl"] .test16:hover { + padding-left: 20px; +} + +.test17 { + cursor: pointer; + padding: 10px 20px 40px 10px; + text-align: right; +} + +@media only screen and (min-device-width: 320px) { + .test17 { + cursor: wait; + } +} + +.test18 { + animation: 5s flip 1s ease-in-out, + 3s my-animation 6s ease-in-out; + font-size: 10px; +} + +[dir="ltr"] .test18 { + padding: 10px 20px 40px 10px; +} + +[dir="rtl"] .test18 { + padding: 10px 10px 40px 20px; +} + +.test18::after { + content: ''; + text-align: left; + padding-left: 5px; + margin-left: 15px; + transform: translateX(5px); +} + +[dir="ltr"] .test18::after { + left: 10px; +} + +[dir="rtl"] .test18::after { + right: 10px; +} + +@keyframes flip { + from { + transform: translateX(100px); + } + + to { + transform: translateX(0); + } +} + +@media only screen and (min-device-width: 320px) { + .test18 { + width: 100%; + } + + [dir="ltr"] .test18 { + padding: 1px 2px 3px 4px; + } + + [dir="rtl"] .test18 { + padding: 1px 4px 3px 2px; + } +} + +.test19 { + animation-delay: 1s; + animation-duration: 3s; + animation-name: my-animation; + animation-timing-function: ease-in-out; +} + +.test20 { + animation-delay: 2s; + animation-duration: 4s; + animation-name: my-animation, no-flip; + animation-timing-function: ease; +} + +@keyframes my-animation { + from { + left: 0%; + } + + to { + left: 100%; + } +} + +.test21 { + animation-delay: 1s; + animation-duration: 3s; + animation-name: no-flip; + animation-timing-function: ease-in-out; + width: 100%; +} + +@keyframes no-flip { + from { + color: #000; + } + + to { + color: #FFF; + } +} + +/* Do not add reset values in override mode */ +[dir="ltr"] .test22 { + left: 5px; + right: 10px; +} + +[dir="rtl"] .test22 { + right: 5px; + left: 10px; +} + +/* Do not create the RTL version if the result is the same */ +.test23 { + left: 10px; + right: 10px; +} + +/* Chain override */ +.test24 { + padding: 10px; +} + +[dir="ltr"] .test24 { + border: 1px solid #FFF; +} + +[dir="rtl"] .test24 { + border: 1px solid #000; +} + +[dir] .test24 { + border-bottom-color: #666; +} + +/* Automatic rename */ +.test25-ltr { + box-sizing: border-box; + color: #FFF; + font-size: 10px; + width: 100%; +} + +[dir="ltr"] .test25, [dir="ltr"] .test26-ltr, [dir="ltr"] .test27 { + background-image: url("/icons/icon-l.png") +} + +[dir="rtl"] .test25, [dir="rtl"] .test26-ltr, [dir="rtl"] .test27 { + background-image: url("/icons/icon-r.png") +} + +[dir="ltr"] .test26-rtl { + background-image: url("/icons/icon-r.png") +} + +[dir="rtl"] .test26-rtl { + background-image: url("/icons/icon-l.png") +} + +.test27-prev { + background-image: url("/icons/icon-p.png") +} + +.test27-next { + background-image: url("/icons/icon-n.png") +} + +.test28 { + font-family: 'Material Icons'; + font-weight: normal; + font-style: normal; + font-size: 24px; + display: inline-block; + line-height: 1; + text-transform: none; + letter-spacing: normal; + word-wrap: normal; + white-space: nowrap; +} + +.test28-left::before { + background-image: url("/folder/subfolder/arrow-left.png"); +} + +.test28-right::before { + background-image: url("/folder/subfolder/arrow-right.png"); +} + +.testleft29 { + border: 1px solid gray; +} + +.testleft30 { + background: url("/folder/subfolder/icon-ltr.png"); +} + +.testright30 { + background: url("/folder/subfolder/icon-rtl.png"); +} + +.test31 { + background-image: url("/icons/icon-left.png"); + border: 1px solid gray; +} + +.test32 { + align-items: center; + background-image: url("/icons/icon-left.png"); + background-repeat: no-repeat; + border: 1px solid gray; +} + +.test33 { + color: #EFEFEF; +} + +[dir="ltr"] .test33 { + left: 10px; +} + +[dir="rtl"] .test33 { + right: 10px; + height: 50px; + width: 100px; +} + +[dir="rtl"] .example34 { + color: #EFEFEF; + left: 10px; + width: 100%; +} + +[dir="rtl"] .example35 { + transform: translate(10px, 20px); +} + +.test36 { + color: #FFF; + width: 100%; +} + +[dir="ltr"] .test36 { + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +[dir="rtl"] .test36 { + border-left: 1px solid #666; + padding: 10px 5px 10px 20px; + text-align: left; +} + +.test37 { + color: #FFF; + width: 100%; +} + +[dir="ltr"] .test37 { + border-left: 1px solid #666; + padding: 10px 5px 10px 20px; + text-align: right; +} + +[dir="rtl"] .test37 { + border-right: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: left; +} + +.test38 { + color: #FFF; + width: 100%; +} + +[dir="ltr"] .test38 { + border-left: 1px solid #666; + padding: 10px 20px 10px 5px; + text-align: right; +} + +[dir="rtl"] .test38 { + border-right: 1px solid #666; + padding: 10px 5px 10px 20px; + text-align: left; +} + +.test39 { + width: 50%; +} + +[dir="ltr"] .test39 { + margin-right: 10px; +} + +[dir="rtl"] .test39 { + margin-left: 10px; +} + +.test40 { + color: transparent; + padding: 10px; +} + +[dir="ltr"] .test40 { + right: 5px; +} + +[dir="rtl"] .test40 { + left: 5px; +} + +.test41 { + color: #EFEFEF; +} + +[dir="ltr"] .test41 { + right: 10px; + height: 50px; + width: 100px; +} + +[dir="rtl"] .test41 { + left: 10px; +} + +[dir="ltr"] .test42 { + color: #EFEFEF; + left: 10px; + width: 100%; +} + +[dir="ltr"] .test43 { + transform: translate(10px, 20px); +} + +@keyframes normalFlip { + from { + left: 0px; + top: 0px; + } + + to { + left: 100px; + top: -100px; + } +} + +.test44 { + animation: 5s normalFlip 1s ease-in-out; +} + +@keyframes inversedFlip { + from { + left: 0px; + top: 0px; + } + + to { + left: 100px; + top: -100px; + } +} + +.test45 { + animation: 5s inversedFlip 1s ease-in-out; +} + +@media only screen and (min-device-width: 320px) { + .test46 { + cursor: wait; + } + + [dir="ltr"] .test46 { + text-align: left; + } + + [dir="rtl"] .test46 { + text-align: right; + } + + .test47 { + color: white; + } + + .test47left { + content: "\\f007"; + } + + .test47right { + content: "\\f010"; + } +} + +@media only screen and (min-device-width: 320px) { + .test48 { + cursor: wait; + } + + [dir="ltr"] .test48 { + text-align: right; + } + + [dir="rtl"] .test48 { + text-align: left; + } + + .test49 { + color: white; + } +} + +[dir="ltr"]:root { + text-align: right; +} + +[dir="rtl"]:root { + text-align: left; +} + +html .test50 { + color: red; +} + +html[dir="ltr"] .test50 { + left: 10px; +} + +html[dir="rtl"] .test50 { + right: 10px; +} + +[dir="ltr"] .test51 { + border-left: 1px solid #FFF; +} + +[dir="rtl"] .test51 { + border-right: 1px solid #FFF; +} + +[dir] .test51 { + border: none; +} + +.test52 { + color: red; + padding-block: 1px 2px; +} + +.test53 { + margin-block-start: 10px; + margin-block-end: 5px; +}" +`; diff --git a/tests/basic-options.test.ts b/tests/basic-options.test.ts index d5f353dc..0af0edf4 100644 --- a/tests/basic-options.test.ts +++ b/tests/basic-options.test.ts @@ -73,7 +73,26 @@ runTests({}, (pluginOptions: PluginOptions): void => { ); expect(output.warnings()).toHaveLength(0); }); - + + it('{processDeclarationPlugins}', (): void => { + const options: PluginOptions = { + ...pluginOptions, + processDeclarationPlugins: [{ + name: 'avoid-flipping-background', + priority: 99, // above the core RTLCSS plugin which has a priority value of 100 + processors: [{ + expr: /(background|object)(-position(-x)?|-image)?$/i, + action: (prop: string, value: string) => ({prop, value}) + }] + }] + }; + const output = postcss([postcssRTLCSS(options)]).process(input); + expect(output.css).toMatchSpecificSnapshot( + createSnapshotFileName(BASE_NAME,'process-declaration-plugins', pluginOptions.mode) + ); + expect(output.warnings()).toHaveLength(0); + }) + }); }); \ No newline at end of file From da716f8942e7baed07a0f21a10a26eba1bfb4415 Mon Sep 17 00:00:00 2001 From: Aleen Date: Mon, 13 May 2024 14:19:05 +0800 Subject: [PATCH 08/13] Validate `options.processDeclarationPlugins` --- README.md | 2 +- src/@types/index.ts | 10 ++++++++-- src/constants/index.ts | 1 + src/data/store.ts | 26 ++++++++++++++++++++++---- 4 files changed, 32 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 5bc6a117..6cdd914f 100644 --- a/README.md +++ b/README.md @@ -382,7 +382,7 @@ All the options are optional, and a default value will be used if any of them is | stringMap | `PluginStringMap[]` | Check below | An array of strings maps that will be used to make the replacements of the declarations' URLs and to match the names of the rules if `processRuleNames` is `true` | | greedy | `boolean` | `false` | When greedy is `true`, the matches of `stringMap` will not take into account word boundaries | | aliases | `Record` | `{}` | A strings map to treat some declarations as others | -| processDeclarationPlugins | `Array<{name: string, priority: number, processors: PluginProcessor[]}>` | `[]` | Plugins applied when processing CSS declarations | +| processDeclarationPlugins | `DeclarationPlugin[]` | `[]` | Plugins applied when processing CSS declarations | --- diff --git a/src/@types/index.ts b/src/@types/index.ts index 93a14478..07d66f8d 100644 --- a/src/@types/index.ts +++ b/src/@types/index.ts @@ -39,11 +39,17 @@ export interface PluginStringMap { replace: strings; } -export interface PluginProcessor { +export interface DeclarationPluginProcessor { expr: RegExp; action: (prop: string, value: string, context: object) => object; } +export type DeclarationPlugin = { + name: string; + priority: number; + processors: DeclarationPluginProcessor[]; +} + export type PrefixSelectorTransformer = (prefix: string, selector: string) => string | void; export interface PluginOptions { @@ -63,7 +69,7 @@ export interface PluginOptions { stringMap?: PluginStringMap[]; greedy?: boolean; aliases?: Record; - processDeclarationPlugins?: Array<{ name: string, priority: number, processors: PluginProcessor[] }>; + processDeclarationPlugins?: DeclarationPlugin[]; } export interface PluginOptionsNormalized extends Omit, 'stringMap' | 'prefixSelectorTransformer'> { diff --git a/src/constants/index.ts b/src/constants/index.ts index db354487..4222254b 100644 --- a/src/constants/index.ts +++ b/src/constants/index.ts @@ -3,6 +3,7 @@ export const DECLARATION_TYPE = 'decl'; export const RULE_TYPE = 'rule'; export const AT_RULE_TYPE = 'atrule'; export const STRING_TYPE = 'string'; +export const NUMBER_TYPE = 'number'; export const BOOLEAN_TYPE = 'boolean'; export const FUNCTION_TYPE = 'function'; export const KEYFRAMES_NAME = 'keyframes'; diff --git a/src/data/store.ts b/src/data/store.ts index ed7558dd..46d21137 100644 --- a/src/data/store.ts +++ b/src/data/store.ts @@ -2,6 +2,8 @@ import { Rule, AtRule } from 'postcss'; import { PluginOptions, PluginOptionsNormalized, + DeclarationPlugin, + DeclarationPluginProcessor, AtRulesObject, AtRulesStringMap, RulesObject, @@ -16,6 +18,8 @@ import { } from '@types'; import { BOOLEAN_TYPE, + STRING_TYPE, + NUMBER_TYPE, FUNCTION_TYPE, REG_EXP_CHARACTERS_REG_EXP, LAST_WORD_CHARACTER_REG_EXP @@ -99,6 +103,18 @@ const isNotAcceptedStringMap = (stringMap: PluginStringMap[]): boolean => { ); }; +const isAcceptedProcessDeclarationPlugins = (plugins: DeclarationPlugin[]): boolean => + Array.isArray(plugins) + && plugins.every((plugin: DeclarationPlugin) => + typeof plugin.name == STRING_TYPE + && typeof plugin.priority == NUMBER_TYPE + && Array.isArray(plugin.processors) + && plugin.processors.every((processor: DeclarationPluginProcessor) => + ({}).toString.call(processor.expr) === '[object RegExp]' + && typeof processor.action === FUNCTION_TYPE + ) + ); + const isObjectWithStringKeys = (obj: Record): boolean => !Object.entries(obj).some( (entry: [string, unknown]): boolean => @@ -215,13 +231,15 @@ const normalizeOptions = (options: PluginOptions): PluginOptionsNormalized => { } }); } + if (isAcceptedProcessDeclarationPlugins(options.processDeclarationPlugins)) { + returnOptions.processDeclarationPlugins = options.processDeclarationPlugins.map(plugin => ({ + ...plugin, directives: {control: {}, value: []}, + })); + } if (options.aliases && isObjectWithStringKeys(options.aliases)) { returnOptions.aliases = options.aliases; } - return { - ...returnOptions, - processDeclarationPlugins: (options.processDeclarationPlugins || []).map(plugin => ({...plugin, directives: {control: {}, value: []}})) - }; + return returnOptions; }; const initStore = (options: PluginOptions): void => { From c58ab687e6fec46cac1db2bfe1318b059bbefefa Mon Sep 17 00:00:00 2001 From: Aleen Date: Mon, 13 May 2024 14:30:59 +0800 Subject: [PATCH 09/13] Declare `RTLCSSPlugin` and rename the property of `PluginOptionsNormalized` --- src/@types/index.ts | 12 +++++++++++- src/data/store.ts | 4 ++-- src/parsers/declarations.ts | 4 ++-- 3 files changed, 15 insertions(+), 5 deletions(-) diff --git a/src/@types/index.ts b/src/@types/index.ts index 07d66f8d..cde967af 100644 --- a/src/@types/index.ts +++ b/src/@types/index.ts @@ -39,6 +39,15 @@ export interface PluginStringMap { replace: strings; } +export type RTLCSSPlugin = { + name: string; + priority: number; + directives: { + control: Object, + value: Array + }; +} + export interface DeclarationPluginProcessor { expr: RegExp; action: (prop: string, value: string, context: object) => object; @@ -72,8 +81,9 @@ export interface PluginOptions { processDeclarationPlugins?: DeclarationPlugin[]; } -export interface PluginOptionsNormalized extends Omit, 'stringMap' | 'prefixSelectorTransformer'> { +export interface PluginOptionsNormalized extends Omit, 'stringMap' | 'processDeclarationPlugins' | 'prefixSelectorTransformer'> { stringMap: StringMap[]; + plugins: RTLCSSPlugin[]; prefixSelectorTransformer: PrefixSelectorTransformer | null; } diff --git a/src/data/store.ts b/src/data/store.ts index 46d21137..0daba513 100644 --- a/src/data/store.ts +++ b/src/data/store.ts @@ -160,7 +160,7 @@ const defaultOptions = (): PluginOptionsNormalized => ({ stringMap: getRTLCSSStringMap(defaultStringMap), greedy: false, aliases: {}, - processDeclarationPlugins: [] + plugins: [] }); const store: Store = { @@ -232,7 +232,7 @@ const normalizeOptions = (options: PluginOptions): PluginOptionsNormalized => { }); } if (isAcceptedProcessDeclarationPlugins(options.processDeclarationPlugins)) { - returnOptions.processDeclarationPlugins = options.processDeclarationPlugins.map(plugin => ({ + returnOptions.plugins = options.processDeclarationPlugins.map(plugin => ({ ...plugin, directives: {control: {}, value: []}, })); } diff --git a/src/parsers/declarations.ts b/src/parsers/declarations.ts index 5394a65a..eba89b05 100644 --- a/src/parsers/declarations.ts +++ b/src/parsers/declarations.ts @@ -60,7 +60,7 @@ export const parseDeclarations = ( stringMap, greedy, aliases, - processDeclarationPlugins + plugins } = store.options; const deleteDeclarations: Declaration[] = []; @@ -161,7 +161,7 @@ export const parseDeclarations = ( stringMap, greedy, aliases - }, processDeclarationPlugins); + }, plugins); /* the source could be undefined in certain cases but not during the tests */ /* istanbul ignore next */ From b57c449719cf0c53054973eb7ba16b0a5e83c2fd Mon Sep 17 00:00:00 2001 From: Aleen Date: Mon, 13 May 2024 15:18:57 +0800 Subject: [PATCH 10/13] Add more test cases --- .../process-declaration-plugins.snapshot | 616 ------------------ .../combined/flip.snapshot | 174 +++++ .../combined/noflip.snapshot | 130 ++++ .../diff/flip.snapshot | 37 ++ .../diff/noflip.snapshot | 3 + .../override/flip.snapshot | 162 +++++ .../override/noflip.snapshot | 130 ++++ tests/basic-options.test.ts | 21 +- .../css/input-process-declaration-plugins.css | 122 ++++ tests/process-declaration-plugins.test.ts | 52 ++ 10 files changed, 811 insertions(+), 636 deletions(-) delete mode 100644 tests/__snapshots__/basic-options/combined/process-declaration-plugins.snapshot create mode 100644 tests/__snapshots__/process-declaration-plugins/combined/flip.snapshot create mode 100644 tests/__snapshots__/process-declaration-plugins/combined/noflip.snapshot create mode 100644 tests/__snapshots__/process-declaration-plugins/diff/flip.snapshot create mode 100644 tests/__snapshots__/process-declaration-plugins/diff/noflip.snapshot create mode 100644 tests/__snapshots__/process-declaration-plugins/override/flip.snapshot create mode 100644 tests/__snapshots__/process-declaration-plugins/override/noflip.snapshot create mode 100644 tests/css/input-process-declaration-plugins.css create mode 100644 tests/process-declaration-plugins.test.ts diff --git a/tests/__snapshots__/basic-options/combined/process-declaration-plugins.snapshot b/tests/__snapshots__/basic-options/combined/process-declaration-plugins.snapshot deleted file mode 100644 index 05794ce4..00000000 --- a/tests/__snapshots__/basic-options/combined/process-declaration-plugins.snapshot +++ /dev/null @@ -1,616 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`[[Mode: combined]] Basic Options Tests: {processDeclarationPlugins} 1`] = ` -".test1, .test2 { - background: url("/folder/subfolder/icons/ltr/chevron-left.png"); - background-color: #FFF; - background-position: 10px 20px; - color: #666; - width: 100%; -} - -[dir="ltr"] .test1, [dir="ltr"] .test2 { - border-radius: 0 2px 0 8px; - padding-right: 20px; - text-align: left; - transform: translate(-50%, 50%); -} - -[dir="rtl"] .test1, [dir="rtl"] .test2 { - border-radius: 2px 0 8px 0; - padding-left: 20px; - text-align: right; - transform: translate(50%, 50%); -} - -.test2 { - color: red; - text-align: left; - text-align: center; -} - -/* Comment not related to rtl */ -.test3 { - margin: 1px 2px 3px; - padding: 10px 20px; - /* Property comment not related to rtl */ - text-align: center; -} - -[dir="ltr"] .test3 { - direction: ltr; -} - -[dir="rtl"] .test3 { - direction: rtl; -} - -.test4 { - font-size: 10px; - border-color: red; - transform-origin: 10px 20px; - transform: scale(0.5, 0.5); -} - -[dir="ltr"] .test4 { - border-radius: 2px 4px 8px 16px; - text-shadow: red 99px -1px 1px, blue 99px 2px 1px; -} - -[dir="rtl"] .test4 { - border-radius: 4px 2px 16px 8px; - text-shadow: red -99px -1px 1px, blue -99px 2px 1px; -} - -.test5, -.test6, -.test7 { - background: linear-gradient(0.25turn, #3F87A6, #EBF8E1, #F69D3C); - border: 1px solid 2px; - box-sizing: border-box; - position: absolute; -} - -[dir="ltr"] .test5, -[dir="ltr"] .test6, -[dir="ltr"] .test7 { - border-color: #666 #777 #888 #999; - border-width: 1px 2px 3px 4px; - left: 100px; - transform: translateX(5px); -} - -[dir="rtl"] .test5, -[dir="rtl"] .test6, -[dir="rtl"] .test7 { - border-color: #666 #999 #888 #777; - border-width: 1px 4px 3px 2px; - right: 100px; - transform: translateX(-5px); -} - -/*rtl:novalid:ignore*/ -.test8 { - background: linear-gradient(to left, #333, #333 50%, #EEE 75%, #333 75%); - display: flex; - padding-left: 10%; -} - -.test9, .test10 { - background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), - linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%), - linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%); - padding: 0px 2px 3px 4px; -} - -[dir="ltr"] .test9, [dir="ltr"] .test10 { - left: 5px; -} - -[dir="rtl"] .test9, [dir="rtl"] .test10 { - right: 5px; -} - -[dir="ltr"] .test11:hover, -[dir="ltr"] .test11:active { - font-family: Arial, Helvetica; - font-size: 20px; - color: '#FFF'; - transform: translateY(10px); - padding: 10px; -} - -[dir="rtl"] .test11:hover, -[dir="rtl"] .test11:active { - font-family: "Droid Arabic Kufi", Arial, Helvetica; - font-size: 30px; - color: #000; - transform: translateY(10px) scaleX(-1); - padding: 10px 20px; -} - -#test12, #test13 { - left: 10px; - position: relative; - text-align: right; -} - -.test14 .test15 span { - border-left-color: #777; - margin: 10px 20px 30px 40px; - transform: translate(100%, 10%); -} - -.test16 { - padding-right: 10px; -} - -[dir="ltr"] .test16:hover { - padding-right: 20px; -} - -[dir="rtl"] .test16:hover { - padding-left: 20px; -} - -.test17 { - cursor: pointer; - padding: 10px 20px 40px 10px; - text-align: right; -} - -@media only screen and (min-device-width: 320px) { - .test17 { - cursor: wait; - } -} - -.test18 { - animation: 5s flip 1s ease-in-out, - 3s my-animation 6s ease-in-out; - font-size: 10px; -} - -[dir="ltr"] .test18 { - padding: 10px 20px 40px 10px; -} - -[dir="rtl"] .test18 { - padding: 10px 10px 40px 20px; -} - -.test18::after { - content: ''; - text-align: left; - padding-left: 5px; - margin-left: 15px; - transform: translateX(5px); -} - -[dir="ltr"] .test18::after { - left: 10px; -} - -[dir="rtl"] .test18::after { - right: 10px; -} - -@keyframes flip { - from { - transform: translateX(100px); - } - - to { - transform: translateX(0); - } -} - -@media only screen and (min-device-width: 320px) { - .test18 { - width: 100%; - } - - [dir="ltr"] .test18 { - padding: 1px 2px 3px 4px; - } - - [dir="rtl"] .test18 { - padding: 1px 4px 3px 2px; - } -} - -.test19 { - animation-delay: 1s; - animation-duration: 3s; - animation-name: my-animation; - animation-timing-function: ease-in-out; -} - -.test20 { - animation-delay: 2s; - animation-duration: 4s; - animation-name: my-animation, no-flip; - animation-timing-function: ease; -} - -@keyframes my-animation { - from { - left: 0%; - } - - to { - left: 100%; - } -} - -.test21 { - animation-delay: 1s; - animation-duration: 3s; - animation-name: no-flip; - animation-timing-function: ease-in-out; - width: 100%; -} - -@keyframes no-flip { - from { - color: #000; - } - - to { - color: #FFF; - } -} - -/* Do not add reset values in override mode */ -[dir="ltr"] .test22 { - left: 5px; - right: 10px; -} - -[dir="rtl"] .test22 { - right: 5px; - left: 10px; -} - -/* Do not create the RTL version if the result is the same */ -.test23 { - left: 10px; - right: 10px; -} - -/* Chain override */ -.test24 { - padding: 10px; -} - -[dir="ltr"] .test24 { - border: 1px solid #FFF; -} - -[dir="rtl"] .test24 { - border: 1px solid #000; -} - -[dir] .test24 { - border-bottom-color: #666; -} - -/* Automatic rename */ -.test25-ltr { - box-sizing: border-box; - color: #FFF; - font-size: 10px; - width: 100%; -} - -[dir="ltr"] .test25, [dir="ltr"] .test26-ltr, [dir="ltr"] .test27 { - background-image: url("/icons/icon-l.png") -} - -[dir="rtl"] .test25, [dir="rtl"] .test26-ltr, [dir="rtl"] .test27 { - background-image: url("/icons/icon-r.png") -} - -[dir="ltr"] .test26-rtl { - background-image: url("/icons/icon-r.png") -} - -[dir="rtl"] .test26-rtl { - background-image: url("/icons/icon-l.png") -} - -.test27-prev { - background-image: url("/icons/icon-p.png") -} - -.test27-next { - background-image: url("/icons/icon-n.png") -} - -.test28 { - font-family: 'Material Icons'; - font-weight: normal; - font-style: normal; - font-size: 24px; - display: inline-block; - line-height: 1; - text-transform: none; - letter-spacing: normal; - word-wrap: normal; - white-space: nowrap; -} - -.test28-left::before { - background-image: url("/folder/subfolder/arrow-left.png"); -} - -.test28-right::before { - background-image: url("/folder/subfolder/arrow-right.png"); -} - -.testleft29 { - border: 1px solid gray; -} - -.testleft30 { - background: url("/folder/subfolder/icon-ltr.png"); -} - -.testright30 { - background: url("/folder/subfolder/icon-rtl.png"); -} - -.test31 { - background-image: url("/icons/icon-left.png"); - border: 1px solid gray; -} - -.test32 { - align-items: center; - background-image: url("/icons/icon-left.png"); - background-repeat: no-repeat; - border: 1px solid gray; -} - -.test33 { - color: #EFEFEF; -} - -[dir="ltr"] .test33 { - left: 10px; -} - -[dir="rtl"] .test33 { - right: 10px; - height: 50px; - width: 100px; -} - -[dir="rtl"] .example34 { - color: #EFEFEF; - left: 10px; - width: 100%; -} - -[dir="rtl"] .example35 { - transform: translate(10px, 20px); -} - -.test36 { - color: #FFF; - width: 100%; -} - -[dir="ltr"] .test36 { - border-right: 1px solid #666; - padding: 10px 20px 10px 5px; - text-align: right; -} - -[dir="rtl"] .test36 { - border-left: 1px solid #666; - padding: 10px 5px 10px 20px; - text-align: left; -} - -.test37 { - color: #FFF; - width: 100%; -} - -[dir="ltr"] .test37 { - border-left: 1px solid #666; - padding: 10px 5px 10px 20px; - text-align: right; -} - -[dir="rtl"] .test37 { - border-right: 1px solid #666; - padding: 10px 20px 10px 5px; - text-align: left; -} - -.test38 { - color: #FFF; - width: 100%; -} - -[dir="ltr"] .test38 { - border-left: 1px solid #666; - padding: 10px 20px 10px 5px; - text-align: right; -} - -[dir="rtl"] .test38 { - border-right: 1px solid #666; - padding: 10px 5px 10px 20px; - text-align: left; -} - -.test39 { - width: 50%; -} - -[dir="ltr"] .test39 { - margin-right: 10px; -} - -[dir="rtl"] .test39 { - margin-left: 10px; -} - -.test40 { - color: transparent; - padding: 10px; -} - -[dir="ltr"] .test40 { - right: 5px; -} - -[dir="rtl"] .test40 { - left: 5px; -} - -.test41 { - color: #EFEFEF; -} - -[dir="ltr"] .test41 { - right: 10px; - height: 50px; - width: 100px; -} - -[dir="rtl"] .test41 { - left: 10px; -} - -[dir="ltr"] .test42 { - color: #EFEFEF; - left: 10px; - width: 100%; -} - -[dir="ltr"] .test43 { - transform: translate(10px, 20px); -} - -@keyframes normalFlip { - from { - left: 0px; - top: 0px; - } - - to { - left: 100px; - top: -100px; - } -} - -.test44 { - animation: 5s normalFlip 1s ease-in-out; -} - -@keyframes inversedFlip { - from { - left: 0px; - top: 0px; - } - - to { - left: 100px; - top: -100px; - } -} - -.test45 { - animation: 5s inversedFlip 1s ease-in-out; -} - -@media only screen and (min-device-width: 320px) { - .test46 { - cursor: wait; - } - - [dir="ltr"] .test46 { - text-align: left; - } - - [dir="rtl"] .test46 { - text-align: right; - } - - .test47 { - color: white; - } - - .test47left { - content: "\\f007"; - } - - .test47right { - content: "\\f010"; - } -} - -@media only screen and (min-device-width: 320px) { - .test48 { - cursor: wait; - } - - [dir="ltr"] .test48 { - text-align: right; - } - - [dir="rtl"] .test48 { - text-align: left; - } - - .test49 { - color: white; - } -} - -[dir="ltr"]:root { - text-align: right; -} - -[dir="rtl"]:root { - text-align: left; -} - -html .test50 { - color: red; -} - -html[dir="ltr"] .test50 { - left: 10px; -} - -html[dir="rtl"] .test50 { - right: 10px; -} - -[dir="ltr"] .test51 { - border-left: 1px solid #FFF; -} - -[dir="rtl"] .test51 { - border-right: 1px solid #FFF; -} - -[dir] .test51 { - border: none; -} - -.test52 { - color: red; - padding-block: 1px 2px; -} - -.test53 { - margin-block-start: 10px; - margin-block-end: 5px; -}" -`; diff --git a/tests/__snapshots__/process-declaration-plugins/combined/flip.snapshot b/tests/__snapshots__/process-declaration-plugins/combined/flip.snapshot new file mode 100644 index 00000000..b3009ced --- /dev/null +++ b/tests/__snapshots__/process-declaration-plugins/combined/flip.snapshot @@ -0,0 +1,174 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`[[Mode: combined]] Combined Tests: flip background by default 1`] = ` +"[dir="ltr"] .test1 { + background: url("/icons/icon-left.png") 0 100%; +} + +[dir="rtl"] .test1 { + background: url("/icons/icon-left.png") 100% 100%; +} + +.test2 { + background-image: url("/icons/icon-left.png"); +} + +[dir="ltr"] .test2 { + background-position: 0 100%; +} + +[dir="rtl"] .test2 { + background-position: 100% 100%; +} + +.test3 { + background-image: url("/icons/icon-left.png"); + background-position-y: 100%; +} + +[dir="ltr"] .test3 { + background-position-x: 0; +} + +[dir="rtl"] .test3 { + background-position-x: 100%; +} + +[dir="ltr"] .test4 { + object-position: 0 100%; +} + +[dir="rtl"] .test4 { + object-position: 100% 100%; +} + +/* inside a nested rule */ +[dir="ltr"] .test1 { + background: url("/icons/icon-left.png") 0 100%; +} + +[dir="rtl"] .test1 { + background: url("/icons/icon-left.png") 100% 100%; +} + +[dir="ltr"] .test2 { + background-image: url("/icons/icon-left.png"); + background-position: 0 100%; +} + +[dir="rtl"] .test2 { + background-image: url("/icons/icon-left.png"); + background-position: 100% 100%; +} + +[dir="ltr"] .test3 { + background-image: url("/icons/icon-left.png"); + background-position-x: 0; + background-position-y: 100%; +} + +[dir="rtl"] .test3 { + background-image: url("/icons/icon-left.png"); + background-position-x: 100%; + background-position-y: 100%; +} + +[dir="ltr"] .test4 { + object-position: 0 100%; +} + +[dir="rtl"] .test4 { + object-position: 100% 100%; +} + +/* inside a keyframe animation */ +@keyframes flip1 { + from { + background: url("/icons/icon-left.png") 0 100%; + } + + to { + background: url("/icons/icon-left.png") 100% 100%; + } +} + +@keyframes flip2 { + from { + background-image: url("/icons/icon-left.png"); + background-position: 0 100%; + } + + to { + background-image: url("/icons/icon-left.png"); + background-position: 100% 100%; + } +} + +@keyframes flip3 { + from { + background-image: url("/icons/icon-left.png"); + background-position-x: 0; + background-position-y: 100%; + } + + to { + background-image: url("/icons/icon-left.png"); + background-position-x: 100%; + background-position-y: 100%; + } +} + +@keyframes flip4 { + from { + object-position: 0 100%; + } + + to { + object-position: 100% 100%; + } +} + +/* inside a media-query */ +@media screen and (max-width: 800px) { + [dir="ltr"] .test1 { + background: url("/icons/icon-left.png") 0 100%; + } + + [dir="rtl"] .test1 { + background: url("/icons/icon-left.png") 100% 100%; + } + + .test2 { + background-image: url("/icons/icon-left.png"); + } + + [dir="ltr"] .test2 { + background-position: 0 100%; + } + + [dir="rtl"] .test2 { + background-position: 100% 100%; + } + + .test3 { + background-image: url("/icons/icon-left.png"); + background-position-y: 100%; + } + + [dir="ltr"] .test3 { + background-position-x: 0; + } + + [dir="rtl"] .test3 { + background-position-x: 100%; + } + + [dir="ltr"] .test4 { + object-position: 0 100%; + } + + [dir="rtl"] .test4 { + object-position: 100% 100%; + } +}" +`; diff --git a/tests/__snapshots__/process-declaration-plugins/combined/noflip.snapshot b/tests/__snapshots__/process-declaration-plugins/combined/noflip.snapshot new file mode 100644 index 00000000..49fac589 --- /dev/null +++ b/tests/__snapshots__/process-declaration-plugins/combined/noflip.snapshot @@ -0,0 +1,130 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`[[Mode: combined]] Combined Tests: use {processDeclarationPlugins} to avoid flipping background 1`] = ` +".test1 { + background: url("/icons/icon-left.png") 0 100%; +} + +.test2 { + background-image: url("/icons/icon-left.png"); + background-position: 0 100%; +} + +.test3 { + background-image: url("/icons/icon-left.png"); + background-position-x: 0; + background-position-y: 100%; +} + +.test4 { + object-position: 0 100%; +} + +/* inside a nested rule */ +[dir="ltr"] .test1 { + background: url("/icons/icon-left.png") 0 100%; +} + +[dir="rtl"] .test1 { + background: url("/icons/icon-left.png") 100% 100%; +} + +[dir="ltr"] .test2 { + background-image: url("/icons/icon-left.png"); + background-position: 0 100%; +} + +[dir="rtl"] .test2 { + background-image: url("/icons/icon-left.png"); + background-position: 100% 100%; +} + +[dir="ltr"] .test3 { + background-image: url("/icons/icon-left.png"); + background-position-x: 0; + background-position-y: 100%; +} + +[dir="rtl"] .test3 { + background-image: url("/icons/icon-left.png"); + background-position-x: 100%; + background-position-y: 100%; +} + +[dir="ltr"] .test4 { + object-position: 0 100%; +} + +[dir="rtl"] .test4 { + object-position: 100% 100%; +} + +/* inside a keyframe animation */ +@keyframes flip1 { + from { + background: url("/icons/icon-left.png") 0 100%; + } + + to { + background: url("/icons/icon-left.png") 100% 100%; + } +} + +@keyframes flip2 { + from { + background-image: url("/icons/icon-left.png"); + background-position: 0 100%; + } + + to { + background-image: url("/icons/icon-left.png"); + background-position: 100% 100%; + } +} + +@keyframes flip3 { + from { + background-image: url("/icons/icon-left.png"); + background-position-x: 0; + background-position-y: 100%; + } + + to { + background-image: url("/icons/icon-left.png"); + background-position-x: 100%; + background-position-y: 100%; + } +} + +@keyframes flip4 { + from { + object-position: 0 100%; + } + + to { + object-position: 100% 100%; + } +} + +/* inside a media-query */ +@media screen and (max-width: 800px) { + .test1 { + background: url("/icons/icon-left.png") 0 100%; + } + + .test2 { + background-image: url("/icons/icon-left.png"); + background-position: 0 100%; + } + + .test3 { + background-image: url("/icons/icon-left.png"); + background-position-x: 0; + background-position-y: 100%; + } + + .test4 { + object-position: 0 100%; + } +}" +`; diff --git a/tests/__snapshots__/process-declaration-plugins/diff/flip.snapshot b/tests/__snapshots__/process-declaration-plugins/diff/flip.snapshot new file mode 100644 index 00000000..336cb7bb --- /dev/null +++ b/tests/__snapshots__/process-declaration-plugins/diff/flip.snapshot @@ -0,0 +1,37 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`[[Mode: diff]] Combined Tests: flip background by default 1`] = ` +".test1 { + background: url("/icons/icon-left.png") 100% 100%; +} + +.test2 { + background-position: 100% 100%; +} + +.test3 { + background-position-x: 100%; +} + +.test4 { + object-position: 100% 100%; +} + +@media screen and (max-width: 800px) { + .test1 { + background: url("/icons/icon-left.png") 100% 100%; + } + + .test2 { + background-position: 100% 100%; + } + + .test3 { + background-position-x: 100%; + } + + .test4 { + object-position: 100% 100%; + } +}" +`; diff --git a/tests/__snapshots__/process-declaration-plugins/diff/noflip.snapshot b/tests/__snapshots__/process-declaration-plugins/diff/noflip.snapshot new file mode 100644 index 00000000..42d8c597 --- /dev/null +++ b/tests/__snapshots__/process-declaration-plugins/diff/noflip.snapshot @@ -0,0 +1,3 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`[[Mode: diff]] Combined Tests: use {processDeclarationPlugins} to avoid flipping background 1`] = `""`; diff --git a/tests/__snapshots__/process-declaration-plugins/override/flip.snapshot b/tests/__snapshots__/process-declaration-plugins/override/flip.snapshot new file mode 100644 index 00000000..874a7003 --- /dev/null +++ b/tests/__snapshots__/process-declaration-plugins/override/flip.snapshot @@ -0,0 +1,162 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`[[Mode: override]] Combined Tests: flip background by default 1`] = ` +".test1 { + background: url("/icons/icon-left.png") 0 100%; +} + +[dir="rtl"] .test1 { + background: url("/icons/icon-left.png") 100% 100%; +} + +.test2 { + background-image: url("/icons/icon-left.png"); + background-position: 0 100%; +} + +[dir="rtl"] .test2 { + background-position: 100% 100%; +} + +.test3 { + background-image: url("/icons/icon-left.png"); + background-position-x: 0; + background-position-y: 100%; +} + +[dir="rtl"] .test3 { + background-position-x: 100%; +} + +.test4 { + object-position: 0 100%; +} + +[dir="rtl"] .test4 { + object-position: 100% 100%; +} + +/* inside a nested rule */ +[dir="ltr"] .test1 { + background: url("/icons/icon-left.png") 0 100%; +} + +[dir="rtl"] .test1 { + background: url("/icons/icon-left.png") 100% 100%; +} + +[dir="ltr"] .test2 { + background-image: url("/icons/icon-left.png"); + background-position: 0 100%; +} + +[dir="rtl"] .test2 { + background-image: url("/icons/icon-left.png"); + background-position: 100% 100%; +} + +[dir="ltr"] .test3 { + background-image: url("/icons/icon-left.png"); + background-position-x: 0; + background-position-y: 100%; +} + +[dir="rtl"] .test3 { + background-image: url("/icons/icon-left.png"); + background-position-x: 100%; + background-position-y: 100%; +} + +[dir="ltr"] .test4 { + object-position: 0 100%; +} + +[dir="rtl"] .test4 { + object-position: 100% 100%; +} + +/* inside a keyframe animation */ +@keyframes flip1 { + from { + background: url("/icons/icon-left.png") 0 100%; + } + + to { + background: url("/icons/icon-left.png") 100% 100%; + } +} + +@keyframes flip2 { + from { + background-image: url("/icons/icon-left.png"); + background-position: 0 100%; + } + + to { + background-image: url("/icons/icon-left.png"); + background-position: 100% 100%; + } +} + +@keyframes flip3 { + from { + background-image: url("/icons/icon-left.png"); + background-position-x: 0; + background-position-y: 100%; + } + + to { + background-image: url("/icons/icon-left.png"); + background-position-x: 100%; + background-position-y: 100%; + } +} + +@keyframes flip4 { + from { + object-position: 0 100%; + } + + to { + object-position: 100% 100%; + } +} + +/* inside a media-query */ +@media screen and (max-width: 800px) { + .test1 { + background: url("/icons/icon-left.png") 0 100%; + } + + [dir="rtl"] .test1 { + background: url("/icons/icon-left.png") 100% 100%; + } + + .test2 { + background-image: url("/icons/icon-left.png"); + background-position: 0 100%; + } + + [dir="rtl"] .test2 { + background-position: 100% 100%; + } + + .test3 { + background-image: url("/icons/icon-left.png"); + background-position-x: 0; + background-position-y: 100%; + } + + [dir="rtl"] .test3 { + background-position-x: 100%; + } + + .test4 { + object-position: 0 100%; + } + + [dir="rtl"] .test4 { + object-position: 100% 100%; + } +}" +`; diff --git a/tests/__snapshots__/process-declaration-plugins/override/noflip.snapshot b/tests/__snapshots__/process-declaration-plugins/override/noflip.snapshot new file mode 100644 index 00000000..c9c11c68 --- /dev/null +++ b/tests/__snapshots__/process-declaration-plugins/override/noflip.snapshot @@ -0,0 +1,130 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`[[Mode: override]] Combined Tests: use {processDeclarationPlugins} to avoid flipping background 1`] = ` +".test1 { + background: url("/icons/icon-left.png") 0 100%; +} + +.test2 { + background-image: url("/icons/icon-left.png"); + background-position: 0 100%; +} + +.test3 { + background-image: url("/icons/icon-left.png"); + background-position-x: 0; + background-position-y: 100%; +} + +.test4 { + object-position: 0 100%; +} + +/* inside a nested rule */ +[dir="ltr"] .test1 { + background: url("/icons/icon-left.png") 0 100%; +} + +[dir="rtl"] .test1 { + background: url("/icons/icon-left.png") 100% 100%; +} + +[dir="ltr"] .test2 { + background-image: url("/icons/icon-left.png"); + background-position: 0 100%; +} + +[dir="rtl"] .test2 { + background-image: url("/icons/icon-left.png"); + background-position: 100% 100%; +} + +[dir="ltr"] .test3 { + background-image: url("/icons/icon-left.png"); + background-position-x: 0; + background-position-y: 100%; +} + +[dir="rtl"] .test3 { + background-image: url("/icons/icon-left.png"); + background-position-x: 100%; + background-position-y: 100%; +} + +[dir="ltr"] .test4 { + object-position: 0 100%; +} + +[dir="rtl"] .test4 { + object-position: 100% 100%; +} + +/* inside a keyframe animation */ +@keyframes flip1 { + from { + background: url("/icons/icon-left.png") 0 100%; + } + + to { + background: url("/icons/icon-left.png") 100% 100%; + } +} + +@keyframes flip2 { + from { + background-image: url("/icons/icon-left.png"); + background-position: 0 100%; + } + + to { + background-image: url("/icons/icon-left.png"); + background-position: 100% 100%; + } +} + +@keyframes flip3 { + from { + background-image: url("/icons/icon-left.png"); + background-position-x: 0; + background-position-y: 100%; + } + + to { + background-image: url("/icons/icon-left.png"); + background-position-x: 100%; + background-position-y: 100%; + } +} + +@keyframes flip4 { + from { + object-position: 0 100%; + } + + to { + object-position: 100% 100%; + } +} + +/* inside a media-query */ +@media screen and (max-width: 800px) { + .test1 { + background: url("/icons/icon-left.png") 0 100%; + } + + .test2 { + background-image: url("/icons/icon-left.png"); + background-position: 0 100%; + } + + .test3 { + background-image: url("/icons/icon-left.png"); + background-position-x: 0; + background-position-y: 100%; + } + + .test4 { + object-position: 0 100%; + } +}" +`; diff --git a/tests/basic-options.test.ts b/tests/basic-options.test.ts index 0af0edf4..d5f353dc 100644 --- a/tests/basic-options.test.ts +++ b/tests/basic-options.test.ts @@ -73,26 +73,7 @@ runTests({}, (pluginOptions: PluginOptions): void => { ); expect(output.warnings()).toHaveLength(0); }); - - it('{processDeclarationPlugins}', (): void => { - const options: PluginOptions = { - ...pluginOptions, - processDeclarationPlugins: [{ - name: 'avoid-flipping-background', - priority: 99, // above the core RTLCSS plugin which has a priority value of 100 - processors: [{ - expr: /(background|object)(-position(-x)?|-image)?$/i, - action: (prop: string, value: string) => ({prop, value}) - }] - }] - }; - const output = postcss([postcssRTLCSS(options)]).process(input); - expect(output.css).toMatchSpecificSnapshot( - createSnapshotFileName(BASE_NAME,'process-declaration-plugins', pluginOptions.mode) - ); - expect(output.warnings()).toHaveLength(0); - }) - + }); }); \ No newline at end of file diff --git a/tests/css/input-process-declaration-plugins.css b/tests/css/input-process-declaration-plugins.css new file mode 100644 index 00000000..7bf16b38 --- /dev/null +++ b/tests/css/input-process-declaration-plugins.css @@ -0,0 +1,122 @@ +.test1 { + background: url("/icons/icon-left.png") 0 100%; +} + +.test2 { + background-image: url("/icons/icon-left.png"); + background-position: 0 100%; +} + +.test3 { + background-image: url("/icons/icon-left.png"); + background-position-x: 0; + background-position-y: 100%; +} + +.test4 { + object-position: 0 100%; +} + +/* inside a nested rule */ +[dir="ltr"] .test1 { + background: url("/icons/icon-left.png") 0 100%; +} + +[dir="rtl"] .test1 { + background: url("/icons/icon-left.png") 100% 100%; +} + +[dir="ltr"] .test2 { + background-image: url("/icons/icon-left.png"); + background-position: 0 100%; +} + +[dir="rtl"] .test2 { + background-image: url("/icons/icon-left.png"); + background-position: 100% 100%; +} + +[dir="ltr"] .test3 { + background-image: url("/icons/icon-left.png"); + background-position-x: 0; + background-position-y: 100%; +} + +[dir="rtl"] .test3 { + background-image: url("/icons/icon-left.png"); + background-position-x: 100%; + background-position-y: 100%; +} + +[dir="ltr"] .test4 { + object-position: 0 100%; +} + +[dir="rtl"] .test4 { + object-position: 100% 100%; +} + +/* inside a keyframe animation */ +@keyframes flip1 { + from { + background: url("/icons/icon-left.png") 0 100%; + } + to { + background: url("/icons/icon-left.png") 100% 100%; + } +} + +@keyframes flip2 { + from { + background-image: url("/icons/icon-left.png"); + background-position: 0 100%; + } + to { + background-image: url("/icons/icon-left.png"); + background-position: 100% 100%; + } +} + +@keyframes flip3 { + from { + background-image: url("/icons/icon-left.png"); + background-position-x: 0; + background-position-y: 100%; + } + to { + background-image: url("/icons/icon-left.png"); + background-position-x: 100%; + background-position-y: 100%; + } +} + +@keyframes flip4 { + from { + object-position: 0 100%; + } + to { + object-position: 100% 100%; + } +} + +/* inside a media-query */ +@media screen and (max-width: 800px) { + .test1 { + background: url("/icons/icon-left.png") 0 100%; + } + + .test2 { + background-image: url("/icons/icon-left.png"); + background-position: 0 100%; + } + + .test3 { + background-image: url("/icons/icon-left.png"); + background-position-x: 0; + background-position-y: 100%; + } + + .test4 { + object-position: 0 100%; + } +} \ No newline at end of file diff --git a/tests/process-declaration-plugins.test.ts b/tests/process-declaration-plugins.test.ts new file mode 100644 index 00000000..402a263c --- /dev/null +++ b/tests/process-declaration-plugins.test.ts @@ -0,0 +1,52 @@ +import postcss from 'postcss'; +import postcssRTLCSS from '../src'; +import { PluginOptions, Mode } from '../src/@types'; +import { + readCSSFile, + runTests, + createSnapshotFileName +} from './utils'; +import 'jest-specific-snapshot'; + +const BASE_NAME = 'process-declaration-plugins'; + +runTests({}, (pluginOptions: PluginOptions): void => { + + describe(`[[Mode: ${pluginOptions.mode}]] Combined Tests: `, (): void => { + + let input = ''; + + beforeEach(async (): Promise => { + input = input || await readCSSFile(`input-${BASE_NAME}.css`); + }); + + it('flip background by default', (): void => { + const output = postcss([postcssRTLCSS(pluginOptions)]).process(input); + expect(output.css).toMatchSpecificSnapshot( + createSnapshotFileName(BASE_NAME,'flip', pluginOptions.mode) + ); + expect(output.warnings()).toHaveLength(0); + }); + + it('use {processDeclarationPlugins} to avoid flipping background', (): void => { + const options: PluginOptions = { + ...pluginOptions, + processDeclarationPlugins: [{ + name: 'avoid-flipping-background', + priority: 99, // above the core RTLCSS plugin which has a priority value of 100 + processors: [{ + expr: /(background|object)(-position(-x)?|-image)?$/i, + action: (prop: string, value: string) => ({prop, value}) + }] + }] + }; + const output = postcss([postcssRTLCSS(options)]).process(input); + expect(output.css).toMatchSpecificSnapshot( + createSnapshotFileName(BASE_NAME,'noflip', pluginOptions.mode) + ); + expect(output.warnings()).toHaveLength(0); + }); + + }); + +}); \ No newline at end of file From ae084c8cfd753046045a7d1395971cb85f3f5488 Mon Sep 17 00:00:00 2001 From: Aleen Date: Mon, 13 May 2024 15:30:45 +0800 Subject: [PATCH 11/13] Update README --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 6cdd914f..95392f3f 100644 --- a/README.md +++ b/README.md @@ -1453,7 +1453,7 @@ const options = {
Expand

-Sometimes, we can register some plugins when processing CSS declarations via the `processDeclarationPlugins` options, which is helpful when we need to avoid unexpected flipping situations like `background-position`. +The intention of the processDeclarationPlugins option is to process the declarations to extend or override RTLCSS functionality. For example, we can avoid automatically flipping of `background-potion`. ##### input From eb622ec66fac63b5231b78029a1850b87796693c Mon Sep 17 00:00:00 2001 From: Aleen Date: Wed, 15 May 2024 13:54:38 +0800 Subject: [PATCH 12/13] Simplify regular expression detection --- src/data/store.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/data/store.ts b/src/data/store.ts index 0daba513..0d51b2e9 100644 --- a/src/data/store.ts +++ b/src/data/store.ts @@ -110,7 +110,7 @@ const isAcceptedProcessDeclarationPlugins = (plugins: DeclarationPlugin[]): bool && typeof plugin.priority == NUMBER_TYPE && Array.isArray(plugin.processors) && plugin.processors.every((processor: DeclarationPluginProcessor) => - ({}).toString.call(processor.expr) === '[object RegExp]' + processor.expr instanceof RegExp && typeof processor.action === FUNCTION_TYPE ) ); @@ -272,4 +272,4 @@ const initKeyframesData = (): void => { store.keyframesRegExp = getKeyFramesRegExp(store.keyframesStringMap); }; -export { store, initStore, initKeyframesData }; \ No newline at end of file +export { store, initStore, initKeyframesData }; From 8cf2a63b750ed6767d4ac389cfaed415f182f878 Mon Sep 17 00:00:00 2001 From: Aleen Date: Wed, 15 May 2024 14:10:30 +0800 Subject: [PATCH 13/13] Change test cases --- .../combined/flip.snapshot | 65 +++++++++++-------- .../combined/noflip.snapshot | 51 +++++---------- .../diff/flip.snapshot | 20 +++++- .../diff/noflip.snapshot | 2 +- .../override/flip.snapshot | 59 ++++++++--------- .../override/noflip.snapshot | 51 +++++---------- ...=> input-process-declaration-plugins.scss} | 54 +++++---------- tests/process-declaration-plugins.test.ts | 4 +- 8 files changed, 141 insertions(+), 165 deletions(-) rename tests/css/{input-process-declaration-plugins.css => input-process-declaration-plugins.scss} (68%) diff --git a/tests/__snapshots__/process-declaration-plugins/combined/flip.snapshot b/tests/__snapshots__/process-declaration-plugins/combined/flip.snapshot index b3009ced..3a1cf678 100644 --- a/tests/__snapshots__/process-declaration-plugins/combined/flip.snapshot +++ b/tests/__snapshots__/process-declaration-plugins/combined/flip.snapshot @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`[[Mode: combined]] Combined Tests: flip background by default 1`] = ` +exports[`[[Mode: combined]] flip background by default 1`] = ` "[dir="ltr"] .test1 { background: url("/icons/icon-left.png") 0 100%; } @@ -43,42 +43,51 @@ exports[`[[Mode: combined]] Combined Tests: flip background by default 1`] = ` } /* inside a nested rule */ -[dir="ltr"] .test1 { - background: url("/icons/icon-left.png") 0 100%; -} +.test1 { + .test3 { + background-image: url("/icons/icon-left.png"); + } -[dir="rtl"] .test1 { - background: url("/icons/icon-left.png") 100% 100%; + > .test4 { + background-image: url("/icons/icon-left.png"); + background-position-y: 100%; + } } -[dir="ltr"] .test2 { - background-image: url("/icons/icon-left.png"); - background-position: 0 100%; -} +[dir="ltr"] .test1 { + &.test2 { + background: url("/icons/icon-left.png") 0 100%; + } -[dir="rtl"] .test2 { - background-image: url("/icons/icon-left.png"); - background-position: 100% 100%; -} + .test3 { + background-position: 0 100%; + } -[dir="ltr"] .test3 { - background-image: url("/icons/icon-left.png"); - background-position-x: 0; - background-position-y: 100%; -} + > .test4 { + background-position-x: 0; + } -[dir="rtl"] .test3 { - background-image: url("/icons/icon-left.png"); - background-position-x: 100%; - background-position-y: 100%; + + .test5 { + object-position: 0 100%; + } } -[dir="ltr"] .test4 { - object-position: 0 100%; -} +[dir="rtl"] .test1 { + &.test2 { + background: url("/icons/icon-left.png") 100% 100%; + } -[dir="rtl"] .test4 { - object-position: 100% 100%; + .test3 { + background-position: 100% 100%; + } + + > .test4 { + background-position-x: 100%; + } + + + .test5 { + object-position: 100% 100%; + } } /* inside a keyframe animation */ diff --git a/tests/__snapshots__/process-declaration-plugins/combined/noflip.snapshot b/tests/__snapshots__/process-declaration-plugins/combined/noflip.snapshot index 49fac589..718aeca4 100644 --- a/tests/__snapshots__/process-declaration-plugins/combined/noflip.snapshot +++ b/tests/__snapshots__/process-declaration-plugins/combined/noflip.snapshot @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`[[Mode: combined]] Combined Tests: use {processDeclarationPlugins} to avoid flipping background 1`] = ` +exports[`[[Mode: combined]] use {processDeclarationPlugins} to avoid flipping background 1`] = ` ".test1 { background: url("/icons/icon-left.png") 0 100%; } @@ -21,42 +21,25 @@ exports[`[[Mode: combined]] Combined Tests: use {processDeclarationPlugins} to } /* inside a nested rule */ -[dir="ltr"] .test1 { - background: url("/icons/icon-left.png") 0 100%; -} - -[dir="rtl"] .test1 { - background: url("/icons/icon-left.png") 100% 100%; -} - -[dir="ltr"] .test2 { - background-image: url("/icons/icon-left.png"); - background-position: 0 100%; -} - -[dir="rtl"] .test2 { - background-image: url("/icons/icon-left.png"); - background-position: 100% 100%; -} - -[dir="ltr"] .test3 { - background-image: url("/icons/icon-left.png"); - background-position-x: 0; - background-position-y: 100%; -} +.test1 { + &.test2 { + background: url("/icons/icon-left.png") 0 100%; + } -[dir="rtl"] .test3 { - background-image: url("/icons/icon-left.png"); - background-position-x: 100%; - background-position-y: 100%; -} + .test3 { + background-image: url("/icons/icon-left.png"); + background-position: 0 100%; + } -[dir="ltr"] .test4 { - object-position: 0 100%; -} + > .test4 { + background-image: url("/icons/icon-left.png"); + background-position-x: 0; + background-position-y: 100%; + } -[dir="rtl"] .test4 { - object-position: 100% 100%; + + .test5 { + object-position: 0 100%; + } } /* inside a keyframe animation */ diff --git a/tests/__snapshots__/process-declaration-plugins/diff/flip.snapshot b/tests/__snapshots__/process-declaration-plugins/diff/flip.snapshot index 336cb7bb..b6be268d 100644 --- a/tests/__snapshots__/process-declaration-plugins/diff/flip.snapshot +++ b/tests/__snapshots__/process-declaration-plugins/diff/flip.snapshot @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`[[Mode: diff]] Combined Tests: flip background by default 1`] = ` +exports[`[[Mode: diff]] flip background by default 1`] = ` ".test1 { background: url("/icons/icon-left.png") 100% 100%; } @@ -17,6 +17,24 @@ exports[`[[Mode: diff]] Combined Tests: flip background by default 1`] = ` object-position: 100% 100%; } +.test1 { + &.test2 { + background: url("/icons/icon-left.png") 100% 100%; + } + + .test3 { + background-position: 100% 100%; + } + + > .test4 { + background-position-x: 100%; + } + + + .test5 { + object-position: 100% 100%; + } +} + @media screen and (max-width: 800px) { .test1 { background: url("/icons/icon-left.png") 100% 100%; diff --git a/tests/__snapshots__/process-declaration-plugins/diff/noflip.snapshot b/tests/__snapshots__/process-declaration-plugins/diff/noflip.snapshot index 42d8c597..955e5075 100644 --- a/tests/__snapshots__/process-declaration-plugins/diff/noflip.snapshot +++ b/tests/__snapshots__/process-declaration-plugins/diff/noflip.snapshot @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`[[Mode: diff]] Combined Tests: use {processDeclarationPlugins} to avoid flipping background 1`] = `""`; +exports[`[[Mode: diff]] use {processDeclarationPlugins} to avoid flipping background 1`] = `""`; diff --git a/tests/__snapshots__/process-declaration-plugins/override/flip.snapshot b/tests/__snapshots__/process-declaration-plugins/override/flip.snapshot index 874a7003..96b2d465 100644 --- a/tests/__snapshots__/process-declaration-plugins/override/flip.snapshot +++ b/tests/__snapshots__/process-declaration-plugins/override/flip.snapshot @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`[[Mode: override]] Combined Tests: flip background by default 1`] = ` +exports[`[[Mode: override]] flip background by default 1`] = ` ".test1 { background: url("/icons/icon-left.png") 0 100%; } @@ -37,42 +37,43 @@ exports[`[[Mode: override]] Combined Tests: flip background by default 1`] = ` } /* inside a nested rule */ -[dir="ltr"] .test1 { - background: url("/icons/icon-left.png") 0 100%; -} +.test1 { + &.test2 { + background: url("/icons/icon-left.png") 0 100%; + } -[dir="rtl"] .test1 { - background: url("/icons/icon-left.png") 100% 100%; -} + .test3 { + background-image: url("/icons/icon-left.png"); + background-position: 0 100%; + } -[dir="ltr"] .test2 { - background-image: url("/icons/icon-left.png"); - background-position: 0 100%; -} + > .test4 { + background-image: url("/icons/icon-left.png"); + background-position-x: 0; + background-position-y: 100%; + } -[dir="rtl"] .test2 { - background-image: url("/icons/icon-left.png"); - background-position: 100% 100%; + + .test5 { + object-position: 0 100%; + } } -[dir="ltr"] .test3 { - background-image: url("/icons/icon-left.png"); - background-position-x: 0; - background-position-y: 100%; -} +[dir="rtl"] .test1 { + &.test2 { + background: url("/icons/icon-left.png") 100% 100%; + } -[dir="rtl"] .test3 { - background-image: url("/icons/icon-left.png"); - background-position-x: 100%; - background-position-y: 100%; -} + .test3 { + background-position: 100% 100%; + } -[dir="ltr"] .test4 { - object-position: 0 100%; -} + > .test4 { + background-position-x: 100%; + } -[dir="rtl"] .test4 { - object-position: 100% 100%; + + .test5 { + object-position: 100% 100%; + } } /* inside a keyframe animation */ diff --git a/tests/__snapshots__/process-declaration-plugins/override/noflip.snapshot b/tests/__snapshots__/process-declaration-plugins/override/noflip.snapshot index c9c11c68..beaad981 100644 --- a/tests/__snapshots__/process-declaration-plugins/override/noflip.snapshot +++ b/tests/__snapshots__/process-declaration-plugins/override/noflip.snapshot @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`[[Mode: override]] Combined Tests: use {processDeclarationPlugins} to avoid flipping background 1`] = ` +exports[`[[Mode: override]] use {processDeclarationPlugins} to avoid flipping background 1`] = ` ".test1 { background: url("/icons/icon-left.png") 0 100%; } @@ -21,42 +21,25 @@ exports[`[[Mode: override]] Combined Tests: use {processDeclarationPlugins} to } /* inside a nested rule */ -[dir="ltr"] .test1 { - background: url("/icons/icon-left.png") 0 100%; -} - -[dir="rtl"] .test1 { - background: url("/icons/icon-left.png") 100% 100%; -} - -[dir="ltr"] .test2 { - background-image: url("/icons/icon-left.png"); - background-position: 0 100%; -} - -[dir="rtl"] .test2 { - background-image: url("/icons/icon-left.png"); - background-position: 100% 100%; -} - -[dir="ltr"] .test3 { - background-image: url("/icons/icon-left.png"); - background-position-x: 0; - background-position-y: 100%; -} +.test1 { + &.test2 { + background: url("/icons/icon-left.png") 0 100%; + } -[dir="rtl"] .test3 { - background-image: url("/icons/icon-left.png"); - background-position-x: 100%; - background-position-y: 100%; -} + .test3 { + background-image: url("/icons/icon-left.png"); + background-position: 0 100%; + } -[dir="ltr"] .test4 { - object-position: 0 100%; -} + > .test4 { + background-image: url("/icons/icon-left.png"); + background-position-x: 0; + background-position-y: 100%; + } -[dir="rtl"] .test4 { - object-position: 100% 100%; + + .test5 { + object-position: 0 100%; + } } /* inside a keyframe animation */ diff --git a/tests/css/input-process-declaration-plugins.css b/tests/css/input-process-declaration-plugins.scss similarity index 68% rename from tests/css/input-process-declaration-plugins.css rename to tests/css/input-process-declaration-plugins.scss index 7bf16b38..a58b4472 100644 --- a/tests/css/input-process-declaration-plugins.css +++ b/tests/css/input-process-declaration-plugins.scss @@ -18,42 +18,24 @@ } /* inside a nested rule */ -[dir="ltr"] .test1 { - background: url("/icons/icon-left.png") 0 100%; -} - -[dir="rtl"] .test1 { - background: url("/icons/icon-left.png") 100% 100%; -} - -[dir="ltr"] .test2 { - background-image: url("/icons/icon-left.png"); - background-position: 0 100%; -} - -[dir="rtl"] .test2 { - background-image: url("/icons/icon-left.png"); - background-position: 100% 100%; -} - -[dir="ltr"] .test3 { - background-image: url("/icons/icon-left.png"); - background-position-x: 0; - background-position-y: 100%; -} - -[dir="rtl"] .test3 { - background-image: url("/icons/icon-left.png"); - background-position-x: 100%; - background-position-y: 100%; -} - -[dir="ltr"] .test4 { - object-position: 0 100%; -} - -[dir="rtl"] .test4 { - object-position: 100% 100%; +.test1 { + &.test2 { + background: url("/icons/icon-left.png") 0 100%; + } + .test3 { + background-image: url("/icons/icon-left.png"); + background-position: 0 100%; + } + + > .test4 { + background-image: url("/icons/icon-left.png"); + background-position-x: 0; + background-position-y: 100%; + } + + + .test5 { + object-position: 0 100%; + } } /* inside a keyframe animation */ diff --git a/tests/process-declaration-plugins.test.ts b/tests/process-declaration-plugins.test.ts index 402a263c..a92c4892 100644 --- a/tests/process-declaration-plugins.test.ts +++ b/tests/process-declaration-plugins.test.ts @@ -12,12 +12,12 @@ const BASE_NAME = 'process-declaration-plugins'; runTests({}, (pluginOptions: PluginOptions): void => { - describe(`[[Mode: ${pluginOptions.mode}]] Combined Tests: `, (): void => { + describe(`[[Mode: ${pluginOptions.mode}]]`, (): void => { let input = ''; beforeEach(async (): Promise => { - input = input || await readCSSFile(`input-${BASE_NAME}.css`); + input = input || await readCSSFile(`input-${BASE_NAME}.scss`); }); it('flip background by default', (): void => {