simplestyle-js 6.0.0 → 6.1.0

package/dist/makeStyles/execCreateStyles.d.ts

@@ -1,5 +1,5 @@
 import type { CreateStylesOptions, SimpleStyleRules } from './types.js';
-export declare function execCreateStyles<T extends SimpleStyleRules, K extends keyof T, O extends Record<K, string>>(ruleId: string, rules: T, options: CreateStylesOptions, parentSelector: string | null, noGenerateClassName?: boolean): {
+export declare function execCreateStyles<T extends SimpleStyleRules, K extends keyof T, O extends Record<K, string>>(ruleId: string, rules: T, options: CreateStylesOptions, parentSelector: string | null, noGenerateClassName?: boolean, inMediaOrContainerQuery?: boolean): {
     classes: O;
     sheetBuffer: string;
     mediaQueriesBuffer: string;

package/dist/makeStyles/execCreateStyles.mjs

@@ -1,6 +1,6 @@
 import { generateClassName } from './generateClassName.mjs';
-import { formatCSSRules, isMedia, isNestedSelector } from './utils.mjs';
-export function execCreateStyles(ruleId, rules, options, parentSelector, noGenerateClassName = false) {
+import { formatCSSRules, isMediaOrContainer, isNestedSelector } from './utils.mjs';
+export function execCreateStyles(ruleId, rules, options, parentSelector, noGenerateClassName = false, inMediaOrContainerQuery = false) {
     const out = {};
     let sheetBuffer = '';
     let mediaQueriesBuffer = '';
@@ -12,11 +12,15 @@ export function execCreateStyles(ruleId, rules, options, parentSelector, noGener
     };
     for (const [classNameOrCSSRule, classNameRules] of styleEntries){
         // if the classNameRules is a string, we are dealing with a display: none; type rule
-        if (isMedia(classNameOrCSSRule)) {
-            if (typeof classNameRules !== 'object') throw new Error('Unable to map @media query because rules / props are an invalid type');
+        if (isMediaOrContainer(classNameOrCSSRule)) {
+            if (typeof classNameRules !== 'object') throw new Error('Unable to map @media or @container query because rules / props are an invalid type');
+            // Check for nested @media/@container queries (CSS spec doesn't allow this)
+            if (inMediaOrContainerQuery) {
+                throw new Error(`Nested @media or @container queries are not allowed in CSS. Found "${classNameOrCSSRule}" inside another query.`);
+            }
             guardCloseRuleWrite();
             mediaQueriesBuffer += `${classNameOrCSSRule}{`;
-            const { mediaQueriesBuffer: mediaQueriesOutput, sheetBuffer: regularOutput } = execCreateStyles(ruleId, classNameRules, options, parentSelector);
+            const { mediaQueriesBuffer: mediaQueriesOutput, sheetBuffer: regularOutput } = execCreateStyles(ruleId, classNameRules, options, parentSelector, noGenerateClassName, true);
             mediaQueriesBuffer += regularOutput;
             mediaQueriesBuffer += '}';
             mediaQueriesBuffer += mediaQueriesOutput;
@@ -26,7 +30,7 @@ export function execCreateStyles(ruleId, rules, options, parentSelector, noGener
             // format of { '& > span': { display: 'none' } } (or further nesting)
             const replaced = classNameOrCSSRule.replaceAll('&', parentSelector);
             for (const selector of replaced.split(/,\s*/)){
-                const { mediaQueriesBuffer: mediaQueriesOutput, sheetBuffer: regularOutput } = execCreateStyles(ruleId, classNameRules, options, selector);
+                const { mediaQueriesBuffer: mediaQueriesOutput, sheetBuffer: regularOutput } = execCreateStyles(ruleId, classNameRules, options, selector, noGenerateClassName, inMediaOrContainerQuery);
                 sheetBuffer += regularOutput;
                 mediaQueriesBuffer += mediaQueriesOutput;
             }
@@ -36,7 +40,7 @@ export function execCreateStyles(ruleId, rules, options, parentSelector, noGener
             // @ts-expect-error - yes, we can index this object here, so be quiet
             out[classNameOrCSSRule] = generated;
             const generatedSelector = `${noGenerateClassName ? '' : '.'}${generated}`;
-            const { mediaQueriesBuffer: mediaQueriesOutput, sheetBuffer: regularOutput } = execCreateStyles(ruleId, classNameRules, options, generatedSelector);
+            const { mediaQueriesBuffer: mediaQueriesOutput, sheetBuffer: regularOutput } = execCreateStyles(ruleId, classNameRules, options, generatedSelector, noGenerateClassName, inMediaOrContainerQuery);
             sheetBuffer += regularOutput;
             mediaQueriesBuffer += mediaQueriesOutput;
         } else {

package/dist/makeStyles/utils.d.ts

@@ -1,5 +1,5 @@
 import type { Properties } from 'csstype';
 export declare function isNestedSelector(r: string): boolean;
-export declare function isMedia(r: string): boolean;
+export declare function isMediaOrContainer(r: string): boolean;
 export declare function formatCSSRuleName(rule: string): string;
 export declare function formatCSSRules(cssRules: Properties): string;

package/dist/makeStyles/utils.mjs

@@ -1,8 +1,9 @@
 export function isNestedSelector(r) {
     return /&/g.test(r);
 }
-export function isMedia(r) {
-    return r.toLowerCase().startsWith('@media');
+export function isMediaOrContainer(r) {
+    const query = r.toLowerCase();
+    return query.startsWith('@media') || query.startsWith('@container');
 }
 export function formatCSSRuleName(rule) {
     return rule.replaceAll(/([A-Z])/g, (p1)=>`-${p1.toLowerCase()}`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "simplestyle-js",
-  "version": "6.0.0",
+  "version": "6.1.0",
   "description": "An incredibly straightforward and simple CSS-in-JS solution with zero runtime dependencies, and out-of-the-box TypeScript support",
   "type": "module",
   "bin": {