@salty-css/react 0.0.1-alpha.66 → 0.0.1-alpha.68

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 (2) hide show
  1. package/README.md +24 -20
  2. package/package.json +3 -3
package/README.md CHANGED
@@ -18,14 +18,14 @@ In the world of frontend dev is there anything saltier than CSS? Salty CSS is bu
18
18
 
19
19
  ### Packages
20
20
 
21
- - [React](#react) → `npm install @salty-css/react`
22
- - [Next.js](#nextjs) → `npm install @salty-css/next`
23
- - [Vite](#vite) → `npm install @salty-css/vite`
24
- - [Webpack](https://www.npmjs.com/package/@salty-css/webpack) → `npm install @salty-css/webpack`
25
- - [Core](https://www.npmjs.com/package/@salty-css/react) → `npm install @salty-css/core`
26
- - [ESLint](https://www.npmjs.com/package/@salty-css/eslint-plugin-core) → `npm install @salty-css/eslint-plugin-core`
21
+ Note: Fastest way to get started with any framework is [npx salty-css init [directory]](#initialize-salty-css-for-a-project) command
27
22
 
28
- [View React example](#code-examples)
23
+ - [Next.js](#nextjs) → `npm install @salty-css/next` + [Next.js install guide](#nextjs) + [Next.js example app](https://github.com/margarita-form/salty-css-website)
24
+ - [React](#react) → `npm install @salty-css/react` + [React install guide](#react) + [React example code](#code-examples)
25
+ - [Vite](#vite) → `npm install @salty-css/vite` + [(Vite install guide)](#vite)
26
+ - [Webpack](https://www.npmjs.com/package/@salty-css/webpack) → `npm install @salty-css/webpack` + Guide coming soon
27
+ - [ESLint](https://www.npmjs.com/package/@salty-css/eslint-plugin-core) → `npm install @salty-css/eslint-plugin-core` + Guide coming soon
28
+ - [Core](https://www.npmjs.com/package/@salty-css/react) → `npm install @salty-css/core` (This package contains code for internal use)
29
29
 
30
30
  ### Add Salty CSS to your project with `salty-css` CLI
31
31
 
@@ -47,15 +47,10 @@ To ease the pain of package updates all Salty CSS packages can be updated with `
47
47
 
48
48
  ### Manual work
49
49
 
50
- #### React
51
-
52
- 1. Install related dependencies: `npm i @salty-css/core @salty-css/react`
53
- 2. Create `salty.config.ts` to your app directory
54
-
55
50
  #### Next.js
56
51
 
57
- 1. First check the instructions for [React](#react)
58
- 2. For Next.js support install `npm i -D @salty-css/next`
52
+ 1. For Next.js support install `npm i @salty-css/next @salty-css/core @salty-css/react`
53
+ 2. Create `salty.config.ts` to your app directory
59
54
  3. Add Salty CSS plugin to next.js config
60
55
 
61
56
  - **Next.js 15:** In `next.config.ts` add import for salty plugin `import { withSaltyCss } from '@salty-css/next';` and then add `withSaltyCss` to wrap your nextConfig export like so `export default withSaltyCss(nextConfig);`
@@ -65,14 +60,23 @@ To ease the pain of package updates all Salty CSS packages can be updated with `
65
60
  5. Build `saltygen` directory by running your app once or with cli `npx salty-css build [directory]`
66
61
  6. Import global styles from `saltygen/index.css` to some global css file with `@import 'insert_path_to_index_css';`.
67
62
 
63
+ [Check out Next.js demo project](https://github.com/margarita-form/salty-css-website) or [react example code](#code-examples)
64
+
65
+ #### React
66
+
67
+ 1. Install related dependencies: `npm i @salty-css/core @salty-css/react`
68
+ 2. Create `salty.config.ts` to your app directory
69
+ 3. Configure your build tool to support Salty CSS ([Vite](#vite) or Webpack)
70
+
71
+ [Check out react example code](#code-examples)
72
+
68
73
  #### Vite
69
74
 
70
- 1. First check the instructions for [React](#react)
71
- 2. For Vite support install `npm i -D @salty-css/vite`
72
- 3. In `vite.config` add import for salty plugin `import { saltyPlugin } from '@salty-css/vite';` and then add `saltyPlugin(__dirname)` to your vite configuration plugins
73
- 4. Make sure that `salty.config.ts` and `vite.config.ts` are in the same folder!
74
- 5. Build `saltygen` directory by running your app once or with cli `npx salty-css build [directory]`
75
- 6. Import global styles from `saltygen/index.css` to some global css file with `@import 'insert_path_to_index_css';`.
75
+ 1. For Vite support install `npm i @salty-css/vite @salty-css/core`
76
+ 2. In `vite.config` add import for salty plugin `import { saltyPlugin } from '@salty-css/vite';` and then add `saltyPlugin(__dirname)` to your vite configuration plugins
77
+ 3. Make sure that `salty.config.ts` and `vite.config.ts` are in the same folder!
78
+ 4. Build `saltygen` directory by running your app once or with cli `npx salty-css build [directory]`
79
+ 5. Import global styles from `saltygen/index.css` to some global css file with `@import 'insert_path_to_index_css';`.
76
80
 
77
81
  ### Create components
78
82
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salty-css/react",
3
- "version": "0.0.1-alpha.66",
3
+ "version": "0.0.1-alpha.68",
4
4
  "main": "./dist/index.js",
5
5
  "module": "./dist/index.mjs",
6
6
  "typings": "./dist/index.d.ts",
@@ -10,7 +10,7 @@
10
10
  "publishConfig": {
11
11
  "access": "public"
12
12
  },
13
- "homepage": "https://github.com/margarita-form/salty-css",
13
+ "homepage": "https://salty-css.dev/",
14
14
  "bugs": {
15
15
  "url": "https://github.com/margarita-form/salty-css/issues"
16
16
  },
@@ -41,7 +41,7 @@
41
41
  }
42
42
  },
43
43
  "dependencies": {
44
- "@salty-css/core": "^0.0.1-alpha.66",
44
+ "@salty-css/core": "^0.0.1-alpha.68",
45
45
  "clsx": ">=2.x",
46
46
  "react": ">=19.x || >=18.3.x"
47
47
  }