@salty-css/core 0.1.0-alpha.0 → 0.1.0-alpha.10

package/bin/package-json.d.ts

@@ -0,0 +1,21 @@
+import { PathLike } from 'fs';
+export declare const defaultPackageJsonPath: string;
+export interface PackageJson {
+    name?: string;
+    version?: string;
+    scripts?: Record<string, string>;
+    dependencies?: Record<string, string>;
+    devDependencies?: Record<string, string>;
+    [key: string]: unknown;
+}
+export declare const readPackageJson: (filePath?: PathLike) => Promise<PackageJson>;
+export declare const updatePackageJson: (content: string | object, filePath?: PathLike) => Promise<void>;
+export declare const readThisPackageJson: () => Promise<PackageJson>;
+export declare const corePackages: {
+    core: (version: string) => string;
+    eslintConfigCore: (version: string) => string;
+};
+export declare const addPrepareScript: (pkg: PackageJson) => {
+    changed: boolean;
+    pkg: PackageJson;
+};

package/bin/saltyrc.d.ts

@@ -0,0 +1,31 @@
+import { RCFile } from '../types/cli-types';
+import { FrameworkAdapter } from './frameworks';
+export declare const SALTYRC_FILENAME = ".saltyrc.json";
+export declare const SALTYRC_SCHEMA = "./node_modules/@salty-css/core/.saltyrc.schema.json";
+export declare const SALTYRC_INFO = "This file is used to define projects and their configurations for Salty CSS cli. Do not delete, modify or add this file to .gitignore.";
+export interface ProjectEntry {
+    dir: string;
+    framework: string;
+    [key: string]: unknown;
+}
+export declare const saltyrcPath: (rootDir?: string) => string;
+export declare const readRc: (rootDir?: string) => Promise<RCFile>;
+export declare const readRawRc: (rootDir?: string) => Promise<string | undefined>;
+export declare const getDefaultProject: (rootDir?: string) => Promise<string | undefined>;
+/**
+ * Pure transform: returns the new saltyrc content for an upsert. Does not touch the filesystem.
+ * - If `existingRaw` is undefined, returns a fresh file with the project as the only entry.
+ * - If the project entry already exists, returns the same content (no-op).
+ * - Otherwise appends the new entry and returns updated content.
+ */
+export declare const upsertProjectInRc: (existingRaw: string | undefined, relativeProjectPath: string, framework: FrameworkAdapter) => {
+    content: string;
+    changed: boolean;
+    created: boolean;
+};
+/**
+ * Writes the saltyrc file, creating or updating the project entry for the given dir.
+ * Returns true when a write occurred.
+ */
+export declare const writeProjectToRc: (cwd: string, relativeProjectPath: string, framework: FrameworkAdapter) => Promise<boolean>;
+export declare const getProjectFramework: (rc: RCFile, relativeProjectPath: string) => string | undefined;

package/bin/templates.d.ts

@@ -0,0 +1,14 @@
+declare const templateLoaders: {
+    readonly 'salty.config.ts': () => Promise<any>;
+    readonly 'saltygen/index.css': () => Promise<any>;
+    readonly 'react/styled-file.ts': () => Promise<any>;
+    readonly 'react/vanilla-file.ts': () => Promise<any>;
+    readonly 'astro/styled-file.ts': () => Promise<any>;
+    readonly 'astro/component.astro': () => Promise<any>;
+};
+export type TemplateKey = keyof typeof templateLoaders;
+export declare const readTemplate: <T extends object>(key: TemplateKey, options?: T) => Promise<{
+    fileName: "salty.config.ts" | "saltygen/index.css" | "react/styled-file.ts" | "react/vanilla-file.ts" | "astro/styled-file.ts" | "astro/component.astro";
+    content: string;
+}>;
+export {};

package/compiler/helpers.cjs

@@ -16,7 +16,8 @@ const resolveExportValue = async (value, maxLevel = 10, _level = 0) => {
   return value;
 };
 const saltyFileExtensions = ["salty", "css", "styles", "styled"];
