@salty-css/core 0.0.1-alpha.246 → 0.0.1-alpha.248
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 +8 -8
- package/bin/main.cjs +1 -1
- package/bin/main.js +1 -1
- package/package.json +1 -1
- package/server/index.cjs +1 -1
- package/server/index.js +1 -1
- package/{should-restart-BJ_DZyAz.js → should-restart-BgsyWPgo.js} +3 -3
- package/should-restart-WiLKWZdo.cjs +1 -0
- package/should-restart-BepJi85G.cjs +0 -1
package/README.md
CHANGED
@@ -64,6 +64,14 @@ To get help with problems, [Join Salty CSS Discord server](https://discord.gg/R6
|
|
64
64
|
- [defineViewportClamp](#viewport-clamp) - create CSS clamp functions that are based on user's viewport and can calculate relative values easily
|
65
65
|
- [color](#color-function) - transform any valid color code or variable to be darker, lighter etc. easily (uses [color library by Qix-](https://github.com/Qix-/color))
|
66
66
|
|
67
|
+
### Salty CSS CLI
|
68
|
+
|
69
|
+
In your existing repository you can use `npx salty-css [command]` to initialize a project, generate components, update related packages and build required files.
|
70
|
+
|
71
|
+
- 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.
|
72
|
+
- 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.
|
73
|
+
- Build files → `npx salty-css build [directory/filename]` - Compile Salty CSS related files in your project. This should not be needed if you are using tools like Next.js or Vite
|
74
|
+
|
67
75
|
## Styled function
|
68
76
|
|
69
77
|
Styled function is the main way to use Salty CSS within React. Styled function creates a React component that then can be used anywhere in your app. All styled functions must be created in `.css.ts` or `.css.tsx` files
|
@@ -375,14 +383,6 @@ import { color } from '@salty-css/core/helpers';
|
|
375
383
|
export const Wrapper = styled('span', { base: { backgroundColor: color('#000').alpha(0.5) } });
|
376
384
|
```
|
377
385
|
|
378
|
-
## Salty CSS CLI
|
379
|
-
|
380
|
-
In your existing repository you can use `npx salty-css [command]` to initialize a project, generate components, update related packages and build required files.
|
381
|
-
|
382
|
-
- 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.
|
383
|
-
- 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.
|
384
|
-
- 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
|
385
|
-
|
386
386
|
## Usage
|
387
387
|
|
388
388
|
### Next.js
|
package/bin/main.cjs
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const te=require("commander"),A=require("fs"),s=require("fs/promises"),n=require("path"),ne=require("ejs"),e=require("../index-vWQ_NojW.cjs"),ie=require("../pascal-case-iWoaJWwT.cjs"),se=require("child_process"),oe=require("ora"),ae=require("../should-restart-
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const te=require("commander"),A=require("fs"),s=require("fs/promises"),n=require("path"),ne=require("ejs"),e=require("../index-vWQ_NojW.cjs"),ie=require("../pascal-case-iWoaJWwT.cjs"),se=require("child_process"),oe=require("ora"),ae=require("../should-restart-WiLKWZdo.cjs");var G=typeof document<"u"?document.currentScript:null;const X=y=>new Promise((C,P)=>{se.exec(y,x=>{if(x)return P(x);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(),x=y.join(" ");await X(`npm install ${x}`),P.succeed(`Installed packages: ${C}`)},re=()=>A.existsSync(n.join(process.cwd(),"node_modules",".bin","prettier"));async function S(y){try{if(!re())return;await X(`./node_modules/.bin/prettier --write "${y}"`),e.logger.info(`Formatted ${y} with Prettier`)}catch(C){e.logger.error(`Error formatting ${y} with Prettier:`,C)}}async function ce(){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:f}=await C[i],d=ne.render(f,a);return{fileName:i,content:d}},x=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:G&&G.tagName.toUpperCase()==="SCRIPT"&&G.src||new URL("bin/main.cjs",document.baseURI).href);return N(i)},V=await(async()=>(await x()).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}`},H=i=>{const a=i==="."?"":i,f=process.cwd();return n.join(f,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 e.logError("Salty CSS project must be initialized in a directory with a package.json file.");e.logger.info("Initializing a new Salty-CSS project!");const{dir:f=i,cssFile:d,skipInstall:p}=this.opts();if(!f)return e.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 c=process.cwd(),r=H(f),q=await Promise.all([P("salty.config.ts"),P("saltygen/index.css")]);await s.mkdir(r,{recursive:!0});const m=q.map(async({fileName:t,content:u})=>{const l=n.join(r,t);if(await s.readFile(l,"utf-8").catch(()=>{})!==void 0){e.logger.debug("File already exists: "+l);return}const k=t.split("/").slice(0,-1).join("/");k&&await s.mkdir(n.join(r,k),{recursive:!0}),e.logger.info("Creating file: "+l),await s.writeFile(l,u),await S(l)});await Promise.all(m);const w=n.relative(c,r)||".",h=n.join(c,".saltyrc.json"),g=await s.readFile(h,"utf-8").catch(()=>{});if(g===void 0){e.logger.info("Creating file: "+h);const u=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,u),await S(h)}else{const t=JSON.parse(g),u=(t==null?void 0:t.projects)||[];if(u.findIndex(o=>o.dir===w)===-1){u.push({dir:w,framework:"react"}),t.projects=[...u];const o=JSON.stringify(t,null,2);o!==g&&(e.logger.info("Edit file: "+h),await s.writeFile(h,o),await S(h))}}const j=n.join(c,".gitignore"),T=await s.readFile(j,"utf-8").catch(()=>{});T!==void 0&&(T.includes("saltygen")||(e.logger.info("Edit file: "+j),await s.writeFile(j,T+`
|
2
2
|
|
3
3
|
# Salty-CSS
|
4
4
|
saltygen
|
package/bin/main.js
CHANGED
@@ -7,7 +7,7 @@ import { l as t, a as h, g as K, i as de, b as fe } from "../index-B8uXjJ2F.js";
|
|
7
7
|
import { p as pe } from "../pascal-case-BQpR5PdN.js";
|
8
8
|
import { exec as ue } from "child_process";
|
9
9
|
import ge from "ora";
|
10
|
-
import { c as ye } from "../should-restart-
|
10
|
+
import { c as ye } from "../should-restart-BgsyWPgo.js";
|
11
11
|
const ne = (g) => new Promise((P, x) => {
|
12
12
|
ue(g, ($) => {
|
13
13
|
if ($) return x($);
|
package/package.json
CHANGED
package/server/index.cjs
CHANGED
@@ -1 +1 @@
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../should-restart-
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../should-restart-WiLKWZdo.cjs");exports.checkShouldRestart=e.checkShouldRestart;
|
package/server/index.js
CHANGED
@@ -1,12 +1,12 @@
|
|
1
1
|
import { readFile as r } from "fs/promises";
|
2
2
|
import { i as e } from "./index-B8uXjJ2F.js";
|
3
|
-
const
|
3
|
+
const f = async (t) => {
|
4
4
|
if (!t || t.includes("node_modules") || t.includes("saltygen")) return !1;
|
5
5
|
if (t.includes("salty.config")) return !0;
|
6
6
|
if (!e(t)) return !1;
|
7
7
|
const s = await r(t, "utf-8");
|
8
|
-
return
|
8
|
+
return !!(/.+define[A-Z]\w+/.test(s) || /.+keyframes\(.+/.test(s));
|
9
9
|
};
|
10
10
|
export {
|
11
|
-
c
|
11
|
+
f as c
|
12
12
|
};
|
@@ -0,0 +1 @@
|
|
1
|
+
"use strict";const s=require("fs/promises"),r=require("./index-vWQ_NojW.cjs"),i=async t=>{if(!t||t.includes("node_modules")||t.includes("saltygen"))return!1;if(t.includes("salty.config"))return!0;if(!r.isSaltyFile(t))return!1;const e=await s.readFile(t,"utf-8");return!!(/.+define[A-Z]\w+/.test(e)||/.+keyframes\(.+/.test(e))};exports.checkShouldRestart=i;
|
@@ -1 +0,0 @@
|
|
1
|
-
"use strict";const e=require("fs/promises"),r=require("./index-vWQ_NojW.cjs"),i=async t=>{if(!t||t.includes("node_modules")||t.includes("saltygen"))return!1;if(t.includes("salty.config"))return!0;if(!r.isSaltyFile(t))return!1;const s=await e.readFile(t,"utf-8");return!!/.+define[A-Z]\w+/.test(s)};exports.checkShouldRestart=i;
|