@salty-css/core 0.0.1-alpha.62 → 0.0.1-alpha.64

package/bin/main.cjs

@@ -1,10 +1,10 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Z=require("commander"),G=require("fs"),s=require("fs/promises"),n=require("path"),ee=require("ejs"),te=require("../compiler/index.cjs"),ie=require("../pascal-case-iWoaJWwT.cjs"),_=require("winston"),ne=require("child_process"),se=require("ora");var H=typeof document<"u"?document.currentScript:null;const t=_.createLogger({level:"debug",format:_.format.combine(_.format.colorize(),_.format.cli()),transports:[new _.transports.Console({})]}),m=r=>{t.error(r)},B=r=>new Promise((h,C)=>{ne.exec(r,P=>{if(P)return C(P);h()})}),b=async(...r)=>{const h=r.map(F=>F.replace("-D","").split("@").slice(0,-1).join("@").trim()).join(", "),C=se(`Installing packages: ${h}`).start(),P=r.join(" ");await B(`npm install ${P}`),C.succeed(`Installed packages: ${h}`)},ae=()=>G.existsSync(n.join(process.cwd(),"node_modules",".bin","prettier"));async function A(r){try{if(!ae())return;await B(`./node_modules/.bin/prettier --write "${r}"`),t.info(`Formatted ${r} with Prettier`)}catch(h){t.error(`Error formatting ${r} with Prettier:`,h)}}async function oe(){const r=new Z.Command;r.name("salty-css").description("Salty-CSS CLI tool to help with annoying configuration tasks.");const h={"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"))},C=async(i,a)=>{const{default:o}=await h[i],u=ee.render(o,a);return{fileName:i,content:u}},P=async()=>{const i=n.join(process.cwd(),".saltyrc");return await s.readFile(i,"utf-8").then(JSON.parse).catch(()=>({}))},F=n.join(process.cwd(),"package.json"),$=async(i=F)=>{const a=await s.readFile(i,"utf-8").then(JSON.parse).catch(()=>{});if(!a)throw"Could not read package.json file!";return a},V=async(i,a=F)=>{typeof i=="object"&&(i=JSON.stringify(i,null,2)),await s.writeFile(a,i)},z=async()=>{const i=new URL("../package.json",typeof document>"u"?require("url").pathToFileURL(__filename).href:H&&H.tagName.toUpperCase()==="SCRIPT"&&H.src||new URL("bin/main.cjs",document.baseURI).href);return $(i)},M=await(async()=>(await P()).defaultProject)(),k=await z(),J={core:`@salty-css/core@${k.version}`,react:`@salty-css/react@${k.version}`,eslintPluginCore:`@salty-css/eslint-plugin-core@${k.version}`,vite:`@salty-css/vite@${k.version}`,next:`@salty-css/next@${k.version}`},T=i=>{const a=i==="."?"":i,o=process.cwd();return n.join(o,a)};r.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 $().catch(()=>{}))return m("Salty CSS project must be initialized in a directory with a package.json file.");t.info("Initializing a new Salty-CSS project!");const{dir:o=i,cssFile:u,skipInstall:g}=this.opts();if(!o)return m("Project directory must be provided. Add it as the first argument after init command or use the --dir option.");g||(await b(J.core,J.react),await b(`-D ${J.eslintPluginCore}`));const f=process.cwd(),l=T(o),j=await Promise.all([C("salty.config.ts"),C("saltygen/index.css")]);await s.mkdir(l,{recursive:!0});const y=j.map(async({fileName:e,content:d})=>{const c=n.join(l,e);if(await s.readFile(c,"utf-8").catch(()=>{})!==void 0){t.debug("File already exists: "+c);return}const v=e.split("/").slice(0,-1).join("/");v&&await s.mkdir(n.join(l,v),{recursive:!0}),t.info("Creating file: "+c),await s.writeFile(c,d),await A(c)});await Promise.all(y);const D=n.relative(f,l)||".",p=n.join(f,".saltyrc"),w=await s.readFile(p,"utf-8").catch(()=>{});if(w===void 0){t.info("Creating file: "+p);const d=JSON.stringify({defaultProject:D,projects:[D]},null,2);await s.writeFile(p,d)}else{t.info("Edit file: "+p);const e=JSON.parse(w),d=new Set((e==null?void 0:e.projects)||[]);d.add(D),e.projects=[...d];const c=JSON.stringify(e,null,2);await s.writeFile(p,c)}const E=n.join(f,".gitignore"),I=await s.readFile(E,"utf-8").catch(()=>{});I!==void 0&&(I.includes("saltygen")||(t.info("Edit file: "+E),await s.writeFile(E,I+`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ee=require("commander"),Q=require("fs"),s=require("fs/promises"),i=require("path"),te=require("ejs"),ne=require("../compiler/index.cjs"),ie=require("../pascal-case-iWoaJWwT.cjs"),E=require("winston"),se=require("child_process"),ae=require("ora");var W=typeof document<"u"?document.currentScript:null;const t=E.createLogger({level:"debug",format:E.format.combine(E.format.colorize(),E.format.cli()),transports:[new E.transports.Console({})]}),m=c=>{t.error(c)},X=c=>new Promise((h,S)=>{se.exec(c,P=>{if(P)return S(P);h()})}),J=async(...c)=>{const h=c.map(F=>F.replace("-D","").split("@").slice(0,-1).join("@").trim()).join(", "),S=ae(`Installing packages: ${h}`).start(),P=c.join(" ");await X(`npm install ${P}`),S.succeed(`Installed packages: ${h}`)},oe=()=>Q.existsSync(i.join(process.cwd(),"node_modules",".bin","prettier"));async function L(c){try{if(!oe())return;await X(`./node_modules/.bin/prettier --write "${c}"`),t.info(`Formatted ${c} with Prettier`)}catch(h){t.error(`Error formatting ${c} with Prettier:`,h)}}async function re(){const c=new ee.Command;c.name("salty-css").description("Salty-CSS CLI tool to help with annoying configuration tasks.");const h={"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-BLQrv8ev.cjs"))},S=async(n,a)=>{const{default:r}=await h[n],u=te.render(r,a);return{fileName:n,content:u}},P=async()=>{const n=i.join(process.cwd(),".saltyrc");return await s.readFile(n,"utf-8").then(JSON.parse).catch(()=>({}))},F=i.join(process.cwd(),"package.json"),D=async(n=F)=>{const a=await s.readFile(n,"utf-8").then(JSON.parse).catch(()=>{});if(!a)throw"Could not read package.json file!";return a},Y=async(n,a=F)=>{typeof n=="object"&&(n=JSON.stringify(n,null,2)),await s.writeFile(a,n)},B=async()=>{const n=new URL("../package.json",typeof document>"u"?require("url").pathToFileURL(__filename).href:W&&W.tagName.toUpperCase()==="SCRIPT"&&W.src||new URL("bin/main.cjs",document.baseURI).href);return D(n)},V=await(async()=>(await P()).defaultProject)(),k=await B(),N={core:`@salty-css/core@${k.version}`,react:`@salty-css/react@${k.version}`,eslintPluginCore:`@salty-css/eslint-plugin-core@${k.version}`,vite:`@salty-css/vite@${k.version}`,next:`@salty-css/next@${k.version}`},H=n=>{const a=n==="."?"":n,r=process.cwd();return i.join(r,a)};c.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="."){if(!await D().catch(()=>{}))return m("Salty CSS project must be initialized in a directory with a package.json file.");t.info("Initializing a new Salty-CSS project!");const{dir:r=n,cssFile:u,skipInstall:g}=this.opts();if(!r)return m("Project directory must be provided. Add it as the first argument after init command or use the --dir option.");g||(await J(N.core,N.react),await J(`-D ${N.eslintPluginCore}`));const f=process.cwd(),l=H(r),x=await Promise.all([S("salty.config.ts"),S("saltygen/index.css")]);await s.mkdir(l,{recursive:!0});const y=x.map(async({fileName:e,content:p})=>{const d=i.join(l,e);if(await s.readFile(d,"utf-8").catch(()=>{})!==void 0){t.debug("File already exists: "+d);return}const v=e.split("/").slice(0,-1).join("/");v&&await s.mkdir(i.join(l,v),{recursive:!0}),t.info("Creating file: "+d),await s.writeFile(d,p),await L(d)});await Promise.all(y);const b=i.relative(f,l)||".",j=i.join(f,".saltyrc"),o=await s.readFile(j,"utf-8").catch(()=>{});if(o===void 0){t.info("Creating file: "+j);const p=JSON.stringify({defaultProject:b,projects:[b]},null,2);await s.writeFile(j,p)}else{t.info("Edit file: "+j);const e=JSON.parse(o),p=new Set((e==null?void 0:e.projects)||[]);p.add(b),e.projects=[...p];const d=JSON.stringify(e,null,2);await s.writeFile(j,d)}const w=i.join(f,".gitignore"),O=await s.readFile(w,"utf-8").catch(()=>{});O!==void 0&&(O.includes("saltygen")||(t.info("Edit file: "+w),await s.writeFile(w,O+`
 
 # Salty-CSS
 saltygen
-`)));const U=["src","public","assets","styles","css","app"],K=["styles","css","app","pages"],Q=["index","styles","main","global","globals"],X=[".css",".scss",".sass"],W=await(async()=>{if(u)return u;for(const e of U)for(const d of Q)for(const c of X){const S=n.join(l,e,d+c);if(await s.readFile(S,"utf-8").catch(()=>{})!==void 0)return n.relative(l,S);for(const N of K){const q=n.join(l,e,N,d+c);if(await s.readFile(q,"utf-8").catch(()=>{})!==void 0)return n.relative(l,q)}}})();if(W){const e=n.join(l,W),d=await s.readFile(e,"utf-8").catch(()=>{});if(d!==void 0&&!d.includes("saltygen")){const S=n.join(e,".."),N=`@import '${n.relative(S,n.join(l,"saltygen/index.css"))}';`;t.info("Adding global import statement to CSS file: "+e),await s.writeFile(e,N+`
-`+d),await A(e)}}else t.warn("Could not find a CSS file to import the generated CSS. Please add it manually.");const L=n.join(l,"vite.config.ts"),R=await s.readFile(L,"utf-8").catch(()=>{});if(R!==void 0&&!R.includes("saltyPlugin")){t.info("Edit file: "+L);const d=`import { saltyPlugin } from '@salty-css/vite';
-`,S=R.replace(/(plugins: \[)/,`$1
-  saltyPlugin(__dirname),`);g||await b(`-D ${J.vite}`),t.info("Adding Salty-CSS plugin to Vite config..."),await s.writeFile(L,d+S),await A(L)}const O=["next.config.js","next.config.cjs","next.config.ts","next.config.mjs"].map(e=>n.join(l,e)).find(e=>G.existsSync(e));if(O){let e=await s.readFile(O,"utf-8").catch(()=>{});if(e!==void 0&&!e.includes("withSaltyCss")){let c=!1;/\splugins([^=]*)=[^[]\[/.test(e)&&!c&&(e=e.replace(/\splugins([^=]*)=[^[]\[/,(q,x)=>` plugins${x}= [withSaltyCss,`),c=!0);const v=e.includes("module.exports"),N=v?`const { withSaltyCss } = require('@salty-css/next');
+`)));const I=["src","public","assets","styles","css","app"],z=["styles","css","app","pages"],G=["index","styles","main","global","globals"],R=[".css",".scss",".sass"],q=await(async()=>{if(u)return u;for(const e of I)for(const p of G)for(const d of R){const C=i.join(l,e,p+d);if(await s.readFile(C,"utf-8").catch(()=>{})!==void 0)return i.relative(l,C);for(const _ of z){const A=i.join(l,e,_,p+d);if(await s.readFile(A,"utf-8").catch(()=>{})!==void 0)return i.relative(l,A)}}})();if(q){const e=i.join(l,q),p=await s.readFile(e,"utf-8").catch(()=>{});if(p!==void 0&&!p.includes("saltygen")){const C=i.join(e,".."),_=`@import '${i.relative(C,i.join(l,"saltygen/index.css"))}';`;t.info("Adding global import statement to CSS file: "+e),await s.writeFile(e,_+`
+`+p),await L(e)}}else t.warn("Could not find a CSS file to import the generated CSS. Please add it manually.");const T=i.join(l,"vite.config.ts"),M=await s.readFile(T,"utf-8").catch(()=>{});if(M!==void 0&&!M.includes("saltyPlugin")){t.info("Edit file: "+T);const p=`import { saltyPlugin } from '@salty-css/vite';
+`,C=M.replace(/(plugins: \[)/,`$1
+  saltyPlugin(__dirname),`);g||await J(`-D ${N.vite}`),t.info("Adding Salty-CSS plugin to Vite config..."),await s.writeFile(T,p+C),await L(T)}const U=["next.config.js","next.config.cjs","next.config.ts","next.config.mjs"].map(e=>i.join(l,e)).find(e=>Q.existsSync(e));if(U){let e=await s.readFile(U,"utf-8").catch(()=>{});if(e!==void 0&&!e.includes("withSaltyCss")){let d=!1;/\splugins([^=]*)=[^[]\[/.test(e)&&!d&&(e=e.replace(/\splugins([^=]*)=[^[]\[/,(A,$)=>` plugins${$}= [withSaltyCss,`),d=!0);const v=e.includes("module.exports"),_=v?`const { withSaltyCss } = require('@salty-css/next');
 `:`import { withSaltyCss } from '@salty-css/next';
-`;v&&!c?(e=e.replace(/module.exports = ([^;]+)/,(q,x)=>`module.exports = withSaltyCss(${x})`),c=!0):c||(e=e.replace(/export default ([^;]+)/,(q,x)=>`export default withSaltyCss(${x})`)),g||await b(`-D ${J.next}`),t.info("Adding Salty-CSS plugin to Next.js config..."),await s.writeFile(O,N+e),await A(O)}}const Y=await $().catch(()=>m("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: "+F),e.scripts.prepare=e.scripts.prepare+" && npx salty-css build"):(t.info("Edit file: "+F),e.scripts.prepare="npx salty-css build"),e));await V(Y),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 ⭐")}),r.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=M){t.info("Building the Salty-CSS project...");const{dir:a=i}=this.opts();if(!a)return m("Project directory must be provided. Add it as the first argument after build command or use the --dir option.");const o=T(a);await te.generateCss(o)}),r.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.").action(async function(i,a=M){const{file:o=i,dir:u=a,tag:g,name:f,className:l}=this.opts();if(!o)return m("File to generate must be provided. Add it as the first argument after generate command or use the --file option.");if(!u)return m("Project directory must be provided. Add it as the second argument after generate command or use the --dir option.");const j=T(u),y=o.split("/").slice(0,-1).join("/");y&&await s.mkdir(n.join(j,y),{recursive:!0});const D=n.join(j,o),p=n.parse(D);p.ext||(p.ext=".ts"),p.name.endsWith(".css")||(p.name=p.name+".css"),p.base=p.name+p.ext;const w=n.format(p);if(await s.readFile(w,"utf-8").catch(()=>{})!==void 0){t.error("File already exists:",w);return}t.info("Generating a new file: "+w);const I=ie.pascalCase(f||p.base.replace(/\.css\.\w+$/,"")),{content:U}=await C("react/react-styled-file.ts",{tag:g,name:I,className:l});await s.writeFile(w,U),await A(w)}),r.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:o=i}=this.opts(),u=n.join(process.cwd(),"package.json"),g=await $(u).catch(y=>m(y));if(!g)return;const f={...g.dependencies,...g.devDependencies},l=Object.keys(f).filter(y=>y==="salty-css"||y.startsWith("@salty-css/"));if(!l.length)return m("No Salty-CSS packages found in package.json. Make sure you are running update command in the same directory! Used package.json path: "+u);const j=l.map(y=>o==="@"?`${y}@${k.version}`:`${y}@${o.replace(/^@/,"")}`);a?(t.warn("Using legacy peer dependencies to update packages."),await b(...j,"--legacy-peer-deps")):await b(...j),t.info("Salty-CSS packages updated successfully!")}),r.option("-v, --version","Show the current version of Salty-CSS.").action(async function(){const i=await z();t.info("CLI is running: "+i.version);const a=n.join(process.cwd(),"package.json"),o=await $(a).catch(f=>m(f));if(!o)return;const u={...o.dependencies,...o.devDependencies},g=Object.keys(u).filter(f=>f==="salty-css"||f.startsWith("@salty-css/"));if(!g.length)return m("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 g)t.info(`${f}: ${u[f]}`)}),r.parseAsync(process.argv)}exports.main=oe;
+`;v&&!d?(e=e.replace(/module.exports = ([^;]+)/,(A,$)=>`module.exports = withSaltyCss(${$})`),d=!0):d||(e=e.replace(/export default ([^;]+)/,(A,$)=>`export default withSaltyCss(${$})`)),g||await J(`-D ${N.next}`),t.info("Adding Salty-CSS plugin to Next.js config..."),await s.writeFile(U,_+e),await L(U)}}const Z=await D().catch(()=>m("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: "+F),e.scripts.prepare=e.scripts.prepare+" && npx salty-css build"):(t.info("Edit file: "+F),e.scripts.prepare="npx salty-css build"),e));await Y(Z),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 ⭐")}),c.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=V){t.info("Building the Salty-CSS project...");const{dir:a=n}=this.opts();if(!a)return m("Project directory must be provided. Add it as the first argument after build command or use the --dir option.");const r=H(a);await ne.generateCss(r)}),c.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("-rc, --reactComponent <rc>","Generate a React component as well.").action(async function(n,a=V){const{file:r=n,dir:u=a,tag:g,name:f,className:l,reactComponent:x=!1}=this.opts();if(!r)return m("File to generate must be provided. Add it as the first argument after generate command or use the --file option.");if(!u)return m("Project directory must be provided. Add it as the second argument after generate command or use the --dir option.");const y=H(u),b=r.split("/").slice(0,-1).join("/");b&&await s.mkdir(i.join(y,b),{recursive:!0});const j=i.join(y,r),o=i.parse(j);o.ext||(o.ext=".ts"),o.name.endsWith(".css")||(o.name=o.name+".css"),o.base=o.name+o.ext;const w=i.format(o);if(await s.readFile(w,"utf-8").catch(()=>{})!==void 0){t.error("File already exists:",w);return}const I=ie.pascalCase(f||o.base.replace(/\.css\.\w+$/,""));if(x){const G=I+"Component",R=o.base.replace(/\.css\.\w+$/,""),{content:K}=await S("react/react-vanilla-file.ts",{tag:g,componentName:G,styledName:I,className:l,fileName:R});o.name=R.replace(/\.css$/,""),o.ext=".tsx",o.base=o.name+o.ext;const q=i.format(o);t.info("Generating a new file: "+q),await s.writeFile(q,K)}const{content:z}=await S("react/react-styled-file.ts",{tag:g,name:I,className:l});t.info("Generating a new file: "+w),await s.writeFile(w,z),await L(w)}),c.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"){const{legacyPeerDeps:a,version:r=n}=this.opts(),u=i.join(process.cwd(),"package.json"),g=await D(u).catch(y=>m(y));if(!g)return;const f={...g.dependencies,...g.devDependencies},l=Object.keys(f).filter(y=>y==="salty-css"||y.startsWith("@salty-css/"));if(!l.length)return m("No Salty-CSS packages found in package.json. Make sure you are running update command in the same directory! Used package.json path: "+u);const x=l.map(y=>r==="@"?`${y}@${k.version}`:`${y}@${r.replace(/^@/,"")}`);a?(t.warn("Using legacy peer dependencies to update packages."),await J(...x,"--legacy-peer-deps")):await J(...x),t.info("Salty-CSS packages updated successfully!")}),c.option("-v, --version","Show the current version of Salty-CSS.").action(async function(){const n=await B();t.info("CLI is running: "+n.version);const a=i.join(process.cwd(),"package.json"),r=await D(a).catch(f=>m(f));if(!r)return;const u={...r.dependencies,...r.devDependencies},g=Object.keys(u).filter(f=>f==="salty-css"||f.startsWith("@salty-css/"));if(!g.length)return m("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 g)t.info(`${f}: ${u[f]}`)}),c.parseAsync(process.argv)}exports.main=re;

package/bin/main.js

@@ -1,209 +1,216 @@
-import { Command as et } from "commander";
-import { existsSync as V } from "fs";
-import { mkdir as W, readFile as y, writeFile as w } from "fs/promises";
-import { join as i, relative as _, parse as st, format as nt } from "path";
-import { render as at } from "ejs";
-import { generateCss as it } from "../compiler/index.js";
-import { p as ot } from "../pascal-case-BQpR5PdN.js";
-import { createLogger as rt, format as G, transports as ct } from "winston";
-import { exec as lt } from "child_process";
+import { Command as at } from "commander";
+import { existsSync as Z } from "fs";
+import { mkdir as B, readFile as m, writeFile as y } from "fs/promises";
+import { join as o, relative as z, parse as nt, format as Y } from "path";
+import { render as it } from "ejs";
+import { generateCss as ot } from "../compiler/index.js";
+import { p as rt } from "../pascal-case-BQpR5PdN.js";
+import { createLogger as ct, format as V, transports as lt } from "winston";
+import { exec as pt } from "child_process";
 import dt from "ora";
-const e = rt({
+const e = ct({
   level: "debug",
-  format: G.combine(G.colorize(), G.cli()),
-  transports: [new ct.Console({})]
-}), m = (o) => {
-  e.error(o);
-}, K = (o) => new Promise((h, v) => {
-  lt(o, (k) => {
-    if (k) return v(k);
-    h();
+  format: V.combine(V.colorize(), V.cli()),
+  transports: [new lt.Console({})]
+}), h = (r) => {
+  e.error(r);
+}, tt = (r) => new Promise((w, C) => {
+  pt(r, (k) => {
+    if (k) return C(k);
+    w();
   });
-}), $ = async (...o) => {
-  const h = o.map((x) => x.replace("-D", "").split("@").slice(0, -1).join("@").trim()).join(", "), v = dt(`Installing packages: ${h}`).start(), k = o.join(" ");
-  await K(`npm install ${k}`), v.succeed(`Installed packages: ${h}`);
-}, pt = () => V(i(process.cwd(), "node_modules", ".bin", "prettier"));
-async function O(o) {
+}), D = async (...r) => {
+  const w = r.map((x) => x.replace("-D", "").split("@").slice(0, -1).join("@").trim()).join(", "), C = dt(`Installing packages: ${w}`).start(), k = r.join(" ");
+  await tt(`npm install ${k}`), C.succeed(`Installed packages: ${w}`);
+}, ft = () => Z(o(process.cwd(), "node_modules", ".bin", "prettier"));
+async function H(r) {
   try {
-    if (!pt()) return;
-    await K(`./node_modules/.bin/prettier --write "${o}"`), e.info(`Formatted ${o} with Prettier`);
-  } catch (h) {
-    e.error(`Error formatting ${o} with Prettier:`, h);
+    if (!ft()) return;
+    await tt(`./node_modules/.bin/prettier --write "${r}"`), e.info(`Formatted ${r} with Prettier`);
+  } catch (w) {
+    e.error(`Error formatting ${r} with Prettier:`, w);
   }
 }
 async function xt() {
-  const o = new et();
-  o.name("salty-css").description("Salty-CSS CLI tool to help with annoying configuration tasks.");
-  const h = {
+  const r = new at();
+  r.name("salty-css").description("Salty-CSS CLI tool to help with annoying configuration tasks.");
+  const w = {
     // Core files
     "salty.config.ts": import("../salty.config-BhBY_oOk.js"),
     "saltygen/index.css": import("../index-D_732b92.js"),
     // React
-    "react/react-styled-file.ts": import("../react-styled-file-CGVf5n1B.js")
-  }, v = async (s, n) => {
-    const { default: a } = await h[s], f = at(a, n);
+    "react/react-styled-file.ts": import("../react-styled-file-CGVf5n1B.js"),
+    "react/react-vanilla-file.ts": import("../react-vanilla-file-DPf-z4U6.js")
+  }, C = async (s, a) => {
+    const { default: i } = await w[s], f = it(i, a);
     return { fileName: s, content: f };
   }, k = async () => {
-    const s = i(process.cwd(), ".saltyrc");
-    return await y(s, "utf-8").then(JSON.parse).catch(() => ({}));
-  }, x = i(process.cwd(), "package.json"), J = async (s = x) => {
-    const n = await y(s, "utf-8").then(JSON.parse).catch(() => {
+    const s = o(process.cwd(), ".saltyrc");
+    return await m(s, "utf-8").then(JSON.parse).catch(() => ({}));
+  }, x = o(process.cwd(), "package.json"), N = async (s = x) => {
+    const a = await m(s, "utf-8").then(JSON.parse).catch(() => {
     });
-    if (!n) throw "Could not read package.json file!";
-    return n;
-  }, Q = async (s, n = x) => {
-    typeof s == "object" && (s = JSON.stringify(s, null, 2)), await w(n, s);
-  }, M = async () => {
+    if (!a) throw "Could not read package.json file!";
+    return a;
+  }, et = async (s, a = x) => {
+    typeof s == "object" && (s = JSON.stringify(s, null, 2)), await y(a, s);
+  }, K = async () => {
     const s = new URL("../package.json", import.meta.url);
-    return J(s);
-  }, q = await (async () => (await k()).defaultProject)(), F = await M(), D = {
-    core: `@salty-css/core@${F.version}`,
-    react: `@salty-css/react@${F.version}`,
-    eslintPluginCore: `@salty-css/eslint-plugin-core@${F.version}`,
-    vite: `@salty-css/vite@${F.version}`,
-    next: `@salty-css/next@${F.version}`
-  }, U = (s) => {
-    const n = s === "." ? "" : s, a = process.cwd();
-    return i(a, n);
+    return N(s);
+  }, Q = await (async () => (await k()).defaultProject)(), b = await K(), I = {
+    core: `@salty-css/core@${b.version}`,
+    react: `@salty-css/react@${b.version}`,
+    eslintPluginCore: `@salty-css/eslint-plugin-core@${b.version}`,
+    vite: `@salty-css/vite@${b.version}`,
+    next: `@salty-css/next@${b.version}`
+  }, G = (s) => {
+    const a = s === "." ? "" : s, i = process.cwd();
+    return o(i, a);
   };
-  o.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 = ".") {
-    if (!await J().catch(() => {
-    })) return m("Salty CSS project must be initialized in a directory with a package.json file.");
+  r.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 = ".") {
+    if (!await N().catch(() => {
+    })) return h("Salty CSS project must be initialized in a directory with a package.json file.");
     e.info("Initializing a new Salty-CSS project!");
-    const { dir: a = s, cssFile: f, skipInstall: g } = this.opts();
-    if (!a) return m("Project directory must be provided. Add it as the first argument after init command or use the --dir option.");
-    g || (await $(D.core, D.react), await $(`-D ${D.eslintPluginCore}`));
-    const p = process.cwd(), c = U(a), P = await Promise.all([v("salty.config.ts"), v("saltygen/index.css")]);
-    await W(c, { recursive: !0 });
-    const u = P.map(async ({ fileName: t, content: l }) => {
-      const r = i(c, t);
-      if (await y(r, "utf-8").catch(() => {
+    const { dir: i = s, cssFile: f, skipInstall: g } = this.opts();
+    if (!i) return h("Project directory must be provided. Add it as the first argument after init command or use the --dir option.");
+    g || (await D(I.core, I.react), await D(`-D ${I.eslintPluginCore}`));
+    const d = process.cwd(), c = G(i), F = await Promise.all([C("salty.config.ts"), C("saltygen/index.css")]);
+    await B(c, { recursive: !0 });
+    const u = F.map(async ({ fileName: t, content: p }) => {
+      const l = o(c, t);
+      if (await m(l, "utf-8").catch(() => {
       }) !== void 0) {
-        e.debug("File already exists: " + r);
+        e.debug("File already exists: " + l);
         return;
       }
       const j = t.split("/").slice(0, -1).join("/");
-      j && await W(i(c, j), { recursive: !0 }), e.info("Creating file: " + r), await w(r, l), await O(r);
+      j && await B(o(c, j), { recursive: !0 }), e.info("Creating file: " + l), await y(l, p), await H(l);
     });
     await Promise.all(u);
-    const I = _(p, c) || ".", d = i(p, ".saltyrc"), S = await y(d, "utf-8").catch(() => {
+    const $ = z(d, c) || ".", P = o(d, ".saltyrc"), n = await m(P, "utf-8").catch(() => {
     });
-    if (S === void 0) {
-      e.info("Creating file: " + d);
-      const l = JSON.stringify({
-        defaultProject: I,
-        projects: [I]
+    if (n === void 0) {
+      e.info("Creating file: " + P);
+      const p = JSON.stringify({
+        defaultProject: $,
+        projects: [$]
       }, null, 2);
-      await w(d, l);
+      await y(P, p);
     } else {
-      e.info("Edit file: " + d);
-      const t = JSON.parse(S), l = new Set((t == null ? void 0 : t.projects) || []);
-      l.add(I), t.projects = [...l];
-      const r = JSON.stringify(t, null, 2);
-      await w(d, r);
+      e.info("Edit file: " + P);
+      const t = JSON.parse(n), p = new Set((t == null ? void 0 : t.projects) || []);
+      p.add($), t.projects = [...p];
+      const l = JSON.stringify(t, null, 2);
+      await y(P, l);
     }
-    const L = i(p, ".gitignore"), N = await y(L, "utf-8").catch(() => {
+    const S = o(d, ".gitignore"), T = await m(S, "utf-8").catch(() => {
     });
-    N !== void 0 && (N.includes("saltygen") || (e.info("Edit file: " + L), await w(L, N + `
+    T !== void 0 && (T.includes("saltygen") || (e.info("Edit file: " + S), await y(S, T + `
 
 # Salty-CSS
 saltygen
 `)));
-    const z = ["src", "public", "assets", "styles", "css", "app"], X = ["styles", "css", "app", "pages"], Y = ["index", "styles", "main", "global", "globals"], Z = [".css", ".scss", ".sass"], B = await (async () => {
+    const A = ["src", "public", "assets", "styles", "css", "app"], W = ["styles", "css", "app", "pages"], M = ["index", "styles", "main", "global", "globals"], _ = [".css", ".scss", ".sass"], E = await (async () => {
       if (f) return f;
-      for (const t of z)
-        for (const l of Y)
-          for (const r of Z) {
-            const C = i(c, t, l + r);
-            if (await y(C, "utf-8").catch(() => {
-            }) !== void 0) return _(c, C);
-            for (const A of X) {
-              const E = i(c, t, A, l + r);
-              if (await y(E, "utf-8").catch(() => {
-              }) !== void 0) return _(c, E);
+      for (const t of A)
+        for (const p of M)
+          for (const l of _) {
+            const v = o(c, t, p + l);
+            if (await m(v, "utf-8").catch(() => {
+            }) !== void 0) return z(c, v);
+            for (const O of W) {
+              const L = o(c, t, O, p + l);
+              if (await m(L, "utf-8").catch(() => {
+              }) !== void 0) return z(c, L);
             }
           }
     })();
-    if (B) {
-      const t = i(c, B), l = await y(t, "utf-8").catch(() => {
+    if (E) {
+      const t = o(c, E), p = await m(t, "utf-8").catch(() => {
       });
-      if (l !== void 0 && !l.includes("saltygen")) {
-        const C = i(t, ".."), A = `@import '${_(C, i(c, "saltygen/index.css"))}';`;
-        e.info("Adding global import statement to CSS file: " + t), await w(t, A + `
-` + l), await O(t);
+      if (p !== void 0 && !p.includes("saltygen")) {
+        const v = o(t, ".."), O = `@import '${z(v, o(c, "saltygen/index.css"))}';`;
+        e.info("Adding global import statement to CSS file: " + t), await y(t, O + `
+` + p), await H(t);
       }
     } else
       e.warn("Could not find a CSS file to import the generated CSS. Please add it manually.");
-    const H = i(c, "vite.config.ts"), R = await y(H, "utf-8").catch(() => {
+    const R = o(c, "vite.config.ts"), q = await m(R, "utf-8").catch(() => {
     });
-    if (R !== void 0 && !R.includes("saltyPlugin")) {
-      e.info("Edit file: " + H);
-      const l = `import { saltyPlugin } from '@salty-css/vite';
-`, C = R.replace(/(plugins: \[)/, `$1
+    if (q !== void 0 && !q.includes("saltyPlugin")) {
+      e.info("Edit file: " + R);
+      const p = `import { saltyPlugin } from '@salty-css/vite';
+`, v = q.replace(/(plugins: \[)/, `$1
   saltyPlugin(__dirname),`);
-      g || await $(`-D ${D.vite}`), e.info("Adding Salty-CSS plugin to Vite config..."), await w(H, l + C), await O(H);
+      g || await D(`-D ${I.vite}`), e.info("Adding Salty-CSS plugin to Vite config..."), await y(R, p + v), await H(R);
     }
-    const T = ["next.config.js", "next.config.cjs", "next.config.ts", "next.config.mjs"].map((t) => i(c, t)).find((t) => V(t));
-    if (T) {
-      let t = await y(T, "utf-8").catch(() => {
+    const U = ["next.config.js", "next.config.cjs", "next.config.ts", "next.config.mjs"].map((t) => o(c, t)).find((t) => Z(t));
+    if (U) {
+      let t = await m(U, "utf-8").catch(() => {
       });
       if (t !== void 0 && !t.includes("withSaltyCss")) {
-        let r = !1;
-        /\splugins([^=]*)=[^[]\[/.test(t) && !r && (t = t.replace(/\splugins([^=]*)=[^[]\[/, (E, b) => ` plugins${b}= [withSaltyCss,`), r = !0);
-        const j = t.includes("module.exports"), A = j ? `const { withSaltyCss } = require('@salty-css/next');
+        let l = !1;
+        /\splugins([^=]*)=[^[]\[/.test(t) && !l && (t = t.replace(/\splugins([^=]*)=[^[]\[/, (L, J) => ` plugins${J}= [withSaltyCss,`), l = !0);
+        const j = t.includes("module.exports"), O = j ? `const { withSaltyCss } = require('@salty-css/next');
 ` : `import { withSaltyCss } from '@salty-css/next';
 `;
-        j && !r ? (t = t.replace(/module.exports = ([^;]+)/, (E, b) => `module.exports = withSaltyCss(${b})`), r = !0) : r || (t = t.replace(/export default ([^;]+)/, (E, b) => `export default withSaltyCss(${b})`)), g || await $(`-D ${D.next}`), e.info("Adding Salty-CSS plugin to Next.js config..."), await w(T, A + t), await O(T);
+        j && !l ? (t = t.replace(/module.exports = ([^;]+)/, (L, J) => `module.exports = withSaltyCss(${J})`), l = !0) : l || (t = t.replace(/export default ([^;]+)/, (L, J) => `export default withSaltyCss(${J})`)), g || await D(`-D ${I.next}`), e.info("Adding Salty-CSS plugin to Next.js config..."), await y(U, O + t), await H(U);
       }
     }
-    const tt = await J().catch(() => m("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: " + x), t.scripts.prepare = t.scripts.prepare + " && npx salty-css build") : (e.info("Edit file: " + x), t.scripts.prepare = "npx salty-css build"), t));
-    await Q(tt), 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 ⭐");
-  }), o.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 = q) {
+    const st = await N().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: " + x), t.scripts.prepare = t.scripts.prepare + " && npx salty-css build") : (e.info("Edit file: " + x), t.scripts.prepare = "npx salty-css build"), t));
+    await et(st), 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 ⭐");
+  }), r.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 = Q) {
     e.info("Building the Salty-CSS project...");
-    const { dir: n = s } = this.opts();
-    if (!n) return m("Project directory must be provided. Add it as the first argument after build command or use the --dir option.");
-    const a = U(n);
-    await it(a);
-  }), o.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.").action(async function(s, n = q) {
-    const { file: a = s, dir: f = n, tag: g, name: p, className: c } = this.opts();
-    if (!a) return m("File to generate must be provided. Add it as the first argument after generate command or use the --file option.");
-    if (!f) return m("Project directory must be provided. Add it as the second argument after generate command or use the --dir option.");
-    const P = U(f), u = a.split("/").slice(0, -1).join("/");
-    u && await W(i(P, u), { recursive: !0 });
-    const I = i(P, a), d = st(I);
-    d.ext || (d.ext = ".ts"), d.name.endsWith(".css") || (d.name = d.name + ".css"), d.base = d.name + d.ext;
-    const S = nt(d);
-    if (await y(S, "utf-8").catch(() => {
+    const { dir: a = s } = this.opts();
+    if (!a) return h("Project directory must be provided. Add it as the first argument after build command or use the --dir option.");
+    const i = G(a);
+    await ot(i);
+  }), r.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("-rc, --reactComponent <rc>", "Generate a React component as well.").action(async function(s, a = Q) {
+    const { file: i = s, dir: f = a, tag: g, name: d, className: c, reactComponent: F = !1 } = this.opts();
+    if (!i) return h("File to generate must be provided. Add it as the first argument after generate command or use the --file option.");
+    if (!f) return h("Project directory must be provided. Add it as the second argument after generate command or use the --dir option.");
+    const u = G(f), $ = i.split("/").slice(0, -1).join("/");
+    $ && await B(o(u, $), { recursive: !0 });
+    const P = o(u, i), n = nt(P);
+    n.ext || (n.ext = ".ts"), n.name.endsWith(".css") || (n.name = n.name + ".css"), n.base = n.name + n.ext;
+    const S = Y(n);
+    if (await m(S, "utf-8").catch(() => {
     }) !== void 0) {
       e.error("File already exists:", S);
       return;
     }
-    e.info("Generating a new file: " + S);
-    const N = ot(p || d.base.replace(/\.css\.\w+$/, "")), { content: z } = await v("react/react-styled-file.ts", { tag: g, name: N, className: c });
-    await w(S, z), await O(S);
-  }), o.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") {
-    const { legacyPeerDeps: n, version: a = s } = this.opts(), f = i(process.cwd(), "package.json"), g = await J(f).catch((u) => m(u));
+    const A = rt(d || n.base.replace(/\.css\.\w+$/, ""));
+    if (F) {
+      const M = A + "Component", _ = n.base.replace(/\.css\.\w+$/, ""), { content: X } = await C("react/react-vanilla-file.ts", { tag: g, componentName: M, styledName: A, className: c, fileName: _ });
+      n.name = _.replace(/\.css$/, ""), n.ext = ".tsx", n.base = n.name + n.ext;
+      const E = Y(n);
+      e.info("Generating a new file: " + E), await y(E, X);
+    }
+    const { content: W } = await C("react/react-styled-file.ts", { tag: g, name: A, className: c });
+    e.info("Generating a new file: " + S), await y(S, W), await H(S);
+  }), r.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") {
+    const { legacyPeerDeps: a, version: i = s } = this.opts(), f = o(process.cwd(), "package.json"), g = await N(f).catch((u) => h(u));
     if (!g) return;
-    const p = { ...g.dependencies, ...g.devDependencies }, c = Object.keys(p).filter((u) => u === "salty-css" || u.startsWith("@salty-css/"));
+    const d = { ...g.dependencies, ...g.devDependencies }, c = Object.keys(d).filter((u) => u === "salty-css" || u.startsWith("@salty-css/"));
     if (!c.length)
-      return m(
+      return h(
         "No Salty-CSS packages found in package.json. Make sure you are running update command in the same directory! Used package.json path: " + f
       );
-    const P = c.map((u) => a === "@" ? `${u}@${F.version}` : `${u}@${a.replace(/^@/, "")}`);
-    n ? (e.warn("Using legacy peer dependencies to update packages."), await $(...P, "--legacy-peer-deps")) : await $(...P), e.info("Salty-CSS packages updated successfully!");
-  }), o.option("-v, --version", "Show the current version of Salty-CSS.").action(async function() {
-    const s = await M();
+    const F = c.map((u) => i === "@" ? `${u}@${b.version}` : `${u}@${i.replace(/^@/, "")}`);
+    a ? (e.warn("Using legacy peer dependencies to update packages."), await D(...F, "--legacy-peer-deps")) : await D(...F), e.info("Salty-CSS packages updated successfully!");
+  }), r.option("-v, --version", "Show the current version of Salty-CSS.").action(async function() {
+    const s = await K();
     e.info("CLI is running: " + s.version);
-    const n = i(process.cwd(), "package.json"), a = await J(n).catch((p) => m(p));
-    if (!a) return;
-    const f = { ...a.dependencies, ...a.devDependencies }, g = Object.keys(f).filter((p) => p === "salty-css" || p.startsWith("@salty-css/"));
+    const a = o(process.cwd(), "package.json"), i = await N(a).catch((d) => h(d));
+    if (!i) return;
+    const f = { ...i.dependencies, ...i.devDependencies }, g = Object.keys(f).filter((d) => d === "salty-css" || d.startsWith("@salty-css/"));
     if (!g.length)
-      return m(
-        "No Salty-CSS packages found in package.json. Make sure you are running update command in the same directory! Used package.json path: " + n
+      return h(
+        "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 p of g)
-      e.info(`${p}: ${f[p]}`);
-  }), o.parseAsync(process.argv);
+    for (const d of g)
+      e.info(`${d}: ${f[d]}`);
+  }), r.parseAsync(process.argv);
 }
 export {
   xt as main

package/config/config-types.d.ts

@@ -1,8 +1,6 @@
 import { CssStyles } from '../types';
 import { OrString } from '../types/util-types';
-type CssTemplate = CssStyles | {
-    [key: PropertyKey]: CssTemplate;
-};
+export type GlobalStyles = Record<string, CssStyles>;
 export type CssVariables = Record<string, unknown>;
 export interface CssResponsiveVariables {
     [key: string]: CssVariables;
@@ -12,6 +10,9 @@ export interface CssConditionalVariables {
         [key: PropertyKey]: CssVariables;
     };
 }
+type CssTemplate = CssStyles | {
+    [key: PropertyKey]: CssTemplate;
+};
 export interface CssTemplates {
     [key: PropertyKey]: {
         [key: PropertyKey]: CssTemplate;
@@ -47,7 +48,7 @@ export interface SaltyConfig {
     /**
      * The global styles that are imported in the root of the project.
      */
-    global?: CssStyles;
+    global?: GlobalStyles;
     /**
      * The templates that can be used in styles to create reusable css.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salty-css/core",
-  "version": "0.0.1-alpha.62",
+  "version": "0.0.1-alpha.64",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "typings": "./dist/index.d.ts",

package/react-vanilla-file-BLQrv8ev.cjs

@@ -0,0 +1,13 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=`import { <%- styledName %> } from "./<%- fileName %>.css";
+
+interface <%- componentName %>Props {
+  // Add your props here
+}
+
+export const <%- componentName %> = (props: <%- name %>Props) => {
+  return (
+    <<%- styledName %>>
+      Hellow world
+    </<%- styledName %>>
+  );
+};`;exports.default=e;

package/react-vanilla-file-DPf-z4U6.js

@@ -0,0 +1,16 @@
+const e = `import { <%- styledName %> } from "./<%- fileName %>.css";
+
+interface <%- componentName %>Props {
+  // Add your props here
+}
+
+export const <%- componentName %> = (props: <%- name %>Props) => {
+  return (
+    <<%- styledName %>>
+      Hellow world
+    </<%- styledName %>>
+  );
+};`;
+export {
+  e as default
+};