Skip to content
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

Jump to bottom

Add plugin for extracting component CSS to a separate file #28

Closed
wants to merge 1 commit into from
Closed

Add plugin for extracting component CSS to a separate file #28

wants to merge 1 commit into from

Conversation

fallaciousreasoning
Copy link
Collaborator

@fallaciousreasoning fallaciousreasoning commented Sep 7, 2022 •
edited
Loading

As Leo can be used by many different consumers, it's important that it's as flexible as possible. In this PR, I've added a plugin to extract the CSS from a Svelte component, and dump it in a separate CSS file.

For example the following component at web-components/jays-cool-button.svelte:

<style lang="sass">
	.foo {
		background: red;
		&:hover {
			background: blue;
		}
	}
</style>
<button class="foo>Click Me</button>

Will generate build/web-components/jays-cool-button.css

.foo {
	background: red;
}
.foo:hover {
	background: blue;
}

The generated CSS can then be in plain HTML:

<head>
	<!-- Include Stylesheets for our CSS variables first -->
	<link rel="stylesheet" href="build/web-components/jays-cool-button.css">
</head>
<body>
	<button class="foo">Click Me</button> <!-- Looks the same as the Svelte Component! -->
</body>

This should be a starting point for #4

However, there are a few issues I think need to be resolved before we can land this:

  1. Svelte automatically adds a scope to it's styles. I think we should do something similar (maybe with the web-component tag name as the prefix?)
  2. I'm not sure how we're going to deal with the web-component/pure styles divide. Some selectors (i.e. :host, :host-context ect) will only work in one or the other, not both.

Suggested possible output:
Possibly, it should generate this instead:

.jays-cool-button .foo {
	background: red;
}

.jays-cool-button .foo:hover {
	background: blue;
}

@fallaciousreasoning fallaciousreasoning marked this pull request as draft September 7, 2022 05:12
@AlanBreck
Copy link
Collaborator

I know this is closed, but I think this is largely handled by #18.

That said, we could modify to output plain CSS files as well as JS.

@fallaciousreasoning
Copy link
Collaborator Author

Yeah, I closed this because I realised it wasn't adding anything 😆

@AlanBreck AlanBreck deleted the style-extract branch November 22, 2022 21:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@petemill petemill Awaiting requested review from petemill

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@fallaciousreasoning @AlanBreck