@inradius/solid-wc-css-mixin 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +48 -0
- package/package.json +15 -2
package/README.md
ADDED
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
# @inradius/solid-wc-hass-mixin
|
|
2
|
+
 
|
|
3
|
+
|
|
4
|
+
A lightweight mixin for [component-register](https://www.npmjs.com/package/component-register) that allows you to inject computed or inlined CSS directly into a Web Component's **Shadow Root** using Constructable Stylesheets.
|
|
5
|
+
|
|
6
|
+
## Why use this?
|
|
7
|
+
When building Web Components with Solid.js (via solid-element), managing styles can be tricky. This mixin:
|
|
8
|
+
- **Encapsulates Styles:** Keeps your CSS scoped to the component's Shadow DOM.
|
|
9
|
+
- **Performance:** Uses `adoptedStyleSheets` to ensure styles are parsed once and shared efficiently.
|
|
10
|
+
- **DX-Friendly:** Works seamlessly with Vite’s `?inline` imports or raw CSS strings.
|
|
11
|
+
|
|
12
|
+
## Installation
|
|
13
|
+
```bash
|
|
14
|
+
npm install @inradius/solid-wc-css-mixin component-register
|
|
15
|
+
# or
|
|
16
|
+
pnpm add @inradius/solid-wc-css-mixin component-register
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Usage
|
|
20
|
+
In your main entry point where you register your component, import your CSS as a string and pass it to the mixin.
|
|
21
|
+
|
|
22
|
+
```typescript
|
|
23
|
+
import { compose, register } from 'component-register';
|
|
24
|
+
import { withSolid } from 'solid-element';
|
|
25
|
+
import withCSS from '@inradius/solid-wc-css-mixin';
|
|
26
|
+
|
|
27
|
+
// Import your styles (works great with Vite/Webpack inlining)
|
|
28
|
+
import css from './styles.css?inline';
|
|
29
|
+
|
|
30
|
+
// Your Solid component
|
|
31
|
+
import App from './App';
|
|
32
|
+
|
|
33
|
+
compose(
|
|
34
|
+
register('my-custom-element'),
|
|
35
|
+
withCSS(css), // Injects the stylesheet
|
|
36
|
+
withSolid
|
|
37
|
+
)(App);
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
## How it works
|
|
41
|
+
The mixin creates a new `CSSStyleSheet` object and pushes it into the element's `adoptedStyleSheets` array. This ensures that your styles do not "leak" out into the global scope, and global styles (unless using CSS variables) do not leak in.
|
|
42
|
+
|
|
43
|
+
## Requirements
|
|
44
|
+
- **Browser Support:** Requires a browser that supports [Constructable Stylesheets](https://caniuse.com/mdn-api_cssstylesheet_cssstylesheet).
|
|
45
|
+
- **Peer Dependencies:** This package is designed to be used with `component-register`.
|
|
46
|
+
|
|
47
|
+
## License
|
|
48
|
+
MIT © Travis
|
package/package.json
CHANGED
|
@@ -1,8 +1,19 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@inradius/solid-wc-css-mixin",
|
|
3
|
+
"version": "1.0.1",
|
|
4
|
+
"license": "MIT",
|
|
3
5
|
"author": "Travis Stroud <travis.unfasten577@travisstroud.me>",
|
|
4
|
-
"version": "1.0.0",
|
|
5
6
|
"description": "A Solid.js CSS web component mixin.",
|
|
7
|
+
"keywords": [
|
|
8
|
+
"component-register",
|
|
9
|
+
"css",
|
|
10
|
+
"custom-elements",
|
|
11
|
+
"mixin",
|
|
12
|
+
"shadow-dom",
|
|
13
|
+
"solid",
|
|
14
|
+
"solidjs",
|
|
15
|
+
"web-components"
|
|
16
|
+
],
|
|
6
17
|
"repository": {
|
|
7
18
|
"type": "git",
|
|
8
19
|
"url": "git+https://github.com/inradius/solid-wc-utils-monorepo.git",
|
|
@@ -36,7 +47,9 @@
|
|
|
36
47
|
"peerDependencies": {
|
|
37
48
|
"component-register": "^0.8.8"
|
|
38
49
|
},
|
|
39
|
-
"
|
|
50
|
+
"publishConfig": {
|
|
51
|
+
"access": "public"
|
|
52
|
+
},
|
|
40
53
|
"scripts": {
|
|
41
54
|
"build": "vite build",
|
|
42
55
|
"dev": "vite build --watch",
|