@typestyles/props 0.4.29 → 0.4.32
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 +10 -8
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -8,13 +8,13 @@ Full guide: [Atomic CSS utilities](https://typestyles.dev/docs/atomic-css)
|
|
|
8
8
|
|
|
9
9
|
## Why this exists
|
|
10
10
|
|
|
11
|
-
| Approach | Tradeoff
|
|
12
|
-
| ----------------------- |
|
|
13
|
-
| Tailwind | Fast authoring, no type safety, config-driven strings
|
|
14
|
-
| Panda CSS | Build-time codegen, separate pipeline
|
|
15
|
-
| **`@typestyles/props`** | Typed props API, runs with typestyles runtime or extraction, composes with `
|
|
11
|
+
| Approach | Tradeoff |
|
|
12
|
+
| ----------------------- | ----------------------------------------------------------------------------------- |
|
|
13
|
+
| Tailwind | Fast authoring, no type safety, config-driven strings |
|
|
14
|
+
| Panda CSS | Build-time codegen, separate pipeline |
|
|
15
|
+
| **`@typestyles/props`** | Typed props API, runs with typestyles runtime or extraction, composes with `recipe` |
|
|
16
16
|
|
|
17
|
-
Utility class naming is separate from `
|
|
17
|
+
Utility class naming is separate from `recipe` / `style` — see [Class naming](https://typestyles.dev/docs/class-naming).
|
|
18
18
|
|
|
19
19
|
## Installation
|
|
20
20
|
|
|
@@ -113,9 +113,11 @@ props({ padding: { mobile: 2, default: 4 } });
|
|
|
113
113
|
Utilities and components work together via `cx`:
|
|
114
114
|
|
|
115
115
|
```tsx
|
|
116
|
-
import {
|
|
116
|
+
import { createTypeStyles, cx } from 'typestyles';
|
|
117
117
|
import { createProps, defineProperties } from '@typestyles/props';
|
|
118
118
|
|
|
119
|
+
const { recipe } = createTypeStyles({ scopeId: 'app' });
|
|
120
|
+
|
|
119
121
|
const atoms = createProps(
|
|
120
122
|
'atom',
|
|
121
123
|
defineProperties({
|
|
@@ -123,7 +125,7 @@ const atoms = createProps(
|
|
|
123
125
|
}),
|
|
124
126
|
);
|
|
125
127
|
|
|
126
|
-
const card =
|
|
128
|
+
const card = recipe('card', {
|
|
127
129
|
base: { borderRadius: '8px', backgroundColor: 'white' },
|
|
128
130
|
});
|
|
129
131
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@typestyles/props",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.32",
|
|
4
4
|
"description": "Type-safe atomic CSS utility generator for typestyles",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"dist"
|
|
23
23
|
],
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"typestyles": "0.
|
|
25
|
+
"typestyles": "0.29.0"
|
|
26
26
|
},
|
|
27
27
|
"devDependencies": {
|
|
28
28
|
"eslint": "^9.39.2",
|