@salty-css/core 0.0.1-alpha.8 → 0.0.1-alpha.81
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 +105 -26
- package/bin/bin-util.d.ts +2 -0
- package/bin/index.cjs +2 -0
- package/bin/index.d.ts +2 -0
- package/bin/index.js +3 -0
- package/bin/logger.d.ts +2 -0
- package/bin/main.cjs +10 -0
- package/bin/main.d.ts +1 -0
- package/bin/main.js +232 -0
- package/bin/prettier.d.ts +1 -0
- package/compiler/get-files.d.ts +3 -0
- package/compiler/index.cjs +9 -9
- package/compiler/index.d.ts +5 -5
- package/compiler/index.js +176 -142
- package/config/config-types.d.ts +10 -4
- package/dash-case-DKzpenwY.cjs +1 -0
- package/dash-case-DMQMcCO6.js +19 -0
- package/generator/index.cjs +1 -1
- package/generator/index.js +30 -20
- package/generator/style-generator.d.ts +9 -8
- package/index-84Wroia-.cjs +1 -0
- package/index-D_732b92.js +4 -0
- package/package.json +23 -3
- package/parse-templates-DUUSaubj.js +96 -0
- package/parse-templates-DVK3iZIl.cjs +8 -0
- package/pascal-case-BQpR5PdN.js +6 -0
- package/pascal-case-iWoaJWwT.cjs +1 -0
- package/react-styled-file-CGVf5n1B.js +11 -0
- package/react-styled-file-Dkubsz-U.cjs +8 -0
- package/react-vanilla-file-CCXbsjIb.js +18 -0
- package/react-vanilla-file-CG_WJLam.cjs +15 -0
- package/salty.config-BhBY_oOk.js +10 -0
- package/salty.config-Dk6ZcCxI.cjs +7 -0
- package/types/index.d.ts +13 -4
- package/util/camel-case.d.ts +1 -0
- package/util/index.cjs +1 -1
- package/util/index.d.ts +2 -0
- package/util/index.js +7 -15
- package/util/module-type.d.ts +1 -0
- package/util/pascal-case.d.ts +1 -0
- package/parse-templates-BOSK0Tb6.js +0 -90
- package/parse-templates-BY1Xai-_.cjs +0 -8
package/README.md
CHANGED
@@ -1,15 +1,90 @@
|
|
1
|
-
# Salty
|
1
|
+
# Salty CSS - Kinda sweet but yet spicy CSS-in-JS library
|
2
2
|
|
3
|
-
|
3
|
+
In the world of frontend dev is there anything saltier than CSS? Salty CSS is built to provide better developer experience for developers looking for performant and feature rich CSS-in-JS solutions.
|
4
4
|
|
5
|
-
|
5
|
+
## Features
|
6
6
|
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
7
|
+
- Build time compilation to achieve awesome runtime performance and minimal size
|
8
|
+
- Next.js, React Server Components, Vite and Webpack support
|
9
|
+
- Type safety with out of the box TypeScript and ESLint plugin
|
10
|
+
- Advanced CSS variables configuration to allow smooth token usage
|
11
|
+
- Style templates to create reusable styles easily
|
11
12
|
|
12
|
-
|
13
|
+
## Get started
|
14
|
+
|
15
|
+
- Initialize: `npx salty-css init [directory]`
|
16
|
+
- Create component: `npx salty-css generate [filePath]`
|
17
|
+
- Build: `npx salty-css build [directory]`
|
18
|
+
|
19
|
+
### Packages
|
20
|
+
|
21
|
+
Note: Fastest way to get started with any framework is [npx salty-css init [directory]](#initialize-salty-css-for-a-project) command
|
22
|
+
|
23
|
+
- [Next.js](#nextjs) → `npm install @salty-css/next` + [Next.js install guide](#nextjs) + [Next.js example app](https://github.com/margarita-form/salty-css-website)
|
24
|
+
- [React](#react) → `npm install @salty-css/react` + [React install guide](#react) + [React example code](#code-examples)
|
25
|
+
- [Vite](#vite) → `npm install @salty-css/vite` + [(Vite install guide)](#vite)
|
26
|
+
- [Webpack](https://www.npmjs.com/package/@salty-css/webpack) → `npm install @salty-css/webpack` + Guide coming soon
|
27
|
+
- [ESLint](https://www.npmjs.com/package/@salty-css/eslint-plugin-core) → `npm install @salty-css/eslint-plugin-core` + Guide coming soon
|
28
|
+
- [Core](https://www.npmjs.com/package/@salty-css/react) → `npm install @salty-css/core` (This package contains code for internal use)
|
29
|
+
|
30
|
+
### Add Salty CSS to your project with `salty-css` CLI
|
31
|
+
|
32
|
+
#### Initialize Salty CSS for a project
|
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.
|
35
|
+
|
36
|
+
#### Create components
|
37
|
+
|
38
|
+
Components can be created with `npx salty-css generate [filePath]` which then creates a new Salty CSS component file to the specified path. Additional options like `--dir, --tag, --name and --className` are also supported. Read more about them with `npx salty-css generate --help`
|
39
|
+
|
40
|
+
#### Build / Compile Salty CSS
|
41
|
+
|
42
|
+
If you want to manually build your project that can be done by running `npx salty-css build [directory]`. Directory is not required as CLI can use default directory defined in `.saltyrc`. Note that build generates css files but Vite / Webpack plugin is still required for full support.
|
43
|
+
|
44
|
+
#### Update Salty CSS packages
|
45
|
+
|
46
|
+
To ease the pain of package updates all Salty CSS packages can be updated with `npx salty-css update`
|
47
|
+
|
48
|
+
### Manual work
|
49
|
+
|
50
|
+
#### Next.js
|
51
|
+
|
52
|
+
1. For Next.js support install `npm i @salty-css/next @salty-css/core @salty-css/react`
|
53
|
+
2. Create `salty.config.ts` to your app directory
|
54
|
+
3. Add Salty CSS plugin to next.js config
|
55
|
+
|
56
|
+
- **Next.js 15:** In `next.config.ts` add import for salty plugin `import { withSaltyCss } from '@salty-css/next';` and then add `withSaltyCss` to wrap your nextConfig export like so `export default withSaltyCss(nextConfig);`
|
57
|
+
- **Next.js 14 and older:** In `next.config.js` add import for salty plugin `const { withSaltyCss } = require('@salty-css/next');` and then add `withSaltyCss` to wrap your nextConfig export like so `module.exports = withSaltyCss(nextConfig);`
|
58
|
+
|
59
|
+
4. Make sure that `salty.config.ts` and `next.config.ts` are in the same folder!
|
60
|
+
5. Build `saltygen` directory by running your app once or with cli `npx salty-css build [directory]`
|
61
|
+
6. Import global styles from `saltygen/index.css` to some global css file with `@import 'insert_path_to_index_css';`.
|
62
|
+
|
63
|
+
[Check out Next.js demo project](https://github.com/margarita-form/salty-css-website) or [react example code](#code-examples)
|
64
|
+
|
65
|
+
#### React
|
66
|
+
|
67
|
+
1. Install related dependencies: `npm i @salty-css/core @salty-css/react`
|
68
|
+
2. Create `salty.config.ts` to your app directory
|
69
|
+
3. Configure your build tool to support Salty CSS ([Vite](#vite) or Webpack)
|
70
|
+
|
71
|
+
[Check out react example code](#code-examples)
|
72
|
+
|
73
|
+
#### Vite
|
74
|
+
|
75
|
+
1. For Vite support install `npm i @salty-css/vite @salty-css/core`
|
76
|
+
2. In `vite.config` add import for salty plugin `import { saltyPlugin } from '@salty-css/vite';` and then add `saltyPlugin(__dirname)` to your vite configuration plugins
|
77
|
+
3. Make sure that `salty.config.ts` and `vite.config.ts` are in the same folder!
|
78
|
+
4. Build `saltygen` directory by running your app once or with cli `npx salty-css build [directory]`
|
79
|
+
5. Import global styles from `saltygen/index.css` to some global css file with `@import 'insert_path_to_index_css';`.
|
80
|
+
|
81
|
+
### Create components
|
82
|
+
|
83
|
+
1. Create salty components with styled only inside files that end with `.css.ts`, `.salty.ts` `.styled.ts` or `.styles.ts`
|
84
|
+
|
85
|
+
## Code examples
|
86
|
+
|
87
|
+
### Basic usage example with Button
|
13
88
|
|
14
89
|
**Salty config**
|
15
90
|
|
@@ -54,8 +129,10 @@ export const IndexPage = () => {
|
|
54
129
|
import { styled } from '@salty-css/react/styled';
|
55
130
|
|
56
131
|
export const Wrapper = styled('div', {
|
57
|
-
|
58
|
-
|
132
|
+
base: {
|
133
|
+
display: 'block',
|
134
|
+
padding: '2vw',
|
135
|
+
},
|
59
136
|
});
|
60
137
|
```
|
61
138
|
|
@@ -65,22 +142,24 @@ export const Wrapper = styled('div', {
|
|
65
142
|
import { styled } from '@salty-css/react/styled';
|
66
143
|
|
67
144
|
export const Button = styled('button', {
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
145
|
+
base: {
|
146
|
+
display: 'block',
|
147
|
+
padding: `0.6em 1.2em`,
|
148
|
+
border: '1px solid currentColor',
|
149
|
+
background: 'transparent',
|
150
|
+
color: 'currentColor/40',
|
151
|
+
cursor: 'pointer',
|
152
|
+
transition: '200ms',
|
153
|
+
textDecoration: 'none',
|
154
|
+
'&:hover': {
|
155
|
+
background: 'black',
|
156
|
+
borderColor: 'black',
|
157
|
+
color: 'white',
|
158
|
+
},
|
159
|
+
'&:disabled': {
|
160
|
+
opacity: 0.25,
|
161
|
+
pointerEvents: 'none',
|
162
|
+
},
|
84
163
|
},
|
85
164
|
variants: {
|
86
165
|
variant: {
|
package/bin/index.cjs
ADDED
package/bin/index.d.ts
ADDED
package/bin/index.js
ADDED
package/bin/logger.d.ts
ADDED
package/bin/main.cjs
ADDED
@@ -0,0 +1,10 @@
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const se=require("commander"),H=require("fs"),s=require("fs/promises"),n=require("path"),ae=require("ejs"),oe=require("../compiler/index.cjs"),re=require("../pascal-case-iWoaJWwT.cjs"),L=require("winston"),ce=require("child_process"),le=require("ora");var B=typeof document<"u"?document.currentScript:null;const t=L.createLogger({level:"debug",format:L.format.combine(L.format.colorize(),L.format.cli()),transports:[new L.transports.Console({})]}),h=p=>{t.error(p)},ee=p=>new Promise((w,j)=>{ce.exec(p,F=>{if(F)return j(F);w()})}),D=async(...p)=>{const w=p.map(k=>k.replace("-D","").split("@").slice(0,-1).join("@").trim()).join(", "),j=le(`Installing packages: ${w}`).start(),F=p.join(" ");await ee(`npm install ${F}`),j.succeed(`Installed packages: ${w}`)},de=()=>H.existsSync(n.join(process.cwd(),"node_modules",".bin","prettier"));async function x(p){try{if(!de())return;await ee(`./node_modules/.bin/prettier --write "${p}"`),t.info(`Formatted ${p} with Prettier`)}catch(w){t.error(`Error formatting ${p} with Prettier:`,w)}}async function pe(){const p=new se.Command;p.name("salty-css").description("Salty-CSS CLI tool to help with annoying configuration tasks.");const w={"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"))},j=async(i,o)=>{const{default:c}=await w[i],u=ae.render(c,o);return{fileName:i,content:u}},F=async()=>{const i=n.join(process.cwd(),".saltyrc");return await s.readFile(i,"utf-8").then(JSON.parse).catch(()=>({}))},k=n.join(process.cwd(),"package.json"),I=async(i=k)=>{const o=await s.readFile(i,"utf-8").then(JSON.parse).catch(()=>{});if(!o)throw"Could not read package.json file!";return o},te=async(i,o=k)=>{typeof i=="object"&&(i=JSON.stringify(i,null,2)),await s.writeFile(o,i)},V=async()=>{const i=new URL("../package.json",typeof document>"u"?require("url").pathToFileURL(__filename).href:B&&B.tagName.toUpperCase()==="SCRIPT"&&B.src||new URL("bin/main.cjs",document.baseURI).href);return I(i)},K=await(async()=>(await F()).defaultProject)(),b=await V(),q={core:`@salty-css/core@${b.version}`,react:`@salty-css/react@${b.version}`,eslintConfigCore:`@salty-css/eslint-config-core@${b.version}`,vite:`@salty-css/vite@${b.version}`,next:`@salty-css/next@${b.version}`},z=i=>{const o=i==="."?"":i,c=process.cwd();return n.join(c,o)};p.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 I().catch(()=>{}))return h("Salty CSS project must be initialized in a directory with a package.json file.");t.info("Initializing a new Salty-CSS project!");const{dir:c=i,cssFile:u,skipInstall:g}=this.opts();if(!c)return h("Project directory must be provided. Add it as the first argument after init command or use the --dir option.");g||await D(q.core,q.react);const f=process.cwd(),l=z(c),$=await Promise.all([j("salty.config.ts"),j("saltygen/index.css")]);await s.mkdir(l,{recursive:!0});const m=$.map(async({fileName:e,content:a})=>{const d=n.join(l,e);if(await s.readFile(d,"utf-8").catch(()=>{})!==void 0){t.debug("File already exists: "+d);return}const C=e.split("/").slice(0,-1).join("/");C&&await s.mkdir(n.join(l,C),{recursive:!0}),t.info("Creating file: "+d),await s.writeFile(d,a),await x(d)});await Promise.all(m);const J=n.relative(f,l)||".",v=n.join(f,".saltyrc"),r=await s.readFile(v,"utf-8").catch(()=>{});if(r===void 0){t.info("Creating file: "+v);const a=JSON.stringify({defaultProject:J,projects:[J]},null,2);await s.writeFile(v,a)}else{t.info("Edit file: "+v);const e=JSON.parse(r),a=new Set((e==null?void 0:e.projects)||[]);a.add(J),e.projects=[...a];const d=JSON.stringify(e,null,2);await s.writeFile(v,d)}const S=n.join(f,".gitignore"),T=await s.readFile(S,"utf-8").catch(()=>{});T!==void 0&&(T.includes("saltygen")||(t.info("Edit file: "+S),await s.writeFile(S,T+`
|
2
|
+
|
3
|
+
# Salty-CSS
|
4
|
+
saltygen
|
5
|
+
`)));const P=["src","public","assets","styles","css","app"],G=["styles","css","app","pages"],W=["index","styles","main","global","globals"],U=[".css",".scss",".sass"],N=await(async()=>{if(u)return u;for(const e of P)for(const a of W)for(const d of U){const y=n.join(l,e,a+d);if(await s.readFile(y,"utf-8").catch(()=>{})!==void 0)return n.relative(l,y);for(const O of G){const A=n.join(l,e,O,a+d);if(await s.readFile(A,"utf-8").catch(()=>{})!==void 0)return n.relative(l,A)}}})();if(N){const e=n.join(l,N),a=await s.readFile(e,"utf-8").catch(()=>{});if(a!==void 0&&!a.includes("saltygen")){const y=n.join(e,".."),O=`@import '${n.relative(y,n.join(l,"saltygen/index.css"))}';`;t.info("Adding global import statement to CSS file: "+e),await s.writeFile(e,O+`
|
6
|
+
`+a),await x(e)}}else t.warn("Could not find a CSS file to import the generated CSS. Please add it manually.");const X=n.join(f,".eslintrc.json"),ne=H.existsSync(X),Y=n.join(l,".eslintrc.json"),Z=H.existsSync(Y);if(ne||Z){g||await D(q.eslintConfigCore);const e=Z?Y:X,a=await s.readFile(e,"utf-8").catch(()=>{});if(!a)return h("Could not read ESLint config file.");if(!a.includes("salty-css")){const y=JSON.parse(a);t.info("Edit file: "+e),y.extends||(y.extends=[]),y.extends.push("@salty-css/core");const C=JSON.stringify(y,null,2);await s.writeFile(e,C),await x(e)}}const _=n.join(l,"vite.config.ts"),M=await s.readFile(_,"utf-8").catch(()=>{});if(M!==void 0&&!M.includes("saltyPlugin")){t.info("Edit file: "+_);const a=`import { saltyPlugin } from '@salty-css/vite';
|
7
|
+
`,y=M.replace(/(plugins: \[)/,`$1
|
8
|
+
saltyPlugin(__dirname),`);g||await D(`-D ${q.vite}`),t.info("Adding Salty-CSS plugin to Vite config..."),await s.writeFile(_,a+y),await x(_)}const R=["next.config.js","next.config.cjs","next.config.ts","next.config.mjs"].map(e=>n.join(l,e)).find(e=>H.existsSync(e));if(R){let e=await s.readFile(R,"utf-8").catch(()=>{});if(e!==void 0&&!e.includes("withSaltyCss")){let d=!1;/\splugins([^=]*)=[^[]\[/.test(e)&&!d&&(e=e.replace(/\splugins([^=]*)=[^[]\[/,(A,E)=>` plugins${E}= [withSaltyCss,`),d=!0);const C=e.includes("module.exports"),O=C?`const { withSaltyCss } = require('@salty-css/next');
|
9
|
+
`:`import { withSaltyCss } from '@salty-css/next';
|
10
|
+
`;C&&!d?(e=e.replace(/module.exports = ([^;]+)/,(A,E)=>`module.exports = withSaltyCss(${E})`),d=!0):d||(e=e.replace(/export default ([^;]+)/,(A,E)=>`export default withSaltyCss(${E})`)),g||await D(`-D ${q.next}`),t.info("Adding Salty-CSS plugin to Next.js config..."),await s.writeFile(R,O+e),await x(R)}}const ie=await I().catch(()=>h("Could not read package.json file.")).then(e=>(e.scripts||(e.scripts={}),e.scripts.prepare?e.scripts.prepare.includes("salty-css")||(t.info("Edit file: "+k),e.scripts.prepare=e.scripts.prepare+" && npx salty-css build"):(t.info("Edit file: "+k),e.scripts.prepare="npx salty-css build"),e));await te(ie),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 ⭐")}),p.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=K){t.info("Building the Salty-CSS project...");const{dir:o=i}=this.opts();if(!o)return h("Project directory must be provided. Add it as the first argument after build command or use the --dir option.");const c=z(o);await oe.generateCss(c)}),p.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,o=K){const{file:c=i,dir:u=o,tag:g,name:f,className:l,reactComponent:$=!1}=this.opts();if(!c)return h("File to generate must be provided. Add it as the first argument after generate command or use the --file option.");if(!u)return h("Project directory must be provided. Add it as the second argument after generate command or use the --dir option.");const m=z(u),J=c.split("/").slice(0,-1).join("/");J&&await s.mkdir(n.join(m,J),{recursive:!0});const v=n.join(m,c),r=n.parse(v);r.ext||(r.ext=".ts"),r.name.endsWith(".css")||(r.name=r.name+".css"),r.base=r.name+r.ext;const S=n.format(r);if(await s.readFile(S,"utf-8").catch(()=>{})!==void 0){t.error("File already exists:",S);return}let P=re.pascalCase(f||r.base.replace(/\.css\.\w+$/,""));if($){const W=P+"Component";P=P+"Wrapper";const U=r.base.replace(/\.css\.\w+$/,""),{content:Q}=await j("react/react-vanilla-file.ts",{tag:g,componentName:W,styledComponentName:P,className:l,fileName:U});r.name=U.replace(/\.css$/,""),r.ext=".tsx",r.base=r.name+r.ext;const N=n.format(r);t.info("Generating a new file: "+N),await s.writeFile(N,Q),await x(N)}const{content:G}=await j("react/react-styled-file.ts",{tag:g,name:P,className:l});t.info("Generating a new file: "+S),await s.writeFile(S,G),await x(S)}),p.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:o,version:c=i}=this.opts(),u=n.join(process.cwd(),"package.json"),g=await I(u).catch(m=>h(m));if(!g)return;const f={...g.dependencies,...g.devDependencies},l=Object.keys(f).filter(m=>m==="salty-css"||m.startsWith("@salty-css/"));if(!l.length)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: "+u);const $=l.map(m=>c==="@"?`${m}@${b.version}`:`${m}@${c.replace(/^@/,"")}`);o?(t.warn("Using legacy peer dependencies to update packages."),await D(...$,"--legacy-peer-deps")):await D(...$),t.info("Salty-CSS packages updated successfully!")}),p.option("-v, --version","Show the current version of Salty-CSS.").action(async function(){const i=await V();t.info("CLI is running: "+i.version);const o=n.join(process.cwd(),"package.json"),c=await I(o).catch(f=>h(f));if(!c)return;const u={...c.dependencies,...c.devDependencies},g=Object.keys(u).filter(f=>f==="salty-css"||f.startsWith("@salty-css/"));if(!g.length)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: "+o);for(const f of g)t.info(`${f}: ${u[f]}`)}),p.parseAsync(process.argv)}exports.main=pe;
|
package/bin/main.d.ts
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
export declare function main(): Promise<void>;
|
package/bin/main.js
ADDED
@@ -0,0 +1,232 @@
|
|
1
|
+
import { Command as rt } from "commander";
|
2
|
+
import { existsSync as G } from "fs";
|
3
|
+
import { mkdir as V, readFile as y, writeFile as h } from "fs/promises";
|
4
|
+
import { join as a, relative as z, parse as ct, format as nt } from "path";
|
5
|
+
import { render as lt } from "ejs";
|
6
|
+
import { generateCss as dt } from "../compiler/index.js";
|
7
|
+
import { p as pt } from "../pascal-case-BQpR5PdN.js";
|
8
|
+
import { createLogger as ft, format as K, transports as gt } from "winston";
|
9
|
+
import { exec as ut } from "child_process";
|
10
|
+
import mt from "ora";
|
11
|
+
const e = ft({
|
12
|
+
level: "debug",
|
13
|
+
format: K.combine(K.colorize(), K.cli()),
|
14
|
+
transports: [new gt.Console({})]
|
15
|
+
}), w = (d) => {
|
16
|
+
e.error(d);
|
17
|
+
}, st = (d) => new Promise((C, P) => {
|
18
|
+
ut(d, (b) => {
|
19
|
+
if (b) return P(b);
|
20
|
+
C();
|
21
|
+
});
|
22
|
+
}), I = async (...d) => {
|
23
|
+
const C = d.map((F) => F.replace("-D", "").split("@").slice(0, -1).join("@").trim()).join(", "), P = mt(`Installing packages: ${C}`).start(), b = d.join(" ");
|
24
|
+
await st(`npm install ${b}`), P.succeed(`Installed packages: ${C}`);
|
25
|
+
}, yt = () => G(a(process.cwd(), "node_modules", ".bin", "prettier"));
|
26
|
+
async function k(d) {
|
27
|
+
try {
|
28
|
+
if (!yt()) return;
|
29
|
+
await st(`./node_modules/.bin/prettier --write "${d}"`), e.info(`Formatted ${d} with Prettier`);
|
30
|
+
} catch (C) {
|
31
|
+
e.error(`Error formatting ${d} with Prettier:`, C);
|
32
|
+
}
|
33
|
+
}
|
34
|
+
async function Jt() {
|
35
|
+
const d = new rt();
|
36
|
+
d.name("salty-css").description("Salty-CSS CLI tool to help with annoying configuration tasks.");
|
37
|
+
const C = {
|
38
|
+
// Core files
|
39
|
+
"salty.config.ts": import("../salty.config-BhBY_oOk.js"),
|
40
|
+
"saltygen/index.css": import("../index-D_732b92.js"),
|
41
|
+
// React
|
42
|
+
"react/react-styled-file.ts": import("../react-styled-file-CGVf5n1B.js"),
|
43
|
+
"react/react-vanilla-file.ts": import("../react-vanilla-file-CCXbsjIb.js")
|
44
|
+
}, P = async (n, i) => {
|
45
|
+
const { default: r } = await C[n], f = lt(r, i);
|
46
|
+
return { fileName: n, content: f };
|
47
|
+
}, b = async () => {
|
48
|
+
const n = a(process.cwd(), ".saltyrc");
|
49
|
+
return await y(n, "utf-8").then(JSON.parse).catch(() => ({}));
|
50
|
+
}, F = a(process.cwd(), "package.json"), A = async (n = F) => {
|
51
|
+
const i = await y(n, "utf-8").then(JSON.parse).catch(() => {
|
52
|
+
});
|
53
|
+
if (!i) throw "Could not read package.json file!";
|
54
|
+
return i;
|
55
|
+
}, at = async (n, i = F) => {
|
56
|
+
typeof n == "object" && (n = JSON.stringify(n, null, 2)), await h(i, n);
|
57
|
+
}, Q = async () => {
|
58
|
+
const n = new URL("../package.json", import.meta.url);
|
59
|
+
return A(n);
|
60
|
+
}, X = await (async () => (await b()).defaultProject)(), $ = await Q(), O = {
|
61
|
+
core: `@salty-css/core@${$.version}`,
|
62
|
+
react: `@salty-css/react@${$.version}`,
|
63
|
+
eslintConfigCore: `@salty-css/eslint-config-core@${$.version}`,
|
64
|
+
vite: `@salty-css/vite@${$.version}`,
|
65
|
+
next: `@salty-css/next@${$.version}`
|
66
|
+
}, W = (n) => {
|
67
|
+
const i = n === "." ? "" : n, r = process.cwd();
|
68
|
+
return a(r, i);
|
69
|
+
};
|
70
|
+
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(n = ".") {
|
71
|
+
if (!await A().catch(() => {
|
72
|
+
})) return w("Salty CSS project must be initialized in a directory with a package.json file.");
|
73
|
+
e.info("Initializing a new Salty-CSS project!");
|
74
|
+
const { dir: r = n, cssFile: f, skipInstall: g } = this.opts();
|
75
|
+
if (!r) return w("Project directory must be provided. Add it as the first argument after init command or use the --dir option.");
|
76
|
+
g || await I(O.core, O.react);
|
77
|
+
const p = process.cwd(), c = W(r), J = await Promise.all([P("salty.config.ts"), P("saltygen/index.css")]);
|
78
|
+
await V(c, { recursive: !0 });
|
79
|
+
const m = J.map(async ({ fileName: t, content: s }) => {
|
80
|
+
const l = a(c, t);
|
81
|
+
if (await y(l, "utf-8").catch(() => {
|
82
|
+
}) !== void 0) {
|
83
|
+
e.debug("File already exists: " + l);
|
84
|
+
return;
|
85
|
+
}
|
86
|
+
const v = t.split("/").slice(0, -1).join("/");
|
87
|
+
v && await V(a(c, v), { recursive: !0 }), e.info("Creating file: " + l), await h(l, s), await k(l);
|
88
|
+
});
|
89
|
+
await Promise.all(m);
|
90
|
+
const N = z(p, c) || ".", j = a(p, ".saltyrc"), o = await y(j, "utf-8").catch(() => {
|
91
|
+
});
|
92
|
+
if (o === void 0) {
|
93
|
+
e.info("Creating file: " + j);
|
94
|
+
const s = JSON.stringify({
|
95
|
+
defaultProject: N,
|
96
|
+
projects: [N]
|
97
|
+
}, null, 2);
|
98
|
+
await h(j, s);
|
99
|
+
} else {
|
100
|
+
e.info("Edit file: " + j);
|
101
|
+
const t = JSON.parse(o), s = new Set((t == null ? void 0 : t.projects) || []);
|
102
|
+
s.add(N), t.projects = [...s];
|
103
|
+
const l = JSON.stringify(t, null, 2);
|
104
|
+
await h(j, l);
|
105
|
+
}
|
106
|
+
const S = a(p, ".gitignore"), T = await y(S, "utf-8").catch(() => {
|
107
|
+
});
|
108
|
+
T !== void 0 && (T.includes("saltygen") || (e.info("Edit file: " + S), await h(S, T + `
|
109
|
+
|
110
|
+
# Salty-CSS
|
111
|
+
saltygen
|
112
|
+
`)));
|
113
|
+
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 () => {
|
114
|
+
if (f) return f;
|
115
|
+
for (const t of x)
|
116
|
+
for (const s of q)
|
117
|
+
for (const l of U) {
|
118
|
+
const u = a(c, t, s + l);
|
119
|
+
if (await y(u, "utf-8").catch(() => {
|
120
|
+
}) !== void 0) return z(c, u);
|
121
|
+
for (const H of M) {
|
122
|
+
const L = a(c, t, H, s + l);
|
123
|
+
if (await y(L, "utf-8").catch(() => {
|
124
|
+
}) !== void 0) return z(c, L);
|
125
|
+
}
|
126
|
+
}
|
127
|
+
})();
|
128
|
+
if (E) {
|
129
|
+
const t = a(c, E), s = await y(t, "utf-8").catch(() => {
|
130
|
+
});
|
131
|
+
if (s !== void 0 && !s.includes("saltygen")) {
|
132
|
+
const u = a(t, ".."), H = `@import '${z(u, a(c, "saltygen/index.css"))}';`;
|
133
|
+
e.info("Adding global import statement to CSS file: " + t), await h(t, H + `
|
134
|
+
` + s), await k(t);
|
135
|
+
}
|
136
|
+
} else
|
137
|
+
e.warn("Could not find a CSS file to import the generated CSS. Please add it manually.");
|
138
|
+
const Z = a(p, ".eslintrc.json"), it = G(Z), tt = a(c, ".eslintrc.json"), et = G(tt);
|
139
|
+
if (it || et) {
|
140
|
+
g || await I(O.eslintConfigCore);
|
141
|
+
const t = et ? tt : Z, s = await y(t, "utf-8").catch(() => {
|
142
|
+
});
|
143
|
+
if (!s) return w("Could not read ESLint config file.");
|
144
|
+
if (!s.includes("salty-css")) {
|
145
|
+
const u = JSON.parse(s);
|
146
|
+
e.info("Edit file: " + t), u.extends || (u.extends = []), u.extends.push("@salty-css/core");
|
147
|
+
const v = JSON.stringify(u, null, 2);
|
148
|
+
await h(t, v), await k(t);
|
149
|
+
}
|
150
|
+
}
|
151
|
+
const R = a(c, "vite.config.ts"), B = await y(R, "utf-8").catch(() => {
|
152
|
+
});
|
153
|
+
if (B !== void 0 && !B.includes("saltyPlugin")) {
|
154
|
+
e.info("Edit file: " + R);
|
155
|
+
const s = `import { saltyPlugin } from '@salty-css/vite';
|
156
|
+
`, u = B.replace(/(plugins: \[)/, `$1
|
157
|
+
saltyPlugin(__dirname),`);
|
158
|
+
g || await I(`-D ${O.vite}`), e.info("Adding Salty-CSS plugin to Vite config..."), await h(R, s + u), await k(R);
|
159
|
+
}
|
160
|
+
const _ = ["next.config.js", "next.config.cjs", "next.config.ts", "next.config.mjs"].map((t) => a(c, t)).find((t) => G(t));
|
161
|
+
if (_) {
|
162
|
+
let t = await y(_, "utf-8").catch(() => {
|
163
|
+
});
|
164
|
+
if (t !== void 0 && !t.includes("withSaltyCss")) {
|
165
|
+
let l = !1;
|
166
|
+
/\splugins([^=]*)=[^[]\[/.test(t) && !l && (t = t.replace(/\splugins([^=]*)=[^[]\[/, (L, D) => ` plugins${D}= [withSaltyCss,`), l = !0);
|
167
|
+
const v = t.includes("module.exports"), H = v ? `const { withSaltyCss } = require('@salty-css/next');
|
168
|
+
` : `import { withSaltyCss } from '@salty-css/next';
|
169
|
+
`;
|
170
|
+
v && !l ? (t = t.replace(/module.exports = ([^;]+)/, (L, D) => `module.exports = withSaltyCss(${D})`), l = !0) : l || (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(_, H + t), await k(_);
|
171
|
+
}
|
172
|
+
}
|
173
|
+
const ot = 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: " + F), t.scripts.prepare = t.scripts.prepare + " && npx salty-css build") : (e.info("Edit file: " + F), t.scripts.prepare = "npx salty-css build"), t));
|
174
|
+
await at(ot), 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 ⭐");
|
175
|
+
}), 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(n = X) {
|
176
|
+
e.info("Building the Salty-CSS project...");
|
177
|
+
const { dir: i = n } = this.opts();
|
178
|
+
if (!i) return w("Project directory must be provided. Add it as the first argument after build command or use the --dir option.");
|
179
|
+
const r = W(i);
|
180
|
+
await dt(r);
|
181
|
+
}), 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(n, i = X) {
|
182
|
+
const { file: r = n, dir: f = i, tag: g, name: p, className: c, reactComponent: J = !1 } = this.opts();
|
183
|
+
if (!r) return w("File to generate must be provided. Add it as the first argument after generate command or use the --file option.");
|
184
|
+
if (!f) return w("Project directory must be provided. Add it as the second argument after generate command or use the --dir option.");
|
185
|
+
const m = W(f), N = r.split("/").slice(0, -1).join("/");
|
186
|
+
N && await V(a(m, N), { recursive: !0 });
|
187
|
+
const j = a(m, r), o = ct(j);
|
188
|
+
o.ext || (o.ext = ".ts"), o.name.endsWith(".css") || (o.name = o.name + ".css"), o.base = o.name + o.ext;
|
189
|
+
const S = nt(o);
|
190
|
+
if (await y(S, "utf-8").catch(() => {
|
191
|
+
}) !== void 0) {
|
192
|
+
e.error("File already exists:", S);
|
193
|
+
return;
|
194
|
+
}
|
195
|
+
let x = pt(p || o.base.replace(/\.css\.\w+$/, ""));
|
196
|
+
if (J) {
|
197
|
+
const q = x + "Component";
|
198
|
+
x = x + "Wrapper";
|
199
|
+
const U = o.base.replace(/\.css\.\w+$/, ""), { content: Y } = await P("react/react-vanilla-file.ts", { tag: g, componentName: q, styledComponentName: x, className: c, fileName: U });
|
200
|
+
o.name = U.replace(/\.css$/, ""), o.ext = ".tsx", o.base = o.name + o.ext;
|
201
|
+
const E = nt(o);
|
202
|
+
e.info("Generating a new file: " + E), await h(E, Y), await k(E);
|
203
|
+
}
|
204
|
+
const { content: M } = await P("react/react-styled-file.ts", { tag: g, name: x, className: c });
|
205
|
+
e.info("Generating a new file: " + S), await h(S, M), await k(S);
|
206
|
+
}), 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(n = "latest") {
|
207
|
+
const { legacyPeerDeps: i, version: r = n } = this.opts(), f = a(process.cwd(), "package.json"), g = await A(f).catch((m) => w(m));
|
208
|
+
if (!g) return;
|
209
|
+
const p = { ...g.dependencies, ...g.devDependencies }, c = Object.keys(p).filter((m) => m === "salty-css" || m.startsWith("@salty-css/"));
|
210
|
+
if (!c.length)
|
211
|
+
return w(
|
212
|
+
"No Salty-CSS packages found in package.json. Make sure you are running update command in the same directory! Used package.json path: " + f
|
213
|
+
);
|
214
|
+
const J = c.map((m) => r === "@" ? `${m}@${$.version}` : `${m}@${r.replace(/^@/, "")}`);
|
215
|
+
i ? (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!");
|
216
|
+
}), d.option("-v, --version", "Show the current version of Salty-CSS.").action(async function() {
|
217
|
+
const n = await Q();
|
218
|
+
e.info("CLI is running: " + n.version);
|
219
|
+
const i = a(process.cwd(), "package.json"), r = await A(i).catch((p) => w(p));
|
220
|
+
if (!r) return;
|
221
|
+
const f = { ...r.dependencies, ...r.devDependencies }, g = Object.keys(f).filter((p) => p === "salty-css" || p.startsWith("@salty-css/"));
|
222
|
+
if (!g.length)
|
223
|
+
return w(
|
224
|
+
"No Salty-CSS packages found in package.json. Make sure you are running update command in the same directory! Used package.json path: " + i
|
225
|
+
);
|
226
|
+
for (const p of g)
|
227
|
+
e.info(`${p}: ${f[p]}`);
|
228
|
+
}), d.parseAsync(process.argv);
|
229
|
+
}
|
230
|
+
export {
|
231
|
+
Jt as main
|
232
|
+
};
|
@@ -0,0 +1 @@
|
|
1
|
+
export declare function formatWithPrettier(filePath: string): Promise<void>;
|
package/compiler/index.cjs
CHANGED
@@ -1,11 +1,11 @@
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
2
|
-
`),
|
3
|
-
`);let
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Y=require("esbuild"),Z=require("child_process"),N=require("../dash-case-DKzpenwY.cjs"),o=require("path"),a=require("fs"),I=require("fs/promises"),R=require("../parse-templates-DVK3iZIl.cjs");var V=typeof document<"u"?document.currentScript:null;function Q(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const n in t)if(n!=="default"){const s=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(e,n,s.get?s:{enumerable:!0,get:()=>t[n]})}}return e.default=t,Object.freeze(e)}const z=Q(Y),B=t=>{if(!t||t==="/")throw new Error("Could not find package.json file");const e=o.join(t,"package.json");return a.existsSync(e)?e:B(o.join(t,".."))},tt=async t=>{const e=B(t);return await I.readFile(e,"utf-8").then(JSON.parse).catch(()=>{})},et=async t=>{const e=await tt(t);if(e)return e.type};let D;const H=async t=>{if(D)return D;const e=await et(t);return e==="module"?D="esm":(e==="commonjs"||(typeof document>"u"?require("url").pathToFileURL(__filename).href:V&&V.tagName.toUpperCase()==="SCRIPT"&&V.src||new URL("compiler/index.cjs",document.baseURI).href).endsWith(".cjs"))&&(D="cjs"),D||"esm"},_={externalModules:[]},U=t=>{if(_.externalModules.length>0)return _.externalModules;const e=o.join(t,"salty.config.ts"),s=a.readFileSync(e,"utf8").match(/externalModules:\s?\[(.*)\]/);if(!s)return[];const l=s[1].split(",").map(w=>w.replace(/['"`]/g,"").trim());return _.externalModules=l,l},v=t=>o.join(t,"./saltygen"),W=["salty","css","styles","styled"],K=(t=[])=>new RegExp(`\\.(${[...W,...t].join("|")})\\.`),E=(t,e=[])=>K(e).test(t),st=async t=>{const e=v(t),n=o.join(t,"salty.config.ts"),s=o.join(e,"salty.config.js"),l=await H(t),w=U(t);await z.build({entryPoints:[n],minify:!0,treeShaking:!0,bundle:!0,outfile:s,format:l,external:w});const f=Date.now(),{config:g}=await import(`${s}?t=${f}`);return g},L=async t=>{const e=await st(t),n=new Set,s=(r,u=[])=>r?Object.entries(r).flatMap(([d,p])=>{if(!p)return;if(typeof p=="object")return s(p,[...u,d]);const x=[...u,d].join(".");n.add(`"${x}"`);const h=[...u.map(N.dashCase),N.dashCase(d)].join("-"),{result:j}=R.parseValueTokens(p);return`--${h}: ${j};`}):[],l=r=>r?Object.entries(r).flatMap(([u,d])=>{const p=s(d);return u==="base"?p.join(""):`${u} { ${p.join("")} }`}):[],w=r=>r?Object.entries(r).flatMap(([u,d])=>Object.entries(d).flatMap(([p,x])=>{const h=s(x,[u]),j=`.${u}-${p}, [data-${u}="${p}"]`,P=h.join("");return`${j} { ${P} }`})):[],f=s(e.variables),g=l(e.responsiveVariables),i=w(e.conditionalVariables),$=v(t),S=o.join($,"css/variables.css"),k=`:root { ${f.join("")} ${g.join("")} } ${i.join("")}`;a.writeFileSync(S,k);const m=o.join($,"types/css-tokens.d.ts"),y=`type VariableTokens = ${[...n].join("|")||'""'}; type PropertyValueToken = \`{\${VariableTokens}}\``;a.writeFileSync(m,y);const C=o.join($,"css/global.css"),F=R.parseStyles(e.global,"");a.writeFileSync(C,F);const b=o.join($,"css/templates.css"),T=R.parseTemplates(e.templates);a.writeFileSync(b,T)},O=async(t,e,n)=>{const s=N.toHash(e),l=o.join(n,"js",s+".js"),w=await H(t),f=U(t);await z.build({entryPoints:[e],minify:!0,treeShaking:!0,bundle:!0,outfile:l,format:w,target:["es2022"],keepNames:!0,external:f});const g=Date.now();return await import(`${l}?t=${g}`)},J=async t=>{const e=v(t),n=o.join(e,"salty.config.js"),{config:s}=await import(n);return s},nt=async t=>{try{const e=[],n=[],s=v(t),l=o.join(s,"index.css");(()=>{a.existsSync(s)&&Z.execSync("rm -rf "+s),a.mkdirSync(s),a.mkdirSync(o.join(s,"css")),a.mkdirSync(o.join(s,"types"))})(),await L(t);const f=await J(t);async function g(c,y){const C=["node_modules","saltygen"],F=a.statSync(c);if(F.isDirectory()){const b=a.readdirSync(c);if(C.some(r=>c.includes(r)))return;await Promise.all(b.map(r=>g(o.join(c,r),o.join(y,r))))}else if(F.isFile()&&E(c)){const T=await O(t,c,s),r=[];Object.entries(T).forEach(([x,h])=>{if(h.isKeyframes&&h.css){const q=`${h.animationName}.css`,A=`css/${q}`,X=o.join(s,A);e.push(q),a.writeFileSync(X,h.css);return}if(!h.generator)return;const j=h.generator._withBuildContext({name:x,config:f}),P=`${j.hash}-${j.priority}.css`;n[j.priority]||(n[j.priority]=[]),n[j.priority].push(P),r.push(P);const M=`css/${P}`,G=o.join(s,M);a.writeFileSync(G,j.css)});const u=r.map(x=>`@import url('./${x}');`).join(`
|
2
|
+
`),d=N.toHash(c,6),p=o.join(s,`css/${d}.css`);a.writeFileSync(p,u)}}await g(t,s);const i=e.map(c=>`@import url('./css/${c}');`).join(`
|
3
|
+
`);let m=`@layer l0, l1, l2, l3, l4, l5, l6, l7, l8;
|
4
4
|
|
5
|
-
${["
|
5
|
+
${["variables.css","global.css","templates.css"].filter(c=>{try{return a.readFileSync(o.join(s,"css",c),"utf8").length>0}catch{return!1}}).map(c=>`@import url('./css/${c}');`).join(`
|
6
6
|
`)}
|
7
|
-
${
|
8
|
-
`);
|
9
|
-
`)
|
10
|
-
`);
|
11
|
-
${
|
7
|
+
${i}`;if(f.importStrategy!=="component"){const c=n.flat().map(y=>`@import url('./css/${y}');`).join(`
|
8
|
+
`);m+=c}a.writeFileSync(l,m)}catch(e){console.error(e)}},ot=async(t,e)=>{try{const n=[],s=o.join(t,"./saltygen"),l=o.join(s,"index.css");if(E(e)){const f=await J(t),g=await O(t,e,s);Object.entries(g).forEach(([m,c])=>{if(!c.generator)return;const y=c.generator._withBuildContext({name:m,config:f}),C=`${y.hash}-${y.priority}.css`,F=`css/${C}`,b=o.join(s,F);n.push(C),a.writeFileSync(b,y.css)});const i=a.readFileSync(l,"utf8").split(`
|
9
|
+
`),$=n.map(m=>`@import url('../saltygen/css/${m}');`),k=[...new Set([...i,...$])].join(`
|
10
|
+
`);a.writeFileSync(l,k)}}catch(n){console.error(n)}},it=async(t,e)=>{try{const n=o.join(t,"./saltygen");if(E(e)){const l=a.readFileSync(e,"utf8");l.replace(/^(?!export\s)const\s.*/gm,S=>`export ${S}`)!==l&&await I.writeFile(e,l);const f=await J(t),g=await O(t,e,n);let i=l;Object.entries(g).forEach(([S,k])=>{var P;if(k.isKeyframes||!k.generator)return;const m=k.generator._withBuildContext({name:S,config:f}),c=new RegExp(`\\s${S}[=\\s]+[^()]+styled\\(([^,]+),`,"g").exec(l);if(!c)return console.error("Could not find the original declaration");const y=(P=c.at(1))==null?void 0:P.trim(),C=new RegExp(`\\s${S}[=\\s]+styled\\(`,"g").exec(i);if(!C)return console.error("Could not find the original declaration");const{index:F}=C;let b=!1;const T=setTimeout(()=>b=!0,5e3);let r=0,u=!1,d=0;for(;!u&&!b;){const M=i[F+r];M==="("&&d++,M===")"&&d--,d===0&&M===")"&&(u=!0),r>i.length&&(b=!0),r++}if(!b)clearTimeout(T);else throw new Error("Failed to find the end of the styled call and timed out");const p=F+r,x=i.slice(F,p),h=i,j=` ${S} = styled(${y}, "${m.classNames}", "${m._callerName}", ${JSON.stringify(m.props)});`;i=i.replace(x,j),h===i&&console.error("Minimize file failed to change content",{name:S,tagName:y})});const $=N.toHash(e,6);return f.importStrategy==="component"&&(i=`import '../../saltygen/css/${$}.css';
|
11
|
+
${i}`),i=i.replace("{ styled }","{ styledClient as styled }"),i=i.replace("@salty-css/react/styled","@salty-css/react/styled-client"),i}}catch(n){console.error("Error in minimizeFile:",n)}};exports.compileSaltyFile=O;exports.generateConfigStyles=L;exports.generateCss=nt;exports.generateFile=ot;exports.isSaltyFile=E;exports.minimizeFile=it;exports.saltyFileExtensions=W;exports.saltyFileRegExp=K;
|
package/compiler/index.d.ts
CHANGED
@@ -1,9 +1,9 @@
|
|
1
1
|
import { StyleComponentGenerator } from '../generator/style-generator';
|
2
|
-
|
3
|
-
export declare const
|
4
|
-
export declare const isSaltyFile: (file: string) => boolean;
|
5
|
-
export declare const
|
6
|
-
export declare const compileSaltyFile: (sourceFilePath: string, outputDirectory: string) => Promise<{
|
2
|
+
export declare const saltyFileExtensions: string[];
|
3
|
+
export declare const saltyFileRegExp: (additional?: string[]) => RegExp;
|
4
|
+
export declare const isSaltyFile: (file: string, additional?: string[]) => boolean;
|
5
|
+
export declare const generateConfigStyles: (dirname: string) => Promise<void>;
|
6
|
+
export declare const compileSaltyFile: (dirname: string, sourceFilePath: string, outputDirectory: string) => Promise<{
|
7
7
|
[key: string]: {
|
8
8
|
generator: StyleComponentGenerator;
|
9
9
|
isKeyframes?: boolean;
|