CM: updating microstyled to 1.0.6

README.md

@@ -6,10 +6,6 @@
 	</div>
 </div>
 
-## Update!!! (September 19th 2023) 
-- Just in case if anyone is wondering, this project is not abandoned. I am currently working on 2.0 for this project and a UI library based off of it. Both should be released befoer the end of the year.
-
-
 ## About
 - Why?
   - I wanted something smaller and with less dependencies to use for my own projects.
@@ -21,7 +17,7 @@
 
 ## Documentation
 
-- This is a small library so there are only two main sources of documentation, this [README.md](./README.md) and the [Typedoc generated](./docs/modules.md) documentation.
+- This is a small library so there are only two main sources of documentation, this [README.md](./README.md) and the [Typedoc generated](./docs/globals.md) documentation.
 
 - If you are familiar with `styled-components` and `@emotion/styled` then this README.md should be sufficient.
 
@@ -34,22 +30,40 @@
 
 
 ## Examples
+### Comments
+
+- Inline comments in CSS are now supported
+
+
+  ```JSX
+  import microstyled from '@caffedpkg/microstyled';
+
+  const Component = microstyled.div`
+    // line comment
+    /**
+     * block comment
+     */
+    display: /* line-block comments */ flex;
+  `;
+
+  export default Component;
+  ```
 
 ### CSS Styles Support
 
 - Key/value properties
 
   - Root level key/value pairs can be copied "as is" from normal CSS.
 
- 
+
   ```JSX
   import microstyled from '@caffedpkg/microstyled';
-  
+
   // Regular key value CSS properties are written normally
   const Parent = microstyled.div`
     background-color: red;
   `;
-  
+
   export default Parent;
   ```
 
@@ -60,7 +74,7 @@
   <style id="micro-styled-randomHash">
     .randomHash { background-color: red; }
   </style>
-  
+
   // component HTML output minus specified props, children etc.
   <div class="randomHash"></div>
   ```
@@ -70,21 +84,21 @@
 
   - The ampersand is used as a placeholder for the component class reference
 
- 
+
   ```JSX
   import microstyled from '@caffedpkg/microstyled';
-  
+
   const Child = microstyled.div`
     font-size: 24px;
     &:hover {
       font-size: 36px;
     }
   `;
-  
+
   export default Child;
-  
+
   ```
-  
+
   - The resultant output:
 
 
@@ -94,7 +108,7 @@
     .randomHash {font-size: 24px; }
     .randomHash:hover { font-size: 36px; }
   </style>
-	
+
   // component HTML output minus specified props, children etc.
   <div class="randomHash"></div>
   ```
@@ -103,7 +117,7 @@
 
   ```JSX
   import microstyled from '@caffedpkg/microstyled';
-	
+
   // Media queries can also be nested inside an elements block.
   // NOTE: Currently, all nested styles must be enclosed in a "& { ... }" block.
   const Cell =  microstyled.div`
@@ -117,9 +131,9 @@
       }
     }
   `;
-	
+
   export default Cell;
-	
+
   ```
 
   - The resultant output:

dist/index.d.ts

@@ -1,16 +1,29 @@
 import React$1, { CSSProperties } from 'react';
 
+type InlineBlocks<R = any> = Array<string | ((props: any) => R)>;
+type TagFunction<R = any> = (strings: TemplateStringsArray, ...values: InlineBlocks) => R;
+/**
+ * Callable<Parameters, ReturnType>
+ * - Used for defining signatature of function: parameters and return type.
+ * - Use tuple types for variadic signatures
+ *   example: `type funcParams = [arg: string, ...options?: any[]];`
+ *             Callable<funcParams, OtherType>
+ * - Usage:
+ *    type CallableFunction = Callable<null, string>;
+ *    const myFunc : CallableFunction = () : string => {
+ *      return 'string';
+ *    }
+ */
+type Callable<P = any, V = any> = P extends never | null | undefined ? () => V : P extends any[] ? (...args: P) => V : P extends any ? ((arg: P) => V) | ((arg?: P) => V) : unknown;
+
 /**
  * TYPES
  */
 type ContainerElement = HTMLElement | HTMLHeadElement;
 type CacheContainer = (() => Promise<ContainerElement>) | ContainerElement;
 type CSSValue = Record<keyof Styles, string | number>;
