simplestyle-js 5.2.0 → 5.2.2

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,5 @@
-import type { Properties } from 'csstype';
 import type { SimpleStyleRegistry } from './simpleStyleRegistry.js';
-import type { SimpleStyleRules } from './types.js';
+import type { ImportStringType, Properties, SimpleStyleRules } from './types.js';
 export type CreateStylesOptions = Partial<{
     /**
      * If true, automatically renders generated styles
@@ -26,6 +25,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.cjs

@@ -29,6 +29,7 @@ const _createStyles = /*#__PURE__*/ _interop_require_wildcard(require("./createS
 const _generateClassName = require("./generateClassName.cjs");
 _export_star(require("./makeStyles.cjs"), exports);
 const _plugins = require("./plugins.cjs");
+_export_star(require("./types.cjs"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

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 * from './types.js';

package/dist/cjs/makeStyles.cjs

@@ -28,8 +28,15 @@ function makeCssFuncs(opts) {
             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,7 +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;
 } | {
@@ -26,6 +26,7 @@ export declare function makeCssFuncs<V extends object>(opts: MakeCssFuncsOpts<V>
             stylesheet: string;
         } | null;
     };
+    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;

package/dist/cjs/types.d.ts

@@ -4,3 +4,5 @@ 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}`;
+export type { Properties };

package/dist/esm/createStyles.d.ts

@@ -1,6 +1,5 @@
-import type { Properties } from 'csstype';
 import type { SimpleStyleRegistry } from './simpleStyleRegistry.js';
-import type { SimpleStyleRules } from './types.js';
+import type { ImportStringType, Properties, SimpleStyleRules } from './types.js';
 export type CreateStylesOptions = Partial<{
     /**
      * If true, automatically renders generated styles
@@ -26,6 +25,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 * from './types.js';

package/dist/esm/index.mjs

@@ -2,3 +2,4 @@ export { default as createStyles, keyframes, rawStyles } from './createStyles.mj
 export { setSeed } from './generateClassName.mjs';
 export * from './makeStyles.mjs';
 export { registerPosthook } from './plugins.mjs';
+export * from './types.mjs';

package/dist/esm/makeStyles.d.ts

@@ -1,7 +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;
 } | {
@@ -26,6 +26,7 @@ export declare function makeCssFuncs<V extends object>(opts: MakeCssFuncsOpts<V>
             stylesheet: string;
         } | null;
     };
+    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;

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).
@@ -24,8 +24,15 @@ import { createStyles, keyframes, rawStyles } from './createStyles.mjs';
             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,5 @@ 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}`;
+export type { Properties };

package/dist/esm/types.mjs

@@ -1 +1,2 @@
+// re-export this type so we don't run into portability issues here
 export { };

package/package.json

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