simplestyle-js 5.1.1 → 5.2.1

package/README.md

@@ -95,6 +95,9 @@ Rules support nested selectors via `&`, media queries, and `$className` back-ref
     }), { flush: false }); // do not write to the DOM automatically
     ```
 
+- `imports(ruleId, importRulesFnc, options?)`
+  - Allow you to define one or more `@import()` rules for importing or referencing external stylesheets. **Note**: These imports will not be transformed or attempted to have their contents imported.
+
 - `keyframes(ruleId, framesFnc, options?)`
   - Generates a unique animation name and accompanying `@keyframes` CSS.
   - Returns `{ keyframe: string; stylesheet: string; }`. Respects `flush` and `insertBefore/After` options.
@@ -183,7 +186,7 @@ setSeed(11223344);
 
 export const StyleRegistry = new SimpleStyleRegistry();
 
-export const { createStyles, keyframes } = makeCssFuncs({ registry: StyleRegistry });
+export const { createStyles, imports, keyframes, rawStyles } = makeCssFuncs({ registry: StyleRegistry });
 ```
 
 ```tsx
@@ -235,7 +238,7 @@ setSeed(11223344);
 
 export const StyleRegistry = new SimpleStyleRegistry();
 
-export { createStyles, keyframes } = makeCssFuncs({ registry: StyleRegistry });
+export { createStyles, imports, keyframes, rawStyles } = makeCssFuncs({ registry: StyleRegistry });
 ```
 
 ```astro
@@ -351,7 +354,7 @@ setSeed(1);
 export const StyleRegistry = new SimpleStyleRegistry();
 
 // export the style functions that will be locked to your registry
-export const { createStyles, keyframes, rawStyles } = makeCssFuncs({ registry: })
+export const { createStyles, imports, keyframes, rawStyles } = makeCssFuncs({ registry: })
 ```
 
 #### 2. Render the generated styles in your HTML

package/dist/cjs/createStyles.cjs

