@salty-css/vite 0.0.1-alpha.0
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 +107 -0
- package/package.json +30 -0
package/README.md
ADDED
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
# Salty Css
|
|
2
|
+
|
|
3
|
+
## Basic usage example with Button
|
|
4
|
+
|
|
5
|
+
### Initial requirements
|
|
6
|
+
|
|
7
|
+
1. Add `saltyPlugin` to vite or webpack config from `@salty-css/vite` or `@salty-css/webpack`
|
|
8
|
+
2. Create `salty-config.ts` to the root of your project
|
|
9
|
+
3. Import global styles to any regular .css file from `saltygen/index.css` (does not exist during first run, cli command coming later)
|
|
10
|
+
4. Create salty components with styled only inside files that end with `.css.ts`, `.salty.ts` `.styled.ts` or `.styles.ts`
|
|
11
|
+
|
|
12
|
+
### Code examples
|
|
13
|
+
|
|
14
|
+
**Salty config**
|
|
15
|
+
|
|
16
|
+
```tsx
|
|
17
|
+
import { defineConfig } from '@salty-css/core/config';
|
|
18
|
+
|
|
19
|
+
export const config = defineConfig({
|
|
20
|
+
variables: {
|
|
21
|
+
colors: {
|
|
22
|
+
brand: '#111',
|
|
23
|
+
highlight: 'yellow',
|
|
24
|
+
},
|
|
25
|
+
},
|
|
26
|
+
global: {
|
|
27
|
+
html: {
|
|
28
|
+
backgroundColor: '#f8f8f8',
|
|
29
|
+
},
|
|
30
|
+
},
|
|
31
|
+
});
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
**Your React component file**
|
|
35
|
+
|
|
36
|
+
```tsx
|
|
37
|
+
import { Wrapper } from '../components/wrapper/wrapper.css';
|
|
38
|
+
import { Button } from '../components/button/button.css';
|
|
39
|
+
|
|
40
|
+
export const IndexPage = () => {
|
|
41
|
+
return (
|
|
42
|
+
<Wrapper>
|
|
43
|
+
<Button variant="solid" onClick={() => alert('It is a button.')}>
|
|
44
|
+
Outlined
|
|
45
|
+
</Button>
|
|
46
|
+
</Wrapper>
|
|
47
|
+
);
|
|
48
|
+
};
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
**Wrapper** (`components/wrapper/wrapper.css.ts`)
|
|
52
|
+
|
|
53
|
+
```tsx
|
|
54
|
+
import { styled } from '@salty-css/react/styled';
|
|
55
|
+
|
|
56
|
+
export const Wrapper = styled('div', {
|
|
57
|
+
display: 'block',
|
|
58
|
+
padding: '2vw',
|
|
59
|
+
});
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
**Button** (`components/button/button.css.ts`)
|
|
63
|
+
|
|
64
|
+
```tsx
|
|
65
|
+
import { styled } from '@salty-css/react/styled';
|
|
66
|
+
|
|
67
|
+
export const Button = styled('button', {
|
|
68
|
+
display: 'block',
|
|
69
|
+
padding: `0.6em 1.2em`,
|
|
70
|
+
border: '1px solid currentColor',
|
|
71
|
+
background: 'transparent',
|
|
72
|
+
color: 'currentColor/40',
|
|
73
|
+
cursor: 'pointer',
|
|
74
|
+
transition: '200ms',
|
|
75
|
+
textDecoration: 'none',
|
|
76
|
+
'&:hover': {
|
|
77
|
+
background: 'black',
|
|
78
|
+
borderColor: 'black',
|
|
79
|
+
color: 'white',
|
|
80
|
+
},
|
|
81
|
+
'&:disabled': {
|
|
82
|
+
opacity: 0.25,
|
|
83
|
+
pointerEvents: 'none',
|
|
84
|
+
},
|
|
85
|
+
variants: {
|
|
86
|
+
variant: {
|
|
87
|
+
outlined: {
|
|
88
|
+
// same as default styles
|
|
89
|
+
},
|
|
90
|
+
solid: {
|
|
91
|
+
'&:not(:hover)': {
|
|
92
|
+
background: 'black',
|
|
93
|
+
borderColor: 'black',
|
|
94
|
+
color: 'white',
|
|
95
|
+
},
|
|
96
|
+
'&:hover': {
|
|
97
|
+
background: 'transparent',
|
|
98
|
+
borderColor: 'currentColor',
|
|
99
|
+
color: 'currentColor',
|
|
100
|
+
},
|
|
101
|
+
},
|
|
102
|
+
},
|
|
103
|
+
},
|
|
104
|
+
});
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
More examples coming soon
|
package/package.json
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@salty-css/vite",
|
|
3
|
+
"version": "0.0.1-alpha.0",
|
|
4
|
+
"main": "./dist/index.js",
|
|
5
|
+
"module": "./dist/index.mjs",
|
|
6
|
+
"typings": "./dist/index.d.ts",
|
|
7
|
+
"type": "module",
|
|
8
|
+
"license": "MIT",
|
|
9
|
+
"private": false,
|
|
10
|
+
"publishConfig": {
|
|
11
|
+
"access": "public"
|
|
12
|
+
},
|
|
13
|
+
"homepage": "https://github.com/margarita-form/salty-css",
|
|
14
|
+
"bugs": {
|
|
15
|
+
"url": "https://github.com/margarita-form/salty-css/issues"
|
|
16
|
+
},
|
|
17
|
+
"files": [
|
|
18
|
+
"dist",
|
|
19
|
+
"!**/*.tsbuildinfo"
|
|
20
|
+
],
|
|
21
|
+
"nx": {
|
|
22
|
+
"name": "vite"
|
|
23
|
+
},
|
|
24
|
+
"exports": {
|
|
25
|
+
".": {
|
|
26
|
+
"import": "./index.js",
|
|
27
|
+
"require": "./index.cjs"
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
}
|