@salty-css/core 0.1.0-alpha.34 → 0.1.0-alpha.36

package/README.md

@@ -617,6 +617,8 @@ And note: steps 2 & 3 are just to show how get new components up and running, st
 - **Next.js 15:** In `next.config.ts` add import for salty plugin `import { withSaltyCss } from '@salty-css/next';` and then add `withSaltyCss` to wrap your nextConfig export like so `export default withSaltyCss(nextConfig);`
 - **Next.js 14 and older:** In `next.config.js` add import for salty plugin `const { withSaltyCss } = require('@salty-css/next');` and then add `withSaltyCss` to wrap your nextConfig export like so `module.exports = withSaltyCss(nextConfig);`
 
+Both Webpack and Turbopack are supported. `withSaltyCss` auto-detects which bundler Next.js is using (`next dev --turbopack` sets `process.env.TURBOPACK=1`), so no extra config is required. To force a specific bundler, pass `{ bundler: 'webpack' | 'turbopack' }` as the second argument.
+
 4. Make sure that `salty.config.ts` and `next.config.ts` are in the same folder!
 5. Build `saltygen` directory by running your app once or with cli `npx salty-css build [directory]`
 6. Import global styles from `saltygen/index.css` to some global css file with `@import 'insert_path_to_index_css';`.

package/{class-name-generator-B-D7IL8N.js → class-name-generator-CUEoPowv.js}

