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.

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

fix(useStyleTag): allow multiline CSS #2476

Merged
merged 1 commit into from Nov 25, 2022

Conversation

jameswragg
Copy link
Contributor

Description

The current implementation of useStyleTag uses el.innerText to set the <style> elements content. As per the spec, this innerText method replaces line-breaks with <br> tags on set, which prevents useStyleTag from supporting multi-line CSS as the injected <br> will break the CSS parsing.

From the spec:

element.innerText [ = value ]
Returns the element's text content "as rendered".

Can be set, to replace the element's children with the given value, but with line breaks converted to br elements.

This PR replaces innerText with textContent which is text only & doesn't try to interpret the contents.

Additional context

I have updated the demo to show multi-line CSS is supported.


What is the purpose of this pull request?

  • Bug fix
  • New Feature
  • Documentation update
  • Other

Before submitting the PR, please make sure you do the following

  • Read the Contributing Guidelines.
  • Read the Pull Request Guidelines.
  • Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
  • Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
  • Ideally, include relevant tests that fail without this PR but pass with it.

@sibbng sibbng enabled auto-merge (squash) November 25, 2022 22:51
@sibbng sibbng merged commit cfcc295 into vueuse:main Nov 25, 2022
@jameswragg
Copy link
Contributor Author

Any chance of a new release including this PR @sibbng?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants