@salty-css/core 0.1.0-alpha.3 → 0.1.0-alpha.31

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.
Files changed (77) hide show
  1. package/README.md +209 -0
  2. package/astro-component-5hrNTCJ5.js +4 -0
  3. package/astro-component-Dj3enX6K.cjs +4 -0
  4. package/bin/commands/build.d.ts +2 -0
  5. package/bin/commands/generate.d.ts +2 -0
  6. package/bin/commands/init.d.ts +2 -0
  7. package/bin/commands/update.d.ts +2 -0
  8. package/bin/commands/version.d.ts +2 -0
  9. package/bin/confirm-install.d.ts +34 -0
  10. package/bin/context.d.ts +22 -0
  11. package/bin/detection/css-file.d.ts +5 -0
  12. package/bin/frameworks/astro.d.ts +4 -0
  13. package/bin/frameworks/index.d.ts +13 -0
  14. package/bin/frameworks/react.d.ts +2 -0
  15. package/bin/frameworks/types.d.ts +27 -0
  16. package/bin/integrations/astro.d.ts +11 -0
  17. package/bin/integrations/eslint.d.ts +6 -0
  18. package/bin/integrations/index.d.ts +21 -0
  19. package/bin/integrations/next.d.ts +9 -0
  20. package/bin/integrations/types.d.ts +29 -0
  21. package/bin/integrations/vite.d.ts +8 -0
  22. package/bin/main.cjs +653 -336
  23. package/bin/main.d.ts +8 -0
  24. package/bin/main.js +653 -336
  25. package/bin/package-json.d.ts +21 -0
  26. package/bin/saltyrc.d.ts +31 -0
  27. package/bin/templates.d.ts +14 -0
  28. package/{class-name-generator-YeSQe_Ik.js → class-name-generator-B0WkxoIg.js} +17 -2
  29. package/{class-name-generator-B2Pb2obX.cjs → class-name-generator-BEOEMEKX.cjs} +17 -2
  30. package/compiler/resolve-import.d.ts +17 -0
  31. package/compiler/salty-compiler.cjs +131 -30
  32. package/compiler/salty-compiler.d.ts +8 -1
  33. package/compiler/salty-compiler.js +133 -31
  34. package/config/index.cjs +4 -0
  35. package/config/index.js +5 -1
  36. package/css/dynamic-styles.cjs +15 -0
  37. package/css/dynamic-styles.d.ts +10 -0
  38. package/css/dynamic-styles.js +15 -0
  39. package/css/index.cjs +3 -0
  40. package/css/index.d.ts +1 -0
  41. package/css/index.js +3 -0
  42. package/css/keyframes.cjs +1 -1
  43. package/css/keyframes.js +1 -1
  44. package/factories/define-font.d.ts +28 -0
  45. package/factories/define-import.d.ts +14 -0
  46. package/factories/index.cjs +141 -0
  47. package/factories/index.d.ts +2 -0
  48. package/factories/index.js +141 -0
  49. package/generators/index.cjs +1 -1
  50. package/generators/index.js +2 -2
  51. package/instances/classname-instance.cjs +1 -1
  52. package/instances/classname-instance.js +1 -1
  53. package/package.json +5 -1
  54. package/parse-styles-BBJ3PWyV.js +514 -0
  55. package/parse-styles-lOMGe_c5.cjs +513 -0
  56. package/parsers/index.cjs +93 -3
  57. package/parsers/index.d.ts +1 -0
  58. package/parsers/index.js +97 -7
  59. package/parsers/parse-templates.d.ts +10 -0
  60. package/parsers/parser-regexes.d.ts +3 -0
  61. package/parsers/resolve-template-variants.d.ts +21 -0
  62. package/parsers/strict.d.ts +2 -0
  63. package/runtime/index.cjs +1 -1
  64. package/runtime/index.js +1 -1
  65. package/{salty.config-cqavVm2t.cjs → salty.config-DogY_sSQ.cjs} +1 -1
  66. package/salty.config-GV37Q-D2.js +4 -0
  67. package/styled-file-BzmB9_Ez.cjs +12 -0
  68. package/{react-styled-file-U02jek-B.cjs → styled-file-CPd_rTW2.cjs} +2 -2
  69. package/{react-styled-file-B99mwk0w.js → styled-file-Cda3EeR6.js} +2 -2
  70. package/styled-file-DLcgYmGN.js +12 -0
  71. package/types/config-types.d.ts +42 -2
  72. package/types/font-types.d.ts +53 -0
  73. package/{react-vanilla-file-D9px70iK.js → vanilla-file-1kOqbCIM.js} +2 -2
  74. package/{react-vanilla-file-Bj6XC8GS.cjs → vanilla-file-r0fp2q_m.cjs} +2 -2
  75. package/parse-styles-BTIoYnBr.js +0 -232
  76. package/parse-styles-CA3TP5n1.cjs +0 -231
  77. package/salty.config-DjosWdPw.js +0 -4
