feat: allow for `svelte:options` css injected (#12660)

* feat: allow for `svelte:options` css injected

* chore: update test with different class

* fix: regenerate types

* remove external option

* regenerate

* Update .changeset/eight-comics-tell.md

* fix

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
Co-authored-by: Rich Harris <hello@rich-harris.dev>
pull/12707/head
Paolo Ricciuti 1 year ago committed by GitHub
parent be28f8256b
commit e4e66e237f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -0,0 +1,5 @@
---
'svelte': patch
---
feat: add support for `<svelte:options css="injected" />`

@ -324,7 +324,7 @@ HTML restricts where certain elements can appear. In case of a violation the bro
## svelte_options_invalid_attribute_value
> Valid values are %list%
> Value must be %list%, if specified
## svelte_options_invalid_customelement

@ -1275,13 +1275,13 @@ export function svelte_options_invalid_attribute(node) {
}
/**
* Valid values are %list%
* Value must be %list%, if specified
* @param {null | number | NodeLike} node
* @param {string} list
* @returns {never}
*/
export function svelte_options_invalid_attribute_value(node, list) {
e(node, "svelte_options_invalid_attribute_value", `Valid values are ${list}`);
e(node, "svelte_options_invalid_attribute_value", `Value must be ${list}, if specified`);
}
/**

@ -175,6 +175,17 @@ export default function read_options(node) {
break;
}
case 'css': {
const value = get_static_value(attribute);
if (value === 'injected') {
component_options.css = value;
} else {
e.svelte_options_invalid_attribute_value(attribute, `"injected"`);
}
break;
}
case 'immutable': {
component_options.immutable = get_boolean_value(attribute);
break;

@ -75,6 +75,7 @@ export interface SvelteOptions {
accessors?: boolean;
preserveWhitespace?: boolean;
namespace?: Namespace;
css?: 'injected';
customElement?: {
tag: string;
shadow?: 'open' | 'none';

@ -0,0 +1,9 @@
<svelte:options css="injected" />
<div class="bar">bar</div>
<style>
.bar {
color: red;
}
</style>

@ -0,0 +1,7 @@
import { test } from '../../test';
export default test({
compileOptions: {
css: 'external'
}
});

@ -0,0 +1 @@
<!--[--><div class="bar svelte-ievf05">bar</div><!----> <div class="foo svelte-sg04hs">foo</div><!--]-->

@ -0,0 +1,5 @@
<style id="svelte-ievf05">
.bar.svelte-ievf05 {
color: red;
}
</style>

@ -0,0 +1,13 @@
<script lang="ts">
import Nested from './Nested.svelte';
</script>
<Nested />
<div class="foo">foo</div>
<style>
.foo {
color: red;
}
</style>

@ -0,0 +1,7 @@
import { test } from '../../test';
export default test({
compileOptions: {
css: 'external'
}
});

@ -0,0 +1,5 @@
<style id="svelte-sg04hs">
.foo.svelte-sg04hs {
color: red;
}
</style>

@ -0,0 +1,9 @@
<svelte:options css="injected" />
<div class="foo">foo</div>
<style>
.foo {
color: red;
}
</style>

@ -1,7 +1,7 @@
[
{
"code": "svelte_options_invalid_attribute_value",
"message": "Valid values are \"html\", \"mathml\", \"svg\" or \"foreign\"",
"message": "Value must be \"html\", \"mathml\", \"svg\" or \"foreign\", if specified",
"start": {
"line": 1,
"column": 16

@ -1,7 +1,7 @@
[
{
"code": "svelte_options_invalid_attribute_value",
"message": "Valid values are \"html\", \"mathml\", \"svg\" or \"foreign\"",
"message": "Value must be \"html\", \"mathml\", \"svg\" or \"foreign\", if specified",
"start": {
"line": 1,
"column": 16

@ -1533,6 +1533,7 @@ declare module 'svelte/compiler' {
accessors?: boolean;
preserveWhitespace?: boolean;
namespace?: Namespace;
css?: 'injected';
customElement?: {
tag: string;
shadow?: 'open' | 'none';

Loading…
Cancel
Save