@salty-css/core 0.0.1-alpha.99 → 0.1.0-alpha.0
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 +11 -3
- package/README.md +415 -47
- package/bin/index.cjs +3 -1
- package/bin/index.js +2 -2
- package/bin/main.cjs +448 -11
- package/bin/main.js +411 -209
- package/cache/resolve-dynamic-config-cache.cjs +24 -0
- package/cache/resolve-dynamic-config-cache.d.ts +1 -0
- package/cache/resolve-dynamic-config-cache.js +24 -0
- package/class-name-generator-B2Pb2obX.cjs +74 -0
- package/class-name-generator-YeSQe_Ik.js +75 -0
- package/compiler/get-files.cjs +25 -0
- package/compiler/get-files.js +25 -0
- package/compiler/get-function-range.cjs +22 -0
- package/compiler/get-function-range.d.ts +1 -0
- package/compiler/get-function-range.js +22 -0
- package/compiler/helpers.cjs +25 -0
- package/compiler/helpers.d.ts +5 -0
- package/compiler/helpers.js +24 -0
- package/compiler/salty-compiler.cjs +707 -0
- package/compiler/salty-compiler.d.ts +57 -0
- package/compiler/salty-compiler.js +689 -0
- package/config/define-config.d.ts +1 -1
- package/config/index.cjs +16 -1
- package/config/index.d.ts +2 -1
- package/config/index.js +14 -2
- package/css/index.cjs +12 -1
- package/css/index.d.ts +4 -1
- package/css/index.js +10 -2
- package/css/keyframes.cjs +49 -0
- package/css/keyframes.d.ts +22 -0
- package/css/keyframes.js +49 -0
- package/css/media.cjs +93 -0
- package/css/media.d.ts +87 -0
- package/css/media.js +93 -0
- package/css/merge.cjs +15 -0
- package/css/merge.d.ts +7 -0
- package/css/merge.js +15 -0
- package/css/token.cjs +4 -0
- package/css/token.d.ts +1 -0
- package/css/token.js +4 -0
- package/dash-case-DIwKaYgE.cjs +9 -0
- package/dash-case-DblXvymC.js +10 -0
- package/define-templates-CVhhgPnd.js +60 -0
- package/define-templates-Deq1aCbN.cjs +59 -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 +37 -0
- package/factories/index.d.ts +4 -0
- package/factories/index.js +37 -0
- package/generators/class-name-generator.d.ts +7 -0
- package/generators/index.cjs +57 -0
- package/generators/index.d.ts +2 -0
- package/generators/index.js +58 -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 +53 -0
- package/helpers/index.d.ts +2 -0
- package/helpers/index.js +53 -0
- package/helpers/viewport-clamp.d.ts +9 -0
- package/index-ByR0nfaf.cjs +4 -0
- package/index-DKz1QXqs.js +4 -0
- package/instances/classname-instance.cjs +31 -0
- package/instances/classname-instance.d.ts +10 -0
- package/instances/classname-instance.js +31 -0
- package/package.json +71 -8
- package/parse-styles-BTIoYnBr.js +232 -0
- package/parse-styles-CA3TP5n1.cjs +231 -0
- package/parsers/index.cjs +58 -0
- package/parsers/index.d.ts +5 -0
- package/parsers/index.js +59 -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-By_l58S-.cjs +7 -0
- package/pascal-case-F3Usi5Wf.js +8 -0
- package/{react-styled-file-CGVf5n1B.js → react-styled-file-B99mwk0w.js} +2 -2
- package/react-styled-file-U02jek-B.cjs +11 -0
- package/react-vanilla-file-Bj6XC8GS.cjs +18 -0
- package/{react-vanilla-file-CCXbsjIb.js → react-vanilla-file-D9px70iK.js} +2 -2
- package/runtime/index.cjs +11 -0
- package/runtime/index.d.ts +7 -0
- package/runtime/index.js +11 -0
- package/salty.config-DjosWdPw.js +4 -0
- package/salty.config-cqavVm2t.cjs +4 -0
- package/server/index.cjs +4 -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-CQsyHls3.cjs +17 -0
- package/should-restart-CXIO0jxY.js +18 -0
- package/templates/salty-reset.d.ts +2 -0
- package/to-hash-C05Y906F.cjs +24 -0
- package/to-hash-DAN2LcHK.js +25 -0
- package/types/cli-types.d.ts +10 -0
- package/types/config-types.d.ts +85 -0
- package/types/index.d.ts +44 -23
- package/util/dot-case.d.ts +1 -0
- package/util/index.cjs +14 -1
- package/util/index.js +11 -8
- package/viewport-clamp-CEmzmcSj.cjs +10 -0
- package/viewport-clamp-K553uXu3.js +11 -0
- package/compiler/index.cjs +0 -1
- package/compiler/index.d.ts +0 -16
- package/compiler/index.js +0 -18
- package/config/config-types.d.ts +0 -65
- package/dash-case-DKzpenwY.cjs +0 -1
- package/dash-case-DMQMcCO6.js +0 -19
- package/generator/index.cjs +0 -1
- package/generator/index.d.ts +0 -1
- package/generator/index.js +0 -65
- package/generator/parse-modifiers.d.ts +0 -3
- package/generator/parse-styles.d.ts +0 -2
- package/generator/parse-templates.d.ts +0 -2
- package/generator/parse-tokens.d.ts +0 -2
- package/generator/parser-types.d.ts +0 -4
- package/generator/style-generator.d.ts +0 -33
- package/index-84Wroia-.cjs +0 -1
- package/index-BGaLvshf.js +0 -232
- package/index-BKoD9apd.cjs +0 -11
- package/index-D_732b92.js +0 -4
- package/parse-templates-DUUSaubj.js +0 -96
- package/parse-templates-DVK3iZIl.cjs +0 -8
- package/pascal-case-BQpR5PdN.js +0 -6
- package/pascal-case-iWoaJWwT.cjs +0 -1
- package/react-styled-file-Dkubsz-U.cjs +0 -8
- package/react-vanilla-file-CG_WJLam.cjs +0 -15
- package/salty.config-BhBY_oOk.js +0 -10
- package/salty.config-Dk6ZcCxI.cjs +0 -7
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const reactStyledFile = `import { styled } from "@salty-css/react/styled";
|
|
4
|
+
|
|
5
|
+
export const <%- name %> = styled('<%- tag %>', {
|
|
6
|
+
<% if(className) { %>className: '<%- className %>',<% } %>
|
|
7
|
+
base: {
|
|
8
|
+
// Add your styles here
|
|
9
|
+
}
|
|
10
|
+
})`;
|
|
11
|
+
exports.default = reactStyledFile;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const reactVanillaFile = `import { <%- styledComponentName %> } from "./<%- fileName %>.css";
|
|
4
|
+
|
|
5
|
+
interface <%- componentName %>Props {
|
|
6
|
+
text?: string;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
export const <%- componentName %> = ({ text = 'Lorem ipsum' }: <%- componentName %>Props) => {
|
|
10
|
+
return (
|
|
11
|
+
<<%- styledComponentName %>>
|
|
12
|
+
{text}
|
|
13
|
+
</<%- styledComponentName %>>
|
|
14
|
+
);
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
export default <%- componentName %>;`;
|
|
18
|
+
exports.default = reactVanillaFile;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const
|
|
1
|
+
const reactVanillaFile = `import { <%- styledComponentName %> } from "./<%- fileName %>.css";
|
|
2
2
|
|
|
3
3
|
interface <%- componentName %>Props {
|
|
4
4
|
text?: string;
|
|
@@ -14,5 +14,5 @@ export const <%- componentName %> = ({ text = 'Lorem ipsum' }: <%- componentName
|
|
|
14
14
|
|
|
15
15
|
export default <%- componentName %>;`;
|
|
16
16
|
export {
|
|
17
|
-
|
|
17
|
+
reactVanillaFile as default
|
|
18
18
|
};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const parseStyles = require("../parse-styles-CA3TP5n1.cjs");
|
|
4
|
+
const defineRuntime = (config) => {
|
|
5
|
+
const getDynamicStylesCss = async (styles, scope) => {
|
|
6
|
+
const parsed = await parseStyles.parseStyles(styles, scope, config);
|
|
7
|
+
return parsed.join("\n");
|
|
8
|
+
};
|
|
9
|
+
return { getDynamicStylesCss };
|
|
10
|
+
};
|
|
11
|
+
exports.defineRuntime = defineRuntime;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { CachedConfig, SaltyConfig } from '../config';
|
|
2
|
+
import { BaseStyles } from '../types';
|
|
3
|
+
type Config = Partial<SaltyConfig & CachedConfig>;
|
|
4
|
+
export declare const defineRuntime: (config: Config) => {
|
|
5
|
+
getDynamicStylesCss: (styles: BaseStyles, scope?: string) => Promise<string>;
|
|
6
|
+
};
|
|
7
|
+
export {};
|
package/runtime/index.js
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { a as parseStyles } from "../parse-styles-BTIoYnBr.js";
|
|
2
|
+
const defineRuntime = (config) => {
|
|
3
|
+
const getDynamicStylesCss = async (styles, scope) => {
|
|
4
|
+
const parsed = await parseStyles(styles, scope, config);
|
|
5
|
+
return parsed.join("\n");
|
|
6
|
+
};
|
|
7
|
+
return { getDynamicStylesCss };
|
|
8
|
+
};
|
|
9
|
+
export {
|
|
10
|
+
defineRuntime
|
|
11
|
+
};
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const salty_config = "import { defineConfig } from '@salty-css/core/config';\n\nexport const config = defineConfig({\n // Add your custom config here\n externalModules: ['react', 'react-dom']\n});\n";
|
|
4
|
+
exports.default = salty_config;
|
package/server/index.cjs
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './should-restart';
|
package/server/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const checkShouldRestart: (filename: string) => Promise<boolean>;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
const promises = require("fs/promises");
|
|
3
|
+
const compiler_helpers = require("./compiler/helpers.cjs");
|
|
4
|
+
const checkShouldRestart = async (filename) => {
|
|
5
|
+
if (!filename) return false;
|
|
6
|
+
if (filename.includes("node_modules")) return false;
|
|
7
|
+
if (filename.includes("saltygen")) return false;
|
|
8
|
+
const isConfig = filename.includes("salty.config");
|
|
9
|
+
if (isConfig) return true;
|
|
10
|
+
const isSalty = compiler_helpers.isSaltyFile(filename);
|
|
11
|
+
if (!isSalty) return false;
|
|
12
|
+
const contents = await promises.readFile(filename, "utf-8");
|
|
13
|
+
if (/.+define[A-Z]\w+/.test(contents)) return true;
|
|
14
|
+
if (/.+keyframes\(.+/.test(contents)) return true;
|
|
15
|
+
return false;
|
|
16
|
+
};
|
|
17
|
+
exports.checkShouldRestart = checkShouldRestart;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { readFile } from "fs/promises";
|
|
2
|
+
import { isSaltyFile } from "./compiler/helpers.js";
|
|
3
|
+
const checkShouldRestart = async (filename) => {
|
|
4
|
+
if (!filename) return false;
|
|
5
|
+
if (filename.includes("node_modules")) return false;
|
|
6
|
+
if (filename.includes("saltygen")) return false;
|
|
7
|
+
const isConfig = filename.includes("salty.config");
|
|
8
|
+
if (isConfig) return true;
|
|
9
|
+
const isSalty = isSaltyFile(filename);
|
|
10
|
+
if (!isSalty) return false;
|
|
11
|
+
const contents = await readFile(filename, "utf-8");
|
|
12
|
+
if (/.+define[A-Z]\w+/.test(contents)) return true;
|
|
13
|
+
if (/.+keyframes\(.+/.test(contents)) return true;
|
|
14
|
+
return false;
|
|
15
|
+
};
|
|
16
|
+
export {
|
|
17
|
+
checkShouldRestart as c
|
|
18
|
+
};
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
const toAlphabeticChar = (code) => String.fromCharCode(code + (code > 25 ? 39 : 97));
|
|
3
|
+
const toAlphabeticName = (code, length) => {
|
|
4
|
+
let name = "";
|
|
5
|
+
let x;
|
|
6
|
+
for (x = Math.abs(code); x > 52; x = x / 52 | 0) name = toAlphabeticChar(x % 52) + name;
|
|
7
|
+
name = toAlphabeticChar(x % 52) + name;
|
|
8
|
+
if (name.length < length) {
|
|
9
|
+
name = name.padStart(length, "a");
|
|
10
|
+
} else if (name.length > length) {
|
|
11
|
+
name = name.slice(-length);
|
|
12
|
+
}
|
|
13
|
+
return name;
|
|
14
|
+
};
|
|
15
|
+
const toPhash = (h, x) => {
|
|
16
|
+
let i = x.length;
|
|
17
|
+
while (i) h = h * 33 ^ x.charCodeAt(--i);
|
|
18
|
+
return h;
|
|
19
|
+
};
|
|
20
|
+
const toHash = (value, length = 5) => {
|
|
21
|
+
const numericHash = toPhash(5381, JSON.stringify(value)) >>> 0;
|
|
22
|
+
return toAlphabeticName(numericHash, length);
|
|
23
|
+
};
|
|
24
|
+
exports.toHash = toHash;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
const toAlphabeticChar = (code) => String.fromCharCode(code + (code > 25 ? 39 : 97));
|
|
2
|
+
const toAlphabeticName = (code, length) => {
|
|
3
|
+
let name = "";
|
|
4
|
+
let x;
|
|
5
|
+
for (x = Math.abs(code); x > 52; x = x / 52 | 0) name = toAlphabeticChar(x % 52) + name;
|
|
6
|
+
name = toAlphabeticChar(x % 52) + name;
|
|
7
|
+
if (name.length < length) {
|
|
8
|
+
name = name.padStart(length, "a");
|
|
9
|
+
} else if (name.length > length) {
|
|
10
|
+
name = name.slice(-length);
|
|
11
|
+
}
|
|
12
|
+
return name;
|
|
13
|
+
};
|
|
14
|
+
const toPhash = (h, x) => {
|
|
15
|
+
let i = x.length;
|
|
16
|
+
while (i) h = h * 33 ^ x.charCodeAt(--i);
|
|
17
|
+
return h;
|
|
18
|
+
};
|
|
19
|
+
const toHash = (value, length = 5) => {
|
|
20
|
+
const numericHash = toPhash(5381, JSON.stringify(value)) >>> 0;
|
|
21
|
+
return toAlphabeticName(numericHash, length);
|
|
22
|
+
};
|
|
23
|
+
export {
|
|
24
|
+
toHash as t
|
|
25
|
+
};
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
import { BaseStyles, CssStyles, MediaQueryStyles } from '../types';
|
|
2
|
+
import { OrString } from '../types/util-types';
|
|
3
|
+
export type GlobalStyles = Record<string, BaseStyles>;
|
|
4
|
+
export type CssVariableTokensObject = Record<string, unknown>;
|
|
5
|
+
export interface CssResponsiveVariables {
|
|
6
|
+
[key: string]: CssVariableTokensObject;
|
|
7
|
+
}
|
|
8
|
+
export interface CssConditionalVariables {
|
|
9
|
+
[key: PropertyKey]: {
|
|
10
|
+
[key: PropertyKey]: CssVariableTokensObject;
|
|
11
|
+
};
|
|
12
|
+
}
|
|
13
|
+
export interface SaltyVariables {
|
|
14
|
+
responsive?: CssResponsiveVariables;
|
|
15
|
+
conditional?: CssConditionalVariables;
|
|
16
|
+
[key: string]: undefined | string | number | CssVariableTokensObject;
|
|
17
|
+
}
|
|
18
|
+
type CssTemplate = MediaQueryStyles | CssStyles | {
|
|
19
|
+
[key: PropertyKey]: CssTemplate;
|
|
20
|
+
};
|
|
21
|
+
export interface CssTemplateObject {
|
|
22
|
+
[key: PropertyKey]: CssTemplate;
|
|
23
|
+
}
|
|
24
|
+
export interface CssTemplateFunction {
|
|
25
|
+
(value: any): CssTemplate;
|
|
26
|
+
}
|
|
27
|
+
export interface CssTemplates {
|
|
28
|
+
[key: PropertyKey]: CssTemplateObject | CssTemplateFunction;
|
|
29
|
+
}
|
|
30
|
+
export interface CssModifier {
|
|
31
|
+
pattern: RegExp;
|
|
32
|
+
transform: (regexMatch: string) => {
|
|
33
|
+
css?: CssStyles;
|
|
34
|
+
value: string;
|
|
35
|
+
};
|
|
36
|
+
}
|
|
37
|
+
export type CssModifiers = Record<string, CssModifier>;
|
|
38
|
+
export interface SaltyConfig {
|
|
39
|
+
/**
|
|
40
|
+
* The import strategy to use when importing css files.
|
|
41
|
+
* - `root` will import the css file from the root of the project.
|
|
42
|
+
* - `component` will import the css file from the component's directory.
|
|
43
|
+
*/
|
|
44
|
+
importStrategy?: 'root' | 'component';
|
|
45
|
+
/**
|
|
46
|
+
* Base level variables that can be used in all styles as they are applied globally to :root.
|
|
47
|
+
@param responsive Variables that are defined for different media queries.
|
|
48
|
+
@param conditional Variables that are defined for different parent selectors (classes or data attributes).
|
|
49
|
+
*/
|
|
50
|
+
variables?: SaltyVariables;
|
|
51
|
+
/**
|
|
52
|
+
* The global styles that are imported in the root of the project.
|
|
53
|
+
*/
|
|
54
|
+
reset?: 'default' | 'none' | GlobalStyles;
|
|
55
|
+
/**
|
|
56
|
+
* The global styles that are imported in the root of the project.
|
|
57
|
+
*/
|
|
58
|
+
global?: GlobalStyles;
|
|
59
|
+
/**
|
|
60
|
+
* The templates that can be used in styles to create reusable css.
|
|
61
|
+
*/
|
|
62
|
+
templates?: CssTemplates;
|
|
63
|
+
/**
|
|
64
|
+
* The modifiers that can transform css values.
|
|
65
|
+
*/
|
|
66
|
+
modifiers?: CssModifiers;
|
|
67
|
+
/**
|
|
68
|
+
* Define modules that should not be bundled when generating the css file. This improves the performance of the css generation and can help with issues relared to external packages being imported in an environment that does not support them.
|
|
69
|
+
*/
|
|
70
|
+
externalModules?: ('react' | 'react-dom' | OrString)[];
|
|
71
|
+
/**
|
|
72
|
+
* default unit for px based properties when providing a number value. Default is 'px'.
|
|
73
|
+
*/
|
|
74
|
+
defaultUnit?: 'px' | 'rem' | 'em' | 'vh' | 'vw' | 'vmin' | 'vmax' | 'cm' | 'mm' | 'in' | 'pt' | 'pc' | 'ch' | 'ex' | 'fr' | 'percent' | `viewport-clamp:${number}` | OrString;
|
|
75
|
+
}
|
|
76
|
+
export interface CachedConfig {
|
|
77
|
+
templates: CssTemplates;
|
|
78
|
+
staticVariables: Record<string, any>;
|
|
79
|
+
mediaQueries: Record<string, string>;
|
|
80
|
+
modifiers?: CssModifiers;
|
|
81
|
+
templatePaths: {
|
|
82
|
+
[key: string]: string;
|
|
83
|
+
};
|
|
84
|
+
}
|
|
85
|
+
export {};
|
package/types/index.d.ts
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
2
|
+
import { NeverObj, OrAny, OrString } from './util-types';
|
|
3
|
+
import { StyledGenerator } from '../generators';
|
|
4
4
|
import type * as CSS from 'csstype';
|
|
5
5
|
export type CreateElementProps = {
|
|
6
6
|
extend?: Tag<any>;
|
|
7
7
|
children?: ReactNode;
|
|
8
8
|
className?: string;
|
|
9
9
|
element?: string;
|
|
10
|
-
|
|
11
|
-
style?: CssProperties
|
|
12
|
-
[key: string]:
|
|
10
|
+
passProps?: boolean | string | string[];
|
|
11
|
+
style?: CssProperties | {
|
|
12
|
+
[key: string]: PropertyValueToken | NeverObj;
|
|
13
13
|
};
|
|
14
14
|
/** vks = Variant key set */
|
|
15
15
|
_vks?: Set<string>;
|
|
@@ -17,60 +17,81 @@ export type CreateElementProps = {
|
|
|
17
17
|
export type StyledComponentProps = Record<string, unknown> & CreateElementProps;
|
|
18
18
|
type FnComponent<PROPS extends StyledComponentProps> = {
|
|
19
19
|
(props: OrAny | PROPS): ReactNode;
|
|
20
|
-
generator?:
|
|
20
|
+
generator?: StyledGenerator;
|
|
21
21
|
};
|
|
22
22
|
export type Tag<PROPS extends StyledComponentProps> = OrString | keyof HTMLElementTagNameMap | FnComponent<PROPS>;
|
|
23
|
-
type
|
|
24
|
-
|
|
23
|
+
type CSSPropertyValueFunction = (params?: any) => any;
|
|
24
|
+
export type CssProperties = {
|
|
25
|
+
[key in keyof CSS.Properties]: CSS.Properties[key] | PropertyValueToken | CSSPropertyValueFunction | NeverObj;
|
|
25
26
|
};
|
|
26
27
|
type CssPropertyKeys = keyof CssProperties;
|
|
27
28
|
export type StyleValue<K extends string> = K extends CssPropertyKeys ? CssProperties[K] : never;
|
|
28
|
-
type InvalidVariantKeys = '';
|
|
29
|
+
type InvalidVariantKeys = '' | 'css';
|
|
29
30
|
type VariantOptions = {
|
|
30
31
|
[key in InvalidVariantKeys]?: never;
|
|
31
32
|
};
|
|
32
|
-
export type
|
|
33
|
-
[key: PropertyKey]:
|
|
34
|
-
|
|
33
|
+
export type MultiVariant = {
|
|
34
|
+
[key: PropertyKey]: string | boolean | undefined;
|
|
35
|
+
} | {
|
|
36
|
+
css: CSSinJS;
|
|
35
37
|
};
|
|
36
38
|
type Variants = {
|
|
37
39
|
variants?: VariantOptions & {
|
|
38
40
|
[key: PropertyKey]: {
|
|
39
|
-
[key:
|
|
41
|
+
[key: PropertyKey]: CSSinJS;
|
|
40
42
|
};
|
|
41
43
|
};
|
|
42
44
|
defaultVariants?: {
|
|
43
45
|
[key: PropertyKey]: any;
|
|
44
46
|
};
|
|
45
|
-
compoundVariants?:
|
|
47
|
+
compoundVariants?: MultiVariant[];
|
|
48
|
+
anyOfVariants?: MultiVariant[];
|
|
46
49
|
};
|
|
47
50
|
type BooleanVariantValue = 'true' | 'false' | boolean;
|
|
48
|
-
type VariantPropValue<T> = T extends 'true' ? BooleanVariantValue : T extends 'false' ? BooleanVariantValue : T;
|
|
49
|
-
|
|
50
|
-
[
|
|
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>;
|
|
51
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
|
+
}>;
|
|
52
66
|
type CssValuePropKey = `props-${string}`;
|
|
53
67
|
export type ValueProps = {
|
|
54
68
|
[key: CssValuePropKey]: string;
|
|
55
69
|
};
|
|
56
|
-
export type ParentComponentProps<TAG extends Tag<any>> = TAG extends (props: infer P) => ReactNode ? P :
|
|
70
|
+
export type ParentComponentProps<TAG extends Tag<any>> = TAG extends (props: infer P) => ReactNode ? P : object;
|
|
57
71
|
type StylePropertyValue = Record<never, never> & unknown;
|
|
72
|
+
export type CSSinJS = CssProperties | StylePropertyValue | TemplateTokens | CssPseudos;
|
|
58
73
|
export type CssStyles = {
|
|
59
|
-
[key in OrString]?:
|
|
74
|
+
[key in OrString]?: CSSinJS | CssStyles;
|
|
60
75
|
};
|
|
61
76
|
export type Styles = CssStyles & Variants;
|
|
77
|
+
export type MediaQueryStyles = {
|
|
78
|
+
[key in MediaQueryKeys]?: CssProperties | CssStyles | CssPseudos | TemplateTokens | MediaQueryStyles;
|
|
79
|
+
};
|
|
62
80
|
export interface GeneratorOptions {
|
|
63
|
-
className?: string;
|
|
81
|
+
className?: string | string[];
|
|
64
82
|
displayName?: string;
|
|
65
83
|
element?: string;
|
|
84
|
+
passProps?: boolean | string | string[];
|
|
85
|
+
defaultProps?: Record<PropertyKey, unknown>;
|
|
86
|
+
priority?: number;
|
|
66
87
|
}
|
|
67
|
-
interface
|
|
88
|
+
export interface BaseStyles extends CssProperties, CssStyles, CssPseudos, TemplateTokens, MediaQueryStyles {
|
|
68
89
|
}
|
|
69
90
|
type Pseudos = CSS.Pseudos | `&${CSS.Pseudos}`;
|
|
70
91
|
type CssPseudos = {
|
|
71
|
-
[P in Pseudos]?:
|
|
92
|
+
[P in Pseudos]?: CssStyles;
|
|
72
93
|
};
|
|
73
94
|
export interface StyledParams extends GeneratorOptions, Variants {
|
|
74
|
-
base?:
|
|
95
|
+
base?: BaseStyles;
|
|
75
96
|
}
|
|
76
97
|
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function dotCase(str: PropertyKey): string;
|
package/util/index.cjs
CHANGED
|
@@ -1 +1,14 @@
|
|
|
1
|
-
"use strict";
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const dashCase = require("../dash-case-DIwKaYgE.cjs");
|
|
4
|
+
const pascalCase = require("../pascal-case-By_l58S-.cjs");
|
|
5
|
+
const toHash = require("../to-hash-C05Y906F.cjs");
|
|
6
|
+
function camelCase(str) {
|
|
7
|
+
if (!str) return "";
|
|
8
|
+
if (typeof str !== "string") return camelCase(String(str));
|
|
9
|
+
return str.replace(/\s/g, "-").replace(/-([a-z])/g, (g) => g[1].toUpperCase());
|
|
10
|
+
}
|
|
11
|
+
exports.dashCase = dashCase.dashCase;
|
|
12
|
+
exports.pascalCase = pascalCase.pascalCase;
|
|
13
|
+
exports.toHash = toHash.toHash;
|
|
14
|
+
exports.camelCase = camelCase;
|
package/util/index.js
CHANGED
|
@@ -1,11 +1,14 @@
|
|
|
1
|
-
import { d
|
|
2
|
-
import { p
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
import { d } from "../dash-case-DblXvymC.js";
|
|
2
|
+
import { p } from "../pascal-case-F3Usi5Wf.js";
|
|
3
|
+
import { t } from "../to-hash-DAN2LcHK.js";
|
|
4
|
+
function camelCase(str) {
|
|
5
|
+
if (!str) return "";
|
|
6
|
+
if (typeof str !== "string") return camelCase(String(str));
|
|
7
|
+
return str.replace(/\s/g, "-").replace(/-([a-z])/g, (g) => g[1].toUpperCase());
|
|
5
8
|
}
|
|
6
9
|
export {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
10
|
+
camelCase,
|
|
11
|
+
d as dashCase,
|
|
12
|
+
p as pascalCase,
|
|
13
|
+
t as toHash
|
|
11
14
|
};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
const defineViewportClamp = (config) => (value, min, max) => {
|
|
3
|
+
const { screenSize, axis = "horizontal", minMultiplier = 0.5, maxMultiplier = 1.5, minMaxUnit = "px" } = config;
|
|
4
|
+
const relativeValue = Math.round(value / screenSize * 1e4) / 100;
|
|
5
|
+
const relativeUnit = axis === "vertical" ? "vh" : "vw";
|
|
6
|
+
const minValue = min || Math.round(minMultiplier * value);
|
|
7
|
+
const maxValue = max || Math.round(maxMultiplier * value);
|
|
8
|
+
return `clamp(${minValue}${minMaxUnit}, ${relativeValue}${relativeUnit}, ${maxValue}${minMaxUnit})`;
|
|
9
|
+
};
|
|
10
|
+
exports.defineViewportClamp = defineViewportClamp;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
const defineViewportClamp = (config) => (value, min, max) => {
|
|
2
|
+
const { screenSize, axis = "horizontal", minMultiplier = 0.5, maxMultiplier = 1.5, minMaxUnit = "px" } = config;
|
|
3
|
+
const relativeValue = Math.round(value / screenSize * 1e4) / 100;
|
|
4
|
+
const relativeUnit = axis === "vertical" ? "vh" : "vw";
|
|
5
|
+
const minValue = min || Math.round(minMultiplier * value);
|
|
6
|
+
const maxValue = max || Math.round(maxMultiplier * value);
|
|
7
|
+
return `clamp(${minValue}${minMaxUnit}, ${relativeValue}${relativeUnit}, ${maxValue}${minMaxUnit})`;
|
|
8
|
+
};
|
|
9
|
+
export {
|
|
10
|
+
defineViewportClamp as d
|
|
11
|
+
};
|
package/compiler/index.cjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("esbuild");require("child_process");require("../dash-case-DKzpenwY.cjs");require("path");require("fs");require("fs/promises");require("../parse-templates-DVK3iZIl.cjs");const e=require("../index-BKoD9apd.cjs");exports.compileSaltyFile=e.compileSaltyFile;exports.generateConfigStyles=e.generateConfigStyles;exports.generateCss=e.generateCss;exports.generateFile=e.generateFile;exports.isSaltyFile=e.isSaltyFile;exports.minimizeFile=e.minimizeFile;exports.saltyFileExtensions=e.saltyFileExtensions;exports.saltyFileRegExp=e.saltyFileRegExp;
|
package/compiler/index.d.ts
DELETED
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { StyleComponentGenerator } from '../generator/style-generator';
|
|
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
|
-
[key: string]: {
|
|
8
|
-
generator: StyleComponentGenerator;
|
|
9
|
-
isKeyframes?: boolean;
|
|
10
|
-
animationName?: string;
|
|
11
|
-
css?: string;
|
|
12
|
-
};
|
|
13
|
-
}>;
|
|
14
|
-
export declare const generateCss: (dirname: string, prod?: boolean) => Promise<void>;
|
|
15
|
-
export declare const generateFile: (dirname: string, file: string) => Promise<void>;
|
|
16
|
-
export declare const minimizeFile: (dirname: string, file: string, prod?: boolean) => Promise<string | undefined>;
|
package/compiler/index.js
DELETED
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import "esbuild";
|
|
2
|
-
import "child_process";
|
|
3
|
-
import "../dash-case-DMQMcCO6.js";
|
|
4
|
-
import "path";
|
|
5
|
-
import "fs";
|
|
6
|
-
import "fs/promises";
|
|
7
|
-
import "../parse-templates-DUUSaubj.js";
|
|
8
|
-
import { d as p, c as n, g, e as F, i as y, m as x, s as S, b as c } from "../index-BGaLvshf.js";
|
|
9
|
-
export {
|
|
10
|
-
p as compileSaltyFile,
|
|
11
|
-
n as generateConfigStyles,
|
|
12
|
-
g as generateCss,
|
|
13
|
-
F as generateFile,
|
|
14
|
-
y as isSaltyFile,
|
|
15
|
-
x as minimizeFile,
|
|
16
|
-
S as saltyFileExtensions,
|
|
17
|
-
c as saltyFileRegExp
|
|
18
|
-
};
|
package/config/config-types.d.ts
DELETED
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
import { CssStyles } from '../types';
|
|
2
|
-
import { OrString } from '../types/util-types';
|
|
3
|
-
export type GlobalStyles = Record<string, CssStyles>;
|
|
4
|
-
export type CssVariables = Record<string, unknown>;
|
|
5
|
-
export interface CssResponsiveVariables {
|
|
6
|
-
[key: string]: CssVariables;
|
|
7
|
-
}
|
|
8
|
-
export interface CssConditionalVariables {
|
|
9
|
-
[key: PropertyKey]: {
|
|
10
|
-
[key: PropertyKey]: CssVariables;
|
|
11
|
-
};
|
|
12
|
-
}
|
|
13
|
-
type CssTemplate = CssStyles | {
|
|
14
|
-
[key: PropertyKey]: CssTemplate;
|
|
15
|
-
};
|
|
16
|
-
export interface CssTemplates {
|
|
17
|
-
[key: PropertyKey]: {
|
|
18
|
-
[key: PropertyKey]: CssTemplate;
|
|
19
|
-
};
|
|
20
|
-
}
|
|
21
|
-
export interface CssModifier {
|
|
22
|
-
pattern: RegExp;
|
|
23
|
-
transform: (regexMatch: string) => {
|
|
24
|
-
css?: CssStyles;
|
|
25
|
-
value: string;
|
|
26
|
-
};
|
|
27
|
-
}
|
|
28
|
-
export type CssModifiers = Record<string, CssModifier>;
|
|
29
|
-
export interface SaltyConfig {
|
|
30
|
-
/**
|
|
31
|
-
* The import strategy to use when importing css files.
|
|
32
|
-
* - `root` will import the css file from the root of the project.
|
|
33
|
-
* - `component` will import the css file from the component's directory.
|
|
34
|
-
*/
|
|
35
|
-
importStrategy?: 'root' | 'component';
|
|
36
|
-
/**
|
|
37
|
-
* Base variables that can be used in all styles as they are applied globally to :root.
|
|
38
|
-
*/
|
|
39
|
-
variables?: CssVariables;
|
|
40
|
-
/**
|
|
41
|
-
* Variables that are defined for different media queries.
|
|
42
|
-
*/
|
|
43
|
-
responsiveVariables?: CssResponsiveVariables;
|
|
44
|
-
/**
|
|
45
|
-
* Variables that are defined for different parent selectors (classes or data attributes).
|
|
46
|
-
*/
|
|
47
|
-
conditionalVariables?: CssConditionalVariables;
|
|
48
|
-
/**
|
|
49
|
-
* The global styles that are imported in the root of the project.
|
|
50
|
-
*/
|
|
51
|
-
global?: GlobalStyles;
|
|
52
|
-
/**
|
|
53
|
-
* The templates that can be used in styles to create reusable css.
|
|
54
|
-
*/
|
|
55
|
-
templates?: CssTemplates;
|
|
56
|
-
/**
|
|
57
|
-
* The modifiers that can transform css values.
|
|
58
|
-
*/
|
|
59
|
-
modifiers?: CssModifiers;
|
|
60
|
-
/**
|
|
61
|
-
* Define modules that should not be bundled when generating the css file. This improves the performance of the css generation and can help with issues relared to external packages being imported in an environment that does not support them.
|
|
62
|
-
*/
|
|
63
|
-
externalModules?: ('react' | 'react-dom' | OrString)[];
|
|
64
|
-
}
|
|
65
|
-
export {};
|
package/dash-case-DKzpenwY.cjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";const n=e=>String.fromCharCode(e+(e>25?39:97)),i=(e,r)=>{let t="",a;for(a=Math.abs(e);a>52;a=a/52|0)t=n(a%52)+t;return t=n(a%52)+t,t.length<r?t=t.padStart(r,"a"):t.length>r&&(t=t.slice(-r)),t},o=(e,r)=>{let t=r.length;for(;t;)e=e*33^r.charCodeAt(--t);return e},c=(e,r=3)=>{const t=o(5381,JSON.stringify(e))>>>0;return i(t,r)};function s(e){return e?typeof e!="string"?s(String(e)):e.replace(/\s/g,"-").replace(/[A-Z](?:(?=[^A-Z])|[A-Z]*(?=[A-Z][^A-Z]|$))/g,(r,t)=>(t>0?"-":"")+r.toLowerCase()):""}exports.dashCase=s;exports.toHash=c;
|
package/dash-case-DMQMcCO6.js
DELETED
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
const n = (e) => String.fromCharCode(e + (e > 25 ? 39 : 97)), o = (e, r) => {
|
|
2
|
-
let t = "", a;
|
|
3
|
-
for (a = Math.abs(e); a > 52; a = a / 52 | 0) t = n(a % 52) + t;
|
|
4
|
-
return t = n(a % 52) + t, t.length < r ? t = t.padStart(r, "a") : t.length > r && (t = t.slice(-r)), t;
|
|
5
|
-
}, i = (e, r) => {
|
|
6
|
-
let t = r.length;
|
|
7
|
-
for (; t; ) e = e * 33 ^ r.charCodeAt(--t);
|
|
8
|
-
return e;
|
|
9
|
-
}, c = (e, r = 3) => {
|
|
10
|
-
const t = i(5381, JSON.stringify(e)) >>> 0;
|
|
11
|
-
return o(t, r);
|
|
12
|
-
};
|
|
13
|
-
function s(e) {
|
|
14
|
-
return e ? typeof e != "string" ? s(String(e)) : e.replace(/\s/g, "-").replace(/[A-Z](?:(?=[^A-Z])|[A-Z]*(?=[A-Z][^A-Z]|$))/g, (r, t) => (t > 0 ? "-" : "") + r.toLowerCase()) : "";
|
|
15
|
-
}
|
|
16
|
-
export {
|
|
17
|
-
s as d,
|
|
18
|
-
c as t
|
|
19
|
-
};
|
package/generator/index.cjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";var m=Object.defineProperty;var l=(a,t,s)=>t in a?m(a,t,{enumerable:!0,configurable:!0,writable:!0,value:s}):a[t]=s;var o=(a,t,s)=>l(a,typeof t!="symbol"?t+"":t,s);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("../dash-case-DKzpenwY.cjs"),p=require("../parse-templates-DVK3iZIl.cjs");class g{constructor(t,s){o(this,"_isProd");o(this,"_callerName");o(this,"_context");this.tagName=t,this.params=s}get hash(){return u.toHash(this.params.base||this.params)}get priority(){var t;return typeof this.tagName=="function"||typeof this.tagName=="object"?(((t=this.tagName.generator)==null?void 0:t.priority)||0)+1:0}get classNames(){const t=[this.hash],{className:s}=this.params;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?p.getTemplateKeys(this._context.config.templates):[]}get css(){var e;const{base:t={},variants:s={},compoundVariants:i=[]}=this.params,r={...t,variants:s,compoundVariants:i};return p.parseStyles(r,`.${this.cssClassName}`,this.priority,(e=this._context)==null?void 0:e.config)}get props(){const{element:t}=this.params,s=this.params.variants?Object.keys(this.params.variants).map(e=>{var n;const c=(n=this.params.defaultVariants)==null?void 0:n[e];return c!==void 0?`${e}=${String(c)}`:e}):void 0,i=new Set([]),r=/\{props\.([\w\d]+)\}/gi.exec(JSON.stringify(this.params.base));return r&&r.forEach((e,c,n)=>{const h=n.at(1);h&&i.add(h)}),{element:t,variantKeys:s,propValueKeys:[...i],attr:{"data-component-name":this._isProd?void 0:this._callerName}}}_withBuildContext(t){this._context=t;const{name:s,config:i,prod:r}=t;return this._isProd=r,this._callerName=s,this}}exports.StyleComponentGenerator=g;
|
package/generator/index.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './style-generator';
|