package/parsers/index.js CHANGED
@@ -1,10 +1,42 @@
1
- import { p as parseAndJoinStyles } from "../parse-styles-BTIoYnBr.js";
2
- import { a, c, d, b } from "../parse-styles-BTIoYnBr.js";
1
+ import { i as isRichTemplateNode, p as parseAndJoinStyles } from "../parse-styles-BBJ3PWyV.js";
2
+ import { a, d, e, c, r } from "../parse-styles-BBJ3PWyV.js";
3
3
  import { d as dashCase } from "../dash-case-DblXvymC.js";
4
4
  import { t as toHash } from "../to-hash-DAN2LcHK.js";
5
+ const RICH_META_KEYS = /* @__PURE__ */ new Set(["base", "variants", "defaultVariants", "compoundVariants", "anyOfVariants"]);
6
+ const isChildEntry = (key, value) => {
7
+ if (RICH_META_KEYS.has(key)) return false;
8
+ return !!value && typeof value === "object" && !Array.isArray(value);
9
+ };
5
10
  const parseTemplates = async (obj, path = []) => {
6
11
  if (!obj) return "";
7
12
  const classes = [];
13
+ if (isRichTemplateNode(obj)) {
14
+ const rich = obj;
15
+ const baseClassName = path.map((p) => dashCase(String(p))).join("-");
16
+ if (rich.base) {
17
+ const hashClass = "t_" + toHash(baseClassName, 4);
18
+ const result = await parseAndJoinStyles(rich.base, `.${baseClassName}, .${hashClass}`);
19
+ classes.push(result);
20
+ }
21
+ if (rich.variants) {
22
+ for (const [axis, valueMap] of Object.entries(rich.variants)) {
23
+ if (!valueMap || typeof valueMap !== "object") continue;
24
+ for (const [value, styles] of Object.entries(valueMap)) {
25
+ if (!styles || typeof styles !== "object") continue;
26
+ const variantClassName = `${baseClassName}-${dashCase(axis)}-${dashCase(value)}`;
27
+ const variantHashClass = "tv_" + toHash(variantClassName, 4);
28
+ const result = await parseAndJoinStyles(styles, `.${variantClassName}, .${variantHashClass}`);
29
+ classes.push(result);
30
+ }
31
+ }
32
+ }
33
+ for (const [key, value] of Object.entries(rich)) {
34
+ if (!isChildEntry(key, value)) continue;
35
+ const result = await parseTemplates(value, [...path, key.trim()]);
36
+ classes.push(result);
37
+ }
38
+ return classes.join("\n");
39
+ }
8
40
  const levelStyles = {};
9
41
  for (const [key, value] of Object.entries(obj)) {
10
42
  if (typeof value === "function") ;
@@ -17,7 +49,7 @@ const parseTemplates = async (obj, path = []) => {
17
49
  }
18
50
  }
19
51
  if (Object.keys(levelStyles).length) {
20
- const className = path.map(dashCase).join("-");
52
+ const className = path.map((p) => dashCase(String(p))).join("-");
21
53
  const hashClass = "t_" + toHash(className, 4);
22
54
  const result = await parseAndJoinStyles(levelStyles, `.${className}, .${hashClass}`);
23
55
  classes.push(result);
@@ -39,21 +71,79 @@ const getTemplateTypes = (templates) => {
39
71
  };
40
72
  const getTemplateTokens = (templates, parent = "", templateTokens = /* @__PURE__ */ new Set()) => {
41
73
  if (!templates) return [];
74
+ if (isRichTemplateNode(templates)) {
75
+ if (parent) templateTokens.add(parent);
76
+ Object.entries(templates).forEach(([key, value]) => {
77
+ if (!isChildEntry(key, value)) return;
78
+ const keyValue = parent ? `${parent}.${key}` : key;
79
+ getTemplateTokens(value, keyValue, templateTokens);
80
+ });
81
+ return [...templateTokens];
82
+ }
42
83
  Object.entries(templates).forEach(([key, value]) => {
43
84
  const keyValue = parent ? `${parent}.${key}` : key;
44
- if (typeof value === "object") return getTemplateTokens(value, keyValue, templateTokens);
85
+ if (value && typeof value === "object") return getTemplateTokens(value, keyValue, templateTokens);
45
86
  return templateTokens.add(parent);
46
87
  });
47
88
  return [...templateTokens];
48
89
  };
90
+ const getTemplateVariantMaps = (templates) => {
91
+ const result = {};
92
+ if (!templates) return result;
93
+ for (const [topKey, topNode] of Object.entries(templates)) {
94
+ if (!topNode || typeof topNode !== "object" || typeof topNode === "function") continue;
95
+ walk(topNode, [], result[topKey] || (result[topKey] = {}), {});
96
+ }
97
+ return result;
98
+ };
99
+ const mergeAxes = (inherited, node) => {
100
+ const next = {};
101
+ for (const [axis, vals] of Object.entries(inherited)) {
102
+ next[axis] = { ...vals };
103
+ }
104
+ if (isRichTemplateNode(node) && node.variants) {
105
+ for (const [axis, valueMap] of Object.entries(node.variants)) {
106
+ next[axis] = next[axis] || {};
107
+ for (const value of Object.keys(valueMap)) next[axis][value] = true;
108
+ }
109
+ }
110
+ return next;
111
+ };
112
+ const walk = (node, path, out, inheritedAxes) => {
113
+ if (!node || typeof node !== "object" || Array.isArray(node)) return;
114
+ const axes = mergeAxes(inheritedAxes, node);
115
+ const dot = path.join(".");
116
+ if (path.length && (isRichTemplateNode(node) || Object.keys(axes).length)) {
117
+ const axisMap = {};
118
+ for (const [axis, valSet] of Object.entries(axes)) {
119
+ const values = Object.keys(valSet);
120
+ const isBooleanOnly = values.length === 1 && values[0] === "true";
121
+ axisMap[axis] = isBooleanOnly ? "boolean" : values.map((v) => `"${v}"`).join(" | ");
122
+ }
123
+ if (Object.keys(axisMap).length) out[dot] = axisMap;
124
+ }
125
+ if (isRichTemplateNode(node)) {
126
+ for (const [key, value] of Object.entries(node)) {
127
+ if (!isChildEntry(key, value)) continue;
128
+ walk(value, [...path, key.trim()], out, axes);
129
+ }
130
+ return;
131
+ }
132
+ for (const [key, value] of Object.entries(node)) {
133
+ if (!value || typeof value !== "object" || Array.isArray(value)) continue;
134
+ walk(value, [...path, key.trim()], out, axes);
135
+ }
136
+ };
49
137
  export {
50
138
  getTemplateKeys,
51
139
  getTemplateTokens,
52
140
  getTemplateTypes,
141
+ getTemplateVariantMaps,
53
142
  parseAndJoinStyles,
54
143
  a as parseStyles,
55
144
  parseTemplates,
56
- c as parseValueModifiers,
57
- d as parseValueTokens,
58
- b as parseVariableTokens
145
+ d as parseValueModifiers,
146
+ e as parseValueTokens,
147
+ c as parseVariableTokens,
148
+ r as reportParserIssue
59
149
  };
@@ -2,3 +2,13 @@ export declare const parseTemplates: <T extends object>(obj: T, path?: PropertyK
2
2
  export declare const getTemplateKeys: <T extends object>(templates: T) => string[];
3
3
  export declare const getTemplateTypes: <T extends object>(templates: T) => Record<string, string>;
4
4
  export declare const getTemplateTokens: <T extends object>(templates: T, parent?: string, templateTokens?: Set<string>) => string[];
5
+ /**
6
+ * Walk every rich-template path in a templates root and emit, for each reachable dot-path, the set of
7
+ * variant axes valid at that path (axis name → union of value names, with `boolean` for axes whose only
8
+ * declared value is `true`).
9
+ *
10
+ * Inheritance: a leaf's axis enum is the union of its own values and every ancestor's values for the
11
+ * same axis. Matches the resolver's bottom-up lookup semantics — anything reachable via fallback is a
12
+ * valid call-site value.
13
+ */
14
+ export declare const getTemplateVariantMaps: (templates: Record<string, any>) => Record<string, Record<string, Record<string, string>>>;
@@ -0,0 +1,3 @@
1
+ export declare const pseudoTypoRegex: RegExp;
2
+ export declare const templateLiteralLeftoverRegex: RegExp;
3
+ export declare const bareAtRuleRegex: RegExp;
@@ -0,0 +1,21 @@
1
+ import { RichTemplateNode } from '../types/config-types';
2
+ export type TemplateCallSite = {
3
+ path: string[];
4
+ variants: Record<string, string | boolean>;
5
+ };
6
+ export declare const isRichTemplateNode: (node: unknown) => node is RichTemplateNode;
7
+ /**
8
+ * Parse a template call-site value into its dot-path and the axis values requested at the call site.
9
+ *
10
+ * String form: `'heading.large@weight=heavy&emphasis=loud&italic'`
11
+ * Object form: `{ name: 'heading.large', weight: 'heavy', emphasis: 'loud', italic: true }`
12
+ */
13
+ export declare const parseTemplateCallSite: (value: unknown) => TemplateCallSite | undefined;
14
+ export declare const pathHasRichNode: (root: any, path: string[]) => boolean;
15
+ /**
16
+ * Resolve a rich-template invocation into a flat CSS-in-JS object.
17
+ * Implements docs/template-variants-spec.md §5 (parent-to-leaf inheritance, replace semantics).
18
+ *
19
+ * Returns `undefined` if the path doesn't resolve. Emits console.warn for unknown axes / values.
20
+ */
21
+ export declare const resolveRichTemplate: (root: any, path: string[], callSiteVariants: Record<string, string | boolean>, templateName: string) => Record<string, any> | undefined;
@@ -0,0 +1,2 @@
1
+ export type StrictMode = boolean | 'warn' | undefined;
2
+ export declare const reportParserIssue: (strict: StrictMode, message: string) => void;
package/runtime/index.cjs CHANGED
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const parseStyles = require("../parse-styles-CA3TP5n1.cjs");
3
+ const parseStyles = require("../parse-styles-lOMGe_c5.cjs");
4
4
  const defineRuntime = (config) => {
5
5
  const getDynamicStylesCss = async (styles, scope) => {
6
6
  const parsed = await parseStyles.parseStyles(styles, scope, config);
package/runtime/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { a as parseStyles } from "../parse-styles-BTIoYnBr.js";
1
+ import { a as parseStyles } from "../parse-styles-BBJ3PWyV.js";
2
2
  const defineRuntime = (config) => {
3
3
  const getDynamicStylesCss = async (styles, scope) => {
4
4
  const parsed = await parseStyles(styles, scope, config);
@@ -1,4 +1,4 @@
1
1
  "use strict";
2
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";
3
+ const salty_config = "import { defineConfig } from '@salty-css/core/config';\n\nexport const config = defineConfig({\n strict: true,\n externalModules: ['react', 'react-dom']\n});\n";
4
4
  exports.default = salty_config;
@@ -0,0 +1,4 @@
1
+ const salty_config = "import { defineConfig } from '@salty-css/core/config';\n\nexport const config = defineConfig({\n strict: true,\n externalModules: ['react', 'react-dom']\n});\n";
2
+ export {
3
+ salty_config as default
4
+ };
@@ -0,0 +1,12 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const styledFile = `import { styled } from "@salty-css/astro/styled";
4
+
5
+ export const <%- name %> = styled('<%- tag %>', {
6
+ <% if(className) { %>className: '<%- className %>',<% } %>
7
+ base: {
8
+ // Add your styles here
9
+ }
10
+ })
11
+ `;
12
+ exports.default = styledFile;
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const reactStyledFile = `import { styled } from "@salty-css/react/styled";
3
+ const styledFile = `import { styled } from "@salty-css/react/styled";
4
4
 
5
5
  export const <%- name %> = styled('<%- tag %>', {
6
6
  <% if(className) { %>className: '<%- className %>',<% } %>
@@ -8,4 +8,4 @@ export const <%- name %> = styled('<%- tag %>', {
8
8
  // Add your styles here
9
9
  }
10
10
  })`;
11
- exports.default = reactStyledFile;
11
+ exports.default = styledFile;
@@ -1,4 +1,4 @@
1
- const reactStyledFile = `import { styled } from "@salty-css/react/styled";
1
+ const styledFile = `import { styled } from "@salty-css/react/styled";
2
2
 
3
3
  export const <%- name %> = styled('<%- tag %>', {
4
4
  <% if(className) { %>className: '<%- className %>',<% } %>
@@ -7,5 +7,5 @@ export const <%- name %> = styled('<%- tag %>', {
7
7
  }
8
8
  })`;
9
9
  export {
10
- reactStyledFile as default
10
+ styledFile as default
11
11
  };
@@ -0,0 +1,12 @@
1
+ const styledFile = `import { styled } from "@salty-css/astro/styled";
2
+
3
+ export const <%- name %> = styled('<%- tag %>', {
4
+ <% if(className) { %>className: '<%- className %>',<% } %>
5
+ base: {
6
+ // Add your styles here
7
+ }
8
+ })
9
+ `;
10
+ export {
11
+ styledFile as default
12
+ };
@@ -1,5 +1,6 @@
1
1
  import { BaseStyles, CssStyles, MediaQueryStyles } from '../types';
2
2
  import { OrString } from '../types/util-types';
3
+ export * from './font-types';
3
4
  export type GlobalStyles = Record<string, BaseStyles>;
4
5
  export type CssVariableTokensObject = Record<string, unknown>;
5
6
  export interface CssResponsiveVariables {
@@ -15,7 +16,38 @@ export interface SaltyVariables {
15
16
  conditional?: CssConditionalVariables;
16
17
  [key: string]: undefined | string | number | CssVariableTokensObject;
17
18
  }
18
- type CssTemplate = MediaQueryStyles | CssStyles | {
19
+ /**
20
+ * A variant axis value bundle: a map from axis name to a map from value name (string keys or `'true'`)
21
+ * to a CSS-in-JS block. `name` is reserved as the call-site object form's path key and cannot be used
22
+ * as an axis name (build-time error).
23
+ */
24
+ export type CssVariantAxes = {
25
+ [axis: string]: {
26
+ [value: string]: CssStyles;
27
+ };
28
+ } & {
29
+ name?: never;
30
+ };
31
+ export interface CssCompoundVariant {
32
+ css: CssStyles;
33
+ [axis: string]: any;
34
+ }
35
+ /**
36
+ * A "rich" template node: declares its own base styles, named variant bundles, defaults, and compound rules.
37
+ * May coexist with child template nodes (descendants) as additional sibling keys.
38
+ */
39
+ export type RichTemplateNode = {
40
+ base?: CssStyles;
41
+ variants?: CssVariantAxes;
42
+ defaultVariants?: {
43
+ [axis: string]: string | boolean;
44
+ };
45
+ compoundVariants?: CssCompoundVariant[];
46
+ anyOfVariants?: CssCompoundVariant[];
47
+ } & {
48
+ [key: PropertyKey]: any;
49
+ };
50
+ type CssTemplate = MediaQueryStyles | CssStyles | RichTemplateNode | {
19
51
  [key: PropertyKey]: CssTemplate;
20
52
  };
21
53
  export interface CssTemplateObject {
@@ -68,6 +100,14 @@ export interface SaltyConfig {
68
100
  * 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
101
  */
70
102
  externalModules?: ('react' | 'react-dom' | OrString)[];
103
+ /**
104
+ * Controls how the parser reacts to suspicious or malformed input
105
+ * (typos, invalid value types, malformed selectors, etc.).
106
+ * - `true` — throw on issues (recommended for new projects)
107
+ * - `'warn'` — log a warning and continue
108
+ * - `false` / undefined — silent, behave like prior versions
109
+ */
110
+ strict?: boolean | 'warn';
71
111
  /**
72
112
  * default unit for px based properties when providing a number value. Default is 'px'.
73
113
  */
@@ -78,8 +118,8 @@ export interface CachedConfig {
78
118
  staticVariables: Record<string, any>;
79
119
  mediaQueries: Record<string, string>;
80
120
  modifiers?: CssModifiers;
121
+ strict?: boolean | 'warn';
81
122
  templatePaths: {
82
123
  [key: string]: string;
83
124
  };
84
125
  }
85
- export {};
@@ -0,0 +1,53 @@
1
+ export type FontDisplay = 'auto' | 'block' | 'swap' | 'fallback' | 'optional';
2
+ export type FontFormat = 'woff2' | 'woff' | 'truetype' | 'opentype' | 'embedded-opentype' | 'svg' | 'collection';
3
+ export type FontStyle = 'normal' | 'italic' | 'oblique' | (string & {});
4
+ export type FontWeight = number | 'normal' | 'bold' | 'lighter' | 'bolder' | (string & {});
5
+ export interface FontSrc {
6
+ url: string;
7
+ format?: FontFormat;
8
+ /** Optional `tech(...)` descriptor passed straight through to @font-face. */
9
+ tech?: string;
10
+ }
11
+ export interface FontVariant {
12
+ weight?: FontWeight;
13
+ style?: FontStyle;
14
+ stretch?: string;
15
+ display?: FontDisplay;
16
+ unicodeRange?: string;
17
+ ascentOverride?: string;
18
+ descentOverride?: string;
19
+ lineGapOverride?: string;
20
+ sizeAdjust?: string;
21
+ /**
22
+ * One or more font sources. Strings are treated as URLs and the `format()`
23
+ * descriptor is auto-detected from the file extension when possible. Use
24
+ * the `{ url, format }` object form for CDN/extensionless URLs where the
25
+ * format must be set explicitly.
26
+ */
27
+ src: string | FontSrc | (string | FontSrc)[];
28
+ }
29
+ interface DefineFontBase {
30
+ /** CSS `font-family` value users will see in styles. */
31
+ name: string;
32
+ /**
33
+ * CSS variable name. Accepts `--font-inter` or `font-inter`; we normalize.
34
+ * Optional — when omitted, a deterministic name is derived from the other
35
+ * inputs as `--font-<name>-<hash>`.
36
+ */
37
+ variable?: string;
38
+ /** Default `font-display` applied to variants that don't set their own. */
39
+ display?: FontDisplay;
40
+ /** Family fallback(s) appended after `name` in the generated `font-family` string. */
41
+ fallback?: string;
42
+ }
43
+ export interface DefineFontVariantsOptions extends DefineFontBase {
44
+ variants: FontVariant[];
45
+ import?: never;
46
+ }
47
+ export interface DefineFontImportOptions extends DefineFontBase {
48
+ /** Remote stylesheet URL (e.g. Google Fonts). Emitted as `@import url(...)`. */
49
+ import: string;
50
+ variants?: never;
51
+ }
52
+ export type DefineFontOptions = DefineFontVariantsOptions | DefineFontImportOptions;
53
+ export {};
@@ -1,4 +1,4 @@
1
- const reactVanillaFile = `import { <%- styledComponentName %> } from "./<%- fileName %>.css";
1
+ const vanillaFile = `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
- reactVanillaFile as default
17
+ vanillaFile as default
18
18
  };
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const reactVanillaFile = `import { <%- styledComponentName %> } from "./<%- fileName %>.css";
3
+ const vanillaFile = `import { <%- styledComponentName %> } from "./<%- fileName %>.css";
4
4
 
5
5
  interface <%- componentName %>Props {
6
6
  text?: string;
@@ -15,4 +15,4 @@ export const <%- componentName %> = ({ text = 'Lorem ipsum' }: <%- componentName
15
15
  };
16
16
 
17
17
  export default <%- componentName %>;`;
18
- exports.default = reactVanillaFile;
18
+ exports.default = vanillaFile;
@@ -1,232 +0,0 @@
1
- import { d as dashCase } from "./dash-case-DblXvymC.js";
2
- import { d as defineViewportClamp } from "./viewport-clamp-K553uXu3.js";
3
- const parseValueModifiers = (modifiers) => (value) => {
4
- if (typeof value !== "string") return void 0;
5
- if (!modifiers) return void 0;
6
- let transformed = value;
7
- const additionalCss = [];
8
- Object.values(modifiers).forEach((modifier) => {
9
- const { pattern, transform } = modifier;
10
- transformed = transformed.replace(pattern, (match) => {
11
- const { value: _value, css } = transform(match);
12
- if (css) additionalCss.push(css);
13
- return _value;
14
- });
15
- });
16
- return { transformed, additionalCss };
17
- };
18
- const parseValueTokens = (tokenNames) => (value) => {
19
- if (typeof value !== "string") return void 0;
20
- const hasToken = /\{[^{}]+\}/g.test(value);
21
- if (!hasToken) return void 0;
22
- const transformed = value.replace(/\{([^{}]+)\}/g, (...args) => {
23
- const variable = dashCase(args[1].replaceAll(".", "-"));
24
- if (tokenNames && !tokenNames.includes(variable)) console.warn(`Token ${variable} might not exist`);
25
- if (variable.startsWith("-")) return `-${variable}`;
26
- return `var(--${variable})`;
27
- });
28
- return { transformed };
29
- };
30
- const parseVariableTokens = parseValueTokens();
31
- const pxProperties = [
32
- "top",
33
- "right",
34
- "bottom",
35
- "left",
36
- "min-width",
37
- /.*width.*/,
38
- /^[^line]*height.*/,
39
- // Exclude line-height
40
- /padding.*/,
41
- /margin.*/,
42
- /border.*/,
43
- /inset.*/,
44
- /.*radius.*/,
45
- /.*spacing.*/,
46
- /.*gap.*/,
47
- /.*indent.*/,
48
- /.*offset.*/,
49
- /.*size.*/,
50
- /.*thickness.*/,
51
- /.*font-size.*/
52
- ];
53
- const addUnit = (key, value, config) => {
54
- const isPxProperty = pxProperties.some((pxProperty) => {
55
- return typeof pxProperty === "string" ? pxProperty === key : pxProperty.test(key);
56
- });
57
- if (isPxProperty) {
58
- const unit = (config == null ? void 0 : config.defaultUnit) || "px";
59
- const isClamp = unit.startsWith("viewport-clamp:");
60
- if (isClamp) {
61
- try {
62
- const screenSize = unit.split(":")[1];
63
- const viewportClamp = defineViewportClamp({
64
- screenSize: parseInt(screenSize)
65
- });
66
- return viewportClamp(Number(value));
67
- } catch (error) {
68
- console.error(error);
69
- throw new Error(`Invalid viewport-clamp value: ${unit}`);
70
- }
71
- }
72
- return `${value}${unit}`;
73
- }
74
- return `${value}`;
75
- };
76
- const vendorPrefixes = ["Webkit", "Moz", "ms", "O"];
77
- const propertyNameCheck = (key) => {
78
- if (key.startsWith("-")) return key;
79
- if (vendorPrefixes.some((prefix) => key.startsWith(prefix))) return `-${dashCase(key)}`;
80
- return dashCase(key);
81
- };
82
- const parseStyles = async (styles, currentScope = "", config, omitTemplates = false) => {
83
- if (!styles) throw new Error("No styles provided to parseStyles function!");
84
- const cssStyles = /* @__PURE__ */ new Set();
85
- const entries = Object.entries(styles);
86
- const processStyleEntry = async ([key, value]) => {
87
- var _a, _b;
88
- const _key = key.trim().replace(/^\?+/g, "");
89
- const propertyName = propertyNameCheck(_key);
90
- const toString = (val, eol = ";") => `${propertyName}:${val}${eol}`;
91
- const context = { scope: currentScope, config };
92
- if (typeof value === "function") return processStyleEntry([key, value(context)]);
93
- if (value instanceof Promise) return processStyleEntry([key, await value]);
94
- if ((config == null ? void 0 : config.templates) && ((_a = config.templatePaths) == null ? void 0 : _a[_key])) {
95
- try {
96
- const [name, path] = config.templatePaths[_key].split(";;");
97
- const functions = await import(
98
- /* webpackIgnore: true */
99
- /* @vite-ignore */
100
- path
101
- );
102
- const isSaltyConfig = path.includes("salty.config");
103
- const values = isSaltyConfig ? functions[name].templates : functions[name];
104
- const template = isSaltyConfig ? values[_key] : values.params[_key];
105
- if (values && typeof template === "function") {
106
- const templateStyles = await template(value);
107
- const [result] = await parseStyles(templateStyles, "");
108
- return result;
109
- }
110
- } catch (error) {
111
- console.error(`Error loading template "${_key}" from path "${config.templatePaths[_key]}"`, error);
112
- return void 0;
113
- }
114
- }
115
- if ((config == null ? void 0 : config.templates) && config.templates[_key]) {
116
- if (omitTemplates) return void 0;
117
- const path = value.split(".");
118
- const templateStyles = path.reduce((acc, key2) => acc[key2], config.templates[_key]);
119
- if (templateStyles) {
120
- const [result] = await parseStyles(templateStyles, "");
121
- return result;
122
- }
123
- console.warn(`Template "${_key}" with path of "${value}" was not found in config!`);
124
- return void 0;
125
- }
126
- if (typeof value === "object") {
127
- if (!value) return void 0;
128
- if (value.isColor) return toString(value.toString());
129
- if (_key === "defaultVariants") return void 0;
130
- if (_key === "variants") {
131
- const variantEntries = Object.entries(value);
132
- for (const [prop, conditions] of variantEntries) {
133
- if (!conditions) continue;
134
- const entries2 = Object.entries(conditions);
135
- for (const [val, styles2] of entries2) {
136
- if (!styles2) continue;
137
- const scope2 = `${currentScope}.${prop}-${val}`;
138
- const results2 = await parseStyles(styles2, scope2, config);
139
- results2.forEach((res) => cssStyles.add(res));
140
- }
141
- }
142
- return void 0;
143
- }
144
- if (_key === "compoundVariants") {
145
- for (const variant of value) {
146
- const { css: css2, ...rest } = variant;
147
- const scope2 = Object.entries(rest).reduce((acc, [prop, val]) => {
148
- return `${acc}.${prop}-${val}`;
149
- }, currentScope);
150
- const results2 = await parseStyles(css2, scope2, config);
151
- results2.forEach((res) => cssStyles.add(res));
152
- }
153
- return void 0;
154
- }
155
- if (_key === "anyOfVariants") {
156
- for (const variant of value) {
157
- const { css: css2, ...rest } = variant;
158
- const scopes = Object.entries(rest).map(([prop, val]) => {
159
- return `.${prop}-${val}`;
160
- });
161
- const scope2 = `${currentScope}:where(${scopes.join(", ")})`;
162
- console.log(`Union variant scope: ${scope2}`);
163
- const results2 = await parseStyles(css2, scope2, config);
164
- results2.forEach((res) => cssStyles.add(res));
165
- }
166
- return void 0;
167
- }
168
- if (_key.startsWith("@")) {
169
- const mediaQuery = ((_b = config == null ? void 0 : config.mediaQueries) == null ? void 0 : _b[_key]) || _key;
170
- const results2 = await parseAndJoinStyles(value, currentScope, config);
171
- const query = `${mediaQuery} { ${results2} }`;
172
- cssStyles.add(query);
173
- return void 0;
174
- }
175
- const scope = key.includes("&") ? _key.replaceAll("&", currentScope) : _key.startsWith(":") ? `${currentScope}${_key}` : `${currentScope} ${_key}`;
176
- const results = await parseStyles(value, scope, config);
177
- results.forEach((result) => cssStyles.add(result));
178
- return void 0;
179
- }
180
- if (typeof value === "number") {
181
- const withUnit = addUnit(propertyName, value, config);
182
- return toString(withUnit);
183
- }
184
- if (typeof value !== "string") {
185
- if ("toString" in value) value = value.toString();
186
- else throw new Error(`Invalid value type for property ${propertyName}`);
187
- }
188
- return toString(value);
189
- };
190
- const promises = entries.map(processStyleEntry);
191
- const { modifiers } = config || {};
192
- const afterFunctions = [parseValueTokens(), parseValueModifiers(modifiers)];
193
- const resolved = await Promise.all(promises).then((styles2) => {
194
- return Promise.all(
195
- styles2.map((str) => {
196
- return afterFunctions.reduce(async (acc, fn) => {
197
- const current = await acc;
198
- if (!current) return current;
199
- const result = await fn(current);
200
- if (!result) return current;
201
- const { transformed, additionalCss } = result;
202
- let before = "";
203
- if (additionalCss) {
204
- for (const css2 of additionalCss) {
205
- before += await parseAndJoinStyles(css2, "");
206
- }
207
- }
208
- return `${before}${transformed}`;
209
- }, Promise.resolve(str));
210
- })
211
- );
212
- });
213
- const mapped = resolved.filter((value) => value !== void 0).join("\n ");
214
- if (!mapped.trim()) return Array.from(cssStyles);
215
- const css = currentScope ? `${currentScope} {
216
- ${mapped}
217
- }` : mapped;
218
- const alreadyExists = cssStyles.has(css);
219
- if (alreadyExists) return Array.from(cssStyles);
220
- return [css, ...cssStyles];
221
- };
222
- const parseAndJoinStyles = async (styles, currentClass, config, omitTemplates = false) => {
223
- const css = await parseStyles(styles, currentClass, config, omitTemplates);
224
- return css.join("\n");
225
- };
226
- export {
227
- parseStyles as a,
228
- parseVariableTokens as b,
229
- parseValueModifiers as c,
230
- parseValueTokens as d,
231
- parseAndJoinStyles as p
232
- };