purse-styles 0.0.1 → 0.0.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.
- package/README.md +28 -26
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -4,23 +4,18 @@ A basic styling solution for web apps with an emphasis on simplicity and purity.
|
|
|
4
4
|
|
|
5
5
|
```tsx
|
|
6
6
|
// Define styles outside your components
|
|
7
|
-
|
|
7
|
+
const truncate = style({
|
|
8
8
|
overflow: "hidden",
|
|
9
9
|
lineClamp: 1,
|
|
10
10
|
textOverflow: "ellipsis",
|
|
11
11
|
})
|
|
12
12
|
|
|
13
13
|
// Compose styles together
|
|
14
|
-
const actionButton = style(
|
|
15
|
-
truncate,
|
|
16
|
-
text[14],
|
|
17
|
-
fonts.interface,
|
|
18
|
-
border[1]
|
|
19
|
-
)
|
|
14
|
+
const actionButton = style(truncate, text[14], fonts.interface, border[1])
|
|
20
15
|
|
|
21
16
|
// Use pseudo or other complex selectors
|
|
22
17
|
const button = style({
|
|
23
|
-
|
|
18
|
+
"&:disabled": {
|
|
24
19
|
backgroundColor: indigo.indigo8,
|
|
25
20
|
},
|
|
26
21
|
"&:hover[disabled=false]": {
|
|
@@ -29,11 +24,13 @@ const button = style({
|
|
|
29
24
|
})
|
|
30
25
|
|
|
31
26
|
// Use styles in your components dynamically
|
|
32
|
-
const buttonClassName = useStyles(
|
|
27
|
+
const buttonClassName = useStyles(
|
|
28
|
+
props.quiet ? quietButtonStyles : buttonStyles,
|
|
29
|
+
)
|
|
33
30
|
|
|
34
31
|
// Can also use CSS properties directly
|
|
35
32
|
const blueTextClassName = useStyles({
|
|
36
|
-
|
|
33
|
+
backgroundColor: "blue",
|
|
37
34
|
})
|
|
38
35
|
```
|
|
39
36
|
|
|
@@ -47,7 +44,7 @@ Wrap your app in `PurseProvider`:
|
|
|
47
44
|
|
|
48
45
|
```tsx
|
|
49
46
|
<PurseProvider>
|
|
50
|
-
|
|
47
|
+
<App />
|
|
51
48
|
</PurseProvider>
|
|
52
49
|
```
|
|
53
50
|
|
|
@@ -57,34 +54,39 @@ That's all! No build step.
|
|
|
57
54
|
|
|
58
55
|
```ts
|
|
59
56
|
// Declare styles outside React component
|
|
60
|
-
export declare function style(
|
|
57
|
+
export declare function style(
|
|
58
|
+
...styleElementsOrCSS: (CSSProperties | StyleElement)[]
|
|
59
|
+
): StyleElement
|
|
61
60
|
|
|
62
61
|
// Use declared styles or ad-hoc styles inside react component and get back a classname
|
|
63
|
-
export declare function useStyles(
|
|
62
|
+
export declare function useStyles(
|
|
63
|
+
...styleElementsOrCSS: (CSSProperties | StyleElement)[]
|
|
64
|
+
): string
|
|
64
65
|
|
|
65
66
|
// Inject global styles into the app, you may want to do this as an escape hatch
|
|
66
67
|
export declare function useInjectGlobalStyles(
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
): void
|
|
68
|
+
selector: string,
|
|
69
|
+
cssProperties: BaseCSSProperties & CSSVarDeclarations,
|
|
70
|
+
deps: DependencyList,
|
|
71
|
+
): void
|
|
71
72
|
|
|
72
73
|
// Wrap your app in this so Purse can inject styles into the app
|
|
73
74
|
export declare function PurseProvider(props: {
|
|
74
|
-
|
|
75
|
-
}): React.JSX.Element
|
|
75
|
+
children?: React.ReactNode
|
|
76
|
+
}): React.JSX.Element
|
|
76
77
|
|
|
77
78
|
// An in-memory style API for testing
|
|
78
79
|
export type InMemoryStyleApi = {
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
}
|
|
85
|
-
export declare function createInMemoryStyleApi(): InMemoryStyleApi
|
|
80
|
+
styleRulesRef: {
|
|
81
|
+
current: string[]
|
|
82
|
+
}
|
|
83
|
+
addStyleElement: StyleApi["addStyleElement"]
|
|
84
|
+
addGlobalStyle: StyleApi["addGlobalStyle"]
|
|
85
|
+
}
|
|
86
|
+
export declare function createInMemoryStyleApi(): InMemoryStyleApi
|
|
86
87
|
```
|
|
87
88
|
|
|
88
89
|
## TODO
|
|
90
|
+
|
|
89
91
|
- [ ] E2E tests with Playwright
|
|
90
92
|
- [ ] Consider exporting a simple `styled` alternative
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "purse-styles",
|
|
3
3
|
"type": "module",
|
|
4
4
|
"main": "./dist/index.js",
|
|
5
|
-
"version": "0.0.
|
|
5
|
+
"version": "0.0.2",
|
|
6
6
|
"author": "Tanishq Kancharla <tanishqkancharla3@gmail.com>",
|
|
7
7
|
"description": "A basic styling solution for web apps with an emphasis on simplicity and purity.",
|
|
8
8
|
"keywords": [],
|