@salty-css/webpack 0.0.1-alpha.3 → 0.0.1-alpha.4

Sign up to get free protection for your applications and to get access to all the features.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salty-css/webpack",
3
- "version": "0.0.1-alpha.3",
3
+ "version": "0.0.1-alpha.4",
4
4
  "main": "./dist/index.js",
5
5
  "module": "./dist/index.mjs",
6
6
  "typings": "./dist/index.d.ts",
@@ -15,7 +15,7 @@
15
15
  "url": "https://github.com/margarita-form/salty-css/issues"
16
16
  },
17
17
  "files": [
18
- "dist",
18
+ "**/*",
19
19
  "!**/*.tsbuildinfo"
20
20
  ],
21
21
  "nx": {
package/dist/README.md DELETED
@@ -1,107 +0,0 @@
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/dist/package.json DELETED
@@ -1,30 +0,0 @@
1
- {
2
- "name": "@salty-css/webpack",
3
- "version": "0.0.1-alpha.3",
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": "webpack"
23
- },
24
- "exports": {
25
- ".": {
26
- "import": "./index.js",
27
- "require": "./index.cjs"
28
- }
29
- }
30
- }
File without changes
File without changes
File without changes