-const saltyFileRegExp = (additional = []) => new RegExp(`\\.(${[...saltyFileExtensions, ...additional].join("|")})\\.`);
+const escapeRegExp = (str) => str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+const saltyFileRegExp = (additional = []) => new RegExp(`\\.(${[...saltyFileExtensions, ...additional].map(escapeRegExp).join("|")})\\.`);
 const isSaltyFile = (file, additional = []) => saltyFileRegExp(additional).test(file);
 exports.getCorePackageRoot = getCorePackageRoot;
 exports.isSaltyFile = isSaltyFile;

package/compiler/helpers.js

@@ -13,7 +13,8 @@ const resolveExportValue = async (value, maxLevel = 10, _level = 0) => {
   return value;
 };
 const saltyFileExtensions = ["salty", "css", "styles", "styled"];
-const saltyFileRegExp = (additional = []) => new RegExp(`\\.(${[...saltyFileExtensions, ...additional].join("|")})\\.`);
+const escapeRegExp = (str) => str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+const saltyFileRegExp = (additional = []) => new RegExp(`\\.(${[...saltyFileExtensions, ...additional].map(escapeRegExp).join("|")})\\.`);
 const isSaltyFile = (file, additional = []) => saltyFileRegExp(additional).test(file);
 export {
   getCorePackageRoot,

package/compiler/salty-compiler.cjs

@@ -15,8 +15,8 @@ const dashCase = require("../dash-case-DIwKaYgE.cjs");
 const toHash = require("../to-hash-C05Y906F.cjs");
 const parseStyles = require("../parse-styles-CA3TP5n1.cjs");
 const css_merge = require("../css/merge.cjs");
-const compiler_getFiles = require("./get-files.cjs");
 const parsers_index = require("../parsers/index.cjs");
+const compiler_getFiles = require("./get-files.cjs");
 const console = require("console");
 var _documentCurrentScript = typeof document !== "undefined" ? document.currentScript : null;
 function _interopNamespaceDefault(e) {
@@ -546,7 +546,8 @@ ${css}
       let currentFile = fs.readFileSync(sourceFilePath, "utf8");
       currentFile = this.replaceStyledTag(currentFile);
       currentFile = this.addConfigCache(currentFile);
-      const outputFilePath = path.join(outputDirectory, "js", hashedName + ".js");
+      const currentFileHash = toHash.toHash(currentFile);
+      const outputFilePath = path.join(outputDirectory, "js", `${hashedName}-${currentFileHash}.js`);
       const rcProject = await this.getRCProjectConfig(this.projectRootDir);
       const coreConfigPath = path.join(this.projectRootDir, (rcProject == null ? void 0 : rcProject.configDir) || "", "salty.config.ts");
       const externalModules = this.getExternalModules(coreConfigPath);

package/compiler/salty-compiler.js

@@ -13,8 +13,8 @@ import { d as dashCase } from "../dash-case-DblXvymC.js";
 import { t as toHash } from "../to-hash-DAN2LcHK.js";
 import { p as parseAndJoinStyles, b as parseVariableTokens } from "../parse-styles-BTIoYnBr.js";
 import { mergeObjects, mergeFactories } from "../css/merge.js";
-import { getPackageJson } from "./get-files.js";
 import { parseTemplates, getTemplateTypes } from "../parsers/index.js";
+import { getPackageJson } from "./get-files.js";
 import console from "console";
 const logger = createLogger({
   level: "debug",
@@ -526,7 +526,8 @@ ${css}
       let currentFile = readFileSync(sourceFilePath, "utf8");
       currentFile = this.replaceStyledTag(currentFile);
       currentFile = this.addConfigCache(currentFile);
-      const outputFilePath = join(outputDirectory, "js", hashedName + ".js");
+      const currentFileHash = toHash(currentFile);
+      const outputFilePath = join(outputDirectory, "js", `${hashedName}-${currentFileHash}.js`);
       const rcProject = await this.getRCProjectConfig(this.projectRootDir);
       const coreConfigPath = join(this.projectRootDir, (rcProject == null ? void 0 : rcProject.configDir) || "", "salty.config.ts");
       const externalModules = this.getExternalModules(coreConfigPath);

package/css/dynamic-styles.cjs

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const parseStyles = require("../parse-styles-CA3TP5n1.cjs");
+const toHash = require("../to-hash-C05Y906F.cjs");
+const cache_resolveDynamicConfigCache = require("../cache/resolve-dynamic-config-cache.cjs");
+const getDynamicStylesClassName = (styles) => {
+  return toHash.toHash(styles);
+};
+const getDynamicStylesCss = async (styles, scope) => {
+  const config = await cache_resolveDynamicConfigCache.resolveDynamicConfigCache();
+  const parsed = await parseStyles.parseStyles(styles, scope, config);
+  return parsed.join("\n");
+};
+exports.getDynamicStylesClassName = getDynamicStylesClassName;
+exports.getDynamicStylesCss = getDynamicStylesCss;

package/css/dynamic-styles.d.ts

@@ -0,0 +1,10 @@
+import { BaseStyles } from '../types';
+/**
+ * Create a hash of the dynamic styles that then can be used as scope.
+ */
+export declare const getDynamicStylesClassName: (styles: BaseStyles) => string;
+/**
+ * Add any dynamic styles to your app with a custom scope.
+ * Note: this works only with server components.
+ */
+export declare const getDynamicStylesCss: (styles: BaseStyles, scope?: string) => Promise<string>;

package/css/dynamic-styles.js

@@ -0,0 +1,15 @@
+import { a as parseStyles } from "../parse-styles-BTIoYnBr.js";
+import { t as toHash } from "../to-hash-DAN2LcHK.js";
+import { resolveDynamicConfigCache } from "../cache/resolve-dynamic-config-cache.js";
+const getDynamicStylesClassName = (styles) => {
+  return toHash(styles);
+};
+const getDynamicStylesCss = async (styles, scope) => {
+  const config = await resolveDynamicConfigCache();
+  const parsed = await parseStyles(styles, scope, config);
+  return parsed.join("\n");
+};
+export {
+  getDynamicStylesClassName,
+  getDynamicStylesCss
+};

package/css/index.cjs

@@ -4,9 +4,12 @@ const css_keyframes = require("./keyframes.cjs");
 const css_media = require("./media.cjs");
 const css_token = require("./token.cjs");
 const css_merge = require("./merge.cjs");
+const css_dynamicStyles = require("./dynamic-styles.cjs");
 exports.keyframes = css_keyframes.keyframes;
 exports.MediaQueryFactory = css_media.MediaQueryFactory;
 exports.media = css_media.media;
 exports.token = css_token.token;
 exports.mergeFactories = css_merge.mergeFactories;
 exports.mergeObjects = css_merge.mergeObjects;
+exports.getDynamicStylesClassName = css_dynamicStyles.getDynamicStylesClassName;
+exports.getDynamicStylesCss = css_dynamicStyles.getDynamicStylesCss;

package/css/index.d.ts

@@ -2,3 +2,4 @@ export * from './keyframes';
 export * from './media';
 export * from './token';
 export * from './merge';
+export * from './dynamic-styles';

package/css/index.js

@@ -2,8 +2,11 @@ import { keyframes } from "./keyframes.js";
 import { MediaQueryFactory, media } from "./media.js";
 import { token } from "./token.js";
 import { mergeFactories, mergeObjects } from "./merge.js";
+import { getDynamicStylesClassName, getDynamicStylesCss } from "./dynamic-styles.js";
 export {
   MediaQueryFactory,
+  getDynamicStylesClassName,
+  getDynamicStylesCss,
   keyframes,
   media,
   mergeFactories,

package/css/keyframes.cjs

@@ -26,7 +26,7 @@ const keyframes = ({ animationName: _name, params: _params, appendInitialStyles,
     const promises = entries.map(async ([key, value]) => {
       if (!value) return "";
       const styles = await parseStyles.parseAndJoinStyles(value, "");
-      const keyStr = typeof key === "number" ? `${key}%` : key;
+      const keyStr = /^-?\d+$/.test(key) ? `${key}%` : key;
       return `${keyStr}{${styles}}`;
     });
     const resolved = await Promise.all(promises);

package/css/keyframes.js

@@ -24,7 +24,7 @@ const keyframes = ({ animationName: _name, params: _params, appendInitialStyles,
     const promises = entries.map(async ([key, value]) => {
       if (!value) return "";
       const styles = await parseAndJoinStyles(value, "");
-      const keyStr = typeof key === "number" ? `${key}%` : key;
+      const keyStr = /^-?\d+$/.test(key) ? `${key}%` : key;
       return `${keyStr}{${styles}}`;
     });
     const resolved = await Promise.all(promises);

package/css/merge.cjs

@@ -2,7 +2,12 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const mergeObjects = (...styles) => {
   return styles.flat().reduce((acc, style) => {
-    if (style == null ? void 0 : style._current) return { ...acc, ...style._current };
+    if (!style || typeof style !== "object") return acc;
+    if ("_current" in style) {
+      let _style = style._current || {};
+      if (typeof _style !== "object") _style = {};
+      return { ...acc, ..._style };
+    }
     return { ...acc, ...style };
   }, {});
 };

package/css/merge.js

@@ -1,6 +1,11 @@
 const mergeObjects = (...styles) => {
   return styles.flat().reduce((acc, style) => {
-    if (style == null ? void 0 : style._current) return { ...acc, ...style._current };
+    if (!style || typeof style !== "object") return acc;
+    if ("_current" in style) {
+      let _style = style._current || {};
+      if (typeof _style !== "object") _style = {};
+      return { ...acc, ..._style };
+    }
     return { ...acc, ...style };
   }, {});
 };

package/generators/index.cjs

@@ -11,7 +11,7 @@ class StyledGenerator extends classNameGenerator.StylesGenerator {
   get priority() {
     var _a;
     if (this.params.priority) return this.params.priority;
-    if (typeof this.tagName === "function" || typeof this.tagName === "object") {
+    if (this.tagName && (typeof this.tagName === "function" || typeof this.tagName === "object")) {
       const prev = ((_a = this.tagName.generator) == null ? void 0 : _a.priority) || 0;
       return prev + 1;
     }

package/generators/index.js

@@ -10,7 +10,7 @@ class StyledGenerator extends StylesGenerator {
   get priority() {
     var _a;
     if (this.params.priority) return this.params.priority;
-    if (typeof this.tagName === "function" || typeof this.tagName === "object") {
+    if (this.tagName && (typeof this.tagName === "function" || typeof this.tagName === "object")) {
       const prev = ((_a = this.tagName.generator) == null ? void 0 : _a.priority) || 0;
       return prev + 1;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salty-css/core",
-  "version": "0.1.0-alpha.0",
+  "version": "0.1.0-alpha.10",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "typings": "./dist/index.d.ts",
@@ -87,6 +87,10 @@
       "import": "./css/merge.js",
       "require": "./css/merge.cjs"
     },
+    "./css/dynamic-styles": {
+      "import": "./css/dynamic-styles.js",
+      "require": "./css/dynamic-styles.cjs"
+    },
     "./helpers": {
       "import": "./helpers/index.js",
       "require": "./helpers/index.cjs"

package/styled-file-BzmB9_Ez.cjs

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

package/{react-styled-file-U02jek-B.cjs → styled-file-CPd_rTW2.cjs}

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

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

@@ -1,4 +1,4 @@
-const reactStyledFile = `import { styled } from "@salty-css/react/styled";
+const styledFile = `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 {
-  reactStyledFile as default
+  styledFile as default
 };

package/styled-file-DLcgYmGN.js

@@ -0,0 +1,12 @@
+const styledFile = `import { styled } from "@salty-css/astro/styled";
+
+export const <%- name %> = styled('<%- tag %>', {
+  <% if(className) { %>className: '<%- className %>',<% } %>
+  base: {
+    // Add your styles here
+  }
+})
+`;
+export {
+  styledFile as default
+};

package/{react-vanilla-file-D9px70iK.js → vanilla-file-1kOqbCIM.js}

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

package/{react-vanilla-file-Bj6XC8GS.cjs → vanilla-file-r0fp2q_m.cjs}

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