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

inject stylesheets automatically in the JS #137

Merged
merged 5 commits into from
Oct 19, 2023
Merged

inject stylesheets automatically in the JS #137

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e5d5abb
inject stylesheets automatically in the JS
keithamus Oct 17, 2023
7d2cd0d
Merge branch 'main' into inject-stylesheets-automatically-in-the-js
jgerigmeyer Oct 18, 2023
c418009
Merge branch 'main' into inject-stylesheets-automatically-in-the-js
jgerigmeyer Oct 18, 2023
3064edf
Remove unused CSS
jgerigmeyer Oct 18, 2023
b861954
Update changelog
jgerigmeyer Oct 18, 2023
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
8 changes: 0 additions & 8 deletions .stylelintignore
View file
Open in desktop

This file was deleted.

10 changes: 0 additions & 10 deletions .stylelintrc.json
View file
Open in desktop

This file was deleted.

2 changes: 2 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@

## Unreleased

- 💥 BREAKING: Automatically inject styles from JS --
[#137](https://github.com/oddbird/popover-polyfill/pull/137)
- 🏠 INTERNAL: Upgrade dependencies

## 0.2.3: 2023-09-18
Expand Down
6 changes: 3 additions & 3 deletions CONTRIBUTING.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,9 @@ Please follow the [OddBird Code of Conduct](https://www.oddbird.net/conduct/).

## Code style

JS code is formatted with prettier, and CSS is formatted with stylelint. You can
lint the code by running `npm run lint` and format it with `npm run format`. We
recommend setting up your IDE to automatically format code for you.
JS code is formatted with prettier. You can lint the code by running `npm run
lint` and format it with `npm run format`. We recommend setting up your IDE to
automatically format code for you.

## Testing

Expand Down
37 changes: 17 additions & 20 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,18 +31,7 @@ Or without [JavaScript modules](https://developer.mozilla.org/en-US/docs/Web/Jav
<script src="/path/to/popover.iife.min.js"></script>
```

You will also likely need the CSS file, which supplies some default styles.
Download `popover.css` [from
unpkg.com](https://unpkg.com/browse/@oddbird/popover-polyfill/dist/) and add it
to the appropriate directory in your project. Then, include it where necessary
with a `<link rel=stylesheet>` tag:

```html
<link rel="stylesheet" href="/path/to/popover.css" />
```

Note that default styles will not be applied to shadow roots.
Each root node will need to include the styles separately.
Note that the JS will inject CSS styles into your document (or ShadowRoot).

### With npm

Expand All @@ -56,9 +45,6 @@ npm install @oddbird/popover-polyfill
After installing, you’ll need to use appropriate tooling to use
`node_modules/@oddbird/popover-polyfill/dist/popover.js`.

You will also likely need to include the CSS stylesheet which is found in
`node_modules/@oddbird/popover-polyfill/dist/popover.css`.

If you want to manually apply the polyfill, you can instead import the
`isSupported` and `apply` functions directly from
`node_modules/@oddbird/popover-polyfill/dist/popover-fn.js` file.
Expand All @@ -71,11 +57,6 @@ reasons](https://blog.wesleyac.com/posts/why-not-javascript-cdn) such as
performance and robustness.

```html
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@oddbird/popover-polyfill@latest/dist/popover.css"
crossorigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/@oddbird/popover-polyfill@latest"
crossorigin="anonymous"
Expand Down Expand Up @@ -126,6 +107,22 @@ some caveats which will need accommodations:
observers or frameworks which do DOM diffing, or it may interfere with other
code which sets `aria-expanded` on elements.

- The polyfill uses `adoptedStyleSheets` to inject CSS onto the page (and each
Shadow DOM). If it can't use that it'll generate a `<style>` tag instead. This
means you may see a `<style>` tag you didn't put there, and this _may_ impact
mutation observers or frameworks.

- For browsers which don't support `adoptedStyleSheets` on Shadow Roots, if
you are building a ShadowRoot by setting `.innerHTML`, you'll remove the
StyleSheet. Either polyfill `adoptedStyleSheets` or call
`injectStyles(myShadow)` to add the styles back in.

- Similarly, if you're using Declarative ShadowDOM or otherwise creating a
shadow root without calling `attachShadow`/`attachInternals`, then the
polyfill won't inject the styles (because it can't reference the
`shadowRoot`). You'll need to manually inject the styles yourself with
`injectStyles(myShadow)`.

## Contributing

Visit our [contribution guidelines](https://github.com/oddbird/popover-polyfill/blob/main/CONTRIBUTING.md).
5 changes: 0 additions & 5 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Popover Attribute Polyfill</title>
<script src="./dist/popover.js"></script>
<link rel="stylesheet" href="./dist/popover.css" />
</head>

<body>
Expand Down Expand Up @@ -63,10 +62,6 @@ <h1>Popover Attribute Polyfill</h1>
<div>
<div id="shadowedNestedPopover" popover="auto">Shadowed Nested Popover (auto)</div>
</div>`;
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = './dist/popover.css';
shadowRoot.prepend(link);
document.getElementById('crossTreeToggle').popoverTargetElement =
shadowRoot.getElementById('shadowedPopover');
</script>
Expand Down
Loading
Loading