Skip to content

Custom style tag #5639

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 39 commits into from
Closed

Custom style tag #5639

Show file tree
Hide file tree
Changes from 25 commits
Commits
Show all changes
39 commits
Select commit Hold shift + click to select a range
ba5ee7a
#3940 add option to append styles on an element other than document.head
ivanhofer Nov 3, 2020
28a29bb
#3940 append styles on an element other than document.head
ivanhofer Nov 3, 2020
8718229
Merge remote-tracking branch 'origin/master' into customStyleTag
ivanhofer Nov 3, 2020
4026fb0
Merge remote-tracking branch 'upstream/master' into customStyleTag
ivanhofer Nov 3, 2020
f2221fc
#3940 use @noop instead of null
ivanhofer Nov 4, 2020
9ad664e
#3940 refactor check if style is already present
ivanhofer Nov 4, 2020
0968e55
#3940 revert auto-formatting changes
ivanhofer Nov 6, 2020
a664d7d
Merge remote-tracking branch 'upstream/master' into customStyleTag
ivanhofer Nov 10, 2020
c0ac80f
add 'noop' param to all tests
ivanhofer Nov 10, 2020
7bd2ed6
add 'noop' param to some more tests
ivanhofer Nov 10, 2020
bf528d1
add missing css to customElement constructor
ivanhofer Nov 10, 2020
5ad396b
refactor add styles method call to reduce generated output
ivanhofer Nov 11, 2020
c154895
init $$ in component with empty object value
ivanhofer Nov 12, 2020
675d6dd
Revert "add 'noop' param to some more tests"
ivanhofer Nov 12, 2020
ae47317
Revert "add 'noop' param to all tests"
ivanhofer Nov 12, 2020
f5f56ce
pass correct add_css method
ivanhofer Nov 12, 2020
9a4cf3c
remove noop from from customElement init
ivanhofer Nov 12, 2020
83d5fe8
fix tests using new add_css methods
ivanhofer Nov 12, 2020
bf87612
Revert "init $$ in component with empty object value"
ivanhofer Nov 12, 2020
b80990d
rename 'that' to 'component'
ivanhofer Nov 14, 2020
4f9a15e
slightly improve output size by refactoring add_css method
ivanhofer Nov 14, 2020
b0cacd7
slightly improve output size by refactoring add_css method
ivanhofer Nov 14, 2020
5c3038c
fix tests
ivanhofer Nov 14, 2020
6d85265
move document.head to addCssToComponent method
ivanhofer Nov 14, 2020
b6e9574
use snake_case for method names
ivanhofer Nov 14, 2020
e8065eb
don't save customStyleTag in component.$$
ivanhofer Nov 20, 2020
b38e2b7
refactor add_css_to_component to not save customStyleTag in component.$$
ivanhofer Nov 20, 2020
f611abc
fix failing tests
ivanhofer Nov 20, 2020
7b56dba
Merge branch 'master' into customStyleTag
ivanhofer Nov 20, 2020
d54ab8c
move append_styles function to dom.ts
ivanhofer Nov 20, 2020
ada8969
fix failing tests
ivanhofer Nov 20, 2020
801001d
add docs for customStyleTag
ivanhofer Nov 25, 2020
a474470
Merge branch 'master' into customStyleTag
ivanhofer Nov 25, 2020
9c82611
Merge branch 'master' into customStyleTag
ivanhofer Nov 29, 2020
54d3e91
add customStyleTag to component constructor options
ivanhofer Nov 29, 2020
ee78985
update style_manager to use customStyleTag
ivanhofer Nov 29, 2020
903e410
Merge branch 'master' into customStyleTag
ivanhofer Dec 2, 2020
7a79cfc
Merge branch 'master' into customStyleTag
ivanhofer Dec 3, 2020
901204e
add customStyleTag to component constructor options
ivanhofer Dec 3, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 6 additions & 7 deletions src/compiler/compile/render_dom/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,11 +44,8 @@ export default function dom(

if (should_add_css) {
body.push(b`
function ${add_css}() {
var style = @element("style");
style.id = "${component.stylesheet.id}-style";
style.textContent = "${styles}";
@append(@_document.head, style);
function ${add_css}(target) {
@append_style_if_not_present(target, "${component.stylesheet.id.replace('svelte-', '')}", "${styles}");
}
`);
}
Expand Down Expand Up @@ -531,8 +528,10 @@ export default function dom(
class ${name} extends ${superclass} {
constructor(options) {
super(${options.dev && 'options'});
${should_add_css && b`if (!@_document.getElementById("${component.stylesheet.id}-style")) ${add_css}();`}
@init(this, options, ${definition}, ${has_create_fragment ? 'create_fragment': 'null'}, ${not_equal}, ${prop_indexes}, ${dirty});

${should_add_css && b`@add_css_to_component(this, ${add_css}, options);`}

@init(this, options, ${definition}, ${has_create_fragment ? 'create_fragment' : 'null'}, ${not_equal}, ${prop_indexes}, ${dirty});
${options.dev && b`@dispatch_dev("SvelteRegisterComponent", { component: this, tagName: "${name.name}", options, id: create_fragment.name });`}

${dev_props_check}
Expand Down
11 changes: 11 additions & 0 deletions src/runtime/internal/Component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ interface T$$ {
on_mount: any[];
on_destroy: any[];
skip_bound: boolean;
customStyleTag?: HTMLElement;
}

export function bind(component, name, callback) {
Expand Down Expand Up @@ -96,13 +97,23 @@ function make_dirty(component, i) {
component.$$.dirty[(i / 31) | 0] |= (1 << (i % 31));
}


export function add_css_to_component(component, add_css, options) {
component.$$ = {
customStyleTag: options.customStyleTag || current_component && current_component.$$.customStyleTag
};
add_css(component.$$.customStyleTag || document.head);
}

export function init(component, options, instance, create_fragment, not_equal, props, dirty = [-1]) {
const parent_component = current_component;
set_current_component(component);

const prop_values = options.props || {};

const $$: T$$ = component.$$ = {
...component.$$,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i understand that doing this was to make the code size for the base case unchanged.
but i'm ambivalent of doing this.

what do you think @Conduitry

Copy link
Contributor Author

@ivanhofer ivanhofer Nov 18, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the only option without additional code for the base output is to rewrite the function add_css_to_component to this:

export function add_css_to_component(component, add_css, options) {
	component.customStyleTag = options.customStyleTag || current_component && current_component.customStyleTag;
	add_css(component.customStyleTag || document.head);
}

But then it is a "hidden" property on the class itself.
I chose the option to include it in the $$ context object because that's why the context object exists.

Copy link
Contributor Author

@ivanhofer ivanhofer Nov 19, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

another solition could be to save the information in a variable like the current_component:

let appendStylesTo = document.head

export function add_css_to_component(add_css, options) {
   if (options.customStyleTag) appendStylesTo = options.customStyleTag
   add_css(appendStylesTo);
}


fragment: null,
ctx: null,

Expand Down
13 changes: 13 additions & 0 deletions src/runtime/internal/dom.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,18 @@
import { has_prop } from './utils';

export function append_style_if_not_present(
target: Element,
styleSheetId: string,
styles: string,
styleId:string = `svelte-${styleSheetId}-style`) {
if (!target.querySelector('#' + styleId)) {
const style = element('style');
style.id = styleId;
style.textContent = styles;
append(target, style);
}
}

export function append(target: Node, node: Node) {
target.appendChild(node);
}
Expand Down
11 changes: 5 additions & 6 deletions test/js/samples/collapses-text-around-comments/expected.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
/* generated by Svelte vX.Y.Z */
import {
SvelteComponent,
add_css_to_component,
append,
append_style_if_not_present,
attr,
detach,
element,
Expand All @@ -13,11 +15,8 @@ import {
text
} from "svelte/internal";

function add_css() {
var style = element("style");
style.id = "svelte-1a7i8ec-style";
style.textContent = "p.svelte-1a7i8ec{color:red}";
append(document.head, style);
function add_css(target) {
append_style_if_not_present(target, "1a7i8ec", "p.svelte-1a7i8ec{color:red}");
}

function create_fragment(ctx) {
Expand Down Expand Up @@ -58,7 +57,7 @@ function instance($$self, $$props, $$invalidate) {
class Component extends SvelteComponent {
constructor(options) {
super();
if (!document.getElementById("svelte-1a7i8ec-style")) add_css();
add_css_to_component(this, add_css, options);
init(this, options, instance, create_fragment, safe_not_equal, { foo: 0 });
}
}
Expand Down
12 changes: 5 additions & 7 deletions test/js/samples/css-media-query/expected.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
/* generated by Svelte vX.Y.Z */
import {
SvelteComponent,
append,
add_css_to_component,
append_style_if_not_present,
attr,
detach,
element,
Expand All @@ -11,11 +12,8 @@ import {
safe_not_equal
} from "svelte/internal";

function add_css() {
var style = element("style");
style.id = "svelte-1slhpfn-style";
style.textContent = "@media(min-width: 1px){div.svelte-1slhpfn{color:red}}";
append(document.head, style);
function add_css(target) {
append_style_if_not_present(target, "1slhpfn", "@media(min-width: 1px){div.svelte-1slhpfn{color:red}}");
}

function create_fragment(ctx) {
Expand All @@ -41,7 +39,7 @@ function create_fragment(ctx) {
class Component extends SvelteComponent {
constructor(options) {
super();
if (!document.getElementById("svelte-1slhpfn-style")) add_css();
add_css_to_component(this, add_css, options);
init(this, options, null, create_fragment, safe_not_equal, {});
}
}
Expand Down