@@ -15,6 +15,9 @@ _export(exports, {
     get default () {
         return _default;
     },
+    get imports () {
+        return imports;
+    },
     get keyframes () {
         return keyframes;
     },
@@ -154,6 +157,26 @@ function coerceCreateStylesOptions(options) {
         flush: options && typeof options.flush === 'boolean' ? options.flush : true
     };
 }
+function imports(ruleId, rulesFnc, options) {
+    const coerced = coerceCreateStylesOptions(options);
+    const importRuleId = `${ruleId}_imports`;
+    const rules = rulesFnc();
+    if (!Array.isArray(rules)) {
+        throw new Error('the import() function expects the value returned to be an array of @import strings');
+    }
+    let sheetBuffer = '';
+    for (const importRule of rules){
+        if (!importRule.startsWith('@import')) {
+            throw new Error(`found an invalid import string: ${importRule}`);
+        }
+        sheetBuffer += `${importRule}${importRule.endsWith(';') ? '' : ';'}`;
+    }
+    if (options?.registry) {
+        options.registry.add(importRuleId, sheetBuffer);
+    } else if (coerced.flush) {
+        flushSheetContents(importRuleId, sheetBuffer, options);
+    }
+}
 function rawStyles(ruleId, rulesFnc, options) {
     const rawStylesId = `${ruleId}_raw`;
     const coerced = coerceCreateStylesOptions(options);

package/dist/cjs/createStyles.d.ts

@@ -1,6 +1,6 @@
 import type { Properties } from 'csstype';
 import type { SimpleStyleRegistry } from './simpleStyleRegistry.js';
-import type { SimpleStyleRules } from './types.js';
+import type { ImportStringType, SimpleStyleRules } from './types.js';
 export type CreateStylesOptions = Partial<{
     /**
      * If true, automatically renders generated styles
@@ -26,6 +26,7 @@ export type CreateStylesOptions = Partial<{
      */
     registry?: SimpleStyleRegistry;
 }>;
+export declare function imports(ruleId: string, rulesFnc: () => ImportStringType[], options?: CreateStylesOptions): void;
 export declare function rawStyles<T extends SimpleStyleRules>(ruleId: string, rulesFnc: () => T, options?: Partial<CreateStylesOptions>): string;
 export declare function keyframes<T extends Record<string, Properties>>(ruleId: string, framesFnc: () => T, options?: CreateStylesOptions): {
     keyframe: string;

package/dist/cjs/index.d.ts

@@ -4,4 +4,4 @@ export { setSeed } from './generateClassName.js';
 export * from './makeStyles.js';
 export type { PosthookPlugin } from './plugins.js';
 export { registerPosthook } from './plugins.js';
-export type { SimpleStyleRules } from './types.js';
+export type { ImportStringType, SimpleStyleRules } from './types.js';

package/dist/cjs/makeStyles.cjs

@@ -10,23 +10,33 @@ Object.defineProperty(exports, "makeCssFuncs", {
 });
 const _createStyles = require("./createStyles.cjs");
 function makeCssFuncs(opts) {
-    function wrappedCreateStyles(ruleId, rulesFnc) {
+    function wrappedCreateStyles(ruleId, rulesFnc, overrides) {
         return (0, _createStyles.createStyles)(ruleId, ()=>rulesFnc('variables' in opts ? opts.variables : undefined), {
-            registry: 'registry' in opts ? opts.registry : undefined
+            ...overrides,
+            registry: 'registry' in opts ? opts.registry : overrides?.registry
         });
     }
-    function wrappedCreateKeyframes(ruleId, rulesFnc) {
+    function wrappedCreateKeyframes(ruleId, rulesFnc, overrides) {
         return (0, _createStyles.keyframes)(ruleId, ()=>rulesFnc('variables' in opts ? opts.variables : undefined), {
-            registry: 'registry' in opts ? opts.registry : undefined
+            ...overrides,
+            registry: 'registry' in opts ? opts.registry : overrides?.registry
         });
     }
-    function wrappedRawStyles(ruleId, rulesFnc) {
+    function wrappedRawStyles(ruleId, rulesFnc, overrides) {
         return (0, _createStyles.rawStyles)(ruleId, ()=>rulesFnc('variables' in opts ? opts.variables : undefined), {
-            registry: 'registry' in opts ? opts.registry : undefined
+            ...overrides,
+            registry: 'registry' in opts ? opts.registry : overrides?.registry
+        });
+    }
+    function wrappedImports(ruleId, rulesFnc, overrides) {
+        return (0, _createStyles.imports)(ruleId, ()=>rulesFnc('variables' in opts ? opts.variables : undefined), {
+            ...overrides,
+            registry: 'registry' in opts ? opts.registry : overrides?.registry
         });
     }
     return {
         createStyles: wrappedCreateStyles,
+        imports: wrappedImports,
         keyframes: wrappedCreateKeyframes,
         rawStyles: wrappedRawStyles
     };

package/dist/cjs/makeStyles.d.ts

@@ -1,6 +1,7 @@
 import type { Properties } from 'csstype';
+import { type CreateStylesOptions } from './createStyles.js';
 import type { SimpleStyleRegistry } from './simpleStyleRegistry.js';
-import type { SimpleStyleRules } from './types.js';
+import type { ImportStringType, SimpleStyleRules } from './types.js';
 type MakeCssFuncsOpts<T extends object> = {} | {
     registry: SimpleStyleRegistry;
 } | {
@@ -17,7 +18,7 @@ type MakeCssFuncsOpts<T extends object> = {} | {
  * The function will be provided with your variables
  */
 export declare function makeCssFuncs<V extends object>(opts: MakeCssFuncsOpts<V>): {
-    createStyles: <T extends SimpleStyleRules, K extends keyof T, O extends Record<K, string>>(ruleId: string, rulesFnc: (vars?: V) => T) => {
+    createStyles: <T extends SimpleStyleRules, K extends keyof T, O extends Record<K, string>>(ruleId: string, rulesFnc: (vars?: V) => T, overrides?: CreateStylesOptions) => {
         classes: O;
         stylesheet: string;
         updateSheet: <T2 extends SimpleStyleRules>(updatedRulesFnc: () => Partial<T2>) => {
@@ -25,10 +26,11 @@ export declare function makeCssFuncs<V extends object>(opts: MakeCssFuncsOpts<V>
             stylesheet: string;
         } | null;
     };
-    keyframes: <T extends Record<string, Properties>>(ruleId: string, rulesFnc: (vars?: V) => T) => {
+    imports: (ruleId: string, rulesFnc: (vars?: V) => ImportStringType[], overrides?: CreateStylesOptions) => void;
+    keyframes: <T extends Record<string, Properties>>(ruleId: string, rulesFnc: (vars?: V) => T, overrides?: CreateStylesOptions) => {
         keyframe: string;
         stylesheet: string;
     };
-    rawStyles: <T extends SimpleStyleRules>(ruleId: string, rulesFnc: (vars?: V) => T) => string;
+    rawStyles: <T extends SimpleStyleRules>(ruleId: string, rulesFnc: (vars?: V) => T, overrides?: CreateStylesOptions) => string;
 };
 export {};

package/dist/cjs/types.d.ts

@@ -4,3 +4,4 @@ export type SimpleStyleRules = {
 };
 export type RenderableSimpleStyleRules = SimpleStyleRules & Record<string, Properties[]>;
 export type HasProperty<T, K extends keyof T> = T extends Record<K, any> ? true : false;
+export type ImportStringType = `@import ${string}`;

package/dist/esm/createStyles.d.ts

@@ -1,6 +1,6 @@
 import type { Properties } from 'csstype';
 import type { SimpleStyleRegistry } from './simpleStyleRegistry.js';
-import type { SimpleStyleRules } from './types.js';
+import type { ImportStringType, SimpleStyleRules } from './types.js';
 export type CreateStylesOptions = Partial<{
     /**
      * If true, automatically renders generated styles
@@ -26,6 +26,7 @@ export type CreateStylesOptions = Partial<{
      */
     registry?: SimpleStyleRegistry;
 }>;
+export declare function imports(ruleId: string, rulesFnc: () => ImportStringType[], options?: CreateStylesOptions): void;
 export declare function rawStyles<T extends SimpleStyleRules>(ruleId: string, rulesFnc: () => T, options?: Partial<CreateStylesOptions>): string;
 export declare function keyframes<T extends Record<string, Properties>>(ruleId: string, framesFnc: () => T, options?: CreateStylesOptions): {
     keyframe: string;

package/dist/esm/createStyles.mjs

@@ -125,6 +125,26 @@ function coerceCreateStylesOptions(options) {
         flush: options && typeof options.flush === 'boolean' ? options.flush : true
     };
 }
+export function imports(ruleId, rulesFnc, options) {
+    const coerced = coerceCreateStylesOptions(options);
+    const importRuleId = `${ruleId}_imports`;
+    const rules = rulesFnc();
+    if (!Array.isArray(rules)) {
+        throw new Error('the import() function expects the value returned to be an array of @import strings');
+    }
+    let sheetBuffer = '';
+    for (const importRule of rules){
+        if (!importRule.startsWith('@import')) {
+            throw new Error(`found an invalid import string: ${importRule}`);
+        }
+        sheetBuffer += `${importRule}${importRule.endsWith(';') ? '' : ';'}`;
+    }
+    if (options?.registry) {
+        options.registry.add(importRuleId, sheetBuffer);
+    } else if (coerced.flush) {
+        flushSheetContents(importRuleId, sheetBuffer, options);
+    }
+}
 export function rawStyles(ruleId, rulesFnc, options) {
     const rawStylesId = `${ruleId}_raw`;
     const coerced = coerceCreateStylesOptions(options);

package/dist/esm/index.d.ts

@@ -4,4 +4,4 @@ export { setSeed } from './generateClassName.js';
 export * from './makeStyles.js';
 export type { PosthookPlugin } from './plugins.js';
 export { registerPosthook } from './plugins.js';
-export type { SimpleStyleRules } from './types.js';
+export type { ImportStringType, SimpleStyleRules } from './types.js';

package/dist/esm/makeStyles.d.ts

@@ -1,6 +1,7 @@
 import type { Properties } from 'csstype';
+import { type CreateStylesOptions } from './createStyles.js';
 import type { SimpleStyleRegistry } from './simpleStyleRegistry.js';
-import type { SimpleStyleRules } from './types.js';
+import type { ImportStringType, SimpleStyleRules } from './types.js';
 type MakeCssFuncsOpts<T extends object> = {} | {
     registry: SimpleStyleRegistry;
 } | {
@@ -17,7 +18,7 @@ type MakeCssFuncsOpts<T extends object> = {} | {
  * The function will be provided with your variables
  */
 export declare function makeCssFuncs<V extends object>(opts: MakeCssFuncsOpts<V>): {
-    createStyles: <T extends SimpleStyleRules, K extends keyof T, O extends Record<K, string>>(ruleId: string, rulesFnc: (vars?: V) => T) => {
+    createStyles: <T extends SimpleStyleRules, K extends keyof T, O extends Record<K, string>>(ruleId: string, rulesFnc: (vars?: V) => T, overrides?: CreateStylesOptions) => {
         classes: O;
         stylesheet: string;
         updateSheet: <T2 extends SimpleStyleRules>(updatedRulesFnc: () => Partial<T2>) => {
@@ -25,10 +26,11 @@ export declare function makeCssFuncs<V extends object>(opts: MakeCssFuncsOpts<V>
             stylesheet: string;
         } | null;
     };
-    keyframes: <T extends Record<string, Properties>>(ruleId: string, rulesFnc: (vars?: V) => T) => {
+    imports: (ruleId: string, rulesFnc: (vars?: V) => ImportStringType[], overrides?: CreateStylesOptions) => void;
+    keyframes: <T extends Record<string, Properties>>(ruleId: string, rulesFnc: (vars?: V) => T, overrides?: CreateStylesOptions) => {
         keyframe: string;
         stylesheet: string;
     };
-    rawStyles: <T extends SimpleStyleRules>(ruleId: string, rulesFnc: (vars?: V) => T) => string;
+    rawStyles: <T extends SimpleStyleRules>(ruleId: string, rulesFnc: (vars?: V) => T, overrides?: CreateStylesOptions) => string;
 };
 export {};

package/dist/esm/makeStyles.mjs

@@ -1,4 +1,4 @@
-import { createStyles, keyframes, rawStyles } from './createStyles.mjs';
+import { createStyles, imports, keyframes, rawStyles } from './createStyles.mjs';
 /**
  * Creates all of your CSS functions, createStyles, keframes and rawStyles,
  * and scopes them all to your registry and variables definitions (both are optional).
@@ -6,23 +6,33 @@ import { createStyles, keyframes, rawStyles } from './createStyles.mjs';
  * they accept a function as the 2nd parameter, instead of the usual object.
  * The function will be provided with your variables
  */ export function makeCssFuncs(opts) {
-    function wrappedCreateStyles(ruleId, rulesFnc) {
+    function wrappedCreateStyles(ruleId, rulesFnc, overrides) {
         return createStyles(ruleId, ()=>rulesFnc('variables' in opts ? opts.variables : undefined), {
-            registry: 'registry' in opts ? opts.registry : undefined
+            ...overrides,
+            registry: 'registry' in opts ? opts.registry : overrides?.registry
         });
     }
-    function wrappedCreateKeyframes(ruleId, rulesFnc) {
+    function wrappedCreateKeyframes(ruleId, rulesFnc, overrides) {
         return keyframes(ruleId, ()=>rulesFnc('variables' in opts ? opts.variables : undefined), {
-            registry: 'registry' in opts ? opts.registry : undefined
+            ...overrides,
+            registry: 'registry' in opts ? opts.registry : overrides?.registry
         });
     }
-    function wrappedRawStyles(ruleId, rulesFnc) {
+    function wrappedRawStyles(ruleId, rulesFnc, overrides) {
         return rawStyles(ruleId, ()=>rulesFnc('variables' in opts ? opts.variables : undefined), {
-            registry: 'registry' in opts ? opts.registry : undefined
+            ...overrides,
+            registry: 'registry' in opts ? opts.registry : overrides?.registry
+        });
+    }
+    function wrappedImports(ruleId, rulesFnc, overrides) {
+        return imports(ruleId, ()=>rulesFnc('variables' in opts ? opts.variables : undefined), {
+            ...overrides,
+            registry: 'registry' in opts ? opts.registry : overrides?.registry
         });
     }
     return {
         createStyles: wrappedCreateStyles,
+        imports: wrappedImports,
         keyframes: wrappedCreateKeyframes,
         rawStyles: wrappedRawStyles
     };

package/dist/esm/types.d.ts

@@ -4,3 +4,4 @@ export type SimpleStyleRules = {
 };
 export type RenderableSimpleStyleRules = SimpleStyleRules & Record<string, Properties[]>;
 export type HasProperty<T, K extends keyof T> = T extends Record<K, any> ? true : false;
+export type ImportStringType = `@import ${string}`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "simplestyle-js",
-  "version": "5.1.1",
+  "version": "5.2.1",
   "description": "An incredibly straightforward and simple CSS-in-JS solution with zero runtime dependencies, and out-of-the-box TypeScript support",
   "type": "module",
   "repository": {
@@ -40,24 +40,23 @@
   "devDependencies": {
     "astro": ">=5",
     "@better-builds/lets-version": "^1.6.0",
-    "@testing-library/react": "^16.3.0",
+    "@testing-library/react": "^16.3.1",
     "@types/autoprefixer": "^10.2.4",
     "@types/react": ">=18",
     "@types/react-dom": ">=18",
-    "@vitejs/plugin-react": "^5.1.1",
-    "autoprefixer": "^10.4.22",
-    "@biomejs/biome": "^2.3.8",
+    "@vitejs/plugin-react": "^5.1.2",
+    "autoprefixer": "^10.4.23",
+    "@biomejs/biome": "^2.3.10",
     "coveralls": "^3.1.1",
-    "eslint-config-react-yas": "^6.0.11",
     "husky": "^9.1.7",
-    "jsdom": "^27.2.0",
+    "jsdom": "^27.3.0",
     "postcss": "^8.5.6",
     "react": ">=18",
     "react-dom": ">=18",
-    "@better-builds/ts-duality": "^0.6.0",
+    "@better-builds/ts-duality": "^1.1.0",
     "typescript": "^5.9.3",
-    "vite": "^7.2.6",
-    "vitest": "^4.0.14"
+    "vite": "^7.3.0",
+    "vitest": "^4.0.16"
   },
   "dependencies": {
     "csstype": "^3.2.3",
@@ -200,4 +199,4 @@
   "trustedDependencies": [
     "@swc/core"
   ]
-}
+}