@salty-css/core 0.0.1-alpha.31 → 0.0.1-alpha.310

package/parsers/index.js

@@ -0,0 +1,58 @@
+import { p as parseAndJoinStyles } from "../parse-styles-CS97_e4S.js";
+import { c, b, d, a } from "../parse-styles-CS97_e4S.js";
+import { d as dashCase, t as toHash } from "../to-hash-DSoCPs8D.js";
+const parseTemplates = async (obj, path = []) => {
+  if (!obj) return "";
+  const classes = [];
+  const levelStyles = {};
+  for (const [key, value] of Object.entries(obj)) {
+    if (typeof value === "function") ;
+    else if (value && typeof value === "object") {
+      const _key = key.trim();
+      const result = await parseTemplates(value, [...path, _key]);
+      classes.push(result);
+    } else {
+      levelStyles[key] = value;
+    }
+  }
+  if (Object.keys(levelStyles).length) {
+    const className = path.map(dashCase).join("-");
+    const hashClass = "t_" + toHash(className, 4);
+    const result = await parseAndJoinStyles(levelStyles, `.${className}, .${hashClass}`);
+    classes.push(result);
+  }
+  return classes.join("\n");
+};
+const getTemplateKeys = (templates) => {
+  return Object.keys(templates);
+};
+const getTemplateTypes = (templates) => {
+  if (!templates) return {};
+  return Object.entries(templates).reduce((acc, [key, value]) => {
+    if (typeof value === "function") {
+      acc[key] = "any";
+    } else if (typeof value === "object")
+      acc[key] = getTemplateTokens(value).map((val) => `"${val}"`).join(" | ");
+    return acc;
+  }, {});
+};
+const getTemplateTokens = (templates, parent = "", templateTokens = /* @__PURE__ */ new Set()) => {
+  if (!templates) return [];
+  Object.entries(templates).forEach(([key, value]) => {
+    const keyValue = parent ? `${parent}.${key}` : key;
+    if (typeof value === "object") return getTemplateTokens(value, keyValue, templateTokens);
+    return templateTokens.add(parent);
+  });
+  return [...templateTokens];
+};
+export {
+  getTemplateKeys,
+  getTemplateTokens,
+  getTemplateTypes,
+  parseAndJoinStyles,
+  c as parseStyles,
+  parseTemplates,
+  b as parseValueModifiers,
+  d as parseValueTokens,
+  a as parseVariableTokens
+};

package/parsers/parse-modifiers.d.ts

@@ -0,0 +1,3 @@
+import { CssModifiers } from '../types/config-types';
+import { StyleValueModifierFunction } from './parser-types';
+export declare const parseValueModifiers: (modifiers?: CssModifiers) => StyleValueModifierFunction;

package/parsers/parse-styles.d.ts

@@ -0,0 +1,13 @@
+import { CachedConfig, SaltyConfig } from '../types/config-types';
+/**
+ * Transform styles object to css string with or without scope
+ * @param styles CSS as JS object
+ * @param currentScope Scope of the styles, for class names full path with dot separator is required
+ * @param config Salty config object to allow use of templates and media queries etc.
+ * @param omitTemplates If true, static templates will be ignored
+ * @returns CSS strings that can be injected to the .css file or used inside of styles tag
+ * - First item is the main class with all the styles
+ * - Rest of the items are child selectors or media queries etc.
+ */
+export declare const parseStyles: <T extends object>(styles?: T, currentScope?: string, config?: (SaltyConfig & CachedConfig) | CachedConfig | undefined, omitTemplates?: boolean) => Promise<string[]>;
+export declare const parseAndJoinStyles: <T extends object>(styles: T, currentClass: string, config?: (SaltyConfig & CachedConfig) | undefined, omitTemplates?: boolean) => Promise<string>;

package/parsers/parse-templates.d.ts

