@salty-css/core 0.0.1-alpha.3 → 0.0.1-alpha.300
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 +48 -0
- package/README.md +490 -43
- 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 +11 -0
- package/bin/main.d.ts +1 -0
- package/bin/main.js +263 -0
- package/bin/prettier.d.ts +1 -0
- package/cache/resolve-dynamic-config-cache.cjs +1 -0
- package/cache/resolve-dynamic-config-cache.d.ts +1 -0
- package/cache/resolve-dynamic-config-cache.js +11 -0
- package/compiler/get-files.d.ts +3 -0
- package/compiler/get-function-range.d.ts +1 -0
- package/compiler/helpers.d.ts +2 -0
- package/compiler/index.cjs +1 -0
- package/compiler/index.d.ts +24 -0
- package/compiler/index.js +22 -0
- package/{dist/config → config}/define-config.d.ts +1 -1
- package/config/index.cjs +1 -0
- package/config/index.d.ts +3 -0
- package/config/index.js +14 -0
- package/css/index.cjs +1 -0
- package/css/index.d.ts +4 -0
- package/css/index.js +12 -0
- package/css/keyframes.cjs +1 -0
- package/css/keyframes.d.ts +22 -0
- package/css/keyframes.js +39 -0
- package/css/media.cjs +1 -0
- package/css/media.d.ts +87 -0
- package/css/media.js +88 -0
- package/css/merge.cjs +1 -0
- package/css/merge.d.ts +7 -0
- package/css/merge.js +5 -0
- package/dash-case-BJEkFEGQ.cjs +1 -0
- package/{dist/util/index.js → dash-case-DBThphLm.js} +5 -5
- package/define-templates-4A2yHcMF.js +52 -0
- package/define-templates-Cunsb_Tr.cjs +1 -0
- package/factories/define-global-styles.d.ts +7 -0
- package/factories/define-media-query.d.ts +8 -0
- package/factories/define-templates.d.ts +27 -0
- package/factories/define-variables.d.ts +12 -0
- package/factories/index.cjs +1 -0
- package/factories/index.d.ts +4 -0
- package/factories/index.js +30 -0
- package/generators/class-name-generator.d.ts +6 -0
- package/generators/index.cjs +1 -0
- package/generators/index.d.ts +2 -0
- package/generators/index.js +88 -0
- package/generators/styled-generator.d.ts +20 -0
- package/generators/styles-generator.d.ts +22 -0
- package/helpers/color.d.ts +18 -0
- package/helpers/index.cjs +1 -0
- package/helpers/index.d.ts +2 -0
- package/helpers/index.js +1183 -0
- package/helpers/viewport-clamp.d.ts +9 -0
- package/helpers-CC5pFyba.cjs +1 -0
- package/helpers-nHqH4L9L.js +11 -0
- package/{dist/config/index.cjs → index-84Wroia-.cjs} +1 -1
- package/index-CituHO0U.js +524 -0
- package/index-D_732b92.js +4 -0
- package/index-ol1Q_xul.cjs +41 -0
- package/package.json +88 -21
- package/parse-styles-B1E0JeC7.cjs +5 -0
- package/parse-styles-y_-drahL.js +161 -0
- package/parsers/index.cjs +2 -0
- package/parsers/index.d.ts +5 -0
- package/parsers/index.js +33 -0
- package/parsers/parse-modifiers.d.ts +3 -0
- package/parsers/parse-styles.d.ts +13 -0
- package/parsers/parse-templates.d.ts +4 -0
- package/parsers/parse-tokens.d.ts +3 -0
- package/parsers/parser-types.d.ts +8 -0
- package/parsers/property-name-check.d.ts +1 -0
- package/parsers/unit-check.d.ts +7 -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/server/index.cjs +1 -0
- package/server/index.d.ts +1 -0
- package/server/index.js +4 -0
- package/server/should-restart.d.ts +1 -0
- package/should-restart-C6VJ-qaY.js +12 -0
- package/should-restart-DAhvRrtu.cjs +1 -0
- package/templates/salty-reset.d.ts +2 -0
- package/types/cli-types.d.ts +10 -0
- package/types/config-types.d.ts +85 -0
- package/types/index.d.ts +97 -0
- package/util/camel-case.d.ts +1 -0
- package/util/dot-case.d.ts +1 -0
- package/util/index.cjs +1 -0
- package/util/index.d.ts +4 -0
- package/util/index.js +11 -0
- package/util/module-type.d.ts +1 -0
- package/util/pascal-case.d.ts +1 -0
- package/viewport-clamp-CaYwREKc.js +7 -0
- package/viewport-clamp-mq_DFtRR.cjs +1 -0
- package/dist/README.md +0 -107
- package/dist/compiler/index.cjs +0 -11
- package/dist/compiler/index.d.ts +0 -16
- package/dist/compiler/index.js +0 -180
- package/dist/config/config-types.d.ts +0 -59
- package/dist/config/index.d.ts +0 -2
- package/dist/config/index.js +0 -4
- package/dist/generator/index.cjs +0 -1
- package/dist/generator/index.d.ts +0 -1
- package/dist/generator/index.js +0 -51
- package/dist/generator/parse-modifiers.d.ts +0 -3
- package/dist/generator/parse-styles.d.ts +0 -2
- package/dist/generator/parse-templates.d.ts +0 -2
- package/dist/generator/parse-tokens.d.ts +0 -2
- package/dist/generator/parser-types.d.ts +0 -4
- package/dist/generator/style-generator.d.ts +0 -27
- package/dist/package.json +0 -50
- package/dist/parse-templates-BOSK0Tb6.js +0 -90
- package/dist/parse-templates-BY1Xai-_.cjs +0 -8
- package/dist/types/index.d.ts +0 -58
- package/dist/util/index.cjs +0 -1
- package/dist/util/index.d.ts +0 -2
- /package/{dist/css/index.cjs → css/token.cjs} +0 -0
- /package/{dist/css/index.d.ts → css/token.d.ts} +0 -0
- /package/{dist/css/index.js → css/token.js} +0 -0
- /package/{dist/types → types}/index.cjs +0 -0
- /package/{dist/types → types}/index.js +0 -0
- /package/{dist/types → types}/util-types.d.ts +0 -0
- /package/{dist/util → util}/dash-case.d.ts +0 -0
- /package/{dist/util → util}/to-hash.d.ts +0 -0
package/types/index.d.ts
ADDED
@@ -0,0 +1,97 @@
|
|
1
|
+
import { ReactNode } from 'react';
|
2
|
+
import { NeverObj, OrAny, OrString } from './util-types';
|
3
|
+
import { StyledGenerator } from '../generators';
|
4
|
+
import type * as CSS from 'csstype';
|
5
|
+
export type CreateElementProps = {
|
6
|
+
extend?: Tag<any>;
|
7
|
+
children?: ReactNode;
|
8
|
+
className?: string;
|
9
|
+
element?: string;
|
10
|
+
passProps?: boolean | string | string[];
|
11
|
+
style?: CssProperties | {
|
12
|
+
[key: string]: PropertyValueToken | NeverObj;
|
13
|
+
};
|
14
|
+
/** vks = Variant key set */
|
15
|
+
_vks?: Set<string>;
|
16
|
+
};
|
17
|
+
export type StyledComponentProps = Record<string, unknown> & CreateElementProps;
|
18
|
+
type FnComponent<PROPS extends StyledComponentProps> = {
|
19
|
+
(props: OrAny | PROPS): ReactNode;
|
20
|
+
generator?: StyledGenerator;
|
21
|
+
};
|
22
|
+
export type Tag<PROPS extends StyledComponentProps> = OrString | keyof HTMLElementTagNameMap | FnComponent<PROPS>;
|
23
|
+
type CSSPropertyValueFunction = (params?: any) => any;
|
24
|
+
export type CssProperties = {
|
25
|
+
[key in keyof CSS.Properties]: CSS.Properties[key] | PropertyValueToken | CSSPropertyValueFunction | NeverObj;
|
26
|
+
};
|
27
|
+
type CssPropertyKeys = keyof CssProperties;
|
28
|
+
export type StyleValue<K extends string> = K extends CssPropertyKeys ? CssProperties[K] : never;
|
29
|
+
type InvalidVariantKeys = '' | 'css';
|
30
|
+
type VariantOptions = {
|
31
|
+
[key in InvalidVariantKeys]?: never;
|
32
|
+
};
|
33
|
+
export type MultiVariant = {
|
34
|
+
[key: PropertyKey]: string | boolean | undefined;
|
35
|
+
} | {
|
36
|
+
css: CSSinJS;
|
37
|
+
};
|
38
|
+
type Variants = {
|
39
|
+
variants?: VariantOptions & {
|
40
|
+
[key: PropertyKey]: {
|
41
|
+
[key: PropertyKey]: CSSinJS;
|
42
|
+
};
|
43
|
+
};
|
44
|
+
defaultVariants?: {
|
45
|
+
[key: PropertyKey]: any;
|
46
|
+
};
|
47
|
+
compoundVariants?: MultiVariant[];
|
48
|
+
anyOfVariants?: MultiVariant[];
|
49
|
+
};
|
50
|
+
type BooleanVariantValue = 'true' | 'false' | boolean;
|
51
|
+
type VariantPropValue<T> = T extends 'true' ? BooleanVariantValue : T extends 'false' ? BooleanVariantValue : T extends boolean ? BooleanVariantValue : T | '';
|
52
|
+
type PickType<T, K extends AllKeys<T>> = T extends {
|
53
|
+
[k in K]?: any;
|
54
|
+
} ? T[K] : undefined;
|
55
|
+
type AllKeys<T> = T extends any ? keyof T : never;
|
56
|
+
export type Merge<T> = {
|
57
|
+
[k in AllKeys<T>]?: PickType<T, k>;
|
58
|
+
};
|
59
|
+
export type VariantProps<STYLES extends StyledParams, B = STYLES['variants'] extends undefined ? object : STYLES['variants'], C = STYLES['compoundVariants'] extends MultiVariant[] ? Merge<STYLES['compoundVariants'][number]> : object, U = STYLES['anyOfVariants'] extends MultiVariant[] ? Merge<STYLES['anyOfVariants'][number]> : object> = Merge<{
|
60
|
+
[K in keyof B]?: K extends 'css' ? never : VariantPropValue<keyof B[K]>;
|
61
|
+
} | {
|
62
|
+
[K in keyof C]?: K extends 'css' ? never : VariantPropValue<C[K]>;
|
63
|
+
} | {
|
64
|
+
[K in keyof U]?: K extends 'css' ? never : VariantPropValue<U[K]>;
|
65
|
+
}>;
|
66
|
+
type CssValuePropKey = `props-${string}`;
|
67
|
+
export type ValueProps = {
|
68
|
+
[key: CssValuePropKey]: string;
|
69
|
+
};
|
70
|
+
export type ParentComponentProps<TAG extends Tag<any>> = TAG extends (props: infer P) => ReactNode ? P : object;
|
71
|
+
type StylePropertyValue = Record<never, never> & unknown;
|
72
|
+
export type CSSinJS = CssProperties | StylePropertyValue | TemplateTokens | CssPseudos;
|
73
|
+
export type CssStyles = {
|
74
|
+
[key in OrString]?: CSSinJS | CssStyles;
|
75
|
+
};
|
76
|
+
export type Styles = CssStyles & Variants;
|
77
|
+
export type MediaQueryStyles = {
|
78
|
+
[key in MediaQueryKeys]?: CssProperties | CssStyles | CssPseudos | TemplateTokens | MediaQueryStyles;
|
79
|
+
};
|
80
|
+
export interface GeneratorOptions {
|
81
|
+
className?: string | string[];
|
82
|
+
displayName?: string;
|
83
|
+
element?: string;
|
84
|
+
passProps?: boolean | string | string[];
|
85
|
+
defaultProps?: Record<PropertyKey, unknown>;
|
86
|
+
priority?: number;
|
87
|
+
}
|
88
|
+
export interface BaseStyles extends CssProperties, CssStyles, CssPseudos, TemplateTokens, MediaQueryStyles {
|
89
|
+
}
|
90
|
+
type Pseudos = CSS.Pseudos | `&${CSS.Pseudos}`;
|
91
|
+
type CssPseudos = {
|
92
|
+
[P in Pseudos]?: CssStyles;
|
93
|
+
};
|
94
|
+
export interface StyledParams extends GeneratorOptions, Variants {
|
95
|
+
base?: BaseStyles;
|
96
|
+
}
|
97
|
+
export {};
|
@@ -0,0 +1 @@
|
|
1
|
+
export declare function camelCase(str: PropertyKey): string;
|
@@ -0,0 +1 @@
|
|
1
|
+
export declare function dotCase(str: PropertyKey): string;
|
package/util/index.cjs
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("../dash-case-BJEkFEGQ.cjs"),t=require("../pascal-case-iWoaJWwT.cjs");function s(e){return e?typeof e!="string"?s(String(e)):e.replace(/\s/g,"-").replace(/-([a-z])/g,r=>r[1].toUpperCase()):""}exports.dashCase=a.dashCase;exports.toHash=a.toHash;exports.pascalCase=t.pascalCase;exports.camelCase=s;
|
package/util/index.d.ts
ADDED
package/util/index.js
ADDED
@@ -0,0 +1,11 @@
|
|
1
|
+
import { d as o, t as s } from "../dash-case-DBThphLm.js";
|
2
|
+
import { p as f } from "../pascal-case-BQpR5PdN.js";
|
3
|
+
function r(e) {
|
4
|
+
return e ? typeof e != "string" ? r(String(e)) : e.replace(/\s/g, "-").replace(/-([a-z])/g, (a) => a[1].toUpperCase()) : "";
|
5
|
+
}
|
6
|
+
export {
|
7
|
+
r as camelCase,
|
8
|
+
o as dashCase,
|
9
|
+
f as pascalCase,
|
10
|
+
s as toHash
|
11
|
+
};
|
@@ -0,0 +1 @@
|
|
1
|
+
export declare const detectCurrentModuleType: (dirname: string) => Promise<"esm" | "cjs">;
|
@@ -0,0 +1 @@
|
|
1
|
+
export declare function pascalCase(str: PropertyKey): string;
|
@@ -0,0 +1,7 @@
|
|
1
|
+
const x = (e) => (t, i, a) => {
|
2
|
+
const { screenSize: r, axis: o = "horizontal", minMultiplier: l = 0.5, maxMultiplier: c = 1.5, minMaxUnit: n = "px" } = e, s = Math.round(t / r * 1e4) / 100, m = o === "vertical" ? "vh" : "vw", p = i || Math.round(l * t), u = a || Math.round(c * t);
|
3
|
+
return `clamp(${p}${n}, ${s}${m}, ${u}${n})`;
|
4
|
+
};
|
5
|
+
export {
|
6
|
+
x as d
|
7
|
+
};
|
@@ -0,0 +1 @@
|
|
1
|
+
"use strict";const M=i=>(t,n,a)=>{const{screenSize:r,axis:o="horizontal",minMultiplier:l=.5,maxMultiplier:c=1.5,minMaxUnit:e="px"}=i,s=Math.round(t/r*1e4)/100,m=o==="vertical"?"vh":"vw",p=n||Math.round(l*t),u=a||Math.round(c*t);return`clamp(${p}${e}, ${s}${m}, ${u}${e})`};exports.defineViewportClamp=M;
|
package/dist/README.md
DELETED
@@ -1,107 +0,0 @@
|
|
1
|
-
# Salty Css
|
2
|
-
|
3
|
-
## Basic usage example with Button
|
4
|
-
|
5
|
-
### Initial requirements
|
6
|
-
|
7
|
-
1. Add `saltyPlugin` to vite or webpack config from `@salty-css/vite` or `@salty-css/webpack`
|
8
|
-
2. Create `salty-config.ts` to the root of your project
|
9
|
-
3. Import global styles to any regular .css file from `saltygen/index.css` (does not exist during first run, cli command coming later)
|
10
|
-
4. Create salty components with styled only inside files that end with `.css.ts`, `.salty.ts` `.styled.ts` or `.styles.ts`
|
11
|
-
|
12
|
-
### Code examples
|
13
|
-
|
14
|
-
**Salty config**
|
15
|
-
|
16
|
-
```tsx
|
17
|
-
import { defineConfig } from '@salty-css/core/config';
|
18
|
-
|
19
|
-
export const config = defineConfig({
|
20
|
-
variables: {
|
21
|
-
colors: {
|
22
|
-
brand: '#111',
|
23
|
-
highlight: 'yellow',
|
24
|
-
},
|
25
|
-
},
|
26
|
-
global: {
|
27
|
-
html: {
|
28
|
-
backgroundColor: '#f8f8f8',
|
29
|
-
},
|
30
|
-
},
|
31
|
-
});
|
32
|
-
```
|
33
|
-
|
34
|
-
**Your React component file**
|
35
|
-
|
36
|
-
```tsx
|
37
|
-
import { Wrapper } from '../components/wrapper/wrapper.css';
|
38
|
-
import { Button } from '../components/button/button.css';
|
39
|
-
|
40
|
-
export const IndexPage = () => {
|
41
|
-
return (
|
42
|
-
<Wrapper>
|
43
|
-
<Button variant="solid" onClick={() => alert('It is a button.')}>
|
44
|
-
Outlined
|
45
|
-
</Button>
|
46
|
-
</Wrapper>
|
47
|
-
);
|
48
|
-
};
|
49
|
-
```
|
50
|
-
|
51
|
-
**Wrapper** (`components/wrapper/wrapper.css.ts`)
|
52
|
-
|
53
|
-
```tsx
|
54
|
-
import { styled } from '@salty-css/react/styled';
|
55
|
-
|
56
|
-
export const Wrapper = styled('div', {
|
57
|
-
display: 'block',
|
58
|
-
padding: '2vw',
|
59
|
-
});
|
60
|
-
```
|
61
|
-
|
62
|
-
**Button** (`components/button/button.css.ts`)
|
63
|
-
|
64
|
-
```tsx
|
65
|
-
import { styled } from '@salty-css/react/styled';
|
66
|
-
|
67
|
-
export const Button = styled('button', {
|
68
|
-
display: 'block',
|
69
|
-
padding: `0.6em 1.2em`,
|
70
|
-
border: '1px solid currentColor',
|
71
|
-
background: 'transparent',
|
72
|
-
color: 'currentColor/40',
|
73
|
-
cursor: 'pointer',
|
74
|
-
transition: '200ms',
|
75
|
-
textDecoration: 'none',
|
76
|
-
'&:hover': {
|
77
|
-
background: 'black',
|
78
|
-
borderColor: 'black',
|
79
|
-
color: 'white',
|
80
|
-
},
|
81
|
-
'&:disabled': {
|
82
|
-
opacity: 0.25,
|
83
|
-
pointerEvents: 'none',
|
84
|
-
},
|
85
|
-
variants: {
|
86
|
-
variant: {
|
87
|
-
outlined: {
|
88
|
-
// same as default styles
|
89
|
-
},
|
90
|
-
solid: {
|
91
|
-
'&:not(:hover)': {
|
92
|
-
background: 'black',
|
93
|
-
borderColor: 'black',
|
94
|
-
color: 'white',
|
95
|
-
},
|
96
|
-
'&:hover': {
|
97
|
-
background: 'transparent',
|
98
|
-
borderColor: 'currentColor',
|
99
|
-
color: 'currentColor',
|
100
|
-
},
|
101
|
-
},
|
102
|
-
},
|
103
|
-
},
|
104
|
-
});
|
105
|
-
```
|
106
|
-
|
107
|
-
More examples coming soon
|
package/dist/compiler/index.cjs
DELETED
@@ -1,11 +0,0 @@
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const I=require("esbuild"),B=require("winston"),K=require("child_process"),N=require("../util/index.cjs"),o=require("path"),r=require("fs"),J=require("fs/promises"),_=require("../parse-templates-BY1Xai-_.cjs");function E(e){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const t=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(s,n,t.get?t:{enumerable:!0,get:()=>e[n]})}}return s.default=e,Object.freeze(s)}const M=E(I),k=E(B),G=k.createLogger({level:"info",format:k.format.combine(k.format.colorize(),k.format.cli()),transports:[new k.transports.Console({})]}),v=e=>o.join(e,"./saltygen"),L=["salty","css","styles","styled"],T=e=>new RegExp(`\\.(${L.join("|")})\\.`).test(e),A=async e=>{const s=v(e),n=o.join(e,"salty-config.ts"),t=o.join(s,"salty-config.js");await M.build({entryPoints:[n],minify:!0,treeShaking:!0,bundle:!0,outfile:t,format:"esm",external:["react"]});const a=Date.now(),{config:h}=await import(`${t}?t=${a}`);return h},R=async e=>{const s=await A(e),n=new Set,t=(f,p=[])=>f?Object.entries(f).flatMap(([y,c])=>{if(!c)return;if(typeof c=="object")return t(c,[...p,y]);const C=[...p,y].join(".");n.add(`"${C}"`);const D=[...p.map(N.dashCase),N.dashCase(y)].join("-"),{result:P}=_.parseValueTokens(c);return`--${D}: ${P};`}):[],a=f=>f?Object.entries(f).flatMap(([p,y])=>{const c=t(y);return p==="base"?c.join(""):`${p} { ${c.join("")} }`}):[],h=f=>f?Object.entries(f).flatMap(([p,y])=>Object.entries(y).flatMap(([c,C])=>{const D=t(C,[p]),P=`.${p}-${c}, [data-${p}="${c}"]`,O=D.join("");return`${P} { ${O} }`})):[],b=t(s.variables),w=a(s.responsiveVariables),l=h(s.conditionalVariables),j=v(e),u=o.join(j,"css/variables.css"),i=`:root { ${b.join("")} ${w.join("")} } ${l.join("")}`;r.writeFileSync(u,i);const g=o.join(j,"types/css-tokens.d.ts"),d=`type VariableTokens = ${[...n].join("|")}; type PropertyValueToken = \`{\${VariableTokens}}\``;r.writeFileSync(g,d);const m=o.join(j,"css/global.css"),S=_.parseStyles(s.global,"");r.writeFileSync(m,S);const F=o.join(j,"css/templates.css"),x=_.parseTemplates(s.templates);r.writeFileSync(F,x)},V=async(e,s)=>{const n=N.toHash(e),t=o.join(s,"js",n+".js");await M.build({entryPoints:[e],minify:!0,treeShaking:!0,bundle:!0,outfile:t,format:"esm",target:["es2022"],keepNames:!0,external:["react"]});const a=Date.now();return await import(`${t}?t=${a}`)},q=async e=>{const s=v(e),n=o.join(s,"salty-config.js"),{config:t}=await import(n);return t},U=async e=>{try{const s=[],n=[],t=v(e),a=o.join(t,"index.css");(()=>{r.existsSync(t)&&K.execSync("rm -rf "+t),r.mkdirSync(t),r.mkdirSync(o.join(t,"css")),r.mkdirSync(o.join(t,"types"))})(),await R(e);const b=await q(e);async function w(i,g){const $=r.statSync(i);if($.isDirectory()){const d=r.readdirSync(i);await Promise.all(d.map(m=>w(o.join(i,m),o.join(g,m))))}else if($.isFile()&&T(i)){const m=await V(i,t),S=[];Object.entries(m).forEach(([p,y])=>{if(y.isKeyframes&&y.css){const O=`${y.animationName}.css`,z=`css/${O}`,H=o.join(t,z);s.push(O),r.writeFileSync(H,y.css);return}if(!y.generator)return;const c=y.generator._withBuildContext({name:p,config:b}),C=`${c.hash}-${c.priority}.css`;n[c.priority]||(n[c.priority]=[]),n[c.priority].push(C),S.push(C);const D=`css/${C}`,P=o.join(t,D);r.writeFileSync(P,c.css)});const F=S.map(p=>`@import url('./${p}');`).join(`
|
2
|
-
`),x=N.toHash(i,6),f=o.join(t,`css/${x}.css`);r.writeFileSync(f,F)}}await w(e,t);const l=s.map(i=>`@import url('./css/${i}');`).join(`
|
3
|
-
`);let u=`@layer l0, l1, l2, l3, l4, l5, l6, l7, l8;
|
4
|
-
|
5
|
-
${["@import url('./css/variables.css');","@import url('./css/global.css');","@import url('./css/templates.css');"].join(`
|
6
|
-
`)}
|
7
|
-
${l}`;if(b.importStrategy!=="component"){const i=n.flat().map(g=>`@import url('./css/${g}');`).join(`
|
8
|
-
`);u+=i}r.writeFileSync(a,u)}catch(s){console.error(s)}},W=async(e,s)=>{try{const n=[],t=o.join(e,"./saltygen"),a=o.join(t,"index.css");if(T(s)){const b=await q(e),w=await V(s,t);Object.entries(w).forEach(([g,$])=>{if(!$.generator)return;const d=$.generator._withBuildContext({name:g,config:b}),m=`${d.hash}-${d.priority}.css`,S=`css/${m}`,F=o.join(t,S);n.push(m),r.writeFileSync(F,d.css)});const l=r.readFileSync(a,"utf8").split(`
|
9
|
-
`),j=n.map(g=>`@import url('../saltygen/css/${g}');`),i=[...new Set([...l,...j])].join(`
|
10
|
-
`);r.writeFileSync(a,i)}}catch(n){console.error(n)}},X=async(e,s)=>{try{const n=o.join(e,"./saltygen");if(T(s)){let a=r.readFileSync(s,"utf8");a.replace(/^(?!export\s)const\s.*/gm,u=>`export ${u}`)!==a&&await J.writeFile(s,a);const b=await q(e),w=await V(s,n);let l=a;Object.entries(w).forEach(([u,i])=>{var f;if(i.isKeyframes){console.log("value",i);return}if(!i.generator)return;const g=i.generator._withBuildContext({name:u,config:b}),$=new RegExp(`${u}[=\\s]+[^()]+styled\\(([^,]+),`,"g").exec(a);if(!$)return console.error("Could not find the original declaration");const d=(f=$.at(1))==null?void 0:f.trim(),{element:m,variantKeys:S}=g.props,F=`${u} = styled(${d}, "${g.classNames}", "${g._callerName}", ${JSON.stringify(m)}, ${JSON.stringify(S)});`,x=new RegExp(`${u}[=\\s]+[^()]+styled\\(([^,]+),[^;]+;`,"g");l=l.replace(x,F)});const j=N.toHash(s,6);return b.importStrategy==="component"&&(l=`import '../../saltygen/css/${j}.css';
|
11
|
-
${l}`),l=l.replace("{ styled }","{ styledClient as styled }"),l=l.replace("@salty-css/react/styled","@salty-css/react/styled-client"),l}}catch(n){console.error(n)}};exports.compileSaltyFile=V;exports.generateCss=U;exports.generateFile=W;exports.generateVariables=R;exports.isSaltyFile=T;exports.logger=G;exports.minimizeFile=X;
|
package/dist/compiler/index.d.ts
DELETED
@@ -1,16 +0,0 @@
|
|
1
|
-
import { StyleComponentGenerator } from '../generator/style-generator';
|
2
|
-
import * as winston from 'winston';
|
3
|
-
export declare const logger: winston.Logger;
|
4
|
-
export declare const isSaltyFile: (file: string) => boolean;
|
5
|
-
export declare const generateVariables: (dirname: string) => Promise<void>;
|
6
|
-
export declare const compileSaltyFile: (sourceFilePath: string, outputDirectory: string) => Promise<{
|
7
|
-
[key: string]: {
|
8
|
-
generator: StyleComponentGenerator;
|
9
|
-
isKeyframes?: boolean;
|
10
|
-
animationName?: string;
|
11
|
-
css?: string;
|
12
|
-
};
|
13
|
-
}>;
|
14
|
-
export declare const generateCss: (dirname: string) => Promise<void>;
|
15
|
-
export declare const generateFile: (dirname: string, file: string) => Promise<void>;
|
16
|
-
export declare const minimizeFile: (dirname: string, file: string) => Promise<string | undefined>;
|
package/dist/compiler/index.js
DELETED
@@ -1,180 +0,0 @@
|
|
1
|
-
import * as M from "esbuild";
|
2
|
-
import * as N from "winston";
|
3
|
-
import { execSync as z } from "child_process";
|
4
|
-
import { toHash as T, dashCase as I } from "../util/index.js";
|
5
|
-
import { join as o } from "path";
|
6
|
-
import { writeFileSync as $, existsSync as H, mkdirSync as v, statSync as J, readdirSync as G, readFileSync as _ } from "fs";
|
7
|
-
import { writeFile as L } from "fs/promises";
|
8
|
-
import { p as q, a as A, b as U } from "../parse-templates-BOSK0Tb6.js";
|
9
|
-
const ot = N.createLogger({
|
10
|
-
level: "info",
|
11
|
-
format: N.format.combine(N.format.colorize(), N.format.cli()),
|
12
|
-
transports: [new N.transports.Console({})]
|
13
|
-
}), k = (s) => o(s, "./saltygen"), W = ["salty", "css", "styles", "styled"], O = (s) => new RegExp(`\\.(${W.join("|")})\\.`).test(s), X = async (s) => {
|
14
|
-
const e = k(s), n = o(s, "salty-config.ts"), t = o(e, "salty-config.js");
|
15
|
-
await M.build({
|
16
|
-
entryPoints: [n],
|
17
|
-
minify: !0,
|
18
|
-
treeShaking: !0,
|
19
|
-
bundle: !0,
|
20
|
-
outfile: t,
|
21
|
-
format: "esm",
|
22
|
-
external: ["react"]
|
23
|
-
});
|
24
|
-
const c = Date.now(), { config: S } = await import(`${t}?t=${c}`);
|
25
|
-
return S;
|
26
|
-
}, Y = async (s) => {
|
27
|
-
const e = await X(s), n = /* @__PURE__ */ new Set(), t = (m, l = []) => m ? Object.entries(m).flatMap(([p, i]) => {
|
28
|
-
if (!i) return;
|
29
|
-
if (typeof i == "object") return t(i, [...l, p]);
|
30
|
-
const C = [...l, p].join(".");
|
31
|
-
n.add(`"${C}"`);
|
32
|
-
const D = [...l.map(I), I(p)].join("-"), { result: P } = U(i);
|
33
|
-
return `--${D}: ${P};`;
|
34
|
-
}) : [], c = (m) => m ? Object.entries(m).flatMap(([l, p]) => {
|
35
|
-
const i = t(p);
|
36
|
-
return l === "base" ? i.join("") : `${l} { ${i.join("")} }`;
|
37
|
-
}) : [], S = (m) => m ? Object.entries(m).flatMap(([l, p]) => Object.entries(p).flatMap(([i, C]) => {
|
38
|
-
const D = t(C, [l]), P = `.${l}-${i}, [data-${l}="${i}"]`, V = D.join("");
|
39
|
-
return `${P} { ${V} }`;
|
40
|
-
})) : [], d = t(e.variables), w = c(e.responsiveVariables), a = S(e.conditionalVariables), b = k(s), y = o(b, "css/variables.css"), r = `:root { ${d.join("")} ${w.join("")} } ${a.join("")}`;
|
41
|
-
$(y, r);
|
42
|
-
const f = o(b, "types/css-tokens.d.ts"), u = `type VariableTokens = ${[...n].join("|")}; type PropertyValueToken = \`{\${VariableTokens}}\``;
|
43
|
-
$(f, u);
|
44
|
-
const g = o(b, "css/global.css"), j = q(e.global, "");
|
45
|
-
$(g, j);
|
46
|
-
const F = o(b, "css/templates.css"), x = A(e.templates);
|
47
|
-
$(F, x);
|
48
|
-
}, E = async (s, e) => {
|
49
|
-
const n = T(s), t = o(e, "js", n + ".js");
|
50
|
-
await M.build({
|
51
|
-
entryPoints: [s],
|
52
|
-
minify: !0,
|
53
|
-
treeShaking: !0,
|
54
|
-
bundle: !0,
|
55
|
-
outfile: t,
|
56
|
-
format: "esm",
|
57
|
-
target: ["es2022"],
|
58
|
-
keepNames: !0,
|
59
|
-
external: ["react"]
|
60
|
-
});
|
61
|
-
const c = Date.now();
|
62
|
-
return await import(`${t}?t=${c}`);
|
63
|
-
}, R = async (s) => {
|
64
|
-
const e = k(s), n = o(e, "salty-config.js"), { config: t } = await import(n);
|
65
|
-
return t;
|
66
|
-
}, rt = async (s) => {
|
67
|
-
try {
|
68
|
-
const e = [], n = [], t = k(s), c = o(t, "index.css");
|
69
|
-
(() => {
|
70
|
-
H(t) && z("rm -rf " + t), v(t), v(o(t, "css")), v(o(t, "types"));
|
71
|
-
})(), await Y(s);
|
72
|
-
const d = await R(s);
|
73
|
-
async function w(r, f) {
|
74
|
-
const h = J(r);
|
75
|
-
if (h.isDirectory()) {
|
76
|
-
const u = G(r);
|
77
|
-
await Promise.all(u.map((g) => w(o(r, g), o(f, g))));
|
78
|
-
} else if (h.isFile() && O(r)) {
|
79
|
-
const g = await E(r, t), j = [];
|
80
|
-
Object.entries(g).forEach(([l, p]) => {
|
81
|
-
if (p.isKeyframes && p.css) {
|
82
|
-
const V = `${p.animationName}.css`, B = `css/${V}`, K = o(t, B);
|
83
|
-
e.push(V), $(K, p.css);
|
84
|
-
return;
|
85
|
-
}
|
86
|
-
if (!p.generator) return;
|
87
|
-
const i = p.generator._withBuildContext({
|
88
|
-
name: l,
|
89
|
-
config: d
|
90
|
-
}), C = `${i.hash}-${i.priority}.css`;
|
91
|
-
n[i.priority] || (n[i.priority] = []), n[i.priority].push(C), j.push(C);
|
92
|
-
const D = `css/${C}`, P = o(t, D);
|
93
|
-
$(P, i.css);
|
94
|
-
});
|
95
|
-
const F = j.map((l) => `@import url('./${l}');`).join(`
|
96
|
-
`), x = T(r, 6), m = o(t, `css/${x}.css`);
|
97
|
-
$(m, F);
|
98
|
-
}
|
99
|
-
}
|
100
|
-
await w(s, t);
|
101
|
-
const a = e.map((r) => `@import url('./css/${r}');`).join(`
|
102
|
-
`);
|
103
|
-
let y = `@layer l0, l1, l2, l3, l4, l5, l6, l7, l8;
|
104
|
-
|
105
|
-
${["@import url('./css/variables.css');", "@import url('./css/global.css');", "@import url('./css/templates.css');"].join(`
|
106
|
-
`)}
|
107
|
-
${a}`;
|
108
|
-
if (d.importStrategy !== "component") {
|
109
|
-
const r = n.flat().map((f) => `@import url('./css/${f}');`).join(`
|
110
|
-
`);
|
111
|
-
y += r;
|
112
|
-
}
|
113
|
-
$(c, y);
|
114
|
-
} catch (e) {
|
115
|
-
console.error(e);
|
116
|
-
}
|
117
|
-
}, it = async (s, e) => {
|
118
|
-
try {
|
119
|
-
const n = [], t = o(s, "./saltygen"), c = o(t, "index.css");
|
120
|
-
if (O(e)) {
|
121
|
-
const d = await R(s), w = await E(e, t);
|
122
|
-
Object.entries(w).forEach(([f, h]) => {
|
123
|
-
if (!h.generator) return;
|
124
|
-
const u = h.generator._withBuildContext({
|
125
|
-
name: f,
|
126
|
-
config: d
|
127
|
-
}), g = `${u.hash}-${u.priority}.css`, j = `css/${g}`, F = o(t, j);
|
128
|
-
n.push(g), $(F, u.css);
|
129
|
-
});
|
130
|
-
const a = _(c, "utf8").split(`
|
131
|
-
`), b = n.map((f) => `@import url('../saltygen/css/${f}');`), r = [.../* @__PURE__ */ new Set([...a, ...b])].join(`
|
132
|
-
`);
|
133
|
-
$(c, r);
|
134
|
-
}
|
135
|
-
} catch (n) {
|
136
|
-
console.error(n);
|
137
|
-
}
|
138
|
-
}, ct = async (s, e) => {
|
139
|
-
try {
|
140
|
-
const n = o(s, "./saltygen");
|
141
|
-
if (O(e)) {
|
142
|
-
let c = _(e, "utf8");
|
143
|
-
c.replace(/^(?!export\s)const\s.*/gm, (y) => `export ${y}`) !== c && await L(e, c);
|
144
|
-
const d = await R(s), w = await E(e, n);
|
145
|
-
let a = c;
|
146
|
-
Object.entries(w).forEach(([y, r]) => {
|
147
|
-
var m;
|
148
|
-
if (r.isKeyframes) {
|
149
|
-
console.log("value", r);
|
150
|
-
return;
|
151
|
-
}
|
152
|
-
if (!r.generator) return;
|
153
|
-
const f = r.generator._withBuildContext({
|
154
|
-
name: y,
|
155
|
-
config: d
|
156
|
-
}), h = new RegExp(`${y}[=\\s]+[^()]+styled\\(([^,]+),`, "g").exec(c);
|
157
|
-
if (!h)
|
158
|
-
return console.error("Could not find the original declaration");
|
159
|
-
const u = (m = h.at(1)) == null ? void 0 : m.trim(), { element: g, variantKeys: j } = f.props, F = `${y} = styled(${u}, "${f.classNames}", "${f._callerName}", ${JSON.stringify(g)}, ${JSON.stringify(
|
160
|
-
j
|
161
|
-
)});`, x = new RegExp(`${y}[=\\s]+[^()]+styled\\(([^,]+),[^;]+;`, "g");
|
162
|
-
a = a.replace(x, F);
|
163
|
-
});
|
164
|
-
const b = T(e, 6);
|
165
|
-
return d.importStrategy === "component" && (a = `import '../../saltygen/css/${b}.css';
|
166
|
-
${a}`), a = a.replace("{ styled }", "{ styledClient as styled }"), a = a.replace("@salty-css/react/styled", "@salty-css/react/styled-client"), a;
|
167
|
-
}
|
168
|
-
} catch (n) {
|
169
|
-
console.error(n);
|
170
|
-
}
|
171
|
-
};
|
172
|
-
export {
|
173
|
-
E as compileSaltyFile,
|
174
|
-
rt as generateCss,
|
175
|
-
it as generateFile,
|
176
|
-
Y as generateVariables,
|
177
|
-
O as isSaltyFile,
|
178
|
-
ot as logger,
|
179
|
-
ct as minimizeFile
|
180
|
-
};
|
@@ -1,59 +0,0 @@
|
|
1
|
-
import { CssStyles } from '../types';
|
2
|
-
type CssTemplate = CssStyles | {
|
3
|
-
[key: PropertyKey]: CssTemplate;
|
4
|
-
};
|
5
|
-
export type CssVariables = Record<string, unknown>;
|
6
|
-
export interface CssResponsiveVariables {
|
7
|
-
[key: string]: CssVariables;
|
8
|
-
}
|
9
|
-
export interface CssConditionalVariables {
|
10
|
-
[key: PropertyKey]: {
|
11
|
-
[key: PropertyKey]: CssVariables;
|
12
|
-
};
|
13
|
-
}
|
14
|
-
export interface CssTemplates {
|
15
|
-
[key: PropertyKey]: {
|
16
|
-
[key: PropertyKey]: CssTemplate;
|
17
|
-
};
|
18
|
-
}
|
19
|
-
export interface CssModifier {
|
20
|
-
pattern: RegExp;
|
21
|
-
transform: (regexMatch: string) => {
|
22
|
-
css?: CssStyles;
|
23
|
-
value: string;
|
24
|
-
};
|
25
|
-
}
|
26
|
-
export type CssModifiers = Record<string, CssModifier>;
|
27
|
-
export interface SaltyConfig {
|
28
|
-
/**
|
29
|
-
* The import strategy to use when importing css files.
|
30
|
-
* - `root` will import the css file from the root of the project.
|
31
|
-
* - `component` will import the css file from the component's directory.
|
32
|
-
*/
|
33
|
-
importStrategy: 'root' | 'component';
|
34
|
-
/**
|
35
|
-
* Base variables that can be used in all styles as they are applied globally to :root.
|
36
|
-
*/
|
37
|
-
variables: CssVariables;
|
38
|
-
/**
|
39
|
-
* Variables that are defined for different media queries.
|
40
|
-
*/
|
41
|
-
responsiveVariables?: CssResponsiveVariables;
|
42
|
-
/**
|
43
|
-
* Variables that are defined for different parent selectors (classes or data attributes).
|
44
|
-
*/
|
45
|
-
conditionalVariables?: CssConditionalVariables;
|
46
|
-
/**
|
47
|
-
* The global styles that are imported in the root of the project.
|
48
|
-
*/
|
49
|
-
global: CssStyles;
|
50
|
-
/**
|
51
|
-
* The templates that can be used in styles to create reusable css.
|
52
|
-
*/
|
53
|
-
templates?: CssTemplates;
|
54
|
-
/**
|
55
|
-
* The modifiers that can transform css values.
|
56
|
-
*/
|
57
|
-
modifiers?: CssModifiers;
|
58
|
-
}
|
59
|
-
export {};
|
package/dist/config/index.d.ts
DELETED
package/dist/config/index.js
DELETED
package/dist/generator/index.cjs
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("../util/index.cjs"),a=require("../parse-templates-BY1Xai-_.cjs");class o{constructor(t,s,e){this.tagName=t,this.styles=s,this.options=e}get hash(){return n.toHash(this.styles)}get priority(){var t;return typeof this.tagName=="function"?(((t=this.tagName.generator)==null?void 0:t.priority)||0)+1:0}get classNames(){const t=[this.hash],{className:s}=this.options;return s&&t.push(s),t.join(" ")}get cssClassName(){return this.hash}get cssDisplayNameVar(){return`--${this.hash}-display-name: ${this._callerName};`}get templateKeys(){var t;return(t=this._context)!=null&&t.config.templates?a.getTemplateKeys(this._context.config.templates):[]}get css(){var t;return a.parseStyles(this.styles,`.${this.cssClassName}`,this.priority,(t=this._context)==null?void 0:t.config)}get props(){const{element:t}=this.options,s=this.styles.variants?Object.keys(this.styles.variants).map(e=>{var r;const i=(r=this.styles.defaultVariants)==null?void 0:r[e];return i!==void 0?`${e}=${String(i)}`:e}):void 0;return{element:t,variantKeys:s}}_withBuildContext(t){this._context=t;const{name:s,config:e}=t;return this._callerName=s,this}}exports.StyleComponentGenerator=o;
|
@@ -1 +0,0 @@
|
|
1
|
-
export * from './style-generator';
|
package/dist/generator/index.js
DELETED
@@ -1,51 +0,0 @@
|
|
1
|
-
import { toHash as a } from "../util/index.js";
|
2
|
-
import { g as n, p as o } from "../parse-templates-BOSK0Tb6.js";
|
3
|
-
class p {
|
4
|
-
constructor(t, s, e) {
|
5
|
-
this.tagName = t, this.styles = s, this.options = e;
|
6
|
-
}
|
7
|
-
get hash() {
|
8
|
-
return a(this.styles);
|
9
|
-
}
|
10
|
-
get priority() {
|
11
|
-
var t;
|
12
|
-
return typeof this.tagName == "function" ? (((t = this.tagName.generator) == null ? void 0 : t.priority) || 0) + 1 : 0;
|
13
|
-
}
|
14
|
-
get classNames() {
|
15
|
-
const t = [this.hash], { className: s } = this.options;
|
16
|
-
return s && t.push(s), t.join(" ");
|
17
|
-
}
|
18
|
-
get cssClassName() {
|
19
|
-
return this.hash;
|
20
|
-
}
|
21
|
-
get cssDisplayNameVar() {
|
22
|
-
return `--${this.hash}-display-name: ${this._callerName};`;
|
23
|
-
}
|
24
|
-
get templateKeys() {
|
25
|
-
var t;
|
26
|
-
return (t = this._context) != null && t.config.templates ? n(this._context.config.templates) : [];
|
27
|
-
}
|
28
|
-
get css() {
|
29
|
-
var t;
|
30
|
-
return o(this.styles, `.${this.cssClassName}`, this.priority, (t = this._context) == null ? void 0 : t.config);
|
31
|
-
}
|
32
|
-
get props() {
|
33
|
-
const { element: t } = this.options, s = this.styles.variants ? Object.keys(this.styles.variants).map((e) => {
|
34
|
-
var r;
|
35
|
-
const i = (r = this.styles.defaultVariants) == null ? void 0 : r[e];
|
36
|
-
return i !== void 0 ? `${e}=${String(i)}` : e;
|
37
|
-
}) : void 0;
|
38
|
-
return {
|
39
|
-
element: t,
|
40
|
-
variantKeys: s
|
41
|
-
};
|
42
|
-
}
|
43
|
-
_withBuildContext(t) {
|
44
|
-
this._context = t;
|
45
|
-
const { name: s, config: e } = t;
|
46
|
-
return this._callerName = s, this;
|
47
|
-
}
|
48
|
-
}
|
49
|
-
export {
|
50
|
-
p as StyleComponentGenerator
|
51
|
-
};
|
@@ -1,27 +0,0 @@
|
|
1
|
-
import { GeneratorOptions, Styles, Tag } from '../types';
|
2
|
-
export declare class StyleComponentGenerator {
|
3
|
-
tagName: Tag<any>;
|
4
|
-
styles: Styles;
|
5
|
-
private options;
|
6
|
-
_callerName: string | undefined;
|
7
|
-
_context: {
|
8
|
-
name: string;
|
9
|
-
config: any;
|
10
|
-
} | undefined;
|
11
|
-
constructor(tagName: Tag<any>, styles: Styles, options: GeneratorOptions);
|
12
|
-
get hash(): string;
|
13
|
-
get priority(): number;
|
14
|
-
get classNames(): string;
|
15
|
-
get cssClassName(): string;
|
16
|
-
get cssDisplayNameVar(): string;
|
17
|
-
get templateKeys(): string[];
|
18
|
-
get css(): string;
|
19
|
-
get props(): {
|
20
|
-
element: string | undefined;
|
21
|
-
variantKeys: string[] | undefined;
|
22
|
-
};
|
23
|
-
_withBuildContext(context: {
|
24
|
-
name: string;
|
25
|
-
config: any;
|
26
|
-
}): this;
|
27
|
-
}
|