@@ -1,7 +1,7 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { p as parseAndJoinStyles, b as parseTemplateCallSite } from "./parse-styles-w1u1BniY.js";
+import { p as parseAndJoinStyles, b as parseTemplateCallSite } from "./parse-styles-BgVqQAni.js";
 import { t as toHash, d as dashCase } from "./to-hash-DSoCPs8D.js";
 class StylesGenerator {
   constructor(params) {

package/{class-name-generator-BRDOJe3J.cjs → class-name-generator-MtPkBfM_.cjs}

@@ -2,7 +2,7 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-const parseStyles = require("./parse-styles-BWm11azy.cjs");
+const parseStyles = require("./parse-styles-BbI-2wdn.cjs");
 const toHash = require("./to-hash-DT2ImSPA.cjs");
 class StylesGenerator {
   constructor(params) {

package/compiler/helpers.cjs

@@ -16,11 +16,19 @@ const resolveExportValue = async (value, maxLevel = 10, _level = 0) => {
   return value;
 };
 const saltyFileExtensions = ["salty", "css", "styles", "styled"];
+const tsFileExtensions = ["ts", "tsx", "js", "jsx", "mjs", "cjs"];
 const escapeRegExp = (str) => str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-const saltyFileRegExp = (additional = []) => new RegExp(`\\.(${[...saltyFileExtensions, ...additional].map(escapeRegExp).join("|")})\\.`);
-const isSaltyFile = (file, additional = []) => saltyFileRegExp(additional).test(file);
+const saltyFileRegExp = (additional = [], testExtension = true) => {
+  const extensions = [...saltyFileExtensions, ...additional].map(escapeRegExp).join("|");
+  if (testExtension) {
+    return new RegExp(`\\.(${extensions})\\.(${tsFileExtensions.map(escapeRegExp).join("|")})$`);
+  }
+  return new RegExp(`\\.(${extensions})\\.`);
+};
+const isSaltyFile = (file, additional = [], testExtension = true) => saltyFileRegExp(additional, testExtension).test(file);
 exports.getCorePackageRoot = getCorePackageRoot;
 exports.isSaltyFile = isSaltyFile;
 exports.resolveExportValue = resolveExportValue;
 exports.saltyFileExtensions = saltyFileExtensions;
 exports.saltyFileRegExp = saltyFileRegExp;
+exports.tsFileExtensions = tsFileExtensions;

package/compiler/helpers.d.ts

@@ -1,5 +1,6 @@
 export declare const getCorePackageRoot: () => string;
 export declare const resolveExportValue: <T>(value: unknown, maxLevel?: number, _level?: number) => Promise<T>;
 export declare const saltyFileExtensions: string[];
-export declare const saltyFileRegExp: (additional?: string[]) => RegExp;
-export declare const isSaltyFile: (file: string, additional?: string[]) => boolean;
+export declare const tsFileExtensions: string[];
+export declare const saltyFileRegExp: (additional?: string[], testExtension?: boolean) => RegExp;
+export declare const isSaltyFile: (file: string, additional?: string[], testExtension?: boolean) => boolean;

package/compiler/helpers.js

@@ -13,13 +13,21 @@ const resolveExportValue = async (value, maxLevel = 10, _level = 0) => {
   return value;
 };
 const saltyFileExtensions = ["salty", "css", "styles", "styled"];
+const tsFileExtensions = ["ts", "tsx", "js", "jsx", "mjs", "cjs"];
 const escapeRegExp = (str) => str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-const saltyFileRegExp = (additional = []) => new RegExp(`\\.(${[...saltyFileExtensions, ...additional].map(escapeRegExp).join("|")})\\.`);
-const isSaltyFile = (file, additional = []) => saltyFileRegExp(additional).test(file);
+const saltyFileRegExp = (additional = [], testExtension = true) => {
+  const extensions = [...saltyFileExtensions, ...additional].map(escapeRegExp).join("|");
+  if (testExtension) {
+    return new RegExp(`\\.(${extensions})\\.(${tsFileExtensions.map(escapeRegExp).join("|")})$`);
+  }
+  return new RegExp(`\\.(${extensions})\\.`);
+};
+const isSaltyFile = (file, additional = [], testExtension = true) => saltyFileRegExp(additional, testExtension).test(file);
 export {
   getCorePackageRoot,
   isSaltyFile,
   resolveExportValue,
   saltyFileExtensions,
-  saltyFileRegExp
+  saltyFileRegExp,
+  tsFileExtensions
 };

package/compiler/salty-compiler.cjs

@@ -13,7 +13,7 @@ const compiler_helpers = require("./helpers.cjs");
 const toHash = require("../to-hash-DT2ImSPA.cjs");
 const defineTemplates = require("../define-templates-Deq1aCbN.cjs");
 const module$1 = require("module");
-const parseStyles = require("../parse-styles-BWm11azy.cjs");
+const parseStyles = require("../parse-styles-BbI-2wdn.cjs");
 const css_merge = require("../css/merge.cjs");
 const compiler_getFiles = require("./get-files.cjs");
 const parsers_index = require("../parsers/index.cjs");

package/compiler/salty-compiler.js

@@ -11,7 +11,7 @@ import { isSaltyFile, resolveExportValue, saltyFileExtensions } from "./helpers.
 import { t as toHash, d as dashCase } from "../to-hash-DSoCPs8D.js";
 import { d as defineTemplates } from "../define-templates-CVhhgPnd.js";
 import { createRequire } from "module";
-import { p as parseAndJoinStyles, c as parseVariableTokens } from "../parse-styles-w1u1BniY.js";
+import { p as parseAndJoinStyles, c as parseVariableTokens } from "../parse-styles-BgVqQAni.js";
 import { mergeObjects, mergeFactories } from "../css/merge.js";
 import { getPackageJson } from "./get-files.js";
 import { parseTemplates, getTemplateTypes, getTemplateVariantMaps } from "../parsers/index.js";

package/css/keyframes.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const parseStyles = require("../parse-styles-BWm11azy.cjs");
+const parseStyles = require("../parse-styles-BbI-2wdn.cjs");
 const toHash = require("../to-hash-DT2ImSPA.cjs");
 const keyframes = ({ animationName: _name, params: _params, appendInitialStyles, ...keyframes2 }) => {
   const modifyKeyframes = async (params = {}) => {

package/css/keyframes.js

@@ -1,4 +1,4 @@
-import { p as parseAndJoinStyles } from "../parse-styles-w1u1BniY.js";
+import { p as parseAndJoinStyles } from "../parse-styles-BgVqQAni.js";
 import { t as toHash } from "../to-hash-DSoCPs8D.js";
 const keyframes = ({ animationName: _name, params: _params, appendInitialStyles, ...keyframes2 }) => {
   const modifyKeyframes = async (params = {}) => {

package/generators/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const classNameGenerator = require("../class-name-generator-BRDOJe3J.cjs");
+const classNameGenerator = require("../class-name-generator-MtPkBfM_.cjs");
 const toHash = require("../to-hash-DT2ImSPA.cjs");
 class StyledGenerator extends classNameGenerator.StylesGenerator {
   constructor(tagName, _params) {

package/generators/index.js

@@ -1,5 +1,5 @@
-import { S as StylesGenerator } from "../class-name-generator-B-D7IL8N.js";
-import { C } from "../class-name-generator-B-D7IL8N.js";
+import { S as StylesGenerator } from "../class-name-generator-CUEoPowv.js";
+import { C } from "../class-name-generator-CUEoPowv.js";
 import { d as dashCase } from "../to-hash-DSoCPs8D.js";
 class StyledGenerator extends StylesGenerator {
   constructor(tagName, _params) {

package/instances/classname-instance.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const classNameGenerator = require("../class-name-generator-BRDOJe3J.cjs");
+const classNameGenerator = require("../class-name-generator-MtPkBfM_.cjs");
 const classNameInstance = (params) => {
   const generator = new classNameGenerator.ClassNameGenerator(params);
   const createClass = (classNameStr) => {

package/instances/classname-instance.js

@@ -1,4 +1,4 @@
-import { C as ClassNameGenerator } from "../class-name-generator-B-D7IL8N.js";
+import { C as ClassNameGenerator } from "../class-name-generator-CUEoPowv.js";
 const classNameInstance = (params) => {
   const generator = new ClassNameGenerator(params);
   const createClass = (classNameStr) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salty-css/core",
-  "version": "0.1.0-alpha.34",
+  "version": "0.1.0-alpha.36",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "typings": "./dist/index.d.ts",

package/{parse-styles-BWm11azy.cjs → parse-styles-BbI-2wdn.cjs}

@@ -94,6 +94,7 @@ const reportParserIssue = (strict, message) => {
 const pseudoTypoRegex = /^&(hover|focus(-(visible|within))?|active|visited|checked|disabled|enabled|empty|target|first-child|last-child|first-of-type|last-of-type|placeholder|placeholder-shown|root)\b/;
 const templateLiteralLeftoverRegex = /\$\{[^}]+\}/;
 const bareAtRuleRegex = /^@(media|supports|container|layer)\s*$/;
+const keyframesAtRuleRegex = /^@(?:-(?:webkit|moz|o|ms)-)?keyframes\b/;
 const isRichTemplateNode = (node) => {
   if (!node || typeof node !== "object") return false;
   if (Array.isArray(node)) return false;
@@ -375,8 +376,9 @@ const parseStyles = async (styles, currentScope = "", config, omitTemplates = fa
       }
       if (_key.startsWith("@")) {
         if (bareAtRuleRegex.test(_key)) reportParserIssue(strict, `At-rule "${_key}" is missing its condition (e.g. "@media (min-width: 600px)").`);
+        const innerScope = keyframesAtRuleRegex.test(_key) ? "" : currentScope;
         const mediaQuery = ((_b = config == null ? void 0 : config.mediaQueries) == null ? void 0 : _b[_key]) || _key;
-        const results2 = await parseAndJoinStyles(value, currentScope, config);
+        const results2 = await parseAndJoinStyles(value, innerScope, config);
         const query = `${mediaQuery} { ${results2} }`;
         cssStyles.add(query);
         return void 0;

package/{parse-styles-w1u1BniY.js → parse-styles-BgVqQAni.js}

@@ -93,6 +93,7 @@ const reportParserIssue = (strict, message) => {
 const pseudoTypoRegex = /^&(hover|focus(-(visible|within))?|active|visited|checked|disabled|enabled|empty|target|first-child|last-child|first-of-type|last-of-type|placeholder|placeholder-shown|root)\b/;
 const templateLiteralLeftoverRegex = /\$\{[^}]+\}/;
 const bareAtRuleRegex = /^@(media|supports|container|layer)\s*$/;
+const keyframesAtRuleRegex = /^@(?:-(?:webkit|moz|o|ms)-)?keyframes\b/;
 const isRichTemplateNode = (node) => {
   if (!node || typeof node !== "object") return false;
   if (Array.isArray(node)) return false;
@@ -374,8 +375,9 @@ const parseStyles = async (styles, currentScope = "", config, omitTemplates = fa
       }
       if (_key.startsWith("@")) {
         if (bareAtRuleRegex.test(_key)) reportParserIssue(strict, `At-rule "${_key}" is missing its condition (e.g. "@media (min-width: 600px)").`);
+        const innerScope = keyframesAtRuleRegex.test(_key) ? "" : currentScope;
         const mediaQuery = ((_b = config == null ? void 0 : config.mediaQueries) == null ? void 0 : _b[_key]) || _key;
-        const results2 = await parseAndJoinStyles(value, currentScope, config);
+        const results2 = await parseAndJoinStyles(value, innerScope, config);
         const query = `${mediaQuery} { ${results2} }`;
         cssStyles.add(query);
         return void 0;

package/parsers/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const parseStyles = require("../parse-styles-BWm11azy.cjs");
+const parseStyles = require("../parse-styles-BbI-2wdn.cjs");
 const toHash = require("../to-hash-DT2ImSPA.cjs");
 const RICH_META_KEYS = /* @__PURE__ */ new Set(["base", "variants", "defaultVariants", "compoundVariants", "anyOfVariants"]);
 const isChildEntry = (key, value) => {

package/parsers/index.js

@@ -1,5 +1,5 @@
-import { i as isRichTemplateNode, p as parseAndJoinStyles } from "../parse-styles-w1u1BniY.js";
-import { a, d, e, c, r } from "../parse-styles-w1u1BniY.js";
+import { i as isRichTemplateNode, p as parseAndJoinStyles } from "../parse-styles-BgVqQAni.js";
+import { a, d, e, c, r } from "../parse-styles-BgVqQAni.js";
 import { d as dashCase, t as toHash } from "../to-hash-DSoCPs8D.js";
 const RICH_META_KEYS = /* @__PURE__ */ new Set(["base", "variants", "defaultVariants", "compoundVariants", "anyOfVariants"]);
 const isChildEntry = (key, value) => {

package/parsers/parser-regexes.d.ts

@@ -1,3 +1,4 @@
 export declare const pseudoTypoRegex: RegExp;
 export declare const templateLiteralLeftoverRegex: RegExp;
 export declare const bareAtRuleRegex: RegExp;
+export declare const keyframesAtRuleRegex: RegExp;

package/runtime/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const parseStyles = require("../parse-styles-BWm11azy.cjs");
+const parseStyles = require("../parse-styles-BbI-2wdn.cjs");
 const toHash = require("../to-hash-DT2ImSPA.cjs");
 const defineRuntime = (config) => {
   const className = (styles) => toHash.toHash(styles);

package/runtime/index.js

@@ -1,4 +1,4 @@
-import { a as parseStyles } from "../parse-styles-w1u1BniY.js";
+import { a as parseStyles } from "../parse-styles-BgVqQAni.js";
 import { t as toHash } from "../to-hash-DSoCPs8D.js";
 const defineRuntime = (config) => {
   const className = (styles) => toHash(styles);

package/util/module-type.d.ts

@@ -1 +1 @@
-export declare const detectCurrentModuleType: (dirname: string) => Promise<"esm" | "cjs">;
+export declare const detectCurrentModuleType: (dirname: string) => Promise<"cjs" | "esm">;