@salty-css/core 0.0.1-alpha.86 → 0.0.1-alpha.88
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/.saltyrc.schema.json +36 -0
- package/README.md +2 -2
- package/bin/main.cjs +5 -5
- package/bin/main.js +106 -101
- package/package.json +1 -1
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "http://json-schema.org/draft-07/schema#",
|
|
3
|
+
"title": "Salty CSS CLI Run Configuration",
|
|
4
|
+
"description": "File .saltyrc.json is used to define projects and their configurations in json format for salty css cli.",
|
|
5
|
+
"type": "object",
|
|
6
|
+
"properties": {
|
|
7
|
+
"defaultProject": {
|
|
8
|
+
"type": "string",
|
|
9
|
+
"description": "The default project to be used."
|
|
10
|
+
},
|
|
11
|
+
"projects": {
|
|
12
|
+
"type": "array",
|
|
13
|
+
"description": "List of projects.",
|
|
14
|
+
"items": {
|
|
15
|
+
"type": "object",
|
|
16
|
+
"properties": {
|
|
17
|
+
"dir": {
|
|
18
|
+
"type": "string",
|
|
19
|
+
"description": "The directory of the project. This is also used as the project name."
|
|
20
|
+
},
|
|
21
|
+
"framework": {
|
|
22
|
+
"type": "string",
|
|
23
|
+
"description": "The framework used by the project.",
|
|
24
|
+
"enum": ["react", "other"]
|
|
25
|
+
},
|
|
26
|
+
"components": {
|
|
27
|
+
"type": "string",
|
|
28
|
+
"description": "The directory for the components."
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
"required": ["dir", "framework"]
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
"required": ["defaultProject", "projects"]
|
|
36
|
+
}
|
package/README.md
CHANGED
|
@@ -31,7 +31,7 @@ Note: Fastest way to get started with any framework is [npx salty-css init [dire
|
|
|
31
31
|
|
|
32
32
|
#### Initialize Salty CSS for a project
|
|
33
33
|
|
|
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` which contains some metadata for future CLI commands.
|
|
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.
|
|
35
35
|
|
|
36
36
|
#### Create components
|
|
37
37
|
|
|
@@ -39,7 +39,7 @@ Components can be created with `npx salty-css generate [filePath]` which then cr
|
|
|
39
39
|
|
|
40
40
|
#### Build / Compile Salty CSS
|
|
41
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`. Note that build generates css files but Vite / Webpack plugin is still required for full support.
|
|
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
43
|
|
|
44
44
|
#### Update Salty CSS packages
|
|
45
45
|
|
package/bin/main.cjs
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ne=require("commander"),L=require("fs"),s=require("fs/promises"),n=require("path"),ie=require("ejs"),t=require("../index-BKoD9apd.cjs"),se=require("../pascal-case-iWoaJWwT.cjs"),oe=require("child_process"),ae=require("ora");var W=typeof document<"u"?document.currentScript:null;const Y=g=>new Promise((h,C)=>{oe.exec(g,x=>{if(x)return C(x);h()})}),N=async(...g)=>{const h=g.map(F=>F.replace("-D","").split("@").slice(0,-1).join("@").trim()).join(", "),C=ae(`Installing packages: ${h}`).start(),x=g.join(" ");await Y(`npm install ${x}`),C.succeed(`Installed packages: ${h}`)},re=()=>L.existsSync(n.join(process.cwd(),"node_modules",".bin","prettier"));async function P(g){try{if(!re())return;await Y(`./node_modules/.bin/prettier --write "${g}"`),t.logger.info(`Formatted ${g} with Prettier`)}catch(h){t.logger.error(`Error formatting ${g} with Prettier:`,h)}}async function ce(){const g=new ne.Command;g.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-CG_WJLam.cjs"))},C=async(i,
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ne=require("commander"),L=require("fs"),s=require("fs/promises"),n=require("path"),ie=require("ejs"),t=require("../index-BKoD9apd.cjs"),se=require("../pascal-case-iWoaJWwT.cjs"),oe=require("child_process"),ae=require("ora");var W=typeof document<"u"?document.currentScript:null;const Y=g=>new Promise((h,C)=>{oe.exec(g,x=>{if(x)return C(x);h()})}),N=async(...g)=>{const h=g.map(F=>F.replace("-D","").split("@").slice(0,-1).join("@").trim()).join(", "),C=ae(`Installing packages: ${h}`).start(),x=g.join(" ");await Y(`npm install ${x}`),C.succeed(`Installed packages: ${h}`)},re=()=>L.existsSync(n.join(process.cwd(),"node_modules",".bin","prettier"));async function P(g){try{if(!re())return;await Y(`./node_modules/.bin/prettier --write "${g}"`),t.logger.info(`Formatted ${g} with Prettier`)}catch(h){t.logger.error(`Error formatting ${g} with Prettier:`,h)}}async function ce(){const g=new ne.Command;g.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-CG_WJLam.cjs"))},C=async(i,r)=>{const{default:l}=await h[i],f=ie.render(l,r);return{fileName:i,content:f}},x=async()=>{const i=n.join(process.cwd(),".saltyrc.json");return await s.readFile(i,"utf-8").then(JSON.parse).catch(()=>({}))},F=n.join(process.cwd(),"package.json"),D=async(i=F)=>{const r=await s.readFile(i,"utf-8").then(JSON.parse).catch(()=>{});if(!r)throw"Could not read package.json file!";return r},Z=async(i,r=F)=>{typeof i=="object"&&(i=JSON.stringify(i,null,2)),await s.writeFile(r,i)},M=async()=>{const i=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(i)},B=await(async()=>(await x()).defaultProject)(),k=await M(),I={core:`@salty-css/core@${k.version}`,react:`@salty-css/react@${k.version}`,eslintConfigCore:`@salty-css/eslint-config-core@${k.version}`,vite:`@salty-css/vite@${k.version}`,next:`@salty-css/next@${k.version}`},R=i=>{const r=i==="."?"":i,l=process.cwd();return n.join(l,r)};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(i="."){if(!await D().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:f,skipInstall:u}=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.");u||await N(I.core,I.react);const p=process.cwd(),d=R(l),b=await Promise.all([C("salty.config.ts"),C("saltygen/index.css")]);await s.mkdir(d,{recursive:!0});const m=b.map(async({fileName:e,content:a})=>{const c=n.join(d,e);if(await s.readFile(c,"utf-8").catch(()=>{})!==void 0){t.logger.debug("File already exists: "+c);return}const S=e.split("/").slice(0,-1).join("/");S&&await s.mkdir(n.join(d,S),{recursive:!0}),t.logger.info("Creating file: "+c),await s.writeFile(c,a),await P(c)});await Promise.all(m);const E=n.relative(p,d)||".",j=n.join(p,".saltyrc.json"),o=await s.readFile(j,"utf-8").catch(()=>{});if(o===void 0){t.logger.info("Creating file: "+j);const a=JSON.stringify({$schema:"./node_modules/@salty-css/core/.saltyrc.schema.json",defaultProject:E,projects:[{dir:E,framework:"react"}]},null,2);await s.writeFile(j,a)}else{const e=JSON.parse(o),a=new Set((e==null?void 0:e.projects)||[]);a.add(E),e.projects=[...a];const c=JSON.stringify(e,null,2);c!==o&&(t.logger.info("Edit file: "+j),await s.writeFile(j,c))}const w=n.join(p,".gitignore"),_=await s.readFile(w,"utf-8").catch(()=>{});_!==void 0&&(_.includes("saltygen")||(t.logger.info("Edit file: "+w),await s.writeFile(w,_+`
|
|
2
2
|
|
|
3
3
|
# Salty-CSS
|
|
4
4
|
saltygen
|
|
5
|
-
`)));const v=["src","public","assets","styles","css","app"],H=["styles","css","app","pages"],z=["index","styles","main","global","globals"],
|
|
6
|
-
`+
|
|
5
|
+
`)));const v=["src","public","assets","styles","css","app"],H=["styles","css","app","pages"],z=["index","styles","main","global","globals"],A=[".css",".scss",".sass"],$=await(async()=>{if(f)return f;for(const e of v)for(const a of z)for(const c of A){const y=n.join(d,e,a+c);if(await s.readFile(y,"utf-8").catch(()=>{})!==void 0)return n.relative(d,y);for(const q of H){const O=n.join(d,e,q,a+c);if(await s.readFile(O,"utf-8").catch(()=>{})!==void 0)return n.relative(d,O)}}})();if($){const e=n.join(d,$),a=await s.readFile(e,"utf-8").catch(()=>{});if(a!==void 0&&!a.includes("saltygen")){const y=n.join(e,".."),q=`@import '${n.relative(y,n.join(d,"saltygen/index.css"))}';`;t.logger.info("Adding global import statement to CSS file: "+e),await s.writeFile(e,q+`
|
|
6
|
+
`+a),await P(e)}}else t.logger.warn("Could not find a CSS file to import the generated CSS. Please add it manually.");const K=n.join(p,".eslintrc.json"),ee=L.existsSync(K),Q=n.join(d,".eslintrc.json"),X=L.existsSync(Q);if(ee||X){u||await N(I.eslintConfigCore);const e=X?Q:K,a=await s.readFile(e,"utf-8").catch(()=>{});if(!a)return t.logError("Could not read ESLint config file.");if(!a.includes("salty-css")){const y=JSON.parse(a);t.logger.info("Edit file: "+e),y.extends||(y.extends=[]),y.extends.push("@salty-css/core");const S=JSON.stringify(y,null,2);await s.writeFile(e,S),await P(e)}}const T=n.join(d,"vite.config.ts"),G=await s.readFile(T,"utf-8").catch(()=>{});if(G!==void 0&&!G.includes("saltyPlugin")){t.logger.info("Edit file: "+T);const a=`import { saltyPlugin } from '@salty-css/vite';
|
|
7
7
|
`,y=G.replace(/(plugins: \[)/,`$1
|
|
8
|
-
saltyPlugin(__dirname),`);u||await N(`-D ${I.vite}`),t.logger.info("Adding Salty-CSS plugin to Vite config..."),await s.writeFile(
|
|
8
|
+
saltyPlugin(__dirname),`);u||await N(`-D ${I.vite}`),t.logger.info("Adding Salty-CSS plugin to Vite config..."),await s.writeFile(T,a+y),await P(T)}const U=["next.config.js","next.config.cjs","next.config.ts","next.config.mjs"].map(e=>n.join(d,e)).find(e=>L.existsSync(e));if(U){let e=await s.readFile(U,"utf-8").catch(()=>{});if(e!==void 0&&!e.includes("withSaltyCss")){let c=!1;/\splugins([^=]*)=[^[]\[/.test(e)&&!c&&(e=e.replace(/\splugins([^=]*)=[^[]\[/,(O,J)=>` plugins${J}= [withSaltyCss,`),c=!0);const S=e.includes("module.exports"),q=S?`const { withSaltyCss } = require('@salty-css/next');
|
|
9
9
|
`:`import { withSaltyCss } from '@salty-css/next';
|
|
10
|
-
`;S&&!
|
|
10
|
+
`;S&&!c?(e=e.replace(/module.exports = ([^;]+)/,(O,J)=>`module.exports = withSaltyCss(${J})`),c=!0):c||(e=e.replace(/export default ([^;]+)/,(O,J)=>`export default withSaltyCss(${J})`)),u||await N(`-D ${I.next}`),t.logger.info("Adding Salty-CSS plugin to Next.js config..."),await s.writeFile(U,q+e),await P(U)}}const te=await D().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: "+F),e.scripts.prepare=e.scripts.prepare+" && npx salty-css build"):(t.logger.info("Edit file: "+F),e.scripts.prepare="npx salty-css build"),e));await Z(te),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 ⭐")}),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(i=B){t.logger.info("Building the Salty-CSS project...");const{dir:r=i}=this.opts();if(!r)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(r);await t.generateCss(l)}),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("-rc, --reactComponent <rc>","Generate a React component as well.").action(async function(i,r=B){const{file:l=i,dir:f=r,tag:u,name:p,className:d,reactComponent:b=!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(!f)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(f),E=l.split("/").slice(0,-1).join("/");E&&await s.mkdir(n.join(m,E),{recursive:!0});const j=n.join(m,l),o=n.parse(j);o.ext||(o.ext=".ts"),o.name.endsWith(".css")||(o.name=o.name+".css"),o.base=o.name+o.ext;const w=n.format(o);if(await s.readFile(w,"utf-8").catch(()=>{})!==void 0){t.logger.error("File already exists:",w);return}let v=se.pascalCase(p||o.base.replace(/\.css\.\w+$/,""));if(b){const z=v+"Component";v=v+"Wrapper";const A=o.base.replace(/\.css\.\w+$/,""),{content:V}=await C("react/react-vanilla-file.ts",{tag:u,componentName:z,styledComponentName:v,className:d,fileName:A});o.name=A.replace(/\.css$/,""),o.ext=".tsx",o.base=o.name+o.ext;const $=n.format(o);t.logger.info("Generating a new file: "+$),await s.writeFile($,V),await P($)}const{content:H}=await C("react/react-styled-file.ts",{tag:u,name:v,className:d});t.logger.info("Generating a new file: "+w),await s.writeFile(w,H),await P(w)}),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(i="latest"){const{legacyPeerDeps:r,version:l=i}=this.opts(),f=n.join(process.cwd(),"package.json"),u=await D(f).catch(m=>t.logError(m));if(!u)return;const p={...u.dependencies,...u.devDependencies},d=Object.keys(p).filter(m=>m==="salty-css"||m.startsWith("@salty-css/"));if(!d.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: "+f);const b=d.map(m=>l==="@"?`${m}@${k.version}`:`${m}@${l.replace(/^@/,"")}`);r?(t.logger.warn("Using legacy peer dependencies to update packages."),await N(...b,"--legacy-peer-deps")):await N(...b),t.logger.info("Salty-CSS packages updated successfully!")}),g.option("-v, --version","Show the current version of Salty-CSS.").action(async function(){const i=await M();t.logger.info("CLI is running: "+i.version);const r=n.join(process.cwd(),"package.json"),l=await D(r).catch(p=>t.logError(p));if(!l)return;const f={...l.dependencies,...l.devDependencies},u=Object.keys(f).filter(p=>p==="salty-css"||p.startsWith("@salty-css/"));if(!u.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: "+r);for(const p of u)t.logger.info(`${p}: ${f[p]}`)}),g.parseAsync(process.argv)}exports.main=ce;
|
package/bin/main.js
CHANGED
|
@@ -1,25 +1,25 @@
|
|
|
1
1
|
import { Command as ot } from "commander";
|
|
2
2
|
import { existsSync as G } from "fs";
|
|
3
3
|
import { mkdir as V, readFile as m, writeFile as h } from "fs/promises";
|
|
4
|
-
import { join as
|
|
4
|
+
import { join as i, relative as z, parse as rt, format as et } from "path";
|
|
5
5
|
import { render as ct } from "ejs";
|
|
6
6
|
import { l as e, a as w, g as lt } from "../index-BGaLvshf.js";
|
|
7
7
|
import { p as dt } from "../pascal-case-BQpR5PdN.js";
|
|
8
8
|
import { exec as pt } from "child_process";
|
|
9
9
|
import ft from "ora";
|
|
10
|
-
const
|
|
10
|
+
const st = (d) => new Promise((C, j) => {
|
|
11
11
|
pt(d, (F) => {
|
|
12
|
-
if (F) return
|
|
12
|
+
if (F) return j(F);
|
|
13
13
|
C();
|
|
14
14
|
});
|
|
15
15
|
}), I = async (...d) => {
|
|
16
|
-
const C = d.map((b) => b.replace("-D", "").split("@").slice(0, -1).join("@").trim()).join(", "),
|
|
17
|
-
await
|
|
18
|
-
}, gt = () => G(
|
|
16
|
+
const C = d.map((b) => b.replace("-D", "").split("@").slice(0, -1).join("@").trim()).join(", "), j = ft(`Installing packages: ${C}`).start(), F = d.join(" ");
|
|
17
|
+
await st(`npm install ${F}`), j.succeed(`Installed packages: ${C}`);
|
|
18
|
+
}, gt = () => G(i(process.cwd(), "node_modules", ".bin", "prettier"));
|
|
19
19
|
async function k(d) {
|
|
20
20
|
try {
|
|
21
21
|
if (!gt()) return;
|
|
22
|
-
await
|
|
22
|
+
await st(`./node_modules/.bin/prettier --write "${d}"`), e.info(`Formatted ${d} with Prettier`);
|
|
23
23
|
} catch (C) {
|
|
24
24
|
e.error(`Error formatting ${d} with Prettier:`, C);
|
|
25
25
|
}
|
|
@@ -34,69 +34,74 @@ async function kt() {
|
|
|
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
|
-
},
|
|
38
|
-
const { default:
|
|
39
|
-
return { fileName:
|
|
37
|
+
}, j = async (s, o) => {
|
|
38
|
+
const { default: c } = await C[s], f = ct(c, o);
|
|
39
|
+
return { fileName: s, content: f };
|
|
40
40
|
}, F = async () => {
|
|
41
|
-
const
|
|
42
|
-
return await m(
|
|
43
|
-
}, b =
|
|
44
|
-
const
|
|
41
|
+
const s = i(process.cwd(), ".saltyrc.json");
|
|
42
|
+
return await m(s, "utf-8").then(JSON.parse).catch(() => ({}));
|
|
43
|
+
}, b = i(process.cwd(), "package.json"), A = async (s = b) => {
|
|
44
|
+
const o = await m(s, "utf-8").then(JSON.parse).catch(() => {
|
|
45
45
|
});
|
|
46
|
-
if (!
|
|
47
|
-
return
|
|
48
|
-
},
|
|
49
|
-
typeof
|
|
46
|
+
if (!o) throw "Could not read package.json file!";
|
|
47
|
+
return o;
|
|
48
|
+
}, nt = async (s, o = b) => {
|
|
49
|
+
typeof s == "object" && (s = JSON.stringify(s, null, 2)), await h(o, s);
|
|
50
50
|
}, K = async () => {
|
|
51
|
-
const
|
|
52
|
-
return A(
|
|
51
|
+
const s = new URL("../package.json", import.meta.url);
|
|
52
|
+
return A(s);
|
|
53
53
|
}, Q = await (async () => (await F()).defaultProject)(), $ = await K(), O = {
|
|
54
54
|
core: `@salty-css/core@${$.version}`,
|
|
55
55
|
react: `@salty-css/react@${$.version}`,
|
|
56
56
|
eslintConfigCore: `@salty-css/eslint-config-core@${$.version}`,
|
|
57
57
|
vite: `@salty-css/vite@${$.version}`,
|
|
58
58
|
next: `@salty-css/next@${$.version}`
|
|
59
|
-
}, W = (
|
|
60
|
-
const
|
|
61
|
-
return
|
|
59
|
+
}, W = (s) => {
|
|
60
|
+
const o = s === "." ? "" : s, c = process.cwd();
|
|
61
|
+
return i(c, o);
|
|
62
62
|
};
|
|
63
|
-
d.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(
|
|
63
|
+
d.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 = ".") {
|
|
64
64
|
if (!await A().catch(() => {
|
|
65
65
|
})) return w("Salty CSS project must be initialized in a directory with a package.json file.");
|
|
66
66
|
e.info("Initializing a new Salty-CSS project!");
|
|
67
|
-
const { dir:
|
|
68
|
-
if (!
|
|
67
|
+
const { dir: c = s, cssFile: f, skipInstall: g } = this.opts();
|
|
68
|
+
if (!c) return w("Project directory must be provided. Add it as the first argument after init command or use the --dir option.");
|
|
69
69
|
g || await I(O.core, O.react);
|
|
70
|
-
const p = process.cwd(),
|
|
71
|
-
await V(
|
|
72
|
-
const y = J.map(async ({ fileName: t, content:
|
|
73
|
-
const
|
|
74
|
-
if (await m(
|
|
70
|
+
const p = process.cwd(), l = W(c), J = await Promise.all([j("salty.config.ts"), j("saltygen/index.css")]);
|
|
71
|
+
await V(l, { recursive: !0 });
|
|
72
|
+
const y = J.map(async ({ fileName: t, content: a }) => {
|
|
73
|
+
const r = i(l, t);
|
|
74
|
+
if (await m(r, "utf-8").catch(() => {
|
|
75
75
|
}) !== void 0) {
|
|
76
|
-
e.debug("File already exists: " +
|
|
76
|
+
e.debug("File already exists: " + r);
|
|
77
77
|
return;
|
|
78
78
|
}
|
|
79
79
|
const v = t.split("/").slice(0, -1).join("/");
|
|
80
|
-
v && await V(
|
|
80
|
+
v && await V(i(l, v), { recursive: !0 }), e.info("Creating file: " + r), await h(r, a), await k(r);
|
|
81
81
|
});
|
|
82
82
|
await Promise.all(y);
|
|
83
|
-
const N = z(p,
|
|
83
|
+
const N = z(p, l) || ".", P = i(p, ".saltyrc.json"), n = await m(P, "utf-8").catch(() => {
|
|
84
84
|
});
|
|
85
|
-
if (
|
|
86
|
-
e.info("Creating file: " +
|
|
87
|
-
const
|
|
85
|
+
if (n === void 0) {
|
|
86
|
+
e.info("Creating file: " + P);
|
|
87
|
+
const a = JSON.stringify({
|
|
88
|
+
$schema: "./node_modules/@salty-css/core/.saltyrc.schema.json",
|
|
88
89
|
defaultProject: N,
|
|
89
|
-
projects: [
|
|
90
|
+
projects: [
|
|
91
|
+
{
|
|
92
|
+
dir: N,
|
|
93
|
+
framework: "react"
|
|
94
|
+
}
|
|
95
|
+
]
|
|
90
96
|
}, null, 2);
|
|
91
|
-
await h(
|
|
97
|
+
await h(P, a);
|
|
92
98
|
} else {
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
await h(j, l);
|
|
99
|
+
const t = JSON.parse(n), a = new Set((t == null ? void 0 : t.projects) || []);
|
|
100
|
+
a.add(N), t.projects = [...a];
|
|
101
|
+
const r = JSON.stringify(t, null, 2);
|
|
102
|
+
r !== n && (e.info("Edit file: " + P), await h(P, r));
|
|
98
103
|
}
|
|
99
|
-
const S =
|
|
104
|
+
const S = i(p, ".gitignore"), T = await m(S, "utf-8").catch(() => {
|
|
100
105
|
});
|
|
101
106
|
T !== void 0 && (T.includes("saltygen") || (e.info("Edit file: " + S), await h(S, T + `
|
|
102
107
|
|
|
@@ -106,115 +111,115 @@ saltygen
|
|
|
106
111
|
const x = ["src", "public", "assets", "styles", "css", "app"], M = ["styles", "css", "app", "pages"], q = ["index", "styles", "main", "global", "globals"], U = [".css", ".scss", ".sass"], E = await (async () => {
|
|
107
112
|
if (f) return f;
|
|
108
113
|
for (const t of x)
|
|
109
|
-
for (const
|
|
110
|
-
for (const
|
|
111
|
-
const u =
|
|
114
|
+
for (const a of q)
|
|
115
|
+
for (const r of U) {
|
|
116
|
+
const u = i(l, t, a + r);
|
|
112
117
|
if (await m(u, "utf-8").catch(() => {
|
|
113
|
-
}) !== void 0) return z(
|
|
118
|
+
}) !== void 0) return z(l, u);
|
|
114
119
|
for (const H of M) {
|
|
115
|
-
const L =
|
|
120
|
+
const L = i(l, t, H, a + r);
|
|
116
121
|
if (await m(L, "utf-8").catch(() => {
|
|
117
|
-
}) !== void 0) return z(
|
|
122
|
+
}) !== void 0) return z(l, L);
|
|
118
123
|
}
|
|
119
124
|
}
|
|
120
125
|
})();
|
|
121
126
|
if (E) {
|
|
122
|
-
const t =
|
|
127
|
+
const t = i(l, E), a = await m(t, "utf-8").catch(() => {
|
|
123
128
|
});
|
|
124
|
-
if (
|
|
125
|
-
const u =
|
|
129
|
+
if (a !== void 0 && !a.includes("saltygen")) {
|
|
130
|
+
const u = i(t, ".."), H = `@import '${z(u, i(l, "saltygen/index.css"))}';`;
|
|
126
131
|
e.info("Adding global import statement to CSS file: " + t), await h(t, H + `
|
|
127
|
-
` +
|
|
132
|
+
` + a), await k(t);
|
|
128
133
|
}
|
|
129
134
|
} else
|
|
130
135
|
e.warn("Could not find a CSS file to import the generated CSS. Please add it manually.");
|
|
131
|
-
const Y =
|
|
136
|
+
const Y = i(p, ".eslintrc.json"), at = G(Y), Z = i(l, ".eslintrc.json"), tt = G(Z);
|
|
132
137
|
if (at || tt) {
|
|
133
138
|
g || await I(O.eslintConfigCore);
|
|
134
|
-
const t = tt ? Z : Y,
|
|
139
|
+
const t = tt ? Z : Y, a = await m(t, "utf-8").catch(() => {
|
|
135
140
|
});
|
|
136
|
-
if (!
|
|
137
|
-
if (!
|
|
138
|
-
const u = JSON.parse(
|
|
141
|
+
if (!a) return w("Could not read ESLint config file.");
|
|
142
|
+
if (!a.includes("salty-css")) {
|
|
143
|
+
const u = JSON.parse(a);
|
|
139
144
|
e.info("Edit file: " + t), u.extends || (u.extends = []), u.extends.push("@salty-css/core");
|
|
140
145
|
const v = JSON.stringify(u, null, 2);
|
|
141
146
|
await h(t, v), await k(t);
|
|
142
147
|
}
|
|
143
148
|
}
|
|
144
|
-
const
|
|
149
|
+
const _ = i(l, "vite.config.ts"), B = await m(_, "utf-8").catch(() => {
|
|
145
150
|
});
|
|
146
151
|
if (B !== void 0 && !B.includes("saltyPlugin")) {
|
|
147
|
-
e.info("Edit file: " +
|
|
148
|
-
const
|
|
152
|
+
e.info("Edit file: " + _);
|
|
153
|
+
const a = `import { saltyPlugin } from '@salty-css/vite';
|
|
149
154
|
`, u = B.replace(/(plugins: \[)/, `$1
|
|
150
155
|
saltyPlugin(__dirname),`);
|
|
151
|
-
g || await I(`-D ${O.vite}`), e.info("Adding Salty-CSS plugin to Vite config..."), await h(
|
|
156
|
+
g || await I(`-D ${O.vite}`), e.info("Adding Salty-CSS plugin to Vite config..."), await h(_, a + u), await k(_);
|
|
152
157
|
}
|
|
153
|
-
const
|
|
154
|
-
if (
|
|
155
|
-
let t = await m(
|
|
158
|
+
const R = ["next.config.js", "next.config.cjs", "next.config.ts", "next.config.mjs"].map((t) => i(l, t)).find((t) => G(t));
|
|
159
|
+
if (R) {
|
|
160
|
+
let t = await m(R, "utf-8").catch(() => {
|
|
156
161
|
});
|
|
157
162
|
if (t !== void 0 && !t.includes("withSaltyCss")) {
|
|
158
|
-
let
|
|
159
|
-
/\splugins([^=]*)=[^[]\[/.test(t) && !
|
|
163
|
+
let r = !1;
|
|
164
|
+
/\splugins([^=]*)=[^[]\[/.test(t) && !r && (t = t.replace(/\splugins([^=]*)=[^[]\[/, (L, D) => ` plugins${D}= [withSaltyCss,`), r = !0);
|
|
160
165
|
const v = t.includes("module.exports"), H = v ? `const { withSaltyCss } = require('@salty-css/next');
|
|
161
166
|
` : `import { withSaltyCss } from '@salty-css/next';
|
|
162
167
|
`;
|
|
163
|
-
v && !
|
|
168
|
+
v && !r ? (t = t.replace(/module.exports = ([^;]+)/, (L, D) => `module.exports = withSaltyCss(${D})`), r = !0) : r || (t = t.replace(/export default ([^;]+)/, (L, D) => `export default withSaltyCss(${D})`)), g || await I(`-D ${O.next}`), e.info("Adding Salty-CSS plugin to Next.js config..."), await h(R, H + t), await k(R);
|
|
164
169
|
}
|
|
165
170
|
}
|
|
166
171
|
const it = await A().catch(() => w("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: " + b), t.scripts.prepare = t.scripts.prepare + " && npx salty-css build") : (e.info("Edit file: " + b), t.scripts.prepare = "npx salty-css build"), t));
|
|
167
|
-
await
|
|
168
|
-
}), d.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(
|
|
172
|
+
await nt(it), 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 ⭐");
|
|
173
|
+
}), d.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) {
|
|
169
174
|
e.info("Building the Salty-CSS project...");
|
|
170
|
-
const { dir:
|
|
171
|
-
if (!
|
|
172
|
-
const
|
|
173
|
-
await lt(
|
|
174
|
-
}), d.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(
|
|
175
|
-
const { file:
|
|
176
|
-
if (!
|
|
175
|
+
const { dir: o = s } = this.opts();
|
|
176
|
+
if (!o) return w("Project directory must be provided. Add it as the first argument after build command or use the --dir option.");
|
|
177
|
+
const c = W(o);
|
|
178
|
+
await lt(c);
|
|
179
|
+
}), d.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, o = Q) {
|
|
180
|
+
const { file: c = s, dir: f = o, tag: g, name: p, className: l, reactComponent: J = !1 } = this.opts();
|
|
181
|
+
if (!c) return w("File to generate must be provided. Add it as the first argument after generate command or use the --file option.");
|
|
177
182
|
if (!f) return w("Project directory must be provided. Add it as the second argument after generate command or use the --dir option.");
|
|
178
|
-
const y = W(f), N =
|
|
179
|
-
N && await V(
|
|
180
|
-
const
|
|
181
|
-
|
|
182
|
-
const S = et(
|
|
183
|
+
const y = W(f), N = c.split("/").slice(0, -1).join("/");
|
|
184
|
+
N && await V(i(y, N), { recursive: !0 });
|
|
185
|
+
const P = i(y, c), n = rt(P);
|
|
186
|
+
n.ext || (n.ext = ".ts"), n.name.endsWith(".css") || (n.name = n.name + ".css"), n.base = n.name + n.ext;
|
|
187
|
+
const S = et(n);
|
|
183
188
|
if (await m(S, "utf-8").catch(() => {
|
|
184
189
|
}) !== void 0) {
|
|
185
190
|
e.error("File already exists:", S);
|
|
186
191
|
return;
|
|
187
192
|
}
|
|
188
|
-
let x = dt(p ||
|
|
193
|
+
let x = dt(p || n.base.replace(/\.css\.\w+$/, ""));
|
|
189
194
|
if (J) {
|
|
190
195
|
const q = x + "Component";
|
|
191
196
|
x = x + "Wrapper";
|
|
192
|
-
const U =
|
|
193
|
-
|
|
194
|
-
const E = et(
|
|
197
|
+
const U = n.base.replace(/\.css\.\w+$/, ""), { content: X } = await j("react/react-vanilla-file.ts", { tag: g, componentName: q, styledComponentName: x, className: l, fileName: U });
|
|
198
|
+
n.name = U.replace(/\.css$/, ""), n.ext = ".tsx", n.base = n.name + n.ext;
|
|
199
|
+
const E = et(n);
|
|
195
200
|
e.info("Generating a new file: " + E), await h(E, X), await k(E);
|
|
196
201
|
}
|
|
197
|
-
const { content: M } = await
|
|
202
|
+
const { content: M } = await j("react/react-styled-file.ts", { tag: g, name: x, className: l });
|
|
198
203
|
e.info("Generating a new file: " + S), await h(S, M), await k(S);
|
|
199
|
-
}), d.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(
|
|
200
|
-
const { legacyPeerDeps:
|
|
204
|
+
}), d.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") {
|
|
205
|
+
const { legacyPeerDeps: o, version: c = s } = this.opts(), f = i(process.cwd(), "package.json"), g = await A(f).catch((y) => w(y));
|
|
201
206
|
if (!g) return;
|
|
202
|
-
const p = { ...g.dependencies, ...g.devDependencies },
|
|
203
|
-
if (!
|
|
207
|
+
const p = { ...g.dependencies, ...g.devDependencies }, l = Object.keys(p).filter((y) => y === "salty-css" || y.startsWith("@salty-css/"));
|
|
208
|
+
if (!l.length)
|
|
204
209
|
return w(
|
|
205
210
|
"No Salty-CSS packages found in package.json. Make sure you are running update command in the same directory! Used package.json path: " + f
|
|
206
211
|
);
|
|
207
|
-
const J =
|
|
208
|
-
|
|
212
|
+
const J = l.map((y) => c === "@" ? `${y}@${$.version}` : `${y}@${c.replace(/^@/, "")}`);
|
|
213
|
+
o ? (e.warn("Using legacy peer dependencies to update packages."), await I(...J, "--legacy-peer-deps")) : await I(...J), e.info("Salty-CSS packages updated successfully!");
|
|
209
214
|
}), d.option("-v, --version", "Show the current version of Salty-CSS.").action(async function() {
|
|
210
|
-
const
|
|
211
|
-
e.info("CLI is running: " +
|
|
212
|
-
const
|
|
213
|
-
if (!
|
|
214
|
-
const f = { ...
|
|
215
|
+
const s = await K();
|
|
216
|
+
e.info("CLI is running: " + s.version);
|
|
217
|
+
const o = i(process.cwd(), "package.json"), c = await A(o).catch((p) => w(p));
|
|
218
|
+
if (!c) return;
|
|
219
|
+
const f = { ...c.dependencies, ...c.devDependencies }, g = Object.keys(f).filter((p) => p === "salty-css" || p.startsWith("@salty-css/"));
|
|
215
220
|
if (!g.length)
|
|
216
221
|
return w(
|
|
217
|
-
"No Salty-CSS packages found in package.json. Make sure you are running update command in the same directory! Used package.json path: " +
|
|
222
|
+
"No Salty-CSS packages found in package.json. Make sure you are running update command in the same directory! Used package.json path: " + o
|
|
218
223
|
);
|
|
219
224
|
for (const p of g)
|
|
220
225
|
e.info(`${p}: ${f[p]}`);
|