@@ -0,0 +1,4 @@
+export declare const parseTemplates: <T extends object>(obj: T, path?: PropertyKey[]) => Promise<string>;
+export declare const getTemplateKeys: <T extends object>(templates: T) => string[];
+export declare const getTemplateTypes: <T extends object>(templates: T) => Record<string, string>;
+export declare const getTemplateTokens: <T extends object>(templates: T, parent?: string, templateTokens?: Set<string>) => string[];

package/parsers/parse-tokens.d.ts

@@ -0,0 +1,3 @@
+import { SyncronousStyleValueModifierFunction } from './parser-types';
+export declare const parseValueTokens: (tokenNames?: string[]) => SyncronousStyleValueModifierFunction;
+export declare const parseVariableTokens: SyncronousStyleValueModifierFunction;

package/parsers/parser-types.d.ts

@@ -0,0 +1,8 @@
+export interface ValueParserReturnValue {
+    transformed: string;
+    additionalCss?: object[];
+}
+type StyleValueModifierFunctionReturnValue = undefined | ValueParserReturnValue;
+export type SyncronousStyleValueModifierFunction = (current: unknown) => StyleValueModifierFunctionReturnValue;
+export type StyleValueModifierFunction = (current: string) => Promise<StyleValueModifierFunctionReturnValue> | StyleValueModifierFunctionReturnValue;
+export {};

package/parsers/property-name-check.d.ts

@@ -0,0 +1 @@
+export declare const propertyNameCheck: (key: string) => string;

package/parsers/unit-check.d.ts

@@ -0,0 +1,7 @@
+import { SaltyConfig } from '../config';
+/**
+ * Add unit to a number value based on property name
+ * @param key - The property name
+ * @param value - The value to add unit to
+ */
+export declare const addUnit: (key: string, value: string | number, config?: SaltyConfig) => string;

package/pascal-case-By_l58S-.cjs

@@ -0,0 +1,7 @@
+"use strict";
+function pascalCase(str) {
+  if (!str) return "";
+  if (typeof str !== "string") return pascalCase(String(str));
+  return str.replace(/\s/g, "-").replace(/[-_]([a-z0-9])/g, (g) => g[1].toUpperCase()).replace(/^[a-z]/, (g) => g.toUpperCase());
+}
+exports.pascalCase = pascalCase;

package/pascal-case-F3Usi5Wf.js

@@ -0,0 +1,8 @@
+function pascalCase(str) {
+  if (!str) return "";
+  if (typeof str !== "string") return pascalCase(String(str));
+  return str.replace(/\s/g, "-").replace(/[-_]([a-z0-9])/g, (g) => g[1].toUpperCase()).replace(/^[a-z]/, (g) => g.toUpperCase());
+}
+export {
+  pascalCase as p
+};

package/{react-styled-file-CGVf5n1B.js → react-styled-file-B99mwk0w.js}

