diff --git a/.changeset/sour-feet-carry.md b/.changeset/sour-feet-carry.md new file mode 100644 index 0000000000..d5569efd36 --- /dev/null +++ b/.changeset/sour-feet-carry.md @@ -0,0 +1,5 @@ +--- +'svelte': minor +--- + +feat: migrate css `:id`, `:where``:not` and `:has` diff --git a/packages/svelte/src/compiler/migrate/index.js b/packages/svelte/src/compiler/migrate/index.js index 057020d730..bb2ba1d5f7 100644 --- a/packages/svelte/src/compiler/migrate/index.js +++ b/packages/svelte/src/compiler/migrate/index.js @@ -317,7 +317,15 @@ export function migrate(source, { filename } = {}) { if (!parsed.instance && need_script) { str.appendRight(insertion_point, '\n\n\n'); } - return { code: str.toString() }; + return { + code: str + .toString() + // for some reason replacing the magic string doesn't work + .replaceAll( + /(?<=]*>[\s\S]*?:(?:is|not|where|has)\()([^)]+)(?=[\s\S]*?<\/style>)/gm, + ':global($1)' + ) + }; } catch (e) { if (!(e instanceof MigrationError)) { // eslint-disable-next-line no-console diff --git a/packages/svelte/tests/migrate/samples/is-not-where-has/input.svelte b/packages/svelte/tests/migrate/samples/is-not-where-has/input.svelte new file mode 100644 index 0000000000..d3ebf6bb7b --- /dev/null +++ b/packages/svelte/tests/migrate/samples/is-not-where-has/input.svelte @@ -0,0 +1,20 @@ + \ No newline at end of file diff --git a/packages/svelte/tests/migrate/samples/is-not-where-has/output.svelte b/packages/svelte/tests/migrate/samples/is-not-where-has/output.svelte new file mode 100644 index 0000000000..79f29c8fbd --- /dev/null +++ b/packages/svelte/tests/migrate/samples/is-not-where-has/output.svelte @@ -0,0 +1,20 @@ + \ No newline at end of file