cssier 0.2.0 → 0.2.2

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.
Files changed (3) hide show
  1. package/LICENSE +12 -18
  2. package/README.md +10 -9
  3. package/package.json +2 -1
package/LICENSE CHANGED
@@ -1,21 +1,15 @@
1
- MIT License
1
+ ISC License
2
2
 
3
- Copyright (c) [2023] [Ignacio Andrés Miranda Figueroa]
3
+ Copyright (c) [2024] [Dan Berman]
4
4
 
5
- Permission is hereby granted, free of charge, to any person obtaining a copy
6
- of this software and associated documentation files (the "Software"), to deal
7
- in the Software without restriction, including without limitation the rights
8
- to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
- copies of the Software, and to permit persons to whom the Software is
10
- furnished to do so, subject to the following conditions:
5
+ Permission to use, copy, modify, and/or distribute this software for any
6
+ purpose with or without fee is hereby granted, provided that the above
7
+ copyright notice and this permission notice appear in all copies.
11
8
 
12
- The above copyright notice and this permission notice shall be included in all
13
- copies or substantial portions of the Software.
14
-
15
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
- FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
- AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
- SOFTWARE.
9
+ THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
10
+ REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
11
+ AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
12
+ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
13
+ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
14
+ OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
15
+ PERFORMANCE OF THIS SOFTWARE.
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
- # 🪅cssier
1
+ # 🎇cssier
2
2
 
3
- `cssier` is a React component library designed to simplify inline styling for pseudo-classes and pseudo-elements. With `cssier`, you can easily manage and apply custom styles for standard HTML and SVG elements, making your styling both dynamic and maintainable.
3
+ cssier allows you to use inline styling for pseudo-classes and pseudo-elements on React components. With `cssier`, you can easily manage and apply custom styles for standard HTML and SVG elements, making your styling both dynamic and maintainable.
4
4
 
5
5
  ## Features
6
6
 
@@ -36,6 +36,8 @@ pnpm add cssier
36
36
 
37
37
  You can import pre-built React components for HTML and SVG tags from `cssier/components`:
38
38
 
39
+ #### Example
40
+
39
41
  ```jsx
40
42
  import { Button, Svg } from 'cssier/components'
41
43
 
@@ -60,20 +62,19 @@ The `useStylesheet` hook returns an array where:
60
62
  - The first element is a unique CSS class ID that can be applied to the component.
61
63
  - The second element is a string of CSS styles that were injected into the document. This is useful for debugging, though you typically won't need to use it in production.
62
64
 
65
+ #### Example
66
+
63
67
  ```jsx
64
68
  import { useStylesheet } from 'cssier/hooks'
65
69
 
66
70
  const CustomComponent = (props) => {
67
- const { pseudo, pseudoId: id, ...rest } = props
71
+ const { className, pseudo, pseudoId: id, ...rest } = props
68
72
  const [pseudoId, css] = useStylesheet(pseudo, id)
69
73
 
70
74
  return (
71
- <>
72
- <style>{css}</style>
73
- <div {...rest} className={`${rest.className ?? ''}pseudoId`}>
74
- Styled with pseudo-classes and pseudo-elements!
75
- </div>
76
- </>
75
+ <div {...rest} className={`${className ?? ''} pseudoId`}>
76
+ Styled with pseudo-classes and pseudo-elements!
77
+ </div>
77
78
  )
78
79
  }
79
80
  ```
package/package.json CHANGED
@@ -1,12 +1,13 @@
1
1
  {
2
2
  "name": "cssier",
3
3
  "private": false,
4
- "version": "0.2.0",
4
+ "version": "0.2.2",
5
5
  "packageManager": "pnpm@8.4.0",
6
6
  "repository": {
7
7
  "type": "git",
8
8
  "url": "https://github.com/DanBermanTech/cssier"
9
9
  },
10
+ "license": "ISC",
10
11
  "main": "./dist/cssier.js",
11
12
  "module": "./dist/cssier.js",
12
13
  "types": "./dist/index.d.ts",