-type InlineBlocks = Array<string | ((props: any) => any)>;
 type InlineStyleFunction = <T>(props: T) => string | void;
 type Styles = Record<keyof CSSProperties, string | number>;
-type TaggedFunctionStrings = Readonly<string[]> | TemplateStringsArray;
-type TagFunction = (strings: TemplateStringsArray, ...values: InlineBlocks) => any;
 type Theme = Record<any, any>;
 /**
  * INTERFACES
@@ -21,24 +34,35 @@ interface ParsedCSSResult {
     psuedoClasses: Array<string>;
 }
 interface StyledProps extends Partial<React.PropsWithChildren> {
+    componentCssPrefix?: string;
     style: Styles;
 }
 interface GlobalStyleSheetProps {
+    globalCssPrefix?: string;
     stylesheet: string;
 }
 interface ThemeProviderProps extends Partial<React.PropsWithChildren> {
     theme: Theme;
 }
-interface ThemeCacheProviderProps extends Partial<React.PropsWithChildren> {
+interface ThemeCacheProviderProps$1 extends Partial<React.PropsWithChildren> {
     container: CacheContainer;
 }
 
+/**
+ * Name: ThemeCacheProviderProps
+ * @interface ThemeCacheProviderProps
+ */
+interface ThemeCacheProviderProps extends React$1.PropsWithChildren {
+    componentCssPrefix?: string;
+    globalCssPrefix?: string;
+    logger?: Callable<any[], void>;
+}
 /**
  * ThemeCacheProvider: main entrypoint for context provider
  * @param container either an HTMLElement or Promise returning one
  * @returns ThemeCache Provider Component
  */
-declare const ThemeCacheProvider: (cacheContainer: CacheContainer) => (props: React$1.PropsWithChildren) => JSX.Element;
+declare const ThemeCacheProvider: (cacheContainer: CacheContainer) => (props: ThemeCacheProviderProps) => JSX.Element;
 /**
  * ThemeProvider: main entrypoint for context provider
  * @param theme
@@ -177,14 +201,6 @@ declare const _default: {
     wbr: TagFunction;
 };
 
-/**
- * Random String generator
- * @param length Number: length of the final string
- * @param prefix String prefix
- * @param stripNumeric boolean to remove numbers
- * @returns string
- */
-declare const randomString: (length?: number, prefix?: string, stripNumeric?: boolean) => string;
 /**
  * mediaQueryRegex - matches `@ { ... }`
  */
@@ -193,14 +209,6 @@ declare const mediaQueryRegex: RegExp;
  * psuedoClassRegex - matches `& { ... }`
  */
 declare const psuedoClassRegex: RegExp;
-/**
- * interpolate: Tagged string function parser
- * @param strings Tagged Function Strings
- * @param values Tagged Function Values
- * @param props Component props
- * @returns CSS stylesheet string
- */
-declare const interpolate: (strings: TaggedFunctionStrings, values: InlineBlocks, props?: Record<any, any>) => string;
 /**
  * Normalizes whitespsace in a string
  * @param str string
@@ -228,4 +236,4 @@ declare const createCSSString: (obj: ParsedCSSResult, className: string) => stri
  */
 declare const createStyleElement: (id: string, styles: string) => HTMLStyleElement;
 
-export { CSSValue, CacheContainer, ContainerElement, GlobalStyleSheet, GlobalStyleSheetProps, InlineBlocks, InlineStyleFunction, ParsedCSSResult, StyledProps, Styles, TagFunction, TaggedFunctionStrings, Theme, ThemeCacheProvider, ThemeCacheProviderProps, ThemeProvider, ThemeProviderProps, createCSSObject, createCSSString, createStyleElement, css, _default as default, interpolate, mediaQueryRegex, psuedoClassRegex, randomString, removeWhitespace };
+export { CSSValue, CacheContainer, ContainerElement, GlobalStyleSheet, GlobalStyleSheetProps, InlineStyleFunction, ParsedCSSResult, StyledProps, Styles, Theme, ThemeCacheProvider, ThemeCacheProviderProps$1 as ThemeCacheProviderProps, ThemeProvider, ThemeProviderProps, createCSSObject, createCSSString, createStyleElement, css, _default as default, mediaQueryRegex, psuedoClassRegex, removeWhitespace };