@salty-css/core 0.0.1-alpha.113 → 0.0.1-alpha.115

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 CHANGED
@@ -16,38 +16,31 @@ In the world of frontend dev is there anything saltier than CSS? Salty CSS is bu
16
16
  - Create component: `npx salty-css generate [filePath]`
17
17
  - Build: `npx salty-css build [directory]`
18
18
 
19
- ### Packages
19
+ ### Initialize
20
20
 
21
- Note: Fastest way to get started with any framework is [npx salty-css init [directory]](#initialize-salty-css-for-a-project) command
21
+ Fastest way to get started with any framework is [npx salty-css init [directory]](#initialize-salty-css-for-a-project) command
22
22
 
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)
23
+ - Next.js → [Next.js guide](#nextjs) + [Next.js example app](https://github.com/margarita-form/salty-css-website)
24
+ - React → [React guide](#react) + [React example code](#code-examples)
25
+ - Vite → [Vite guide](#vite)
26
+ - Webpack → Guide coming soon
27
+ - ESLint → Guide coming soon
29
28
 
30
- ### Add Salty CSS to your project with `salty-css` CLI
29
+ ### Salty CSS CLI
31
30
 
32
- #### Initialize Salty CSS for a project
31
+ In your existing repository you can use `npx salty-css [command]` to initialize a project, generate components, update related packages and build required files.
33
32
 
34
- In your existing repository run `npx salty-css init [directory]` which installs required salty-css packages to the current directory, detects framework in use (current support for vite and next.js) and creates project files to the provided directory. Directory can be left blank if you want files to be created to the current directory. Init will also create `.saltyrc.json` which contains some metadata for future CLI commands.
33
+ - Initialize project `npx salty-css init [directory]` - Installs required packages, detects framework in use and creates project files to the provided directory. Directory can be left blank if you want files to be created to the current directory.
34
+ - Generate component → `npx salty-css update [version]` - Update @salty-css packages in your repository. Default version is "latest". Additional options like `--dir`, `--tag`, `--name` and `--className` are also supported.
35
+ - Build files → `npx salty-css build [directory]` - Compile Salty CSS related files in your project. This should not be needed if you are using tools like Next.js or Vite
35
36
 
36
- #### Create components
37
+ ### Guides
37
38
 
38
- Components can be created with `npx salty-css generate [filePath]` which then creates a new Salty CSS component file to the specified path. Additional options like `--dir, --tag, --name and --className` are also supported. Read more about them with `npx salty-css generate --help`
39
-
40
- #### Build / Compile Salty CSS
41
-
42
- If you want to manually build your project that can be done by running `npx salty-css build [directory]`. Directory is not required as CLI can use default directory defined in `.saltyrc.json`. Note that build generates css files but Vite / Webpack plugin is still required for full support.
43
-
44
- #### Update Salty CSS packages
45
-
46
- To ease the pain of package updates all Salty CSS packages can be updated with `npx salty-css update`
39
+ #### Next.js
47
40
 
48
- ### Manual work
41
+ In your existing Next.js repository you can run `npx salty-css init` to automatically configure Salty CSS.
49
42
 
50
- #### Next.js
43
+ ##### Manual configuration
51
44
 
52
45
  1. For Next.js support install `npm i @salty-css/next @salty-css/core @salty-css/react`
53
46
  2. Create `salty.config.ts` to your app directory
@@ -62,15 +55,11 @@ To ease the pain of package updates all Salty CSS packages can be updated with `
62
55
 
63
56
  [Check out Next.js demo project](https://github.com/margarita-form/salty-css-website) or [react example code](#code-examples)
64
57
 
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)
58
+ #### Vite
70
59
 
71
- [Check out react example code](#code-examples)
60
+ In your existing Vite repository you can run `npx salty-css init` to automatically configure Salty CSS.
72
61
 
73
- #### Vite
62
+ ##### Manual configuration
74
63
 
75
64
  1. For Vite support install `npm i @salty-css/vite @salty-css/core`
76
65
  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
@@ -78,6 +67,18 @@ To ease the pain of package updates all Salty CSS packages can be updated with `
78
67
  4. Build `saltygen` directory by running your app once or with cli `npx salty-css build [directory]`
79
68
  5. Import global styles from `saltygen/index.css` to some global css file with `@import 'insert_path_to_index_css';`.
80
69
 
70
+ #### React
71
+
72
+ In your existing React repository you can run `npx salty-css init` to automatically configure Salty CSS.
73
+
74
+ ##### Manual configuration
75
+
76
+ 1. Install related dependencies: `npm i @salty-css/core @salty-css/react`
77
+ 2. Create `salty.config.ts` to your app directory
78
+ 3. Configure your build tool to support Salty CSS ([Vite](#vite) or Webpack) or after changes run `npx salty-css build`
79
+
80
+ [Check out react example code](#code-examples)
81
+
81
82
  ### Create components
82
83
 
83
84
  1. Create salty components with styled only inside files that end with `.css.ts`, `.salty.ts` `.styled.ts` or `.styles.ts`
@@ -106,23 +107,6 @@ export const config = defineConfig({
106
107
  });
107
108
  ```
108
109
 
109
- **Your React component file**
110
-
111
- ```tsx
112
- import { Wrapper } from '../components/wrapper/wrapper.css';
113
- import { Button } from '../components/button/button.css';
114
-
115
- export const IndexPage = () => {
116
- return (
117
- <Wrapper>
118
- <Button variant="solid" onClick={() => alert('It is a button.')}>
119
- Outlined
120
- </Button>
121
- </Wrapper>
122
- );
123
- };
124
- ```
125
-
126
110
  **Wrapper** (`components/wrapper/wrapper.css.ts`)
127
111
 
128
112
  ```tsx
@@ -147,7 +131,7 @@ export const Button = styled('button', {
147
131
  padding: `0.6em 1.2em`,
148
132
  border: '1px solid currentColor',
149
133
  background: 'transparent',
150
- color: 'currentColor/40',
134
+ color: 'currentColor',
151
135
  cursor: 'pointer',
152
136
  transition: '200ms',
153
137
  textDecoration: 'none',
@@ -183,4 +167,21 @@ export const Button = styled('button', {
183
167
  });
184
168
  ```
185
169
 
170
+ **Your React component file**
171
+
172
+ ```tsx
173
+ import { Wrapper } from '../components/wrapper/wrapper.css';
174
+ import { Button } from '../components/button/button.css';
175
+
176
+ export const IndexPage = () => {
177
+ return (
178
+ <Wrapper>
179
+ <Button variant="solid" onClick={() => alert('It is a button.')}>
180
+ Outlined
181
+ </Button>
182
+ </Wrapper>
183
+ );
184
+ };
185
+ ```
186
+
186
187
  More examples coming soon
package/bin/main.cjs CHANGED
@@ -1,11 +1,11 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const te=require("commander"),G=require("fs"),s=require("fs/promises"),n=require("path"),ne=require("ejs"),t=require("../index-Cj4Em07G.cjs"),ie=require("../pascal-case-iWoaJWwT.cjs"),se=require("child_process"),oe=require("ora");var z=typeof document<"u"?document.currentScript:null;const X=y=>new Promise((C,v)=>{se.exec(y,F=>{if(F)return v(F);C()})}),I=async(...y)=>{const C=y.map(b=>b.replace("-D","").split("@").slice(0,-1).join("@").trim()).join(", "),v=oe(`Installing packages: ${C}`).start(),F=y.join(" ");await X(`npm install ${F}`),v.succeed(`Installed packages: ${C}`)},ae=()=>G.existsSync(n.join(process.cwd(),"node_modules",".bin","prettier"));async function S(y){try{if(!ae())return;await X(`./node_modules/.bin/prettier --write "${y}"`),t.logger.info(`Formatted ${y} with Prettier`)}catch(C){t.logger.error(`Error formatting ${y} with Prettier:`,C)}}async function re(){const y=new te.Command;y.name("salty-css").description("Salty-CSS CLI tool to help with annoying configuration tasks.");const C={"salty.config.ts":Promise.resolve().then(()=>require("../salty.config-Dk6ZcCxI.cjs")),"saltygen/index.css":Promise.resolve().then(()=>require("../index-84Wroia-.cjs")),"react/react-styled-file.ts":Promise.resolve().then(()=>require("../react-styled-file-Dkubsz-U.cjs")),"react/react-vanilla-file.ts":Promise.resolve().then(()=>require("../react-vanilla-file-CG_WJLam.cjs"))},v=async(i,a)=>{const{default:l}=await C[i],u=ne.render(l,a);return{fileName:i,content:u}},F=async()=>{const i=n.join(process.cwd(),".saltyrc.json");return await s.readFile(i,"utf-8").then(JSON.parse).catch(()=>({}))},b=n.join(process.cwd(),"package.json"),N=async(i=b)=>{const a=await s.readFile(i,"utf-8").then(JSON.parse).catch(()=>{});if(!a)throw"Could not read package.json file!";return a},Y=async(i,a=b)=>{typeof i=="object"&&(i=JSON.stringify(i,null,2)),await s.writeFile(a,i)},B=async()=>{const i=new URL("../package.json",typeof document>"u"?require("url").pathToFileURL(__filename).href:z&&z.tagName.toUpperCase()==="SCRIPT"&&z.src||new URL("bin/main.cjs",document.baseURI).href);return N(i)},V=await(async()=>(await F()).defaultProject)(),$=await B(),D={core:`@salty-css/core@${$.version}`,react:`@salty-css/react@${$.version}`,eslintConfigCore:`@salty-css/eslint-config-core@${$.version}`,vite:`@salty-css/vite@${$.version}`,next:`@salty-css/next@${$.version}`},R=i=>{const a=i==="."?"":i,l=process.cwd();return n.join(l,a)};y.command("init [directory]").description("Initialize a new Salty-CSS project.").option("-d, --dir <dir>","Project directory to initialize the project in.").option("--css-file <css-file>","Existing CSS file where to import the generated CSS. Path must be relative to the given project directory.").option("--skip-install","Skip installing dependencies.").action(async function(i="."){if(!await N().catch(()=>{}))return t.logError("Salty CSS project must be initialized in a directory with a package.json file.");t.logger.info("Initializing a new Salty-CSS project!");const{dir:l=i,cssFile:u,skipInstall:p}=this.opts();if(!l)return t.logError("Project directory must be provided. Add it as the first argument after init command or use the --dir option.");p||await I(D.core,D.react);const g=process.cwd(),r=R(l),T=await Promise.all([v("salty.config.ts"),v("saltygen/index.css")]);await s.mkdir(r,{recursive:!0});const m=T.map(async({fileName:e,content:f})=>{const c=n.join(r,e);if(await s.readFile(c,"utf-8").catch(()=>{})!==void 0){t.logger.debug("File already exists: "+c);return}const k=e.split("/").slice(0,-1).join("/");k&&await s.mkdir(n.join(r,k),{recursive:!0}),t.logger.info("Creating file: "+c),await s.writeFile(c,f),await S(c)});await Promise.all(m);const w=n.relative(g,r)||".",h=n.join(g,".saltyrc.json"),d=await s.readFile(h,"utf-8").catch(()=>{});if(d===void 0){t.logger.info("Creating file: "+h);const f=JSON.stringify({$schema:"./node_modules/@salty-css/core/.saltyrc.schema.json",info:"This file is used to define projects and their configurations for Salty CSS cli. Do not delete, modify or add this file to .gitignore.",defaultProject:w,projects:[{dir:w,framework:"react"}]},null,2);await s.writeFile(h,f),await S(h)}else{const e=JSON.parse(d),f=(e==null?void 0:e.projects)||[];if(f.findIndex(o=>o.dir===w)===-1){f.push({dir:w,framework:"react"}),e.projects=[...f];const o=JSON.stringify(e,null,2);o!==d&&(t.logger.info("Edit file: "+h),await s.writeFile(h,o),await S(h))}}const j=n.join(g,".gitignore"),U=await s.readFile(j,"utf-8").catch(()=>{});U!==void 0&&(U.includes("saltygen")||(t.logger.info("Edit file: "+j),await s.writeFile(j,U+`
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const te=require("commander"),G=require("fs"),s=require("fs/promises"),n=require("path"),ne=require("ejs"),t=require("../index-DckDeOOE.cjs"),ie=require("../pascal-case-iWoaJWwT.cjs"),se=require("child_process"),oe=require("ora");var z=typeof document<"u"?document.currentScript:null;const X=y=>new Promise((C,P)=>{se.exec(y,F=>{if(F)return P(F);C()})}),I=async(...y)=>{const C=y.map(b=>b.replace("-D","").split("@").slice(0,-1).join("@").trim()).join(", "),P=oe(`Installing packages: ${C}`).start(),F=y.join(" ");await X(`npm install ${F}`),P.succeed(`Installed packages: ${C}`)},ae=()=>G.existsSync(n.join(process.cwd(),"node_modules",".bin","prettier"));async function S(y){try{if(!ae())return;await X(`./node_modules/.bin/prettier --write "${y}"`),t.logger.info(`Formatted ${y} with Prettier`)}catch(C){t.logger.error(`Error formatting ${y} with Prettier:`,C)}}async function re(){const y=new te.Command;y.name("salty-css").description("Salty-CSS CLI tool to help with annoying configuration tasks.");const C={"salty.config.ts":Promise.resolve().then(()=>require("../salty.config-Dk6ZcCxI.cjs")),"saltygen/index.css":Promise.resolve().then(()=>require("../index-84Wroia-.cjs")),"react/react-styled-file.ts":Promise.resolve().then(()=>require("../react-styled-file-Dkubsz-U.cjs")),"react/react-vanilla-file.ts":Promise.resolve().then(()=>require("../react-vanilla-file-CG_WJLam.cjs"))},P=async(i,a)=>{const{default:l}=await C[i],u=ne.render(l,a);return{fileName:i,content:u}},F=async()=>{const i=n.join(process.cwd(),".saltyrc.json");return await s.readFile(i,"utf-8").then(JSON.parse).catch(()=>({}))},b=n.join(process.cwd(),"package.json"),N=async(i=b)=>{const a=await s.readFile(i,"utf-8").then(JSON.parse).catch(()=>{});if(!a)throw"Could not read package.json file!";return a},Y=async(i,a=b)=>{typeof i=="object"&&(i=JSON.stringify(i,null,2)),await s.writeFile(a,i)},B=async()=>{const i=new URL("../package.json",typeof document>"u"?require("url").pathToFileURL(__filename).href:z&&z.tagName.toUpperCase()==="SCRIPT"&&z.src||new URL("bin/main.cjs",document.baseURI).href);return N(i)},V=await(async()=>(await F()).defaultProject)(),$=await B(),D={core:`@salty-css/core@${$.version}`,react:`@salty-css/react@${$.version}`,eslintConfigCore:`@salty-css/eslint-config-core@${$.version}`,vite:`@salty-css/vite@${$.version}`,next:`@salty-css/next@${$.version}`},R=i=>{const a=i==="."?"":i,l=process.cwd();return n.join(l,a)};y.command("init [directory]").description("Initialize a new Salty-CSS project.").option("-d, --dir <dir>","Project directory to initialize the project in.").option("--css-file <css-file>","Existing CSS file where to import the generated CSS. Path must be relative to the given project directory.").option("--skip-install","Skip installing dependencies.").action(async function(i="."){if(!await N().catch(()=>{}))return t.logError("Salty CSS project must be initialized in a directory with a package.json file.");t.logger.info("Initializing a new Salty-CSS project!");const{dir:l=i,cssFile:u,skipInstall:p}=this.opts();if(!l)return t.logError("Project directory must be provided. Add it as the first argument after init command or use the --dir option.");p||await I(D.core,D.react);const f=process.cwd(),r=R(l),T=await Promise.all([P("salty.config.ts"),P("saltygen/index.css")]);await s.mkdir(r,{recursive:!0});const m=T.map(async({fileName:e,content:g})=>{const c=n.join(r,e);if(await s.readFile(c,"utf-8").catch(()=>{})!==void 0){t.logger.debug("File already exists: "+c);return}const k=e.split("/").slice(0,-1).join("/");k&&await s.mkdir(n.join(r,k),{recursive:!0}),t.logger.info("Creating file: "+c),await s.writeFile(c,g),await S(c)});await Promise.all(m);const w=n.relative(f,r)||".",h=n.join(f,".saltyrc.json"),d=await s.readFile(h,"utf-8").catch(()=>{});if(d===void 0){t.logger.info("Creating file: "+h);const g=JSON.stringify({$schema:"./node_modules/@salty-css/core/.saltyrc.schema.json",info:"This file is used to define projects and their configurations for Salty CSS cli. Do not delete, modify or add this file to .gitignore.",defaultProject:w,projects:[{dir:w,framework:"react"}]},null,2);await s.writeFile(h,g),await S(h)}else{const e=JSON.parse(d),g=(e==null?void 0:e.projects)||[];if(g.findIndex(o=>o.dir===w)===-1){g.push({dir:w,framework:"react"}),e.projects=[...g];const o=JSON.stringify(e,null,2);o!==d&&(t.logger.info("Edit file: "+h),await s.writeFile(h,o),await S(h))}}const j=n.join(f,".gitignore"),U=await s.readFile(j,"utf-8").catch(()=>{});U!==void 0&&(U.includes("saltygen")||(t.logger.info("Edit file: "+j),await s.writeFile(j,U+`
2
2
 
3
3
  # Salty-CSS
4
4
  saltygen
5
- `)));const x=["src","public","assets","styles","css","app"],H=["styles","css","app","pages"],M=["index","styles","main","global","globals"],L=[".css",".scss",".sass"],E=await(async()=>{if(u)return u;for(const e of x)for(const f of M)for(const c of L){const o=n.join(r,e,f+c);if(await s.readFile(o,"utf-8").catch(()=>{})!==void 0)return n.relative(r,o);for(const O of H){const q=n.join(r,e,O,f+c);if(await s.readFile(q,"utf-8").catch(()=>{})!==void 0)return n.relative(r,q)}}})();if(E){const e=n.join(r,E),f=await s.readFile(e,"utf-8").catch(()=>{});if(f!==void 0&&!f.includes("saltygen")){const o=n.join(e,".."),O=`@import '${n.relative(o,n.join(r,"saltygen/index.css"))}';`;t.logger.info("Adding global import statement to CSS file: "+e),await s.writeFile(e,O+`
6
- `+f),await S(e)}}else t.logger.warn("Could not find a CSS file to import the generated CSS. Please add it manually.");const Z={projectJs:n.join(r,"eslint.config.js"),rootJs:n.join(g,"eslint.config.js"),projectMjs:n.join(r,"eslint.config.mjs"),rootMjs:n.join(g,"eslint.config.mjs"),projectJson:n.join(r,".eslintrc.json"),rootJson:n.join(g,".eslintrc.json")},P=Object.values(Z).find(e=>G.existsSync(e));if(P){p||await I(D.eslintConfigCore);const e=await s.readFile(P,"utf-8").catch(()=>{});if(!e)return t.logError("Could not read ESLint config file.");if(!e.includes("salty-css"))if(t.logger.info("Edit file: "+P),P.endsWith("js")){let o=`import saltyCss from "@salty-css/eslint-config-core/flat";
7
- ${e}`;e.includes("typescript-eslint")?o.includes(".config(")?o=o.replace(".config(",".config(saltyCss,"):t.logger.warn("Could not find the correct place to add the Salty-CSS config for ESLint. Please add it manually."):o.includes("export default [")?o=o.replace("export default [","export default [ saltyCss,"):o.includes("eslintConfig = [")?o=o.replace("eslintConfig = [","eslintConfig = [ saltyCss,"):t.logger.warn("Could not find the correct place to add the Salty-CSS config for ESLint. Please add it manually."),await s.writeFile(P,o),await S(P)}else{const c=JSON.parse(e);c.extends||(c.extends=[]),c.extends.push("@salty-css/core");const o=JSON.stringify(c,null,2);await s.writeFile(P,o),await S(P)}}const _=n.join(r,"vite.config.ts"),W=await s.readFile(_,"utf-8").catch(()=>{});if(W!==void 0&&!W.includes("saltyPlugin")){t.logger.info("Edit file: "+_);const f=`import { saltyPlugin } from '@salty-css/vite';
5
+ `)));const x=["src","public","assets","styles","css","app"],H=["styles","css","app","pages"],M=["index","styles","main","global","globals"],L=[".css",".scss",".sass"],E=await(async()=>{if(u)return u;for(const e of x)for(const g of M)for(const c of L){const o=n.join(r,e,g+c);if(await s.readFile(o,"utf-8").catch(()=>{})!==void 0)return n.relative(r,o);for(const O of H){const q=n.join(r,e,O,g+c);if(await s.readFile(q,"utf-8").catch(()=>{})!==void 0)return n.relative(r,q)}}})();if(E){const e=n.join(r,E),g=await s.readFile(e,"utf-8").catch(()=>{});if(g!==void 0&&!g.includes("saltygen")){const o=n.join(e,".."),O=`@import '${n.relative(o,n.join(r,"saltygen/index.css"))}';`;t.logger.info("Adding global import statement to CSS file: "+e),await s.writeFile(e,O+`
6
+ `+g),await S(e)}}else t.logger.warn("Could not find a CSS file to import the generated CSS. Please add it manually.");const Z={projectJs:n.join(r,"eslint.config.js"),rootJs:n.join(f,"eslint.config.js"),projectMjs:n.join(r,"eslint.config.mjs"),rootMjs:n.join(f,"eslint.config.mjs"),projectJson:n.join(r,".eslintrc.json"),rootJson:n.join(f,".eslintrc.json")},v=Object.values(Z).find(e=>G.existsSync(e));if(v){p||await I(D.eslintConfigCore);const e=await s.readFile(v,"utf-8").catch(()=>{});if(!e)return t.logError("Could not read ESLint config file.");if(!e.includes("salty-css"))if(t.logger.info("Edit file: "+v),v.endsWith("js")){let o=`import saltyCss from "@salty-css/eslint-config-core/flat";
7
+ ${e}`;e.includes("typescript-eslint")?o.includes(".config(")?o=o.replace(".config(",".config(saltyCss,"):t.logger.warn("Could not find the correct place to add the Salty-CSS config for ESLint. Please add it manually."):o.includes("export default [")?o=o.replace("export default [","export default [ saltyCss,"):o.includes("eslintConfig = [")?o=o.replace("eslintConfig = [","eslintConfig = [ saltyCss,"):t.logger.warn("Could not find the correct place to add the Salty-CSS config for ESLint. Please add it manually."),await s.writeFile(v,o),await S(v)}else{const c=JSON.parse(e);c.extends||(c.extends=[]),c.extends.push("@salty-css/core");const o=JSON.stringify(c,null,2);await s.writeFile(v,o),await S(v)}}const _=n.join(r,"vite.config.ts"),W=await s.readFile(_,"utf-8").catch(()=>{});if(W!==void 0&&!W.includes("saltyPlugin")){t.logger.info("Edit file: "+_);const g=`import { saltyPlugin } from '@salty-css/vite';
8
8
  `,o=W.replace(/(plugins: \[)/,`$1
9
- saltyPlugin(__dirname),`);p||await I(`-D ${D.vite}`),t.logger.info("Adding Salty-CSS plugin to Vite config..."),await s.writeFile(_,f+o),await S(_)}const A=["next.config.js","next.config.cjs","next.config.ts","next.config.mjs"].map(e=>n.join(r,e)).find(e=>G.existsSync(e));if(A){let e=await s.readFile(A,"utf-8").catch(()=>{});if(e!==void 0&&!e.includes("withSaltyCss")){let c=!1;/\splugins([^=]*)=[^[]\[/.test(e)&&!c&&(e=e.replace(/\splugins([^=]*)=[^[]\[/,(q,J)=>` plugins${J}= [withSaltyCss,`),c=!0);const k=e.includes("module.exports"),O=k?`const { withSaltyCss } = require('@salty-css/next');
9
+ saltyPlugin(__dirname),`);p||await I(`-D ${D.vite}`),t.logger.info("Adding Salty-CSS plugin to Vite config..."),await s.writeFile(_,g+o),await S(_)}const A=["next.config.js","next.config.cjs","next.config.ts","next.config.mjs"].map(e=>n.join(r,e)).find(e=>G.existsSync(e));if(A){let e=await s.readFile(A,"utf-8").catch(()=>{});if(e!==void 0&&!e.includes("withSaltyCss")){let c=!1;/\splugins([^=]*)=[^[]\[/.test(e)&&!c&&(e=e.replace(/\splugins([^=]*)=[^[]\[/,(q,J)=>` plugins${J}= [withSaltyCss,`),c=!0);const k=e.includes("module.exports"),O=k?`const { withSaltyCss } = require('@salty-css/next');
10
10
  `:`import { withSaltyCss } from '@salty-css/next';
11
- `;k&&!c?(e=e.replace(/module.exports = ([^;]+)/,(q,J)=>`module.exports = withSaltyCss(${J})`),c=!0):c||(e=e.replace(/export default ([^;]+)/,(q,J)=>`export default withSaltyCss(${J})`)),p||await I(`-D ${D.next}`),t.logger.info("Adding Salty-CSS plugin to Next.js config..."),await s.writeFile(A,O+e),await S(A)}}const ee=await N().catch(()=>t.logError("Could not read package.json file.")).then(e=>(e.scripts||(e.scripts={}),e.scripts.prepare?e.scripts.prepare.includes("salty-css")||(t.logger.info("Edit file: "+b),e.scripts.prepare=e.scripts.prepare+" && npx salty-css build"):(t.logger.info("Edit file: "+b),e.scripts.prepare="npx salty-css build"),e));await Y(ee),t.logger.info("Running the build to generate initial CSS..."),await t.generateCss(r),t.logger.info("🎉 Salty CSS project initialized successfully!"),t.logger.info("Next steps:"),t.logger.info("1. Configure variables and templates in `salty.config.ts`"),t.logger.info("2. Create a new component with `npx salty-css generate [component-name]`"),t.logger.info("3. Run `npx salty-css build` to generate the CSS"),t.logger.info("4. Read about the features in the documentation: https://salty-css.dev"),t.logger.info("5. Star the project on GitHub: https://github.com/margarita-form/salty-css ⭐")}),y.command("build [directory]").alias("b").description("Build the Salty-CSS project.").option("-d, --dir <dir>","Project directory to build the project in.").action(async function(i=V){t.logger.info("Building the Salty-CSS project...");const{dir:a=i}=this.opts();if(!a)return t.logError("Project directory must be provided. Add it as the first argument after build command or use the --dir option.");const l=R(a);await t.generateCss(l)}),y.command("generate [file] [directory]").alias("g").description("Generate a new component file.").option("-f, --file <file>","File to generate.").option("-d, --dir <dir>","Project directory to generate the file in.").option("-t, --tag <tag>","HTML tag of the component.","div").option("-n, --name <name>","Name of the component.").option("-c, --className <className>","CSS class of the component.").option("-r, --reactComponent","Generate a React component as well.").action(async function(i,a=V){const{file:l=i,dir:u=a,tag:p,name:g,className:r,reactComponent:T=!1}=this.opts();if(!l)return t.logError("File to generate must be provided. Add it as the first argument after generate command or use the --file option.");if(!u)return t.logError("Project directory must be provided. Add it as the second argument after generate command or use the --dir option.");const m=R(u),w=l.split("/").slice(0,-1).join("/");w&&await s.mkdir(n.join(m,w),{recursive:!0});const h=n.join(m,l),d=n.parse(h);d.ext||(d.ext=".ts"),d.name.endsWith(".css")||(d.name=d.name+".css"),d.base=d.name+d.ext;const j=n.format(d);if(await s.readFile(j,"utf-8").catch(()=>{})!==void 0){t.logger.error("File already exists:",j);return}let x=ie.pascalCase(g||d.base.replace(/\.css\.\w+$/,""));if(T){const M=x+"Component";x=x+"Wrapper";const L=d.base.replace(/\.css\.\w+$/,""),{content:Q}=await v("react/react-vanilla-file.ts",{tag:p,componentName:M,styledComponentName:x,className:r,fileName:L});d.name=L.replace(/\.css$/,""),d.ext=".tsx",d.base=d.name+d.ext;const E=n.format(d);t.logger.info("Generating a new file: "+E),await s.writeFile(E,Q),await S(E)}const{content:H}=await v("react/react-styled-file.ts",{tag:p,name:x,className:r});t.logger.info("Generating a new file: "+j),await s.writeFile(j,H),await S(j)});const K=async()=>{const i=n.join(process.cwd(),"package.json"),a=await N(i).catch(p=>t.logError(p));if(!a)return t.logError("Could not read package.json file.");const l={...a.dependencies,...a.devDependencies},u=Object.entries(l).filter(([p])=>p==="salty-css"||p.startsWith("@salty-css/"));return u.length?u:t.logError("No Salty-CSS packages found in package.json. Make sure you are running update command in the same directory! Used package.json path: "+i)};y.command("update [version]").alias("up").description("Update Salty-CSS packages to the latest or specified version.").option("-v, --version <version>","Version to update to.").option("--legacy-peer-deps <legacyPeerDeps>","Use legacy peer dependencies (not recommended).",!1).action(async function(i="latest"){const{legacyPeerDeps:a,version:l=i}=this.opts(),u=await K();if(!u)return t.logError("Could not update Salty-CSS packages as any were found in package.json.");const p=u.map(([m])=>l==="@"?`${m}@${$.version}`:`${m}@${l.replace(/^@/,"")}`);a?(t.logger.warn("Using legacy peer dependencies to update packages."),await I(...p,"--legacy-peer-deps")):await I(...p);const g=await K();if(!g)return t.logError("Something went wrong while reading the updated packages.");const r=g.reduce((m,[w,h])=>(m[h]||(m[h]=[]),m[h].push(w),m),{});if(Object.keys(r).length===1){const w=Object.keys(r)[0].replace(/^\^/,"");t.logger.info(`Updated to all Salty CSS packages successfully to ${w}`)}else for(const[m,w]of Object.entries(r)){const h=m.replace(/^\^/,"");t.logger.info(`Updated to ${h}: ${w.join(", ")}`)}}),y.option("-v, --version","Show the current version of Salty-CSS.").action(async function(){const i=await B();t.logger.info("CLI is running: "+i.version);const a=n.join(process.cwd(),"package.json"),l=await N(a).catch(g=>t.logError(g));if(!l)return;const u={...l.dependencies,...l.devDependencies},p=Object.keys(u).filter(g=>g==="salty-css"||g.startsWith("@salty-css/"));if(!p.length)return t.logError("No Salty-CSS packages found in package.json. Make sure you are running update command in the same directory! Used package.json path: "+a);for(const g of p)t.logger.info(`${g}: ${u[g]}`)}),y.parseAsync(process.argv)}exports.main=re;
11
+ `;k&&!c?(e=e.replace(/module.exports = ([^;]+)/,(q,J)=>`module.exports = withSaltyCss(${J})`),c=!0):c||(e=e.replace(/export default ([^;]+)/,(q,J)=>`export default withSaltyCss(${J})`)),p||await I(`-D ${D.next}`),t.logger.info("Adding Salty-CSS plugin to Next.js config..."),await s.writeFile(A,O+e),await S(A)}}const ee=await N().catch(()=>t.logError("Could not read package.json file.")).then(e=>(e.scripts||(e.scripts={}),e.scripts.prepare?e.scripts.prepare.includes("salty-css")||(t.logger.info("Edit file: "+b),e.scripts.prepare=e.scripts.prepare+" && npx salty-css build"):(t.logger.info("Edit file: "+b),e.scripts.prepare="npx salty-css build"),e));await Y(ee),t.logger.info("Running the build to generate initial CSS..."),await t.generateCss(r),t.logger.info("🎉 Salty CSS project initialized successfully!"),t.logger.info("Next steps:"),t.logger.info("1. Configure variables and templates in `salty.config.ts`"),t.logger.info("2. Create a new component with `npx salty-css generate [component-name]`"),t.logger.info("3. Run `npx salty-css build` to generate the CSS"),t.logger.info("4. Read about the features in the documentation: https://salty-css.dev"),t.logger.info("5. Star the project on GitHub: https://github.com/margarita-form/salty-css ⭐")}),y.command("build [directory]").alias("b").description("Build the Salty-CSS project.").option("-d, --dir <dir>","Project directory to build the project in.").action(async function(i=V){t.logger.info("Building the Salty-CSS project...");const{dir:a=i}=this.opts();if(!a)return t.logError("Project directory must be provided. Add it as the first argument after build command or use the --dir option.");const l=R(a);await t.generateCss(l)}),y.command("generate [file] [directory]").alias("g").description("Generate a new component file.").option("-f, --file <file>","File to generate.").option("-d, --dir <dir>","Project directory to generate the file in.").option("-t, --tag <tag>","HTML tag of the component.","div").option("-n, --name <name>","Name of the component.").option("-c, --className <className>","CSS class of the component.").option("-r, --reactComponent","Generate a React component as well.").action(async function(i,a=V){const{file:l=i,dir:u=a,tag:p,name:f,className:r,reactComponent:T=!1}=this.opts();if(!l)return t.logError("File to generate must be provided. Add it as the first argument after generate command or use the --file option.");if(!u)return t.logError("Project directory must be provided. Add it as the second argument after generate command or use the --dir option.");const m=R(u),w=l.split("/").slice(0,-1).join("/");w&&await s.mkdir(n.join(m,w),{recursive:!0});const h=n.join(m,l),d=n.parse(h);d.ext||(d.ext=".ts"),d.name.endsWith(".css")||(d.name=d.name+".css"),d.base=d.name+d.ext;const j=n.format(d);if(await s.readFile(j,"utf-8").catch(()=>{})!==void 0){t.logger.error("File already exists:",j);return}let x=ie.pascalCase(f||d.base.replace(/\.css\.\w+$/,""));if(T){const M=x+"Component";x=x+"Wrapper";const L=d.base.replace(/\.css\.\w+$/,""),{content:Q}=await P("react/react-vanilla-file.ts",{tag:p,componentName:M,styledComponentName:x,className:r,fileName:L});d.name=L.replace(/\.css$/,""),d.ext=".tsx",d.base=d.name+d.ext;const E=n.format(d);t.logger.info("Generating a new file: "+E),await s.writeFile(E,Q),await S(E)}const{content:H}=await P("react/react-styled-file.ts",{tag:p,name:x,className:r});t.logger.info("Generating a new file: "+j),await s.writeFile(j,H),await S(j)});const K=async()=>{const i=n.join(process.cwd(),"package.json"),a=await N(i).catch(p=>t.logError(p));if(!a)return t.logError("Could not read package.json file.");const l={...a.dependencies,...a.devDependencies},u=Object.entries(l).filter(([p])=>p==="salty-css"||p.startsWith("@salty-css/"));return u.length?u:t.logError("No Salty-CSS packages found in package.json. Make sure you are running update command in the same directory! Used package.json path: "+i)};y.command("update [version]").alias("up").description("Update Salty-CSS packages to the latest or specified version.").option("-v, --version <version>","Version to update to.").option("--legacy-peer-deps <legacyPeerDeps>","Use legacy peer dependencies (not recommended).",!1).action(async function(i="latest"){const{legacyPeerDeps:a,version:l=i}=this.opts(),u=await K();if(!u)return t.logError("Could not update Salty-CSS packages as any were found in package.json.");const p=u.map(([m])=>l==="@"?`${m}@${$.version}`:`${m}@${l.replace(/^@/,"")}`);a?(t.logger.warn("Using legacy peer dependencies to update packages."),await I(...p,"--legacy-peer-deps")):await I(...p);const f=await K();if(!f)return t.logError("Something went wrong while reading the updated packages.");const r=f.reduce((m,[w,h])=>(m[h]||(m[h]=[]),m[h].push(w),m),{});if(Object.keys(r).length===1){const w=Object.keys(r)[0].replace(/^\^/,"");t.logger.info(`Updated to all Salty CSS packages successfully to ${w}`)}else for(const[m,w]of Object.entries(r)){const h=m.replace(/^\^/,"");t.logger.info(`Updated to ${h}: ${w.join(", ")}`)}}),y.option("-v, --version","Show the current version of Salty-CSS.").action(async function(){const i=await B();t.logger.info("CLI is running: "+i.version);const a=n.join(process.cwd(),"package.json"),l=await N(a).catch(f=>t.logError(f));if(!l)return;const u={...l.dependencies,...l.devDependencies},p=Object.keys(u).filter(f=>f==="salty-css"||f.startsWith("@salty-css/"));if(!p.length)return t.logError("No Salty-CSS packages found in package.json. Make sure you are running update command in the same directory! Used package.json path: "+a);for(const f of p)t.logger.info(`${f}: ${u[f]}`)}),y.parseAsync(process.argv)}exports.main=re;
package/bin/main.js CHANGED
@@ -1,89 +1,89 @@
1
- import { Command as ot } from "commander";
1
+ import { Command as oe } from "commander";
2
2
  import { existsSync as K } from "fs";
3
3
  import { mkdir as q, readFile as C, writeFile as w } from "fs/promises";
4
- import { join as i, relative as z, parse as rt, format as tt } from "path";
5
- import { render as ct } from "ejs";
6
- import { l as e, a as h, g as et } from "../index-BYjQglAA.js";
7
- import { p as lt } from "../pascal-case-BQpR5PdN.js";
8
- import { exec as dt } from "child_process";
9
- import ft from "ora";
10
- const st = (u) => new Promise((v, k) => {
11
- dt(u, (F) => {
12
- if (F) return k(F);
13
- v();
4
+ import { join as i, relative as z, parse as re, format as ee } from "path";
5
+ import { render as ce } from "ejs";
6
+ import { l as t, a as h, g as te } from "../index-PIN4uCyt.js";
7
+ import { p as le } from "../pascal-case-BQpR5PdN.js";
8
+ import { exec as de } from "child_process";
9
+ import fe from "ora";
10
+ const ne = (g) => new Promise((P, x) => {
11
+ de(g, (F) => {
12
+ if (F) return x(F);
13
+ P();
14
14
  });
15
- }), E = async (...u) => {
16
- const v = u.map((J) => J.replace("-D", "").split("@").slice(0, -1).join("@").trim()).join(", "), k = ft(`Installing packages: ${v}`).start(), F = u.join(" ");
17
- await st(`npm install ${F}`), k.succeed(`Installed packages: ${v}`);
18
- }, pt = () => K(i(process.cwd(), "node_modules", ".bin", "prettier"));
19
- async function j(u) {
15
+ }), E = async (...g) => {
16
+ const P = g.map((J) => J.replace("-D", "").split("@").slice(0, -1).join("@").trim()).join(", "), x = fe(`Installing packages: ${P}`).start(), F = g.join(" ");
17
+ await ne(`npm install ${F}`), x.succeed(`Installed packages: ${P}`);
18
+ }, pe = () => K(i(process.cwd(), "node_modules", ".bin", "prettier"));
19
+ async function j(g) {
20
20
  try {
21
- if (!pt()) return;
22
- await st(`./node_modules/.bin/prettier --write "${u}"`), e.info(`Formatted ${u} with Prettier`);
23
- } catch (v) {
24
- e.error(`Error formatting ${u} with Prettier:`, v);
21
+ if (!pe()) return;
22
+ await ne(`./node_modules/.bin/prettier --write "${g}"`), t.info(`Formatted ${g} with Prettier`);
23
+ } catch (P) {
24
+ t.error(`Error formatting ${g} with Prettier:`, P);
25
25
  }
26
26
  }
27
- async function kt() {
28
- const u = new ot();
29
- u.name("salty-css").description("Salty-CSS CLI tool to help with annoying configuration tasks.");
30
- const v = {
27
+ async function xe() {
28
+ const g = new oe();
29
+ g.name("salty-css").description("Salty-CSS CLI tool to help with annoying configuration tasks.");
30
+ const P = {
31
31
  // Core files
32
32
  "salty.config.ts": import("../salty.config-BhBY_oOk.js"),
33
33
  "saltygen/index.css": import("../index-D_732b92.js"),
34
34
  // React
35
35
  "react/react-styled-file.ts": import("../react-styled-file-CGVf5n1B.js"),
36
36
  "react/react-vanilla-file.ts": import("../react-vanilla-file-CCXbsjIb.js")
37
- }, k = async (s, a) => {
38
- const { default: c } = await v[s], g = ct(c, a);
39
- return { fileName: s, content: g };
37
+ }, x = async (n, a) => {
38
+ const { default: c } = await P[n], u = ce(c, a);
39
+ return { fileName: n, content: u };
40
40
  }, F = async () => {
41
- const s = i(process.cwd(), ".saltyrc.json");
42
- return await C(s, "utf-8").then(JSON.parse).catch(() => ({}));
43
- }, J = i(process.cwd(), "package.json"), O = async (s = J) => {
44
- const a = await C(s, "utf-8").then(JSON.parse).catch(() => {
41
+ const n = i(process.cwd(), ".saltyrc.json");
42
+ return await C(n, "utf-8").then(JSON.parse).catch(() => ({}));
43
+ }, J = i(process.cwd(), "package.json"), O = async (n = J) => {
44
+ const a = await C(n, "utf-8").then(JSON.parse).catch(() => {
45
45
  });
46
46
  if (!a) throw "Could not read package.json file!";
47
47
  return a;
48
- }, nt = async (s, a = J) => {
49
- typeof s == "object" && (s = JSON.stringify(s, null, 2)), await w(a, s);
48
+ }, se = async (n, a = J) => {
49
+ typeof n == "object" && (n = JSON.stringify(n, null, 2)), await w(a, n);
50
50
  }, Q = async () => {
51
- const s = new URL("../package.json", import.meta.url);
52
- return O(s);
51
+ const n = new URL("../package.json", import.meta.url);
52
+ return O(n);
53
53
  }, X = await (async () => (await F()).defaultProject)(), N = await Q(), A = {
54
54
  core: `@salty-css/core@${N.version}`,
55
55
  react: `@salty-css/react@${N.version}`,
56
56
  eslintConfigCore: `@salty-css/eslint-config-core@${N.version}`,
57
57
  vite: `@salty-css/vite@${N.version}`,
58
58
  next: `@salty-css/next@${N.version}`
59
- }, G = (s) => {
60
- const a = s === "." ? "" : s, c = process.cwd();
59
+ }, G = (n) => {
60
+ const a = n === "." ? "" : n, c = process.cwd();
61
61
  return i(c, a);
62
62
  };
63
- u.command("init [directory]").description("Initialize a new Salty-CSS project.").option("-d, --dir <dir>", "Project directory to initialize the project in.").option("--css-file <css-file>", "Existing CSS file where to import the generated CSS. Path must be relative to the given project directory.").option("--skip-install", "Skip installing dependencies.").action(async function(s = ".") {
63
+ g.command("init [directory]").description("Initialize a new Salty-CSS project.").option("-d, --dir <dir>", "Project directory to initialize the project in.").option("--css-file <css-file>", "Existing CSS file where to import the generated CSS. Path must be relative to the given project directory.").option("--skip-install", "Skip installing dependencies.").action(async function(n = ".") {
64
64
  if (!await O().catch(() => {
65
65
  })) return h("Salty CSS project must be initialized in a directory with a package.json file.");
66
- e.info("Initializing a new Salty-CSS project!");
67
- const { dir: c = s, cssFile: g, skipInstall: p } = this.opts();
66
+ t.info("Initializing a new Salty-CSS project!");
67
+ const { dir: c = n, cssFile: u, skipInstall: p } = this.opts();
68
68
  if (!c) return h("Project directory must be provided. Add it as the first argument after init command or use the --dir option.");
69
69
  p || await E(A.core, A.react);
70
- const d = process.cwd(), o = G(c), H = await Promise.all([k("salty.config.ts"), k("saltygen/index.css")]);
70
+ const d = process.cwd(), o = G(c), H = await Promise.all([x("salty.config.ts"), x("saltygen/index.css")]);
71
71
  await q(o, { recursive: !0 });
72
- const y = H.map(async ({ fileName: t, content: f }) => {
73
- const r = i(o, t);
72
+ const y = H.map(async ({ fileName: e, content: f }) => {
73
+ const r = i(o, e);
74
74
  if (await C(r, "utf-8").catch(() => {
75
75
  }) !== void 0) {
76
- e.debug("File already exists: " + r);
76
+ t.debug("File already exists: " + r);
77
77
  return;
78
78
  }
79
- const b = t.split("/").slice(0, -1).join("/");
80
- b && await q(i(o, b), { recursive: !0 }), e.info("Creating file: " + r), await w(r, f), await j(r);
79
+ const b = e.split("/").slice(0, -1).join("/");
80
+ b && await q(i(o, b), { recursive: !0 }), t.info("Creating file: " + r), await w(r, f), await j(r);
81
81
  });
82
82
  await Promise.all(y);
83
83
  const S = z(d, o) || ".", m = i(d, ".saltyrc.json"), l = await C(m, "utf-8").catch(() => {
84
84
  });
85
85
  if (l === void 0) {
86
- e.info("Creating file: " + m);
86
+ t.info("Creating file: " + m);
87
87
  const f = JSON.stringify({
88
88
  $schema: "./node_modules/@salty-css/core/.saltyrc.schema.json",
89
89
  info: "This file is used to define projects and their configurations for Salty CSS cli. Do not delete, modify or add this file to .gitignore.",
@@ -97,164 +97,164 @@ async function kt() {
97
97
  }, null, 2);
98
98
  await w(m, f), await j(m);
99
99
  } else {
100
- const t = JSON.parse(l), f = (t == null ? void 0 : t.projects) || [];
101
- if (f.findIndex((n) => n.dir === S) === -1) {
102
- f.push({ dir: S, framework: "react" }), t.projects = [...f];
103
- const n = JSON.stringify(t, null, 2);
104
- n !== l && (e.info("Edit file: " + m), await w(m, n), await j(m));
100
+ const e = JSON.parse(l), f = (e == null ? void 0 : e.projects) || [];
101
+ if (f.findIndex((s) => s.dir === S) === -1) {
102
+ f.push({ dir: S, framework: "react" }), e.projects = [...f];
103
+ const s = JSON.stringify(e, null, 2);
104
+ s !== l && (t.info("Edit file: " + m), await w(m, s), await j(m));
105
105
  }
106
106
  }
107
- const P = i(d, ".gitignore"), U = await C(P, "utf-8").catch(() => {
107
+ const k = i(d, ".gitignore"), U = await C(k, "utf-8").catch(() => {
108
108
  });
109
- U !== void 0 && (U.includes("saltygen") || (e.info("Edit file: " + P), await w(P, U + `
109
+ U !== void 0 && (U.includes("saltygen") || (t.info("Edit file: " + k), await w(k, U + `
110
110
 
111
111
  # Salty-CSS
112
112
  saltygen
113
113
  `)));
114
114
  const $ = ["src", "public", "assets", "styles", "css", "app"], M = ["styles", "css", "app", "pages"], B = ["index", "styles", "main", "global", "globals"], R = [".css", ".scss", ".sass"], D = await (async () => {
115
- if (g) return g;
116
- for (const t of $)
115
+ if (u) return u;
116
+ for (const e of $)
117
117
  for (const f of B)
118
118
  for (const r of R) {
119
- const n = i(o, t, f + r);
120
- if (await C(n, "utf-8").catch(() => {
121
- }) !== void 0) return z(o, n);
119
+ const s = i(o, e, f + r);
120
+ if (await C(s, "utf-8").catch(() => {
121
+ }) !== void 0) return z(o, s);
122
122
  for (const T of M) {
123
- const L = i(o, t, T, f + r);
123
+ const L = i(o, e, T, f + r);
124
124
  if (await C(L, "utf-8").catch(() => {
125
125
  }) !== void 0) return z(o, L);
126
126
  }
127
127
  }
128
128
  })();
129
129
  if (D) {
130
- const t = i(o, D), f = await C(t, "utf-8").catch(() => {
130
+ const e = i(o, D), f = await C(e, "utf-8").catch(() => {
131
131
  });
132
132
  if (f !== void 0 && !f.includes("saltygen")) {
133
- const n = i(t, ".."), T = `@import '${z(n, i(o, "saltygen/index.css"))}';`;
134
- e.info("Adding global import statement to CSS file: " + t), await w(t, T + `
135
- ` + f), await j(t);
133
+ const s = i(e, ".."), T = `@import '${z(s, i(o, "saltygen/index.css"))}';`;
134
+ t.info("Adding global import statement to CSS file: " + e), await w(e, T + `
135
+ ` + f), await j(e);
136
136
  }
137
137
  } else
138
- e.warn("Could not find a CSS file to import the generated CSS. Please add it manually.");
139
- const it = {
138
+ t.warn("Could not find a CSS file to import the generated CSS. Please add it manually.");
139
+ const ie = {
140
140
  projectJs: i(o, "eslint.config.js"),
141
141
  rootJs: i(d, "eslint.config.js"),
142
142
  projectMjs: i(o, "eslint.config.mjs"),
143
143
  rootMjs: i(d, "eslint.config.mjs"),
144
144
  projectJson: i(o, ".eslintrc.json"),
145
145
  rootJson: i(d, ".eslintrc.json")
146
- }, x = Object.values(it).find((t) => K(t));
147
- if (x) {
146
+ }, v = Object.values(ie).find((e) => K(e));
147
+ if (v) {
148
148
  p || await E(A.eslintConfigCore);
149
- const t = await C(x, "utf-8").catch(() => {
149
+ const e = await C(v, "utf-8").catch(() => {
150
150
  });
151
- if (!t) return h("Could not read ESLint config file.");
152
- if (!t.includes("salty-css"))
153
- if (e.info("Edit file: " + x), x.endsWith("js")) {
154
- let n = `import saltyCss from "@salty-css/eslint-config-core/flat";
155
- ${t}`;
156
- t.includes("typescript-eslint") ? n.includes(".config(") ? n = n.replace(".config(", ".config(saltyCss,") : e.warn("Could not find the correct place to add the Salty-CSS config for ESLint. Please add it manually.") : n.includes("export default [") ? n = n.replace("export default [", "export default [ saltyCss,") : n.includes("eslintConfig = [") ? n = n.replace("eslintConfig = [", "eslintConfig = [ saltyCss,") : e.warn("Could not find the correct place to add the Salty-CSS config for ESLint. Please add it manually."), await w(x, n), await j(x);
151
+ if (!e) return h("Could not read ESLint config file.");
152
+ if (!e.includes("salty-css"))
153
+ if (t.info("Edit file: " + v), v.endsWith("js")) {
154
+ let s = `import saltyCss from "@salty-css/eslint-config-core/flat";
155
+ ${e}`;
156
+ e.includes("typescript-eslint") ? s.includes(".config(") ? s = s.replace(".config(", ".config(saltyCss,") : t.warn("Could not find the correct place to add the Salty-CSS config for ESLint. Please add it manually.") : s.includes("export default [") ? s = s.replace("export default [", "export default [ saltyCss,") : s.includes("eslintConfig = [") ? s = s.replace("eslintConfig = [", "eslintConfig = [ saltyCss,") : t.warn("Could not find the correct place to add the Salty-CSS config for ESLint. Please add it manually."), await w(v, s), await j(v);
157
157
  } else {
158
- const r = JSON.parse(t);
158
+ const r = JSON.parse(e);
159
159
  r.extends || (r.extends = []), r.extends.push("@salty-css/core");
160
- const n = JSON.stringify(r, null, 2);
161
- await w(x, n), await j(x);
160
+ const s = JSON.stringify(r, null, 2);
161
+ await w(v, s), await j(v);
162
162
  }
163
163
  }
164
164
  const _ = i(o, "vite.config.ts"), V = await C(_, "utf-8").catch(() => {
165
165
  });
166
166
  if (V !== void 0 && !V.includes("saltyPlugin")) {
167
- e.info("Edit file: " + _);
167
+ t.info("Edit file: " + _);
168
168
  const f = `import { saltyPlugin } from '@salty-css/vite';
169
- `, n = V.replace(/(plugins: \[)/, `$1
169
+ `, s = V.replace(/(plugins: \[)/, `$1
170
170
  saltyPlugin(__dirname),`);
171
- p || await E(`-D ${A.vite}`), e.info("Adding Salty-CSS plugin to Vite config..."), await w(_, f + n), await j(_);
171
+ p || await E(`-D ${A.vite}`), t.info("Adding Salty-CSS plugin to Vite config..."), await w(_, f + s), await j(_);
172
172
  }
173
- const W = ["next.config.js", "next.config.cjs", "next.config.ts", "next.config.mjs"].map((t) => i(o, t)).find((t) => K(t));
173
+ const W = ["next.config.js", "next.config.cjs", "next.config.ts", "next.config.mjs"].map((e) => i(o, e)).find((e) => K(e));
174
174
  if (W) {
175
- let t = await C(W, "utf-8").catch(() => {
175
+ let e = await C(W, "utf-8").catch(() => {
176
176
  });
177
- if (t !== void 0 && !t.includes("withSaltyCss")) {
177
+ if (e !== void 0 && !e.includes("withSaltyCss")) {
178
178
  let r = !1;
179
- /\splugins([^=]*)=[^[]\[/.test(t) && !r && (t = t.replace(/\splugins([^=]*)=[^[]\[/, (L, I) => ` plugins${I}= [withSaltyCss,`), r = !0);
180
- const b = t.includes("module.exports"), T = b ? `const { withSaltyCss } = require('@salty-css/next');
179
+ /\splugins([^=]*)=[^[]\[/.test(e) && !r && (e = e.replace(/\splugins([^=]*)=[^[]\[/, (L, I) => ` plugins${I}= [withSaltyCss,`), r = !0);
180
+ const b = e.includes("module.exports"), T = b ? `const { withSaltyCss } = require('@salty-css/next');
181
181
  ` : `import { withSaltyCss } from '@salty-css/next';
182
182
  `;
183
- b && !r ? (t = t.replace(/module.exports = ([^;]+)/, (L, I) => `module.exports = withSaltyCss(${I})`), r = !0) : r || (t = t.replace(/export default ([^;]+)/, (L, I) => `export default withSaltyCss(${I})`)), p || await E(`-D ${A.next}`), e.info("Adding Salty-CSS plugin to Next.js config..."), await w(W, T + t), await j(W);
183
+ b && !r ? (e = e.replace(/module.exports = ([^;]+)/, (L, I) => `module.exports = withSaltyCss(${I})`), r = !0) : r || (e = e.replace(/export default ([^;]+)/, (L, I) => `export default withSaltyCss(${I})`)), p || await E(`-D ${A.next}`), t.info("Adding Salty-CSS plugin to Next.js config..."), await w(W, T + e), await j(W);
184
184
  }
185
185
  }
186
- const at = await O().catch(() => h("Could not read package.json file.")).then((t) => (t.scripts || (t.scripts = {}), t.scripts.prepare ? t.scripts.prepare.includes("salty-css") || (e.info("Edit file: " + J), t.scripts.prepare = t.scripts.prepare + " && npx salty-css build") : (e.info("Edit file: " + J), t.scripts.prepare = "npx salty-css build"), t));
187
- await nt(at), e.info("Running the build to generate initial CSS..."), await et(o), e.info("🎉 Salty CSS project initialized successfully!"), e.info("Next steps:"), e.info("1. Configure variables and templates in `salty.config.ts`"), e.info("2. Create a new component with `npx salty-css generate [component-name]`"), e.info("3. Run `npx salty-css build` to generate the CSS"), e.info("4. Read about the features in the documentation: https://salty-css.dev"), e.info("5. Star the project on GitHub: https://github.com/margarita-form/salty-css ⭐");
188
- }), u.command("build [directory]").alias("b").description("Build the Salty-CSS project.").option("-d, --dir <dir>", "Project directory to build the project in.").action(async function(s = X) {
189
- e.info("Building the Salty-CSS project...");
190
- const { dir: a = s } = this.opts();
186
+ const ae = await O().catch(() => h("Could not read package.json file.")).then((e) => (e.scripts || (e.scripts = {}), e.scripts.prepare ? e.scripts.prepare.includes("salty-css") || (t.info("Edit file: " + J), e.scripts.prepare = e.scripts.prepare + " && npx salty-css build") : (t.info("Edit file: " + J), e.scripts.prepare = "npx salty-css build"), e));
187
+ await se(ae), t.info("Running the build to generate initial CSS..."), await te(o), t.info("🎉 Salty CSS project initialized successfully!"), t.info("Next steps:"), t.info("1. Configure variables and templates in `salty.config.ts`"), t.info("2. Create a new component with `npx salty-css generate [component-name]`"), t.info("3. Run `npx salty-css build` to generate the CSS"), t.info("4. Read about the features in the documentation: https://salty-css.dev"), t.info("5. Star the project on GitHub: https://github.com/margarita-form/salty-css ⭐");
188
+ }), g.command("build [directory]").alias("b").description("Build the Salty-CSS project.").option("-d, --dir <dir>", "Project directory to build the project in.").action(async function(n = X) {
189
+ t.info("Building the Salty-CSS project...");
190
+ const { dir: a = n } = this.opts();
191
191
  if (!a) return h("Project directory must be provided. Add it as the first argument after build command or use the --dir option.");
192
192
  const c = G(a);
193
- await et(c);
194
- }), u.command("generate [file] [directory]").alias("g").description("Generate a new component file.").option("-f, --file <file>", "File to generate.").option("-d, --dir <dir>", "Project directory to generate the file in.").option("-t, --tag <tag>", "HTML tag of the component.", "div").option("-n, --name <name>", "Name of the component.").option("-c, --className <className>", "CSS class of the component.").option("-r, --reactComponent", "Generate a React component as well.").action(async function(s, a = X) {
195
- const { file: c = s, dir: g = a, tag: p, name: d, className: o, reactComponent: H = !1 } = this.opts();
193
+ await te(c);
194
+ }), g.command("generate [file] [directory]").alias("g").description("Generate a new component file.").option("-f, --file <file>", "File to generate.").option("-d, --dir <dir>", "Project directory to generate the file in.").option("-t, --tag <tag>", "HTML tag of the component.", "div").option("-n, --name <name>", "Name of the component.").option("-c, --className <className>", "CSS class of the component.").option("-r, --reactComponent", "Generate a React component as well.").action(async function(n, a = X) {
195
+ const { file: c = n, dir: u = a, tag: p, name: d, className: o, reactComponent: H = !1 } = this.opts();
196
196
  if (!c) return h("File to generate must be provided. Add it as the first argument after generate command or use the --file option.");
197
- if (!g) return h("Project directory must be provided. Add it as the second argument after generate command or use the --dir option.");
198
- const y = G(g), S = c.split("/").slice(0, -1).join("/");
197
+ if (!u) return h("Project directory must be provided. Add it as the second argument after generate command or use the --dir option.");
198
+ const y = G(u), S = c.split("/").slice(0, -1).join("/");
199
199
  S && await q(i(y, S), { recursive: !0 });
200
- const m = i(y, c), l = rt(m);
200
+ const m = i(y, c), l = re(m);
201
201
  l.ext || (l.ext = ".ts"), l.name.endsWith(".css") || (l.name = l.name + ".css"), l.base = l.name + l.ext;
202
- const P = tt(l);
203
- if (await C(P, "utf-8").catch(() => {
202
+ const k = ee(l);
203
+ if (await C(k, "utf-8").catch(() => {
204
204
  }) !== void 0) {
205
- e.error("File already exists:", P);
205
+ t.error("File already exists:", k);
206
206
  return;
207
207
  }
208
- let $ = lt(d || l.base.replace(/\.css\.\w+$/, ""));
208
+ let $ = le(d || l.base.replace(/\.css\.\w+$/, ""));
209
209
  if (H) {
210
210
  const B = $ + "Component";
211
211
  $ = $ + "Wrapper";
212
- const R = l.base.replace(/\.css\.\w+$/, ""), { content: Z } = await k("react/react-vanilla-file.ts", { tag: p, componentName: B, styledComponentName: $, className: o, fileName: R });
212
+ const R = l.base.replace(/\.css\.\w+$/, ""), { content: Z } = await x("react/react-vanilla-file.ts", { tag: p, componentName: B, styledComponentName: $, className: o, fileName: R });
213
213
  l.name = R.replace(/\.css$/, ""), l.ext = ".tsx", l.base = l.name + l.ext;
214
- const D = tt(l);
215
- e.info("Generating a new file: " + D), await w(D, Z), await j(D);
214
+ const D = ee(l);
215
+ t.info("Generating a new file: " + D), await w(D, Z), await j(D);
216
216
  }
217
- const { content: M } = await k("react/react-styled-file.ts", { tag: p, name: $, className: o });
218
- e.info("Generating a new file: " + P), await w(P, M), await j(P);
217
+ const { content: M } = await x("react/react-styled-file.ts", { tag: p, name: $, className: o });
218
+ t.info("Generating a new file: " + k), await w(k, M), await j(k);
219
219
  });
220
220
  const Y = async () => {
221
- const s = i(process.cwd(), "package.json"), a = await O(s).catch((p) => h(p));
221
+ const n = i(process.cwd(), "package.json"), a = await O(n).catch((p) => h(p));
222
222
  if (!a) return h("Could not read package.json file.");
223
- const c = { ...a.dependencies, ...a.devDependencies }, g = Object.entries(c).filter(([p]) => p === "salty-css" || p.startsWith("@salty-css/"));
224
- return g.length ? g : h(
225
- "No Salty-CSS packages found in package.json. Make sure you are running update command in the same directory! Used package.json path: " + s
223
+ const c = { ...a.dependencies, ...a.devDependencies }, u = Object.entries(c).filter(([p]) => p === "salty-css" || p.startsWith("@salty-css/"));
224
+ return u.length ? u : h(
225
+ "No Salty-CSS packages found in package.json. Make sure you are running update command in the same directory! Used package.json path: " + n
226
226
  );
227
227
  };
228
- u.command("update [version]").alias("up").description("Update Salty-CSS packages to the latest or specified version.").option("-v, --version <version>", "Version to update to.").option("--legacy-peer-deps <legacyPeerDeps>", "Use legacy peer dependencies (not recommended).", !1).action(async function(s = "latest") {
229
- const { legacyPeerDeps: a, version: c = s } = this.opts(), g = await Y();
230
- if (!g) return h("Could not update Salty-CSS packages as any were found in package.json.");
231
- const p = g.map(([y]) => c === "@" ? `${y}@${N.version}` : `${y}@${c.replace(/^@/, "")}`);
232
- a ? (e.warn("Using legacy peer dependencies to update packages."), await E(...p, "--legacy-peer-deps")) : await E(...p);
228
+ g.command("update [version]").alias("up").description("Update Salty-CSS packages to the latest or specified version.").option("-v, --version <version>", "Version to update to.").option("--legacy-peer-deps <legacyPeerDeps>", "Use legacy peer dependencies (not recommended).", !1).action(async function(n = "latest") {
229
+ const { legacyPeerDeps: a, version: c = n } = this.opts(), u = await Y();
230
+ if (!u) return h("Could not update Salty-CSS packages as any were found in package.json.");
231
+ const p = u.map(([y]) => c === "@" ? `${y}@${N.version}` : `${y}@${c.replace(/^@/, "")}`);
232
+ a ? (t.warn("Using legacy peer dependencies to update packages."), await E(...p, "--legacy-peer-deps")) : await E(...p);
233
233
  const d = await Y();
234
234
  if (!d) return h("Something went wrong while reading the updated packages.");
235
235
  const o = d.reduce((y, [S, m]) => (y[m] || (y[m] = []), y[m].push(S), y), {});
236
236
  if (Object.keys(o).length === 1) {
237
237
  const S = Object.keys(o)[0].replace(/^\^/, "");
238
- e.info(`Updated to all Salty CSS packages successfully to ${S}`);
238
+ t.info(`Updated to all Salty CSS packages successfully to ${S}`);
239
239
  } else
240
240
  for (const [y, S] of Object.entries(o)) {
241
241
  const m = y.replace(/^\^/, "");
242
- e.info(`Updated to ${m}: ${S.join(", ")}`);
242
+ t.info(`Updated to ${m}: ${S.join(", ")}`);
243
243
  }
244
- }), u.option("-v, --version", "Show the current version of Salty-CSS.").action(async function() {
245
- const s = await Q();
246
- e.info("CLI is running: " + s.version);
244
+ }), g.option("-v, --version", "Show the current version of Salty-CSS.").action(async function() {
245
+ const n = await Q();
246
+ t.info("CLI is running: " + n.version);
247
247
  const a = i(process.cwd(), "package.json"), c = await O(a).catch((d) => h(d));
248
248
  if (!c) return;
249
- const g = { ...c.dependencies, ...c.devDependencies }, p = Object.keys(g).filter((d) => d === "salty-css" || d.startsWith("@salty-css/"));
249
+ const u = { ...c.dependencies, ...c.devDependencies }, p = Object.keys(u).filter((d) => d === "salty-css" || d.startsWith("@salty-css/"));
250
250
  if (!p.length)
251
251
  return h(
252
252
  "No Salty-CSS packages found in package.json. Make sure you are running update command in the same directory! Used package.json path: " + a
253
253
  );
254
254
  for (const d of p)
255
- e.info(`${d}: ${g[d]}`);
256
- }), u.parseAsync(process.argv);
255
+ t.info(`${d}: ${u[d]}`);
256
+ }), g.parseAsync(process.argv);
257
257
  }
258
258
  export {
259
- kt as main
259
+ xe as main
260
260
  };
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("esbuild");require("child_process");require("../dash-case-DKzpenwY.cjs");require("path");require("fs");require("fs/promises");require("../parse-templates-C1-wQz7G.cjs");const e=require("../index-Cj4Em07G.cjs");exports.compileSaltyFile=e.compileSaltyFile;exports.generateConfigStyles=e.generateConfigStyles;exports.generateCss=e.generateCss;exports.generateFile=e.generateFile;exports.isSaltyFile=e.isSaltyFile;exports.minimizeFile=e.minimizeFile;exports.saltyFileExtensions=e.saltyFileExtensions;exports.saltyFileRegExp=e.saltyFileRegExp;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("esbuild");require("child_process");require("../dash-case-DKzpenwY.cjs");require("path");require("fs");require("fs/promises");require("../parse-templates-C1-wQz7G.cjs");const e=require("../index-DckDeOOE.cjs");exports.compileSaltyFile=e.compileSaltyFile;exports.generateConfigStyles=e.generateConfigStyles;exports.generateCss=e.generateCss;exports.generateFile=e.generateFile;exports.isSaltyFile=e.isSaltyFile;exports.minimizeFile=e.minimizeFile;exports.saltyFileExtensions=e.saltyFileExtensions;exports.saltyFileRegExp=e.saltyFileRegExp;
package/compiler/index.js CHANGED
@@ -4,8 +4,8 @@ import "../dash-case-DMQMcCO6.js";
4
4
  import "path";
5
5
  import "fs";
6
6
  import "fs/promises";
7
- import "../parse-templates-BNINfXOG.js";
8
- import { d as p, c as n, g, e as F, i as y, m as x, s as S, b as c } from "../index-BYjQglAA.js";
7
+ import "../parse-templates-wUig7ACb.js";
8
+ import { d as p, c as n, g, e as F, i as y, m as x, s as S, b as c } from "../index-PIN4uCyt.js";
9
9
  export {
10
10
  p as compileSaltyFile,
11
11
  n as generateConfigStyles,
@@ -1 +1 @@
1
- "use strict";var m=Object.defineProperty;var l=(a,t,s)=>t in a?m(a,t,{enumerable:!0,configurable:!0,writable:!0,value:s}):a[t]=s;var o=(a,t,s)=>l(a,typeof t!="symbol"?t+"":t,s);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("../dash-case-DKzpenwY.cjs"),p=require("../parse-templates-C1-wQz7G.cjs");class g{constructor(t,s){o(this,"_isProd");o(this,"_callerName");o(this,"_context");this.tagName=t,this.params=s}get hash(){return u.toHash(this.params.base||this.params)}get priority(){var t;return typeof this.tagName=="function"||typeof this.tagName=="object"?(((t=this.tagName.generator)==null?void 0:t.priority)||0)+1:0}get classNames(){const t=[this.hash],{className:s}=this.params;return s&&t.push(s),t.join(" ")}get cssClassName(){return this.hash}get cssDisplayNameVar(){return`--${this.hash}-display-name: ${this._callerName};`}get templateKeys(){var t;return(t=this._context)!=null&&t.config.templates?p.getTemplateKeys(this._context.config.templates):[]}get css(){var e;const{base:t={},variants:s={},compoundVariants:i=[]}=this.params,r={...t,variants:s,compoundVariants:i};return p.parseStyles(r,`.${this.cssClassName}`,this.priority,(e=this._context)==null?void 0:e.config)}get props(){const{element:t}=this.params,s=this.params.variants?Object.keys(this.params.variants).map(e=>{var n;const c=(n=this.params.defaultVariants)==null?void 0:n[e];return c!==void 0?`${e}=${String(c)}`:e}):void 0,i=new Set([]),r=/\{props\.([\w\d]+)\}/gi.exec(JSON.stringify(this.params.base));return r&&r.forEach((e,c,n)=>{const h=n.at(1);h&&i.add(h)}),{element:t,variantKeys:s,propValueKeys:[...i],attr:{"data-component-name":this._isProd?void 0:this._callerName}}}_withBuildContext(t){this._context=t;const{name:s,config:i,prod:r}=t;return this._isProd=r,this._callerName=s,this}}exports.StyleComponentGenerator=g;
1
+ "use strict";var y=Object.defineProperty;var g=(s,t,e)=>t in s?y(s,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):s[t]=e;var o=(s,t,e)=>g(s,typeof t!="symbol"?t+"":t,e);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("../dash-case-DKzpenwY.cjs"),d=require("../parse-templates-C1-wQz7G.cjs");class N{constructor(t,e){o(this,"_isProd");o(this,"_callerName");o(this,"_context");this.tagName=t,this.params=e}get hash(){return f.toHash(this.params.base||this.params)}get priority(){var t;return typeof this.tagName=="function"||typeof this.tagName=="object"?(((t=this.tagName.generator)==null?void 0:t.priority)||0)+1:0}get classNames(){const t=[this.hash],{className:e}=this.params;return e&&t.push(e),t.join(" ")}get cssClassName(){return this.hash}get cssDisplayNameVar(){return`--${this.hash}-display-name: ${this._callerName};`}get templateKeys(){var t;return(t=this._context)!=null&&t.config.templates?d.getTemplateKeys(this._context.config.templates):[]}get css(){var a;const{base:t={},variants:e={},compoundVariants:n=[]}=this.params,i={...t,variants:e,compoundVariants:n};return d.parseStyles(i,`.${this.cssClassName}`,this.priority,(a=this._context)==null?void 0:a.config)}get props(){const{element:t,variants:e={},compoundVariants:n=[],defaultVariants:i={}}=this.params,a=new Set([]),h=r=>{const c=i[r];c!==void 0?a.add(`${r}=${String(c)}`):a.add(r)};Object.keys(e).forEach(h),n.map(r=>Object.keys(r).forEach(h));const p=new Set([]),m=/\{props\.([\w\d]+)\}/gi.exec(JSON.stringify(this.params.base));return m&&m.forEach((r,c,u)=>{const l=u.at(1);l&&p.add(l)}),{element:t,variantKeys:[...a],propValueKeys:[...p],attr:{"data-component-name":this._isProd?void 0:this._callerName}}}_withBuildContext(t){this._context=t;const{name:e,config:n,prod:i}=t;return this._isProd=i,this._callerName=e,this}}exports.StyleComponentGenerator=N;
@@ -1,17 +1,17 @@
1
- var p = Object.defineProperty;
2
- var m = (e, t, s) => t in e ? p(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s;
3
- var n = (e, t, s) => m(e, typeof t != "symbol" ? t + "" : t, s);
4
- import { t as l } from "../dash-case-DMQMcCO6.js";
5
- import { g, p as u } from "../parse-templates-BNINfXOG.js";
6
- class N {
1
+ var u = Object.defineProperty;
2
+ var f = (e, t, s) => t in e ? u(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s;
3
+ var o = (e, t, s) => f(e, typeof t != "symbol" ? t + "" : t, s);
4
+ import { t as g } from "../dash-case-DMQMcCO6.js";
5
+ import { g as y, p as N } from "../parse-templates-wUig7ACb.js";
6
+ class b {
7
7
  constructor(t, s) {
8
- n(this, "_isProd");
9
- n(this, "_callerName");
10
- n(this, "_context");
8
+ o(this, "_isProd");
9
+ o(this, "_callerName");
10
+ o(this, "_context");
11
11
  this.tagName = t, this.params = s;
12
12
  }
13
13
  get hash() {
14
- return l(this.params.base || this.params);
14
+ return g(this.params.base || this.params);
15
15
  }
16
16
  get priority() {
17
17
  var t;
@@ -29,26 +29,27 @@ class N {
29
29
  }
30
30
  get templateKeys() {
31
31
  var t;
32
- return (t = this._context) != null && t.config.templates ? g(this._context.config.templates) : [];
32
+ return (t = this._context) != null && t.config.templates ? y(this._context.config.templates) : [];
33
33
  }
34
34
  get css() {
35
35
  var a;
36
- const { base: t = {}, variants: s = {}, compoundVariants: i = [] } = this.params, r = { ...t, variants: s, compoundVariants: i };
37
- return u(r, `.${this.cssClassName}`, this.priority, (a = this._context) == null ? void 0 : a.config);
36
+ const { base: t = {}, variants: s = {}, compoundVariants: n = [] } = this.params, i = { ...t, variants: s, compoundVariants: n };
37
+ return N(i, `.${this.cssClassName}`, this.priority, (a = this._context) == null ? void 0 : a.config);
38
38
  }
39
39
  get props() {
40
- const { element: t } = this.params, s = this.params.variants ? Object.keys(this.params.variants).map((a) => {
41
- var o;
42
- const c = (o = this.params.defaultVariants) == null ? void 0 : o[a];
43
- return c !== void 0 ? `${a}=${String(c)}` : a;
44
- }) : void 0, i = /* @__PURE__ */ new Set([]), r = /\{props\.([\w\d]+)\}/gi.exec(JSON.stringify(this.params.base));
45
- return r && r.forEach((a, c, o) => {
46
- const h = o.at(1);
47
- h && i.add(h);
40
+ const { element: t, variants: s = {}, compoundVariants: n = [], defaultVariants: i = {} } = this.params, a = /* @__PURE__ */ new Set([]), h = (r) => {
41
+ const c = i[r];
42
+ c !== void 0 ? a.add(`${r}=${String(c)}`) : a.add(r);
43
+ };
44
+ Object.keys(s).forEach(h), n.map((r) => Object.keys(r).forEach(h));
45
+ const p = /* @__PURE__ */ new Set([]), m = /\{props\.([\w\d]+)\}/gi.exec(JSON.stringify(this.params.base));
46
+ return m && m.forEach((r, c, d) => {
47
+ const l = d.at(1);
48
+ l && p.add(l);
48
49
  }), {
49
50
  element: t,
50
- variantKeys: s,
51
- propValueKeys: [...i],
51
+ variantKeys: [...a],
52
+ propValueKeys: [...p],
52
53
  attr: {
53
54
  "data-component-name": this._isProd ? void 0 : this._callerName
54
55
  }
@@ -56,10 +57,10 @@ class N {
56
57
  }
57
58
  _withBuildContext(t) {
58
59
  this._context = t;
59
- const { name: s, config: i, prod: r } = t;
60
- return this._isProd = r, this._callerName = s, this;
60
+ const { name: s, config: n, prod: i } = t;
61
+ return this._isProd = i, this._callerName = s, this;
61
62
  }
62
63
  }
63
64
  export {
64
- N as StyleComponentGenerator
65
+ b as StyleComponentGenerator
65
66
  };
@@ -1,21 +1,21 @@
1
- "use strict";const te=require("esbuild"),se=require("child_process"),N=require("./dash-case-DKzpenwY.cjs"),o=require("path"),a=require("fs"),H=require("fs/promises"),O=require("./parse-templates-C1-wQz7G.cjs"),M=require("winston");var q=typeof document<"u"?document.currentScript:null;function ne(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const s=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,s.get?s:{enumerable:!0,get:()=>e[n]})}}return t.default=e,Object.freeze(t)}const U=ne(te),G=e=>{if(!e||e==="/")throw new Error("Could not find package.json file");const t=o.join(e,"package.json");return a.existsSync(t)?t:G(o.join(e,".."))},oe=async e=>{const t=G(e);return await H.readFile(t,"utf-8").then(JSON.parse).catch(()=>{})},ie=async e=>{const t=await oe(e);if(t)return t.type};let v;const L=async e=>{if(v)return v;const t=await ie(e);return t==="module"?v="esm":(t==="commonjs"||(typeof document>"u"?require("url").pathToFileURL(__filename).href:q&&q.tagName.toUpperCase()==="SCRIPT"&&q.src||new URL("index-Cj4Em07G.cjs",document.baseURI).href).endsWith(".cjs"))&&(v="cjs"),v||"esm"},V=M.createLogger({level:"debug",format:M.format.combine(M.format.colorize(),M.format.cli()),transports:[new M.transports.Console({})]}),re=e=>{V.error(e)},I={externalModules:[]},W=e=>{if(I.externalModules.length>0)return I.externalModules;const t=o.join(e,"salty.config.ts"),s=a.readFileSync(t,"utf8").match(/externalModules:\s?\[(.*)\]/);if(!s)return[];const i=s[1].split(",").map(p=>p.replace(/['"`]/g,"").trim());return I.externalModules=i,i},R=e=>o.join(e,"./saltygen"),K=["salty","css","styles","styled"],A=(e=[])=>new RegExp(`\\.(${[...K,...e].join("|")})\\.`),_=(e,t=[])=>A(t).test(e),ce=async e=>{const t=R(e),n=o.join(e,"salty.config.ts"),s=o.join(t,"salty.config.js"),i=await L(e),p=W(e);await U.build({entryPoints:[n],minify:!0,treeShaking:!0,bundle:!0,outfile:s,format:i,external:p});const S=Date.now(),{config:f}=await import(`${s}?t=${S}`);return f},X=async e=>{const t=await ce(e),n=new Set,s=(l,u=[])=>l?Object.entries(l).flatMap(([g,d])=>{if(!d)return;if(typeof d=="object")return s(d,[...u,g]);const C=[...u,g].join(".");n.add(`"${C}"`);const h=[...u.map(N.dashCase),N.dashCase(g)].join("-"),{result:j}=O.parseValueTokens(d);return`--${h}: ${j};`}):[],i=l=>l?Object.entries(l).flatMap(([u,g])=>{const d=s(g);return u==="base"?d.join(""):`${u} { ${d.join("")} }`}):[],p=l=>l?Object.entries(l).flatMap(([u,g])=>Object.entries(g).flatMap(([d,C])=>{const h=s(C,[u]),j=`.${u}-${d}, [data-${u}="${d}"]`,T=h.join("");return`${j} { ${T} }`})):[],S=s(t.variables),f=i(t.responsiveVariables),b=p(t.conditionalVariables),r=R(e),P=o.join(r,"css/variables.css"),y=`:root { ${S.join("")} ${f.join("")} } ${b.join("")}`;a.writeFileSync(P,y);const w=o.join(r,"css/global.css"),F=O.parseStyles(t.global,"");a.writeFileSync(w,F);const c=o.join(r,"css/templates.css"),m=O.parseTemplates(t.templates),x=O.getTemplateTypes(t.templates);a.writeFileSync(c,m);const $=o.join(r,"types/css-tokens.d.ts"),D=`
1
+ "use strict";const te=require("esbuild"),se=require("child_process"),O=require("./dash-case-DKzpenwY.cjs"),o=require("path"),a=require("fs"),H=require("fs/promises"),V=require("./parse-templates-C1-wQz7G.cjs"),N=require("winston");var q=typeof document<"u"?document.currentScript:null;function ne(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const s=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,s.get?s:{enumerable:!0,get:()=>e[n]})}}return t.default=e,Object.freeze(t)}const U=ne(te),G=e=>{if(!e||e==="/")throw new Error("Could not find package.json file");const t=o.join(e,"package.json");return a.existsSync(t)?t:G(o.join(e,".."))},oe=async e=>{const t=G(e);return await H.readFile(t,"utf-8").then(JSON.parse).catch(()=>{})},ie=async e=>{const t=await oe(e);if(t)return t.type};let E;const L=async e=>{if(E)return E;const t=await ie(e);return t==="module"?E="esm":(t==="commonjs"||(typeof document>"u"?require("url").pathToFileURL(__filename).href:q&&q.tagName.toUpperCase()==="SCRIPT"&&q.src||new URL("index-DckDeOOE.cjs",document.baseURI).href).endsWith(".cjs"))&&(E="cjs"),E||"esm"},v=N.createLogger({level:"debug",format:N.format.combine(N.format.colorize(),N.format.cli()),transports:[new N.transports.Console({})]}),re=e=>{v.error(e)},I={externalModules:[]},W=e=>{if(I.externalModules.length>0)return I.externalModules;const t=o.join(e,"salty.config.ts"),s=a.readFileSync(t,"utf8").match(/externalModules:\s?\[(.*)\]/);if(!s)return[];const i=s[1].split(",").map(u=>u.replace(/['"`]/g,"").trim());return I.externalModules=i,i},R=e=>o.join(e,"./saltygen"),K=["salty","css","styles","styled"],A=(e=[])=>new RegExp(`\\.(${[...K,...e].join("|")})\\.`),_=(e,t=[])=>A(t).test(e),ce=async e=>{const t=R(e),n=o.join(e,"salty.config.ts"),s=o.join(t,"salty.config.js"),i=await L(e),u=W(e);await U.build({entryPoints:[n],minify:!0,treeShaking:!0,bundle:!0,outfile:s,format:i,external:u});const S=Date.now(),{config:f}=await import(`${s}?t=${S}`);return f},X=async e=>{const t=await ce(e),n=new Set,s=(l,p=[])=>l?Object.entries(l).flatMap(([g,d])=>{if(!d)return;if(typeof d=="object")return s(d,[...p,g]);const C=[...p,g].join(".");n.add(`"${C}"`);const h=[...p.map(O.dashCase),O.dashCase(g)].join("-"),{result:j}=V.parseValueTokens(d);return`--${h}: ${j};`}):[],i=l=>l?Object.entries(l).flatMap(([p,g])=>{const d=s(g);return p==="base"?d.join(""):`${p} { ${d.join("")} }`}):[],u=l=>l?Object.entries(l).flatMap(([p,g])=>Object.entries(g).flatMap(([d,C])=>{const h=s(C,[p]),j=`.${p}-${d}, [data-${p}="${d}"]`,T=h.join("");return`${j} { ${T} }`})):[],S=s(t.variables),f=i(t.responsiveVariables),b=u(t.conditionalVariables),r=R(e),P=o.join(r,"css/variables.css"),y=`:root { ${S.join("")} ${f.join("")} } ${b.join("")}`;a.writeFileSync(P,y);const w=o.join(r,"css/global.css"),F=V.parseStyles(t.global,"");a.writeFileSync(w,F);const c=o.join(r,"css/templates.css"),m=V.parseTemplates(t.templates),x=V.getTemplateTypes(t.templates);a.writeFileSync(c,m);const $=o.join(r,"types/css-tokens.d.ts"),D=`
2
2
  // Variable types
3
3
  type VariableTokens = ${[...n].join("|")};
4
4
  type PropertyValueToken = \`{\${VariableTokens}}\`;
5
5
 
6
6
  // Template types
7
7
  type TemplateTokens = {
8
- ${Object.entries(x).map(([l,u])=>`${l}?: ${u}`).join(`
8
+ ${Object.entries(x).map(([l,p])=>`${l}?: ${p}`).join(`
9
9
  `)}
10
10
  }
11
- `;a.writeFileSync($,D)},J=async(e,t,n)=>{const s=N.toHash(t),i=o.join(n,"./temp");a.existsSync(i)||a.mkdirSync(i);const p=o.parse(t);let S=a.readFileSync(t,"utf8");S=S.replace(/styled\([^"'`{,]+,/g,"styled('div',");const f=o.join(n,"js",s+".js"),b=W(e),r=await L(e);await U.build({stdin:{contents:S,sourcefile:p.base,resolveDir:p.dir,loader:"tsx"},minify:!1,treeShaking:!0,bundle:!0,outfile:f,format:r,target:["node20"],keepNames:!0,external:b,packages:"external"});const P=Date.now();return await import(`${f}?t=${P}`)},z=async e=>{const t=R(e),n=o.join(t,"salty.config.js"),{config:s}=await import(n);return s},Y=()=>{try{return process.env.NODE_ENV==="production"}catch{return!1}},ae=async(e,t=Y())=>{try{t?V.info("Generating CSS in production mode! 🔥"):V.info("Generating CSS in development mode! 🚀");const n=[],s=[],i=R(e),p=o.join(i,"index.css");(()=>{a.existsSync(i)&&se.execSync("rm -rf "+i),a.mkdirSync(i),a.mkdirSync(o.join(i,"css")),a.mkdirSync(o.join(i,"types"))})(),await X(e);const f=await z(e);async function b(c,m){const x=["node_modules","saltygen"],$=a.statSync(c);if($.isDirectory()){const k=a.readdirSync(c);if(x.some(l=>c.includes(l)))return;await Promise.all(k.map(l=>b(o.join(c,l),o.join(m,l))))}else if($.isFile()&&_(c)){const D=await J(e,c,i),l=[];Object.entries(D).forEach(([C,h])=>{if(h.isKeyframes&&h.css){const B=`${h.animationName}.css`,Q=`css/${B}`,ee=o.join(i,Q);n.push(B),a.writeFileSync(ee,h.css);return}if(!h.generator)return;const j=h.generator._withBuildContext({name:C,config:f,prod:t}),T=`${j.hash}-${j.priority}.css`;s[j.priority]||(s[j.priority]=[]),s[j.priority].push(T),l.push(T);const E=`css/${T}`,Z=o.join(i,E);a.writeFileSync(Z,j.css)});const u=l.map(C=>`@import url('./${C}');`).join(`
12
- `),g=N.toHash(c,6),d=o.join(i,`css/${g}.css`);a.writeFileSync(d,u)}}await b(e,i);const r=n.map(c=>`@import url('./css/${c}');`).join(`
11
+ `;a.writeFileSync($,D)},J=async(e,t,n)=>{const s=O.toHash(t),i=o.join(n,"./temp");a.existsSync(i)||a.mkdirSync(i);const u=o.parse(t);let S=a.readFileSync(t,"utf8");S=S.replace(/styled\([^"'`{,]+,/g,"styled('div',");const f=o.join(n,"js",s+".js"),b=W(e),r=await L(e);await U.build({stdin:{contents:S,sourcefile:u.base,resolveDir:u.dir,loader:"tsx"},minify:!1,treeShaking:!0,bundle:!0,outfile:f,format:r,target:["node20"],keepNames:!0,external:b,packages:"external"});const P=Date.now();return await import(`${f}?t=${P}`)},z=async e=>{const t=R(e),n=o.join(t,"salty.config.js"),{config:s}=await import(n);return s},Y=()=>{try{return process.env.NODE_ENV==="production"}catch{return!1}},ae=async(e,t=Y())=>{try{t?v.info("Generating CSS in production mode! 🔥"):v.info("Generating CSS in development mode! 🚀");const n=[],s=[],i=R(e),u=o.join(i,"index.css");(()=>{a.existsSync(i)&&se.execSync("rm -rf "+i),a.mkdirSync(i),a.mkdirSync(o.join(i,"css")),a.mkdirSync(o.join(i,"types"))})(),await X(e);const f=await z(e);async function b(c,m){const x=["node_modules","saltygen"],$=a.statSync(c);if($.isDirectory()){const k=a.readdirSync(c);if(x.some(l=>c.includes(l)))return;await Promise.all(k.map(l=>b(o.join(c,l),o.join(m,l))))}else if($.isFile()&&_(c)){const D=await J(e,c,i),l=[];Object.entries(D).forEach(([C,h])=>{if(h.isKeyframes&&h.css){const B=`${h.animationName}.css`,Q=`css/${B}`,ee=o.join(i,Q);n.push(B),a.writeFileSync(ee,h.css);return}if(!h.generator)return;const j=h.generator._withBuildContext({name:C,config:f,prod:t}),T=`${j.hash}-${j.priority}.css`;s[j.priority]||(s[j.priority]=[]),s[j.priority].push(T),l.push(T);const M=`css/${T}`,Z=o.join(i,M);a.writeFileSync(Z,j.css)});const p=l.map(C=>`@import url('./${C}');`).join(`
12
+ `),g=O.toHash(c,6),d=o.join(i,`css/${g}.css`);a.writeFileSync(d,p)}}await b(e,i);const r=n.map(c=>`@import url('./css/${c}');`).join(`
13
13
  `);let F=`@layer l0, l1, l2, l3, l4, l5, l6, l7, l8;
14
14
 
15
15
  ${["variables.css","global.css","templates.css"].filter(c=>{try{return a.readFileSync(o.join(i,"css",c),"utf8").length>0}catch{return!1}}).map(c=>`@import url('./css/${c}');`).join(`
16
16
  `)}
17
17
  ${r}`;if(f.importStrategy!=="component"){const c=s.flat().map(m=>`@import url('./css/${m}');`).join(`
18
- `);F+=c}a.writeFileSync(p,F)}catch(n){console.error(n)}},le=async(e,t)=>{try{const n=[],s=o.join(e,"./saltygen"),i=o.join(s,"index.css");if(_(t)){const S=await z(e),f=await J(e,t,s);Object.entries(f).forEach(([w,F])=>{if(!F.generator)return;const c=F.generator._withBuildContext({name:w,config:S}),m=`${c.hash}-${c.priority}.css`,x=`css/${m}`,$=o.join(s,x);n.push(m),a.writeFileSync($,c.css)});const b=a.readFileSync(i,"utf8").split(`
18
+ `);F+=c}a.writeFileSync(u,F)}catch(n){console.error(n)}},le=async(e,t)=>{try{const n=[],s=o.join(e,"./saltygen"),i=o.join(s,"index.css");if(_(t)){const S=await z(e),f=await J(e,t,s);Object.entries(f).forEach(([w,F])=>{if(!F.generator)return;const c=F.generator._withBuildContext({name:w,config:S}),m=`${c.hash}-${c.priority}.css`,x=`css/${m}`,$=o.join(s,x);n.push(m),a.writeFileSync($,c.css)});const b=a.readFileSync(i,"utf8").split(`
19
19
  `),r=n.map(w=>`@import url('../saltygen/css/${w}');`),y=[...new Set([...b,...r])].join(`
20
- `);a.writeFileSync(i,y)}}catch(n){console.error(n)}},pe=async(e,t,n=Y())=>{try{const s=o.join(e,"./saltygen");if(_(t)){const p=a.readFileSync(t,"utf8");p.replace(/^(?!export\s)const\s.*/gm,y=>`export ${y}`)!==p&&await H.writeFile(t,p);const f=await z(e),b=await J(e,t,s);let r=p;Object.entries(b).forEach(([y,w])=>{var T;if(w.isKeyframes||!w.generator)return;const F=w.generator._withBuildContext({name:y,config:f,prod:n}),c=new RegExp(`\\s${y}[=\\s]+[^()]+styled\\(([^,]+),`,"g").exec(p);if(!c)return console.error("Could not find the original declaration");const m=(T=c.at(1))==null?void 0:T.trim(),x=new RegExp(`\\s${y}[=\\s]+styled\\(`,"g").exec(r);if(!x)return console.error("Could not find the original declaration");const{index:$}=x;let k=!1;const D=setTimeout(()=>k=!0,5e3);let l=0,u=!1,g=0;for(;!u&&!k;){const E=r[$+l];E==="("&&g++,E===")"&&g--,g===0&&E===")"&&(u=!0),l>r.length&&(k=!0),l++}if(!k)clearTimeout(D);else throw new Error("Failed to find the end of the styled call and timed out");const d=$+l,C=r.slice($,d),h=r,j=` ${y} = styled(${m}, "${F.classNames}", ${JSON.stringify(F.props)});`;r=r.replace(C,j),h===r&&console.error("Minimize file failed to change content",{name:y,tagName:m})});const P=N.toHash(t,6);return f.importStrategy==="component"&&(r=`import '../../saltygen/css/${P}.css';
21
- ${r}`),r=r.replace("{ styled }","{ styledClient as styled }"),r=r.replace("@salty-css/react/styled","@salty-css/react/styled-client"),r}}catch(s){console.error("Error in minimizeFile:",s)}};exports.compileSaltyFile=J;exports.generateConfigStyles=X;exports.generateCss=ae;exports.generateFile=le;exports.isSaltyFile=_;exports.logError=re;exports.logger=V;exports.minimizeFile=pe;exports.saltyFileExtensions=K;exports.saltyFileRegExp=A;
20
+ `);a.writeFileSync(i,y)}}catch(n){console.error(n)}},ue=async(e,t,n=Y())=>{try{const s=o.join(e,"./saltygen");if(_(t)){const u=a.readFileSync(t,"utf8");u.replace(/^(?!export\s)const\s.*/gm,y=>`export ${y}`)!==u&&await H.writeFile(t,u);const f=await z(e),b=await J(e,t,s);let r=u;Object.entries(b).forEach(([y,w])=>{var T;if(w.isKeyframes||!w.generator)return;const F=w.generator._withBuildContext({name:y,config:f,prod:n}),c=new RegExp(`\\s${y}[=\\s]+[^()]+styled\\(([^,]+),`,"g").exec(u);if(!c)return console.error("Could not find the original declaration");const m=(T=c.at(1))==null?void 0:T.trim(),x=new RegExp(`\\s${y}[=\\s]+styled\\(`,"g").exec(r);if(!x)return console.error("Could not find the original declaration");const{index:$}=x;let k=!1;const D=setTimeout(()=>k=!0,5e3);let l=0,p=!1,g=0;for(;!p&&!k;){const M=r[$+l];M==="("&&g++,M===")"&&g--,g===0&&M===")"&&(p=!0),l>r.length&&(k=!0),l++}if(!k)clearTimeout(D);else throw new Error("Failed to find the end of the styled call and timed out");const d=$+l,C=r.slice($,d),h=r,j=` ${y} = styled(${m}, "${F.classNames}", ${JSON.stringify(F.props)});`;r=r.replace(C,j),h===r&&console.error("Minimize file failed to change content",{name:y,tagName:m})});const P=O.toHash(t,6);return f.importStrategy==="component"&&(r=`import '../../saltygen/css/${P}.css';
21
+ ${r}`),r=r.replace("{ styled }","{ styledClient as styled }"),r=r.replace("@salty-css/react/styled","@salty-css/react/styled-client"),r}}catch(s){console.error("Error in minimizeFile:",s)}};exports.compileSaltyFile=J;exports.generateConfigStyles=X;exports.generateCss=ae;exports.generateFile=le;exports.isSaltyFile=_;exports.logError=re;exports.logger=v;exports.minimizeFile=ue;exports.saltyFileExtensions=K;exports.saltyFileRegExp=A;
@@ -2,9 +2,9 @@ import * as K from "esbuild";
2
2
  import { execSync as Q } from "child_process";
3
3
  import { t as B, d as H } from "./dash-case-DMQMcCO6.js";
4
4
  import { join as a, parse as tt } from "path";
5
- import { existsSync as I, writeFileSync as x, mkdirSync as V, readFileSync as E, statSync as et, readdirSync as st } from "fs";
5
+ import { existsSync as I, writeFileSync as x, mkdirSync as N, readFileSync as V, statSync as et, readdirSync as st } from "fs";
6
6
  import { readFile as nt, writeFile as ot } from "fs/promises";
7
- import { p as at, a as rt, b as ct, c as it } from "./parse-templates-BNINfXOG.js";
7
+ import { p as at, a as rt, b as ct, c as it } from "./parse-templates-wUig7ACb.js";
8
8
  import { createLogger as lt, format as J, transports as pt } from "winston";
9
9
  const L = (t) => {
10
10
  if (!t || t === "/") throw new Error("Could not find package.json file");
@@ -34,12 +34,12 @@ const q = async (t) => {
34
34
  externalModules: []
35
35
  }, A = (t) => {
36
36
  if (O.externalModules.length > 0) return O.externalModules;
37
- const e = a(t, "salty.config.ts"), s = E(e, "utf8").match(/externalModules:\s?\[(.*)\]/);
37
+ const e = a(t, "salty.config.ts"), s = V(e, "utf8").match(/externalModules:\s?\[(.*)\]/);
38
38
  if (!s) return [];
39
39
  const n = s[1].split(",").map((l) => l.replace(/['"`]/g, "").trim());
40
40
  return O.externalModules = n, n;
41
- }, N = (t) => a(t, "./saltygen"), gt = ["salty", "css", "styles", "styled"], dt = (t = []) => new RegExp(`\\.(${[...gt, ...t].join("|")})\\.`), _ = (t, e = []) => dt(e).test(t), mt = async (t) => {
42
- const e = N(t), c = a(t, "salty.config.ts"), s = a(e, "salty.config.js"), n = await q(t), l = A(t);
41
+ }, v = (t) => a(t, "./saltygen"), gt = ["salty", "css", "styles", "styled"], dt = (t = []) => new RegExp(`\\.(${[...gt, ...t].join("|")})\\.`), _ = (t, e = []) => dt(e).test(t), mt = async (t) => {
42
+ const e = v(t), c = a(t, "salty.config.ts"), s = a(e, "salty.config.js"), n = await q(t), l = A(t);
43
43
  await K.build({
44
44
  entryPoints: [c],
45
45
  minify: !0,
@@ -65,7 +65,7 @@ const q = async (t) => {
65
65
  }) : [], l = (i) => i ? Object.entries(i).flatMap(([p, d]) => Object.entries(d).flatMap(([u, C]) => {
66
66
  const y = s(C, [p]), h = `.${p}-${u}, [data-${p}="${u}"]`, T = y.join("");
67
67
  return `${h} { ${T} }`;
68
- })) : [], b = s(e.variables), f = n(e.responsiveVariables), $ = l(e.conditionalVariables), o = N(t), D = a(o, "css/variables.css"), g = `:root { ${b.join("")} ${f.join("")} } ${$.join("")}`;
68
+ })) : [], b = s(e.variables), f = n(e.responsiveVariables), $ = l(e.conditionalVariables), o = v(t), D = a(o, "css/variables.css"), g = `:root { ${b.join("")} ${f.join("")} } ${$.join("")}`;
69
69
  x(D, g);
70
70
  const w = a(o, "css/global.css"), S = at(e.global, "");
71
71
  x(w, S);
@@ -85,9 +85,9 @@ const q = async (t) => {
85
85
  x(j, P);
86
86
  }, z = async (t, e, c) => {
87
87
  const s = B(e), n = a(c, "./temp");
88
- I(n) || V(n);
88
+ I(n) || N(n);
89
89
  const l = tt(e);
90
- let b = E(e, "utf8");
90
+ let b = V(e, "utf8");
91
91
  b = b.replace(/styled\([^"'`{,]+,/g, "styled('div',");
92
92
  const f = a(c, "js", s + ".js"), $ = A(t), o = await q(t);
93
93
  await K.build({
@@ -110,7 +110,7 @@ const q = async (t) => {
110
110
  const D = Date.now();
111
111
  return await import(`${f}?t=${D}`);
112
112
  }, G = async (t) => {
113
- const e = N(t), c = a(e, "salty.config.js"), { config: s } = await import(c);
113
+ const e = v(t), c = a(e, "salty.config.js"), { config: s } = await import(c);
114
114
  return s;
115
115
  }, U = () => {
116
116
  try {
@@ -121,9 +121,9 @@ const q = async (t) => {
121
121
  }, Ft = async (t, e = U()) => {
122
122
  try {
123
123
  e ? R.info("Generating CSS in production mode! 🔥") : R.info("Generating CSS in development mode! 🚀");
124
- const c = [], s = [], n = N(t), l = a(n, "index.css");
124
+ const c = [], s = [], n = v(t), l = a(n, "index.css");
125
125
  (() => {
126
- I(n) && Q("rm -rf " + n), V(n), V(a(n, "css")), V(a(n, "types"));
126
+ I(n) && Q("rm -rf " + n), N(n), N(a(n, "css")), N(a(n, "types"));
127
127
  })(), await yt(t);
128
128
  const f = await G(t);
129
129
  async function $(r, m) {
@@ -147,7 +147,7 @@ const q = async (t) => {
147
147
  prod: e
148
148
  }), T = `${h.hash}-${h.priority}.css`;
149
149
  s[h.priority] || (s[h.priority] = []), s[h.priority].push(T), i.push(T);
150
- const v = `css/${T}`, X = a(n, v);
150
+ const E = `css/${T}`, X = a(n, E);
151
151
  x(X, h.css);
152
152
  });
153
153
  const p = i.map((C) => `@import url('./${C}');`).join(`
@@ -162,7 +162,7 @@ const q = async (t) => {
162
162
 
163
163
  ${["variables.css", "global.css", "templates.css"].filter((r) => {
164
164
  try {
165
- return E(a(n, "css", r), "utf8").length > 0;
165
+ return V(a(n, "css", r), "utf8").length > 0;
166
166
  } catch {
167
167
  return !1;
168
168
  }
@@ -191,7 +191,7 @@ ${o}`;
191
191
  }), m = `${r.hash}-${r.priority}.css`, F = `css/${m}`, j = a(s, F);
192
192
  c.push(m), x(j, r.css);
193
193
  });
194
- const $ = E(n, "utf8").split(`
194
+ const $ = V(n, "utf8").split(`
195
195
  `), o = c.map((w) => `@import url('../saltygen/css/${w}');`), g = [.../* @__PURE__ */ new Set([...$, ...o])].join(`
196
196
  `);
197
197
  x(n, g);
@@ -203,7 +203,7 @@ ${o}`;
203
203
  try {
204
204
  const s = a(t, "./saltygen");
205
205
  if (_(e)) {
206
- const l = E(e, "utf8");
206
+ const l = V(e, "utf8");
207
207
  l.replace(/^(?!export\s)const\s.*/gm, (g) => `export ${g}`) !== l && await ot(e, l);
208
208
  const f = await G(t), $ = await z(t, e, s);
209
209
  let o = l;
@@ -223,8 +223,8 @@ ${o}`;
223
223
  const P = setTimeout(() => k = !0, 5e3);
224
224
  let i = 0, p = !1, d = 0;
225
225
  for (; !p && !k; ) {
226
- const v = o[j + i];
227
- v === "(" && d++, v === ")" && d--, d === 0 && v === ")" && (p = !0), i > o.length && (k = !0), i++;
226
+ const E = o[j + i];
227
+ E === "(" && d++, E === ")" && d--, d === 0 && E === ")" && (p = !0), i > o.length && (k = !0), i++;
228
228
  }
229
229
  if (!k) clearTimeout(P);
230
230
  else throw new Error("Failed to find the end of the styled call and timed out");
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salty-css/core",
3
- "version": "0.0.1-alpha.113",
3
+ "version": "0.0.1-alpha.115",
4
4
  "main": "./dist/index.js",
5
5
  "module": "./dist/index.mjs",
6
6
  "typings": "./dist/index.d.ts",
@@ -1,95 +1,95 @@
1
1
  import { d as O } from "./dash-case-DMQMcCO6.js";
2
- const N = (t, r) => {
2
+ const N = (t, e) => {
3
3
  if (typeof t != "string") return { result: t };
4
- if (!r) return { result: t };
4
+ if (!e) return { result: t };
5
5
  const s = [];
6
- return Object.values(r).forEach((n) => {
6
+ return Object.values(e).forEach((n) => {
7
7
  const { pattern: o, transform: i } = n;
8
8
  t = t.replace(o, (d) => {
9
9
  const { value: c, css: j } = i(d);
10
10
  return j && s.push(j), c;
11
11
  });
12
12
  }), { result: t, additionalCss: s };
13
- }, P = (t) => typeof t != "string" ? { result: t } : /\{[^{}]+\}/g.test(t) ? { result: t.replace(/\{([^{}]+)\}/g, (...n) => `var(--${O(n[1].replaceAll(".", "-"))})`) } : { result: t }, a = (t, r, s, n) => {
13
+ }, P = (t) => typeof t != "string" ? { result: t } : /\{[^{}]+\}/g.test(t) ? { result: t.replace(/\{([^{}]+)\}/g, (...n) => `var(--${O(n[1].replaceAll(".", "-"))})`) } : { result: t }, a = (t, e, s, n) => {
14
14
  if (!t) return "";
15
- const o = [], i = Object.entries(t).reduce((c, [j, e]) => {
15
+ const o = [], i = Object.entries(t).reduce((c, [j, r]) => {
16
16
  const f = j.trim();
17
- if (typeof e == "function" && (e = e()), typeof e == "object") {
18
- if (!e) return c;
17
+ if (typeof r == "function" && (r = r()), typeof r == "object") {
18
+ if (!r) return c;
19
19
  if (f === "variants")
20
- return Object.entries(e).forEach(([p, u]) => {
20
+ return Object.entries(r).forEach(([p, u]) => {
21
21
  u && Object.entries(u).forEach(([m, b]) => {
22
22
  if (!b) return;
23
- const y = `${r}.${p}-${m}`, l = a(b, y, s);
23
+ const y = `${e}.${p}-${m}`, l = a(b, y, s);
24
24
  o.push(l);
25
25
  });
26
26
  }), c;
27
27
  if (f === "defaultVariants")
28
28
  return c;
29
29
  if (f === "compoundVariants")
30
- return e.forEach((p) => {
31
- const { css: u, ...m } = p, b = Object.entries(m).reduce((l, [w, W]) => `${l}.${w}-${W}`, r), y = a(u, b, s);
30
+ return r.forEach((p) => {
31
+ const { css: u, ...m } = p, b = Object.entries(m).reduce((l, [w, W]) => `${l}.${w}-${W}`, e), y = a(u, b, s);
32
32
  o.push(y);
33
33
  }), c;
34
34
  if (f.startsWith("@")) {
35
- const p = a(e, r, s), u = `${f} {
35
+ const p = a(r, e, s), u = `${f} {
36
36
  ${p.replace(`
37
37
  `, `
38
38
  `)}
39
39
  }`;
40
40
  return o.push(u), c;
41
41
  }
42
- const $ = j.includes("&") ? f.replace("&", r) : f.startsWith(":") ? `${r}${f}` : `${r} ${f}`, h = a(e, $, s);
42
+ const $ = j.includes("&") ? f.replace("&", e) : f.startsWith(":") ? `${e}${f}` : `${e} ${f}`, h = a(r, $, s);
43
43
  return o.push(h), c;
44
44
  }
45
45
  if (n != null && n.templates && n.templates[f]) {
46
- const h = e.split(".").reduce((p, u) => p[u], n.templates[f]);
46
+ const h = r.split(".").reduce((p, u) => p[u], n.templates[f]);
47
47
  if (h) {
48
48
  const p = a(h, "");
49
49
  return `${c}${p}`;
50
50
  }
51
- return console.warn(`Template "${f}" with path of "${e}" was not found in config!`), c;
51
+ return console.warn(`Template "${f}" with path of "${r}" was not found in config!`), c;
52
52
  }
53
53
  const S = f.startsWith("-") ? f : O(f), g = ($, h = ";") => c = `${c}${$}${h}`, T = ($) => g(`${S}:${$}`);
54
- if (typeof e == "number") return T(e);
55
- if (typeof e != "string")
56
- if ("toString" in e) e = e.toString();
54
+ if (typeof r == "number") return T(r);
55
+ if (typeof r != "string")
56
+ if ("toString" in r) r = r.toString();
57
57
  else return c;
58
58
  const { modifiers: V } = n || {}, k = function* () {
59
- yield P(e), yield N(e, V);
59
+ yield P(r), yield N(r, V);
60
60
  }();
61
61
  for (const { result: $, additionalCss: h = [] } of k)
62
- e = $, h.forEach((p) => {
62
+ r = $, h.forEach((p) => {
63
63
  const u = a(p, "");
64
64
  g(u, "");
65
65
  });
66
- return T(e);
66
+ return T(r);
67
67
  }, "");
68
68
  if (!i) return o.join(`
69
69
  `);
70
- if (!r) return i;
70
+ if (!e) return i;
71
71
  let d = "";
72
- return s !== void 0 ? d = `@layer l${s} { ${r} { ${i} } }` : d = `${r} { ${i} }`, [d, ...o].join(`
72
+ return s !== void 0 ? d = `@layer l${s} { ${e} { ${i} } }` : d = `${e} { ${i} }`, [d, ...o].join(`
73
73
  `);
74
- }, _ = (t, r = []) => {
74
+ }, _ = (t, e = []) => {
75
75
  if (!t) return "";
76
76
  const s = [], n = {};
77
77
  if (Object.entries(t).forEach(([o, i]) => {
78
78
  if (typeof i == "object") {
79
79
  if (!i) return;
80
- const d = o.trim(), c = _(i, [...r, d]);
80
+ const d = o.trim(), c = _(i, [...e, d]);
81
81
  s.push(c);
82
82
  } else
83
83
  n[o] = i;
84
84
  }), Object.keys(n).length) {
85
- const o = r.map(O).join("-"), i = a(n, `.${o}`);
85
+ const o = e.map(O).join("-"), i = a(n, `.${o}`);
86
86
  s.push(i);
87
87
  }
88
88
  return s.join(`
89
89
  `);
90
- }, A = (t) => Object.keys(t), K = (t) => Object.entries(t).reduce((r, [s, n]) => (typeof n == "object" && (r[s] = E(n).map((o) => `"${o}"`).join(" | ")), r), {}), E = (t, r = "", s = /* @__PURE__ */ new Set()) => t ? (Object.entries(t).forEach(([n, o]) => {
91
- const i = r ? `${r}.${n}` : n;
92
- return typeof o == "object" ? E(o, i, s) : s.add(r);
90
+ }, A = (t) => Object.keys(t), K = (t) => Object.entries(t).reduce((e, [s, n]) => (typeof n == "object" && (e[s] = E(n).map((o) => `"${o}"`).join(" | ")), e), {}), E = (t, e = "", s = /* @__PURE__ */ new Set()) => t ? (Object.entries(t).forEach(([n, o]) => {
91
+ const i = e ? `${e}.${n}` : n;
92
+ return typeof o == "object" ? E(o, i, s) : s.add(e);
93
93
  }), [...s]) : [];
94
94
  export {
95
95
  _ as a,
package/types/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { ReactNode } from 'react';
2
2
  import { StyleComponentGenerator } from '../generator';
3
- import { OrAny, OrString } from './util-types';
3
+ import { NeverObj, OrAny, OrString } from './util-types';
4
4
  import type * as CSS from 'csstype';
5
5
  export type CreateElementProps = {
6
6
  extend?: Tag<any>;
@@ -8,8 +8,8 @@ export type CreateElementProps = {
8
8
  className?: string;
9
9
  element?: string;
10
10
  passVariantProps?: boolean | string | string[];
11
- style?: CssProperties & {
12
- [key: string]: OrAny | PropertyValueToken;
11
+ style?: CssProperties | {
12
+ [key: string]: PropertyValueToken | NeverObj;
13
13
  };
14
14
  /** vks = Variant key set */
15
15
  _vks?: Set<string>;
@@ -22,16 +22,17 @@ type FnComponent<PROPS extends StyledComponentProps> = {
22
22
  export type Tag<PROPS extends StyledComponentProps> = OrString | keyof HTMLElementTagNameMap | FnComponent<PROPS>;
23
23
  type CSSPropertyValueFunction = (params?: any) => any;
24
24
  type CssProperties = {
25
- [key in keyof CSS.Properties]: CSS.Properties[key] | PropertyValueToken | CSSPropertyValueFunction;
25
+ [key in keyof CSS.Properties]: CSS.Properties[key] | PropertyValueToken | CSSPropertyValueFunction | NeverObj;
26
26
  };
27
27
  type CssPropertyKeys = keyof CssProperties;
28
28
  export type StyleValue<K extends string> = K extends CssPropertyKeys ? CssProperties[K] : never;
29
- type InvalidVariantKeys = '';
29
+ type InvalidVariantKeys = '' | 'css';
30
30
  type VariantOptions = {
31
31
  [key in InvalidVariantKeys]?: never;
32
32
  };
33
33
  export type CompoundVariant = {
34
- [key: PropertyKey]: any;
34
+ [key: PropertyKey]: string | boolean | undefined;
35
+ } | {
35
36
  css: CssStyles;
36
37
  };
37
38
  type Variants = {
@@ -46,10 +47,19 @@ type Variants = {
46
47
  compoundVariants?: CompoundVariant[];
47
48
  };
48
49
  type BooleanVariantValue = 'true' | 'false' | boolean;
49
- type VariantPropValue<T> = T extends 'true' ? BooleanVariantValue : T extends 'false' ? BooleanVariantValue : T;
50
- export type VariantProps<STYLES extends StyledParams> = STYLES['variants'] extends undefined ? object : {
51
- [K in keyof STYLES['variants']]?: VariantPropValue<keyof STYLES['variants'][K]> | '';
50
+ type VariantPropValue<T> = T extends 'true' ? BooleanVariantValue : T extends 'false' ? BooleanVariantValue : T extends boolean ? BooleanVariantValue : T | '';
51
+ type PickType<T, K extends AllKeys<T>> = T extends {
52
+ [k in K]?: any;
53
+ } ? T[K] : undefined;
54
+ type AllKeys<T> = T extends any ? keyof T : never;
55
+ export type Merge<T> = {
56
+ [k in AllKeys<T>]?: PickType<T, k>;
52
57
  };
58
+ export type VariantProps<STYLES extends StyledParams, B = STYLES['variants'] extends undefined ? object : STYLES['variants'], C = STYLES['compoundVariants'] extends CompoundVariant[] ? Merge<STYLES['compoundVariants'][number]> : object> = Merge<{
59
+ [K in keyof B]?: K extends 'css' ? never : VariantPropValue<keyof B[K]>;
60
+ } | {
61
+ [K in keyof C]?: K extends 'css' ? never : VariantPropValue<C[K]>;
62
+ }>;
53
63
  type CssValuePropKey = `props-${string}`;
54
64
  export type ValueProps = {
55
65
  [key: CssValuePropKey]: string;