@@ -1,4 +1,4 @@
-const e = `import { styled } from "@salty-css/react/styled";
+const reactStyledFile = `import { styled } from "@salty-css/react/styled";
 
 export const <%- name %> = styled('<%- tag %>', {
   <% if(className) { %>className: '<%- className %>',<% } %>
@@ -7,5 +7,5 @@ export const <%- name %> = styled('<%- tag %>', {
   }
 })`;
 export {
-  e as default
+  reactStyledFile as default
 };

package/react-styled-file-U02jek-B.cjs

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const reactStyledFile = `import { styled } from "@salty-css/react/styled";
+
+export const <%- name %> = styled('<%- tag %>', {
+  <% if(className) { %>className: '<%- className %>',<% } %>
+  base: {
+    // Add your styles here
+  }
+})`;
+exports.default = reactStyledFile;

package/react-vanilla-file-Bj6XC8GS.cjs

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const reactVanillaFile = `import { <%- styledComponentName %> } from "./<%- fileName %>.css";
+
+interface <%- componentName %>Props {
+  text?: string;
+}
+
+export const <%- componentName %> = ({ text = 'Lorem ipsum' }: <%- componentName %>Props) => {
+  return (
+    <<%- styledComponentName %>>
+      {text}
+    </<%- styledComponentName %>>
+  );
+};
+
+export default <%- componentName %>;`;
+exports.default = reactVanillaFile;

package/react-vanilla-file-D9px70iK.js

@@ -0,0 +1,18 @@
+const reactVanillaFile = `import { <%- styledComponentName %> } from "./<%- fileName %>.css";
+
+interface <%- componentName %>Props {
+  text?: string;
+}
+
+export const <%- componentName %> = ({ text = 'Lorem ipsum' }: <%- componentName %>Props) => {
+  return (
+    <<%- styledComponentName %>>
+      {text}
+    </<%- styledComponentName %>>
+  );
+};
+
+export default <%- componentName %>;`;
+export {
+  reactVanillaFile as default
+};

package/salty-reset-D1VR51zL.js

@@ -0,0 +1,83 @@
+import { createLogger, transports, format } from "winston";
+import { getPackageJson } from "./compiler/get-files.js";
+const logger = createLogger({
+  level: "debug",
+  format: format.combine(format.colorize(), format.cli()),
+  transports: [new transports.Console({})]
+});
+const logError = (message) => {
+  logger.error(message);
+};
+const readPackageJsonModule = async (dirname) => {
+  const packageJsonContent = await getPackageJson(dirname);
+  if (!packageJsonContent) return void 0;
+  return packageJsonContent.type;
+};
+let cachedModuleType;
+const detectCurrentModuleType = async (dirname) => {
+  if (cachedModuleType) return cachedModuleType;
+  const packageJsonModule = await readPackageJsonModule(dirname);
+  if (packageJsonModule === "module") cachedModuleType = "esm";
+  else if (packageJsonModule === "commonjs") cachedModuleType = "cjs";
+  else if (import.meta.url.endsWith(".cjs")) cachedModuleType = "cjs";
+  return cachedModuleType || "esm";
+};
+function dotCase(str) {
+  if (!str) return "";
+  if (typeof str !== "string") return dotCase(String(str));
+  return str.replace(/[^\d\w]/g, ".");
+}
+const saltyReset = {
+  /** Set box model to border-box */
+  "*, *::before, *::after": {
+    boxSizing: "border-box"
+  },
+  /** Remove default margin and padding */
+  "*": {
+    margin: 0
+  },
+  /** Remove adjust font properties */
+  html: {
+    lineHeight: 1.15,
+    textSizeAdjust: "100%",
+    WebkitFontSmoothing: "antialiased"
+  },
+  /** Make media elements responsive */
+  "img, picture, video, canvas, svg": {
+    display: "block",
+    maxWidth: "100%"
+  },
+  /** Avoid overflow of text */
+  "p, h1, h2, h3, h4, h5, h6": {
+    overflowWrap: "break-word"
+  },
+  /** Improve text wrapping */
+  p: {
+    textWrap: "pretty"
+  },
+  "h1, h2, h3, h4, h5, h6": {
+    textWrap: "balance"
+  },
+  /** Improve link color */
+  a: {
+    color: "currentColor"
+  },
+  /** Improve button line height */
+  button: {
+    lineHeight: "1em",
+    color: "currentColor"
+  },
+  /** Improve form elements */
+  "input, optgroup, select, textarea": {
+    fontFamily: "inherit",
+    fontSize: "100%",
+    lineHeight: "1.15em"
+  }
+};
+export {
+  dotCase as a,
+  logError as b,
+  detectCurrentModuleType as d,
+  logger as l,
+  saltyReset as s
+};

package/salty-reset-zWMaTt2Q.cjs

@@ -0,0 +1,83 @@
+"use strict";
+const winston = require("winston");
+const compiler_getFiles = require("./compiler/get-files.cjs");
+var _documentCurrentScript = typeof document !== "undefined" ? document.currentScript : null;
+const logger = winston.createLogger({
+  level: "debug",
+  format: winston.format.combine(winston.format.colorize(), winston.format.cli()),
+  transports: [new winston.transports.Console({})]
+});
+const logError = (message) => {
+  logger.error(message);
+};
+const readPackageJsonModule = async (dirname) => {
+  const packageJsonContent = await compiler_getFiles.getPackageJson(dirname);
+  if (!packageJsonContent) return void 0;
+  return packageJsonContent.type;
+};
+let cachedModuleType;
+const detectCurrentModuleType = async (dirname) => {
+  if (cachedModuleType) return cachedModuleType;
+  const packageJsonModule = await readPackageJsonModule(dirname);
+  if (packageJsonModule === "module") cachedModuleType = "esm";
+  else if (packageJsonModule === "commonjs") cachedModuleType = "cjs";
+  else if ((typeof document === "undefined" ? require("url").pathToFileURL(__filename).href : _documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === "SCRIPT" && _documentCurrentScript.src || new URL("salty-reset-zWMaTt2Q.cjs", document.baseURI).href).endsWith(".cjs")) cachedModuleType = "cjs";
+  return cachedModuleType || "esm";
+};
+function dotCase(str) {
+  if (!str) return "";
+  if (typeof str !== "string") return dotCase(String(str));
+  return str.replace(/[^\d\w]/g, ".");
+}
+const saltyReset = {
+  /** Set box model to border-box */
+  "*, *::before, *::after": {
+    boxSizing: "border-box"
+  },
+  /** Remove default margin and padding */
+  "*": {
+    margin: 0
+  },
+  /** Remove adjust font properties */
+  html: {
+    lineHeight: 1.15,
+    textSizeAdjust: "100%",
+    WebkitFontSmoothing: "antialiased"
+  },
+  /** Make media elements responsive */
+  "img, picture, video, canvas, svg": {
+    display: "block",
+    maxWidth: "100%"
+  },
+  /** Avoid overflow of text */
+  "p, h1, h2, h3, h4, h5, h6": {
+    overflowWrap: "break-word"
+  },
+  /** Improve text wrapping */
+  p: {
+    textWrap: "pretty"
+  },
+  "h1, h2, h3, h4, h5, h6": {
+    textWrap: "balance"
+  },
+  /** Improve link color */
+  a: {
+    color: "currentColor"
+  },
+  /** Improve button line height */
+  button: {
+    lineHeight: "1em",
+    color: "currentColor"
+  },
+  /** Improve form elements */
+  "input, optgroup, select, textarea": {
+    fontFamily: "inherit",
+    fontSize: "100%",
+    lineHeight: "1.15em"
+  }
+};
+exports.detectCurrentModuleType = detectCurrentModuleType;
+exports.dotCase = dotCase;
+exports.logError = logError;
+exports.logger = logger;
+exports.saltyReset = saltyReset;

package/salty.config-DjosWdPw.js

@@ -0,0 +1,4 @@
+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";
+export {
+  salty_config as default
+};

package/salty.config-cqavVm2t.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+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";
+exports.default = salty_config;

package/server/index.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const shouldRestart = require("../should-restart-DoaGoD5T.cjs");
+exports.checkShouldRestart = shouldRestart.checkShouldRestart;

package/server/index.d.ts

@@ -0,0 +1 @@
+export * from './should-restart';

package/server/index.js

@@ -0,0 +1,4 @@
+import { c } from "../should-restart-5jI-bzz0.js";
+export {
+  c as checkShouldRestart
+};

package/server/should-restart.d.ts

@@ -0,0 +1 @@
+export declare const checkShouldRestart: (filename: string) => Promise<boolean>;

package/should-restart-5jI-bzz0.js

@@ -0,0 +1,18 @@
+import { readFile } from "fs/promises";
+import { isSaltyFile } from "./compiler/index.js";
+const checkShouldRestart = async (filename) => {
+  if (!filename) return false;
+  if (filename.includes("node_modules")) return false;
+  if (filename.includes("saltygen")) return false;
+  const isConfig = filename.includes("salty.config");
+  if (isConfig) return true;
+  const isSalty = isSaltyFile(filename);
+  if (!isSalty) return false;
+  const contents = await readFile(filename, "utf-8");
+  if (/.+define[A-Z]\w+/.test(contents)) return true;
+  if (/.+keyframes\(.+/.test(contents)) return true;
+  return false;
+};
+export {
+  checkShouldRestart as c
+};

package/should-restart-DoaGoD5T.cjs

@@ -0,0 +1,17 @@
+"use strict";
+const promises = require("fs/promises");
+const compiler_index = require("./compiler/index.cjs");
+const checkShouldRestart = async (filename) => {
+  if (!filename) return false;
+  if (filename.includes("node_modules")) return false;
+  if (filename.includes("saltygen")) return false;
+  const isConfig = filename.includes("salty.config");
+  if (isConfig) return true;
+  const isSalty = compiler_index.isSaltyFile(filename);
+  if (!isSalty) return false;
+  const contents = await promises.readFile(filename, "utf-8");
+  if (/.+define[A-Z]\w+/.test(contents)) return true;
+  if (/.+keyframes\(.+/.test(contents)) return true;
+  return false;
+};
+exports.checkShouldRestart = checkShouldRestart;

package/templates/salty-reset.d.ts

@@ -0,0 +1,2 @@
+import { GlobalStyles } from '../types/config-types';
+export declare const saltyReset: GlobalStyles;

package/to-hash-DSoCPs8D.js

@@ -0,0 +1,33 @@
+function dashCase(str) {
+  if (!str) return "";
+  if (typeof str !== "string") return dashCase(String(str));
+  return str.replace(/[\s.]/g, "-").replace(/[A-Z](?:(?=[^A-Z])|[A-Z]*(?=[A-Z][^A-Z]|$))/g, (s, i) => {
+    return (i > 0 ? "-" : "") + s.toLowerCase();
+  });
+}
+const toAlphabeticChar = (code) => String.fromCharCode(code + (code > 25 ? 39 : 97));
+const toAlphabeticName = (code, length) => {
+  let name = "";
+  let x;
+  for (x = Math.abs(code); x > 52; x = x / 52 | 0) name = toAlphabeticChar(x % 52) + name;
+  name = toAlphabeticChar(x % 52) + name;
+  if (name.length < length) {
+    name = name.padStart(length, "a");
+  } else if (name.length > length) {
+    name = name.slice(-length);
+  }
+  return name;
+};
+const toPhash = (h, x) => {
+  let i = x.length;
+  while (i) h = h * 33 ^ x.charCodeAt(--i);
+  return h;
+};
+const toHash = (value, length = 5) => {
+  const numericHash = toPhash(5381, JSON.stringify(value)) >>> 0;
+  return toAlphabeticName(numericHash, length);
+};
+export {
+  dashCase as d,
+  toHash as t
+};

package/to-hash-DT2ImSPA.cjs

@@ -0,0 +1,32 @@
+"use strict";
+function dashCase(str) {
+  if (!str) return "";
+  if (typeof str !== "string") return dashCase(String(str));
+  return str.replace(/[\s.]/g, "-").replace(/[A-Z](?:(?=[^A-Z])|[A-Z]*(?=[A-Z][^A-Z]|$))/g, (s, i) => {
+    return (i > 0 ? "-" : "") + s.toLowerCase();
+  });
+}
+const toAlphabeticChar = (code) => String.fromCharCode(code + (code > 25 ? 39 : 97));
+const toAlphabeticName = (code, length) => {
+  let name = "";
+  let x;
+  for (x = Math.abs(code); x > 52; x = x / 52 | 0) name = toAlphabeticChar(x % 52) + name;
+  name = toAlphabeticChar(x % 52) + name;
+  if (name.length < length) {
+    name = name.padStart(length, "a");
+  } else if (name.length > length) {
+    name = name.slice(-length);
+  }
+  return name;
+};
+const toPhash = (h, x) => {
+  let i = x.length;
+  while (i) h = h * 33 ^ x.charCodeAt(--i);
+  return h;
+};
+const toHash = (value, length = 5) => {
+  const numericHash = toPhash(5381, JSON.stringify(value)) >>> 0;
+  return toAlphabeticName(numericHash, length);
+};
+exports.dashCase = dashCase;
+exports.toHash = toHash;

package/types/cli-types.d.ts

@@ -0,0 +1,10 @@
+export interface RCFile {
+    defaultProject?: string;
+    projects?: {
+        dir?: string;
+        framework?: string;
+        components?: string;
+        configDir?: string;
+        saltygenDir?: string;
+    }[];
+}

package/types/config-types.d.ts

@@ -0,0 +1,85 @@
+import { BaseStyles, CssStyles, MediaQueryStyles } from '../types';
+import { OrString } from '../types/util-types';
+export type GlobalStyles = Record<string, BaseStyles>;
+export type CssVariableTokensObject = Record<string, unknown>;
+export interface CssResponsiveVariables {
+    [key: string]: CssVariableTokensObject;
+}
+export interface CssConditionalVariables {
+    [key: PropertyKey]: {
+        [key: PropertyKey]: CssVariableTokensObject;
+    };
+}
+export interface SaltyVariables {
+    responsive?: CssResponsiveVariables;
+    conditional?: CssConditionalVariables;
+    [key: string]: undefined | string | number | CssVariableTokensObject;
+}
+type CssTemplate = MediaQueryStyles | CssStyles | {
+    [key: PropertyKey]: CssTemplate;
+};
+export interface CssTemplateObject {
+    [key: PropertyKey]: CssTemplate;
+}
+export interface CssTemplateFunction {
+    (value: any): CssTemplate;
+}
+export interface CssTemplates {
+    [key: PropertyKey]: CssTemplateObject | CssTemplateFunction;
+}
+export interface CssModifier {
+    pattern: RegExp;
+    transform: (regexMatch: string) => {
+        css?: CssStyles;
+        value: string;
+    };
+}
+export type CssModifiers = Record<string, CssModifier>;
+export interface SaltyConfig {
+    /**
+     * The import strategy to use when importing css files.
+     * - `root` will import the css file from the root of the project.
+     * - `component` will import the css file from the component's directory.
+     */
+    importStrategy?: 'root' | 'component';
+    /**
+     * Base level variables that can be used in all styles as they are applied globally to :root.
+     @param responsive Variables that are defined for different media queries.
+     @param conditional Variables that are defined for different parent selectors (classes or data attributes).
+     */
+    variables?: SaltyVariables;
+    /**
+     * The global styles that are imported in the root of the project.
+     */
+    reset?: 'default' | 'none' | GlobalStyles;
+    /**
+     * The global styles that are imported in the root of the project.
+     */
+    global?: GlobalStyles;
+    /**
+     * The templates that can be used in styles to create reusable css.
+     */
+    templates?: CssTemplates;
+    /**
+     * The modifiers that can transform css values.
+     */
+    modifiers?: CssModifiers;
+    /**
+     * 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.
+     */
+    externalModules?: ('react' | 'react-dom' | OrString)[];
+    /**
+     * default unit for px based properties when providing a number value. Default is 'px'.
+     */
+    defaultUnit?: 'px' | 'rem' | 'em' | 'vh' | 'vw' | 'vmin' | 'vmax' | 'cm' | 'mm' | 'in' | 'pt' | 'pc' | 'ch' | 'ex' | 'fr' | 'percent' | `viewport-clamp:${number}` | OrString;
+}
+export interface CachedConfig {
+    templates: CssTemplates;
+    staticVariables: Record<string, any>;
+    mediaQueries: Record<string, string>;
+    modifiers?: CssModifiers;
+    templatePaths: {
+        [key: string]: string;
+    };
+}
+export {};