simplestyle-js 3.2.0 → 3.2.2-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -4
- package/createStyles.js +8 -6
- package/createStyles.js.map +2 -2
- package/index.cjs.js +9 -6
- package/index.js.map +2 -2
- package/package.json +36 -35
- package/react/index.cjs.js +14 -7
- package/react/index.js.map +2 -2
- package/react/useCreateStyles.js +5 -1
- package/react/useCreateStyles.js.map +2 -2
- package/util/index.cjs.js +1 -0
- package/util/index.js.map +1 -1
package/README.md
CHANGED
|
@@ -9,10 +9,10 @@ A super simple CSS-in-JS solution with friendly TypeScript support and a small f
|
|
|
9
9
|
## Installation
|
|
10
10
|
`npm install simplestyle-js --save`
|
|
11
11
|
|
|
12
|
-
## Live Demo
|
|
13
|
-
[Codesandbox VanillaJS Demo](https://codesandbox.io/s/
|
|
12
|
+
## Live Demo using VanillaJS
|
|
13
|
+
[Codesandbox VanillaJS Demo](https://codesandbox.io/s/gracious-browser-9hxg3r?file=/src/index.js)
|
|
14
14
|
|
|
15
|
-
## Live Demo
|
|
15
|
+
## Live Demo using the provided React Hooks
|
|
16
16
|
[Codesandbox React Hooks Demo](https://codesandbox.io/s/nice-franklin-485wi?file=/src/App.tsx)
|
|
17
17
|
|
|
18
18
|
## Basic Usage
|
|
@@ -204,7 +204,7 @@ styleTag.innerHTML = `${stylesheet}${moreSheetContents}`;
|
|
|
204
204
|
|
|
205
205
|
```javascript
|
|
206
206
|
import React from 'react';
|
|
207
|
-
import { useCreateStyles } from 'simplestyle-js/
|
|
207
|
+
import { useCreateStyles } from 'simplestyle-js/react';
|
|
208
208
|
|
|
209
209
|
|
|
210
210
|
const MyComponent = () => {
|
package/createStyles.js
CHANGED
|
@@ -84,12 +84,14 @@ function replaceBackReferences(out, sheetContents) {
|
|
|
84
84
|
return getPosthooks().reduce((prev, hook) => hook(prev), outputSheetContents);
|
|
85
85
|
}
|
|
86
86
|
function createSheet(sheetContents) {
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
87
|
+
var _a;
|
|
88
|
+
if (typeof document === "undefined")
|
|
89
|
+
return null;
|
|
90
|
+
if (typeof ((_a = document == null ? void 0 : document.head) == null ? void 0 : _a.appendChild) !== "function" || typeof (document == null ? void 0 : document.createElement) !== "function")
|
|
91
|
+
return null;
|
|
92
|
+
const styleTag = document.createElement("style");
|
|
93
|
+
styleTag.innerHTML = sheetContents;
|
|
94
|
+
return styleTag;
|
|
93
95
|
}
|
|
94
96
|
function flushSheetContents(sheetContents, options) {
|
|
95
97
|
var _a, _b;
|
package/createStyles.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/createStyles.ts"],
|
|
4
|
-
"sourcesContent": ["import { Properties } from 'csstype';\nimport merge from 'deepmerge';\n\nimport { generateClassName } from './generateClassName';\nimport { getPosthooks } from './plugins';\nimport { SimpleStyleRules } from './types';\n\nexport type CreateStylesOptions = Partial<{\n /**\n * If true, automatically renders generated styles\n * to the DOM in an injected <style /> tag\n */\n flush: boolean;\n\n /**\n * If set, along with flush: true,\n * will render the injected <style /> after this element\n */\n insertAfter?: HTMLElement;\n /**\n * If set, along with flush: true,\n * will render the injects <style /> before this element\n */\n insertBefore?: HTMLElement;\n}>;\n\nfunction isNestedSelector(r: string): boolean {\n return /&/g.test(r);\n}\n\nfunction isMedia(r: string): boolean {\n return r.toLowerCase().startsWith('@media');\n}\n\nfunction formatCSSRuleName(rule: string): string {\n return rule.replace(/([A-Z])/g, p1 => `-${p1.toLowerCase()}`);\n}\n\nfunction formatCSSRules(cssRules: Properties): string {\n return Object.entries(cssRules).reduce(\n (prev, [cssProp, cssVal]) => `${prev}${formatCSSRuleName(cssProp)}:${cssVal};`,\n '',\n );\n}\n\nfunction execCreateStyles<T extends SimpleStyleRules, K extends keyof T, O extends { [classKey in K]: string }>(\n rules: T,\n options: CreateStylesOptions,\n parentSelector: string | null,\n noGenerateClassName: boolean = false,\n): { classes: O; sheetBuffer: string; mediaQueriesBuffer: string } {\n const out = {} as O;\n let sheetBuffer = '';\n let mediaQueriesBuffer = '';\n const styleEntries = Object.entries(rules);\n let ruleWriteOpen = false;\n const guardCloseRuleWrite = () => {\n if (ruleWriteOpen) sheetBuffer += '}';\n ruleWriteOpen = false;\n };\n for (const [classNameOrCSSRule, classNameRules] of styleEntries) {\n // if the classNameRules is a string, we are dealing with a display: none; type rule\n if (isMedia(classNameOrCSSRule)) {\n if (typeof classNameRules !== 'object')\n throw new Error('Unable to map @media query because rules / props are an invalid type');\n guardCloseRuleWrite();\n mediaQueriesBuffer += `${classNameOrCSSRule}{`;\n const { mediaQueriesBuffer: mediaQueriesOutput, sheetBuffer: regularOutput } = execCreateStyles(\n classNameRules as T,\n options,\n parentSelector,\n );\n mediaQueriesBuffer += regularOutput;\n mediaQueriesBuffer += '}';\n mediaQueriesBuffer += mediaQueriesOutput;\n } else if (isNestedSelector(classNameOrCSSRule)) {\n if (!parentSelector) throw new Error('Unable to generate nested rule because parentSelector is missing');\n guardCloseRuleWrite();\n // format of { '& > span': { display: 'none' } } (or further nesting)\n const replaced = classNameOrCSSRule.replace(/&/g, parentSelector);\n for (const selector of replaced.split(/,\\s*/)) {\n const { mediaQueriesBuffer: mediaQueriesOutput, sheetBuffer: regularOutput } = execCreateStyles(\n classNameRules as T,\n options,\n selector,\n );\n sheetBuffer += regularOutput;\n mediaQueriesBuffer += mediaQueriesOutput;\n }\n } else if (!parentSelector && typeof classNameRules === 'object') {\n guardCloseRuleWrite();\n const generated = noGenerateClassName ? classNameOrCSSRule : generateClassName(classNameOrCSSRule);\n (out as any)[classNameOrCSSRule] = generated;\n const generatedSelector = `${noGenerateClassName ? '' : '.'}${generated}`;\n const { mediaQueriesBuffer: mediaQueriesOutput, sheetBuffer: regularOutput } = execCreateStyles(\n classNameRules as T,\n options,\n generatedSelector,\n );\n sheetBuffer += regularOutput;\n mediaQueriesBuffer += mediaQueriesOutput;\n } else {\n if (!parentSelector) throw new Error('Unable to write css props because parent selector is null');\n if (!ruleWriteOpen) {\n sheetBuffer += `${parentSelector}{${formatCSSRules({ [classNameOrCSSRule]: classNameRules })}`;\n ruleWriteOpen = true;\n } else sheetBuffer += formatCSSRules({ [classNameOrCSSRule]: classNameRules });\n }\n }\n guardCloseRuleWrite();\n return {\n classes: out,\n sheetBuffer,\n mediaQueriesBuffer,\n };\n}\n\nfunction replaceBackReferences<O extends { [key: string]: string }>(out: O, sheetContents: string): string {\n let outputSheetContents = sheetContents;\n const toReplace: string[] = [];\n const toReplaceRegex = /\\$\\w([a-zA-Z0-9_-]+)?/gm;\n let matches = toReplaceRegex.exec(outputSheetContents);\n while (matches) {\n toReplace.push(matches[0].valueOf());\n matches = toReplaceRegex.exec(outputSheetContents);\n }\n for (const r of toReplace) {\n outputSheetContents = outputSheetContents.replace(r, `.${out[r.substring(1)]}`);\n }\n return getPosthooks().reduce((prev, hook) => hook(prev), outputSheetContents);\n}\n\nfunction createSheet(sheetContents: string) {\n if (
|
|
5
|
-
"mappings": "AACA;AAEA;AACA;AAsBA,0BAA0B,GAAoB;AAC5C,SAAO,KAAK,KAAK,CAAC;AACpB;AAEA,iBAAiB,GAAoB;AACnC,SAAO,EAAE,YAAY,EAAE,WAAW,QAAQ;AAC5C;AAEA,2BAA2B,MAAsB;AAC/C,SAAO,KAAK,QAAQ,YAAY,QAAM,IAAI,GAAG,YAAY,GAAG;AAC9D;AAEA,wBAAwB,UAA8B;AACpD,SAAO,OAAO,QAAQ,QAAQ,EAAE,OAC9B,CAAC,MAAM,CAAC,SAAS,YAAY,GAAG,OAAO,kBAAkB,OAAO,KAAK,WACrE,EACF;AACF;AAEA,0BACE,OACA,SACA,gBACA,sBAA+B,OACkC;AACjE,QAAM,MAAM,CAAC;AACb,MAAI,cAAc;AAClB,MAAI,qBAAqB;AACzB,QAAM,eAAe,OAAO,QAAQ,KAAK;AACzC,MAAI,gBAAgB;AACpB,QAAM,sBAAsB,MAAM;AAChC,QAAI;AAAe,qBAAe;AAClC,oBAAgB;AAAA,EAClB;AACA,aAAW,CAAC,oBAAoB,mBAAmB,cAAc;AAE/D,QAAI,QAAQ,kBAAkB,GAAG;AAC/B,UAAI,OAAO,mBAAmB;AAC5B,cAAM,IAAI,MAAM,sEAAsE;AACxF,0BAAoB;AACpB,4BAAsB,GAAG;AACzB,YAAM,EAAE,oBAAoB,oBAAoB,aAAa,kBAAkB,iBAC7E,gBACA,SACA,cACF;AACA,4BAAsB;AACtB,4BAAsB;AACtB,4BAAsB;AAAA,IACxB,WAAW,iBAAiB,kBAAkB,GAAG;AAC/C,UAAI,CAAC;AAAgB,cAAM,IAAI,MAAM,kEAAkE;AACvG,0BAAoB;AAEpB,YAAM,WAAW,mBAAmB,QAAQ,MAAM,cAAc;AAChE,iBAAW,YAAY,SAAS,MAAM,MAAM,GAAG;AAC7C,cAAM,EAAE,oBAAoB,oBAAoB,aAAa,kBAAkB,iBAC7E,gBACA,SACA,QACF;AACA,uBAAe;AACf,8BAAsB;AAAA,MACxB;AAAA,IACF,WAAW,CAAC,kBAAkB,OAAO,mBAAmB,UAAU;AAChE,0BAAoB;AACpB,YAAM,YAAY,sBAAsB,qBAAqB,kBAAkB,kBAAkB;AACjG,MAAC,IAAY,sBAAsB;AACnC,YAAM,oBAAoB,GAAG,sBAAsB,KAAK,MAAM;AAC9D,YAAM,EAAE,oBAAoB,oBAAoB,aAAa,kBAAkB,iBAC7E,gBACA,SACA,iBACF;AACA,qBAAe;AACf,4BAAsB;AAAA,IACxB,OAAO;AACL,UAAI,CAAC;AAAgB,cAAM,IAAI,MAAM,2DAA2D;AAChG,UAAI,CAAC,eAAe;AAClB,uBAAe,GAAG,kBAAkB,eAAe,
|
|
4
|
+
"sourcesContent": ["import { Properties } from 'csstype';\nimport merge from 'deepmerge';\n\nimport { generateClassName } from './generateClassName';\nimport { getPosthooks } from './plugins';\nimport { SimpleStyleRules } from './types';\n\nexport type CreateStylesOptions = Partial<{\n /**\n * If true, automatically renders generated styles\n * to the DOM in an injected <style /> tag\n */\n flush: boolean;\n\n /**\n * If set, along with flush: true,\n * will render the injected <style /> after this element\n */\n insertAfter?: HTMLElement;\n /**\n * If set, along with flush: true,\n * will render the injects <style /> before this element\n */\n insertBefore?: HTMLElement;\n}>;\n\nfunction isNestedSelector(r: string): boolean {\n return /&/g.test(r);\n}\n\nfunction isMedia(r: string): boolean {\n return r.toLowerCase().startsWith('@media');\n}\n\nfunction formatCSSRuleName(rule: string): string {\n return rule.replace(/([A-Z])/g, p1 => `-${p1.toLowerCase()}`);\n}\n\nfunction formatCSSRules(cssRules: Properties): string {\n return Object.entries(cssRules).reduce(\n (prev, [cssProp, cssVal]) => `${prev}${formatCSSRuleName(cssProp)}:${cssVal};`,\n '',\n );\n}\n\nfunction execCreateStyles<T extends SimpleStyleRules, K extends keyof T, O extends { [classKey in K]: string }>(\n rules: T,\n options: CreateStylesOptions,\n parentSelector: string | null,\n noGenerateClassName: boolean = false,\n): { classes: O; sheetBuffer: string; mediaQueriesBuffer: string } {\n const out = {} as O;\n let sheetBuffer = '';\n let mediaQueriesBuffer = '';\n const styleEntries = Object.entries(rules);\n let ruleWriteOpen = false;\n const guardCloseRuleWrite = () => {\n if (ruleWriteOpen) sheetBuffer += '}';\n ruleWriteOpen = false;\n };\n for (const [classNameOrCSSRule, classNameRules] of styleEntries) {\n // if the classNameRules is a string, we are dealing with a display: none; type rule\n if (isMedia(classNameOrCSSRule)) {\n if (typeof classNameRules !== 'object')\n throw new Error('Unable to map @media query because rules / props are an invalid type');\n guardCloseRuleWrite();\n mediaQueriesBuffer += `${classNameOrCSSRule}{`;\n const { mediaQueriesBuffer: mediaQueriesOutput, sheetBuffer: regularOutput } = execCreateStyles(\n classNameRules as T,\n options,\n parentSelector,\n );\n mediaQueriesBuffer += regularOutput;\n mediaQueriesBuffer += '}';\n mediaQueriesBuffer += mediaQueriesOutput;\n } else if (isNestedSelector(classNameOrCSSRule)) {\n if (!parentSelector) throw new Error('Unable to generate nested rule because parentSelector is missing');\n guardCloseRuleWrite();\n // format of { '& > span': { display: 'none' } } (or further nesting)\n const replaced = classNameOrCSSRule.replace(/&/g, parentSelector);\n for (const selector of replaced.split(/,\\s*/)) {\n const { mediaQueriesBuffer: mediaQueriesOutput, sheetBuffer: regularOutput } = execCreateStyles(\n classNameRules as T,\n options,\n selector,\n );\n sheetBuffer += regularOutput;\n mediaQueriesBuffer += mediaQueriesOutput;\n }\n } else if (!parentSelector && typeof classNameRules === 'object') {\n guardCloseRuleWrite();\n const generated = noGenerateClassName ? classNameOrCSSRule : generateClassName(classNameOrCSSRule);\n (out as any)[classNameOrCSSRule] = generated;\n const generatedSelector = `${noGenerateClassName ? '' : '.'}${generated}`;\n const { mediaQueriesBuffer: mediaQueriesOutput, sheetBuffer: regularOutput } = execCreateStyles(\n classNameRules as T,\n options,\n generatedSelector,\n );\n sheetBuffer += regularOutput;\n mediaQueriesBuffer += mediaQueriesOutput;\n } else {\n if (!parentSelector) throw new Error('Unable to write css props because parent selector is null');\n if (!ruleWriteOpen) {\n sheetBuffer += `${parentSelector}{${formatCSSRules({ [classNameOrCSSRule]: classNameRules })}`;\n ruleWriteOpen = true;\n } else sheetBuffer += formatCSSRules({ [classNameOrCSSRule]: classNameRules });\n }\n }\n guardCloseRuleWrite();\n return {\n classes: out,\n sheetBuffer,\n mediaQueriesBuffer,\n };\n}\n\nfunction replaceBackReferences<O extends { [key: string]: string }>(out: O, sheetContents: string): string {\n let outputSheetContents = sheetContents;\n const toReplace: string[] = [];\n const toReplaceRegex = /\\$\\w([a-zA-Z0-9_-]+)?/gm;\n let matches = toReplaceRegex.exec(outputSheetContents);\n while (matches) {\n toReplace.push(matches[0].valueOf());\n matches = toReplaceRegex.exec(outputSheetContents);\n }\n for (const r of toReplace) {\n outputSheetContents = outputSheetContents.replace(r, `.${out[r.substring(1)]}`);\n }\n return getPosthooks().reduce((prev, hook) => hook(prev), outputSheetContents);\n}\n\nfunction createSheet(sheetContents: string) {\n if (typeof document === 'undefined') return null;\n if (typeof document?.head?.appendChild !== 'function' || typeof document?.createElement !== 'function') return null;\n const styleTag = document.createElement('style');\n styleTag.innerHTML = sheetContents;\n return styleTag;\n}\n\nfunction flushSheetContents(sheetContents: string, options?: CreateStylesOptions) {\n // In case we're in come weird test environment that doesn't support JSDom\n const styleTag = createSheet(sheetContents);\n if (styleTag) {\n if (options?.insertAfter && options?.insertBefore) {\n throw new Error('Both insertAfter and insertBefore were provided. Please choose only one.');\n }\n if (options?.insertAfter?.after) options.insertAfter.after(styleTag as Node);\n else if (options?.insertBefore?.before) options.insertBefore.before(styleTag as Node);\n else document.head.appendChild(styleTag);\n }\n return styleTag;\n}\n\nfunction coerceCreateStylesOptions(options?: CreateStylesOptions): CreateStylesOptions {\n return {\n flush: options && typeof options.flush === 'boolean' ? options.flush : true,\n };\n}\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport function rawStyles<T extends SimpleStyleRules, K extends keyof T, O extends { [key in K]: string }>(\n rules: T,\n options?: Partial<CreateStylesOptions>,\n) {\n const coerced = coerceCreateStylesOptions(options);\n const { sheetBuffer: sheetContents, mediaQueriesBuffer: mediaQueriesContents } = execCreateStyles(\n rules,\n coerced,\n null,\n true,\n );\n\n const mergedContents = `${sheetContents}${mediaQueriesContents}`;\n\n if (coerced.flush) flushSheetContents(mergedContents, options);\n return mergedContents;\n}\n\nexport function keyframes<T extends { [increment: string]: Properties }>(\n frames: T,\n options?: CreateStylesOptions,\n): [string, string] {\n const coerced = coerceCreateStylesOptions(options);\n const keyframeName = generateClassName('keyframes_');\n const { sheetBuffer: keyframesContents } = execCreateStyles(frames, coerced, null, true);\n const sheetContents = `@keyframes ${keyframeName}{${keyframesContents}}`;\n if (coerced.flush) flushSheetContents(sheetContents);\n return [keyframeName, sheetContents];\n}\n\nexport default function createStyles<\n T extends SimpleStyleRules,\n K extends keyof T,\n O extends { [classKey in K]: string },\n>(rules: T, options?: Partial<CreateStylesOptions>) {\n const coerced = coerceCreateStylesOptions(options);\n const {\n classes: out,\n sheetBuffer: sheetContents,\n mediaQueriesBuffer: mediaQueriesContents,\n } = execCreateStyles(rules, coerced, null);\n\n const mergedContents = `${sheetContents}${mediaQueriesContents}`;\n\n const replacedSheetContents = replaceBackReferences(out, mergedContents);\n\n let sheet: ReturnType<typeof flushSheetContents> = null;\n\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const updateSheet = <T2 extends SimpleStyleRules, K2 extends keyof T2, O2 extends { [classKey in K2]: string }>(\n updatedRules: Partial<T2>,\n ) => {\n if (((options?.flush && sheet) || !options?.flush) && updatedRules) {\n // We prefer the first set, and then we shallow merge\n const {\n classes: updatedOut,\n sheetBuffer: updatedSheetContents,\n mediaQueriesBuffer: updatedMediaQueriesContents,\n } = execCreateStyles(merge(rules, updatedRules), { flush: false }, null);\n\n const updatedMergedContents = `${updatedSheetContents}${updatedMediaQueriesContents}`;\n\n const updatedReplacedSheetContents = replaceBackReferences(out, updatedMergedContents);\n if (sheet) sheet.innerHTML = updatedReplacedSheetContents;\n return { classes: updatedOut, stylesheet: updatedSheetContents } as {\n classes: typeof updatedOut;\n stylesheet: string;\n };\n }\n return null;\n };\n\n if (coerced.flush) sheet = flushSheetContents(replacedSheetContents, options);\n // Need this TS cast to get solid code assist from the consumption-side\n return {\n classes: out as unknown,\n stylesheet: replacedSheetContents,\n updateSheet,\n } as {\n classes: O;\n stylesheet: string;\n updateSheet: typeof updateSheet;\n };\n}\n\nexport type CreateStylesArgs = Parameters<typeof createStyles>;\n"],
|
|
5
|
+
"mappings": "AACA;AAEA;AACA;AAsBA,0BAA0B,GAAoB;AAC5C,SAAO,KAAK,KAAK,CAAC;AACpB;AAEA,iBAAiB,GAAoB;AACnC,SAAO,EAAE,YAAY,EAAE,WAAW,QAAQ;AAC5C;AAEA,2BAA2B,MAAsB;AAC/C,SAAO,KAAK,QAAQ,YAAY,QAAM,IAAI,GAAG,YAAY,GAAG;AAC9D;AAEA,wBAAwB,UAA8B;AACpD,SAAO,OAAO,QAAQ,QAAQ,EAAE,OAC9B,CAAC,MAAM,CAAC,SAAS,YAAY,GAAG,OAAO,kBAAkB,OAAO,KAAK,WACrE,EACF;AACF;AAEA,0BACE,OACA,SACA,gBACA,sBAA+B,OACkC;AACjE,QAAM,MAAM,CAAC;AACb,MAAI,cAAc;AAClB,MAAI,qBAAqB;AACzB,QAAM,eAAe,OAAO,QAAQ,KAAK;AACzC,MAAI,gBAAgB;AACpB,QAAM,sBAAsB,MAAM;AAChC,QAAI;AAAe,qBAAe;AAClC,oBAAgB;AAAA,EAClB;AACA,aAAW,CAAC,oBAAoB,mBAAmB,cAAc;AAE/D,QAAI,QAAQ,kBAAkB,GAAG;AAC/B,UAAI,OAAO,mBAAmB;AAC5B,cAAM,IAAI,MAAM,sEAAsE;AACxF,0BAAoB;AACpB,4BAAsB,GAAG;AACzB,YAAM,EAAE,oBAAoB,oBAAoB,aAAa,kBAAkB,iBAC7E,gBACA,SACA,cACF;AACA,4BAAsB;AACtB,4BAAsB;AACtB,4BAAsB;AAAA,IACxB,WAAW,iBAAiB,kBAAkB,GAAG;AAC/C,UAAI,CAAC;AAAgB,cAAM,IAAI,MAAM,kEAAkE;AACvG,0BAAoB;AAEpB,YAAM,WAAW,mBAAmB,QAAQ,MAAM,cAAc;AAChE,iBAAW,YAAY,SAAS,MAAM,MAAM,GAAG;AAC7C,cAAM,EAAE,oBAAoB,oBAAoB,aAAa,kBAAkB,iBAC7E,gBACA,SACA,QACF;AACA,uBAAe;AACf,8BAAsB;AAAA,MACxB;AAAA,IACF,WAAW,CAAC,kBAAkB,OAAO,mBAAmB,UAAU;AAChE,0BAAoB;AACpB,YAAM,YAAY,sBAAsB,qBAAqB,kBAAkB,kBAAkB;AACjG,MAAC,IAAY,sBAAsB;AACnC,YAAM,oBAAoB,GAAG,sBAAsB,KAAK,MAAM;AAC9D,YAAM,EAAE,oBAAoB,oBAAoB,aAAa,kBAAkB,iBAC7E,gBACA,SACA,iBACF;AACA,qBAAe;AACf,4BAAsB;AAAA,IACxB,OAAO;AACL,UAAI,CAAC;AAAgB,cAAM,IAAI,MAAM,2DAA2D;AAChG,UAAI,CAAC,eAAe;AAClB,uBAAe,GAAG,kBAAkB,eAAe,EAAE,CAAC,qBAAqB,eAAe,CAAC;AAC3F,wBAAgB;AAAA,MAClB;AAAO,uBAAe,eAAe,EAAE,CAAC,qBAAqB,eAAe,CAAC;AAAA,IAC/E;AAAA,EACF;AACA,sBAAoB;AACpB,SAAO;AAAA,IACL,SAAS;AAAA,IACT;AAAA,IACA;AAAA,EACF;AACF;AAEA,+BAAoE,KAAQ,eAA+B;AACzG,MAAI,sBAAsB;AAC1B,QAAM,YAAsB,CAAC;AAC7B,QAAM,iBAAiB;AACvB,MAAI,UAAU,eAAe,KAAK,mBAAmB;AACrD,SAAO,SAAS;AACd,cAAU,KAAK,QAAQ,GAAG,QAAQ,CAAC;AACnC,cAAU,eAAe,KAAK,mBAAmB;AAAA,EACnD;AACA,aAAW,KAAK,WAAW;AACzB,0BAAsB,oBAAoB,QAAQ,GAAG,IAAI,IAAI,EAAE,UAAU,CAAC,IAAI;AAAA,EAChF;AACA,SAAO,aAAa,EAAE,OAAO,CAAC,MAAM,SAAS,KAAK,IAAI,GAAG,mBAAmB;AAC9E;AAEA,qBAAqB,eAAuB;AApI5C;AAqIE,MAAI,OAAO,aAAa;AAAa,WAAO;AAC5C,MAAI,OAAO,4CAAU,SAAV,mBAAgB,iBAAgB,cAAc,OAAO,sCAAU,mBAAkB;AAAY,WAAO;AAC/G,QAAM,WAAW,SAAS,cAAc,OAAO;AAC/C,WAAS,YAAY;AACrB,SAAO;AACT;AAEA,4BAA4B,eAAuB,SAA+B;AA5IlF;AA8IE,QAAM,WAAW,YAAY,aAAa;AAC1C,MAAI,UAAU;AACZ,QAAI,oCAAS,gBAAe,oCAAS,eAAc;AACjD,YAAM,IAAI,MAAM,0EAA0E;AAAA,IAC5F;AACA,QAAI,yCAAS,gBAAT,mBAAsB;AAAO,cAAQ,YAAY,MAAM,QAAgB;AAAA,aAClE,yCAAS,iBAAT,mBAAuB;AAAQ,cAAQ,aAAa,OAAO,QAAgB;AAAA;AAC/E,eAAS,KAAK,YAAY,QAAQ;AAAA,EACzC;AACA,SAAO;AACT;AAEA,mCAAmC,SAAoD;AACrF,SAAO;AAAA,IACL,OAAO,WAAW,OAAO,QAAQ,UAAU,YAAY,QAAQ,QAAQ;AAAA,EACzE;AACF;AAGO,mBACL,OACA,SACA;AACA,QAAM,UAAU,0BAA0B,OAAO;AACjD,QAAM,EAAE,aAAa,eAAe,oBAAoB,yBAAyB,iBAC/E,OACA,SACA,MACA,IACF;AAEA,QAAM,iBAAiB,GAAG,gBAAgB;AAE1C,MAAI,QAAQ;AAAO,uBAAmB,gBAAgB,OAAO;AAC7D,SAAO;AACT;AAEO,mBACL,QACA,SACkB;AAClB,QAAM,UAAU,0BAA0B,OAAO;AACjD,QAAM,eAAe,kBAAkB,YAAY;AACnD,QAAM,EAAE,aAAa,sBAAsB,iBAAiB,QAAQ,SAAS,MAAM,IAAI;AACvF,QAAM,gBAAgB,cAAc,gBAAgB;AACpD,MAAI,QAAQ;AAAO,uBAAmB,aAAa;AACnD,SAAO,CAAC,cAAc,aAAa;AACrC;AAEe,sBAIb,OAAU,SAAwC;AAClD,QAAM,UAAU,0BAA0B,OAAO;AACjD,QAAM;AAAA,IACJ,SAAS;AAAA,IACT,aAAa;AAAA,IACb,oBAAoB;AAAA,MAClB,iBAAiB,OAAO,SAAS,IAAI;AAEzC,QAAM,iBAAiB,GAAG,gBAAgB;AAE1C,QAAM,wBAAwB,sBAAsB,KAAK,cAAc;AAEvE,MAAI,QAA+C;AAGnD,QAAM,cAAc,CAClB,iBACG;AACH,QAAM,qCAAS,UAAS,SAAU,CAAC,oCAAS,WAAU,cAAc;AAElE,YAAM;AAAA,QACJ,SAAS;AAAA,QACT,aAAa;AAAA,QACb,oBAAoB;AAAA,UAClB,iBAAiB,MAAM,OAAO,YAAY,GAAG,EAAE,OAAO,MAAM,GAAG,IAAI;AAEvE,YAAM,wBAAwB,GAAG,uBAAuB;AAExD,YAAM,+BAA+B,sBAAsB,KAAK,qBAAqB;AACrF,UAAI;AAAO,cAAM,YAAY;AAC7B,aAAO,EAAE,SAAS,YAAY,YAAY,qBAAqB;AAAA,IAIjE;AACA,WAAO;AAAA,EACT;AAEA,MAAI,QAAQ;AAAO,YAAQ,mBAAmB,uBAAuB,OAAO;AAE5E,SAAO;AAAA,IACL,SAAS;AAAA,IACT,YAAY;AAAA,IACZ;AAAA,EACF;AAKF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/index.cjs.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
"use strict";
|
|
1
2
|
var __create = Object.create;
|
|
2
3
|
var __defProp = Object.defineProperty;
|
|
3
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
@@ -174,12 +175,14 @@ function replaceBackReferences(out, sheetContents) {
|
|
|
174
175
|
return getPosthooks().reduce((prev, hook) => hook(prev), outputSheetContents);
|
|
175
176
|
}
|
|
176
177
|
function createSheet(sheetContents) {
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
178
|
+
var _a;
|
|
179
|
+
if (typeof document === "undefined")
|
|
180
|
+
return null;
|
|
181
|
+
if (typeof ((_a = document == null ? void 0 : document.head) == null ? void 0 : _a.appendChild) !== "function" || typeof (document == null ? void 0 : document.createElement) !== "function")
|
|
182
|
+
return null;
|
|
183
|
+
const styleTag = document.createElement("style");
|
|
184
|
+
styleTag.innerHTML = sheetContents;
|
|
185
|
+
return styleTag;
|
|
183
186
|
}
|
|
184
187
|
function flushSheetContents(sheetContents, options) {
|
|
185
188
|
var _a, _b;
|
package/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.ts", "../../src/createStyles.ts", "../../src/numToAlpha.ts", "../../src/generateClassName.ts", "../../src/plugins.ts"],
|
|
4
|
-
"sourcesContent": ["export type { CreateStylesArgs, CreateStylesOptions } from './createStyles';\nexport { default as createStyles, keyframes, rawStyles } from './createStyles';\nexport { setSeed } from './generateClassName';\nexport type { PosthookPlugin } from './plugins';\nexport { registerPosthook } from './plugins';\nexport type { SimpleStyleRules } from './types';\n", "import { Properties } from 'csstype';\nimport merge from 'deepmerge';\n\nimport { generateClassName } from './generateClassName';\nimport { getPosthooks } from './plugins';\nimport { SimpleStyleRules } from './types';\n\nexport type CreateStylesOptions = Partial<{\n /**\n * If true, automatically renders generated styles\n * to the DOM in an injected <style /> tag\n */\n flush: boolean;\n\n /**\n * If set, along with flush: true,\n * will render the injected <style /> after this element\n */\n insertAfter?: HTMLElement;\n /**\n * If set, along with flush: true,\n * will render the injects <style /> before this element\n */\n insertBefore?: HTMLElement;\n}>;\n\nfunction isNestedSelector(r: string): boolean {\n return /&/g.test(r);\n}\n\nfunction isMedia(r: string): boolean {\n return r.toLowerCase().startsWith('@media');\n}\n\nfunction formatCSSRuleName(rule: string): string {\n return rule.replace(/([A-Z])/g, p1 => `-${p1.toLowerCase()}`);\n}\n\nfunction formatCSSRules(cssRules: Properties): string {\n return Object.entries(cssRules).reduce(\n (prev, [cssProp, cssVal]) => `${prev}${formatCSSRuleName(cssProp)}:${cssVal};`,\n '',\n );\n}\n\nfunction execCreateStyles<T extends SimpleStyleRules, K extends keyof T, O extends { [classKey in K]: string }>(\n rules: T,\n options: CreateStylesOptions,\n parentSelector: string | null,\n noGenerateClassName: boolean = false,\n): { classes: O; sheetBuffer: string; mediaQueriesBuffer: string } {\n const out = {} as O;\n let sheetBuffer = '';\n let mediaQueriesBuffer = '';\n const styleEntries = Object.entries(rules);\n let ruleWriteOpen = false;\n const guardCloseRuleWrite = () => {\n if (ruleWriteOpen) sheetBuffer += '}';\n ruleWriteOpen = false;\n };\n for (const [classNameOrCSSRule, classNameRules] of styleEntries) {\n // if the classNameRules is a string, we are dealing with a display: none; type rule\n if (isMedia(classNameOrCSSRule)) {\n if (typeof classNameRules !== 'object')\n throw new Error('Unable to map @media query because rules / props are an invalid type');\n guardCloseRuleWrite();\n mediaQueriesBuffer += `${classNameOrCSSRule}{`;\n const { mediaQueriesBuffer: mediaQueriesOutput, sheetBuffer: regularOutput } = execCreateStyles(\n classNameRules as T,\n options,\n parentSelector,\n );\n mediaQueriesBuffer += regularOutput;\n mediaQueriesBuffer += '}';\n mediaQueriesBuffer += mediaQueriesOutput;\n } else if (isNestedSelector(classNameOrCSSRule)) {\n if (!parentSelector) throw new Error('Unable to generate nested rule because parentSelector is missing');\n guardCloseRuleWrite();\n // format of { '& > span': { display: 'none' } } (or further nesting)\n const replaced = classNameOrCSSRule.replace(/&/g, parentSelector);\n for (const selector of replaced.split(/,\\s*/)) {\n const { mediaQueriesBuffer: mediaQueriesOutput, sheetBuffer: regularOutput } = execCreateStyles(\n classNameRules as T,\n options,\n selector,\n );\n sheetBuffer += regularOutput;\n mediaQueriesBuffer += mediaQueriesOutput;\n }\n } else if (!parentSelector && typeof classNameRules === 'object') {\n guardCloseRuleWrite();\n const generated = noGenerateClassName ? classNameOrCSSRule : generateClassName(classNameOrCSSRule);\n (out as any)[classNameOrCSSRule] = generated;\n const generatedSelector = `${noGenerateClassName ? '' : '.'}${generated}`;\n const { mediaQueriesBuffer: mediaQueriesOutput, sheetBuffer: regularOutput } = execCreateStyles(\n classNameRules as T,\n options,\n generatedSelector,\n );\n sheetBuffer += regularOutput;\n mediaQueriesBuffer += mediaQueriesOutput;\n } else {\n if (!parentSelector) throw new Error('Unable to write css props because parent selector is null');\n if (!ruleWriteOpen) {\n sheetBuffer += `${parentSelector}{${formatCSSRules({ [classNameOrCSSRule]: classNameRules })}`;\n ruleWriteOpen = true;\n } else sheetBuffer += formatCSSRules({ [classNameOrCSSRule]: classNameRules });\n }\n }\n guardCloseRuleWrite();\n return {\n classes: out,\n sheetBuffer,\n mediaQueriesBuffer,\n };\n}\n\nfunction replaceBackReferences<O extends { [key: string]: string }>(out: O, sheetContents: string): string {\n let outputSheetContents = sheetContents;\n const toReplace: string[] = [];\n const toReplaceRegex = /\\$\\w([a-zA-Z0-9_-]+)?/gm;\n let matches = toReplaceRegex.exec(outputSheetContents);\n while (matches) {\n toReplace.push(matches[0].valueOf());\n matches = toReplaceRegex.exec(outputSheetContents);\n }\n for (const r of toReplace) {\n outputSheetContents = outputSheetContents.replace(r, `.${out[r.substring(1)]}`);\n }\n return getPosthooks().reduce((prev, hook) => hook(prev), outputSheetContents);\n}\n\nfunction createSheet(sheetContents: string) {\n if (\n typeof document !== 'undefined' &&\n document.head &&\n document.head.appendChild &&\n typeof document.createElement === 'function'\n ) {\n const styleTag = document.createElement('style');\n styleTag.innerHTML = sheetContents;\n return styleTag;\n }\n return null;\n}\n\nfunction flushSheetContents(sheetContents: string, options?: CreateStylesOptions) {\n // In case we're in come weird test environment that doesn't support JSDom\n const styleTag = createSheet(sheetContents);\n if (styleTag) {\n if (options?.insertAfter && options?.insertBefore) {\n throw new Error('Both insertAfter and insertBefore were provided. Please choose only one.');\n }\n if (options?.insertAfter?.after) options.insertAfter.after(styleTag as Node);\n else if (options?.insertBefore?.before) options.insertBefore.before(styleTag as Node);\n else document.head.appendChild(styleTag);\n }\n return styleTag;\n}\n\nfunction coerceCreateStylesOptions(options?: CreateStylesOptions): CreateStylesOptions {\n return {\n flush: options && typeof options.flush === 'boolean' ? options.flush : true,\n };\n}\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport function rawStyles<T extends SimpleStyleRules, K extends keyof T, O extends { [key in K]: string }>(\n rules: T,\n options?: Partial<CreateStylesOptions>,\n) {\n const coerced = coerceCreateStylesOptions(options);\n const { sheetBuffer: sheetContents, mediaQueriesBuffer: mediaQueriesContents } = execCreateStyles(\n rules,\n coerced,\n null,\n true,\n );\n\n const mergedContents = `${sheetContents}${mediaQueriesContents}`;\n\n if (coerced.flush) flushSheetContents(mergedContents, options);\n return mergedContents;\n}\n\nexport function keyframes<T extends { [increment: string]: Properties }>(\n frames: T,\n options?: CreateStylesOptions,\n): [string, string] {\n const coerced = coerceCreateStylesOptions(options);\n const keyframeName = generateClassName('keyframes_');\n const { sheetBuffer: keyframesContents } = execCreateStyles(frames, coerced, null, true);\n const sheetContents = `@keyframes ${keyframeName}{${keyframesContents}}`;\n if (coerced.flush) flushSheetContents(sheetContents);\n return [keyframeName, sheetContents];\n}\n\nexport default function createStyles<\n T extends SimpleStyleRules,\n K extends keyof T,\n O extends { [classKey in K]: string },\n>(rules: T, options?: Partial<CreateStylesOptions>) {\n const coerced = coerceCreateStylesOptions(options);\n const {\n classes: out,\n sheetBuffer: sheetContents,\n mediaQueriesBuffer: mediaQueriesContents,\n } = execCreateStyles(rules, coerced, null);\n\n const mergedContents = `${sheetContents}${mediaQueriesContents}`;\n\n const replacedSheetContents = replaceBackReferences(out, mergedContents);\n\n let sheet: ReturnType<typeof flushSheetContents> = null;\n\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const updateSheet = <T2 extends SimpleStyleRules, K2 extends keyof T2, O2 extends { [classKey in K2]: string }>(\n updatedRules: Partial<T2>,\n ) => {\n if (((options?.flush && sheet) || !options?.flush) && updatedRules) {\n // We prefer the first set, and then we shallow merge\n const {\n classes: updatedOut,\n sheetBuffer: updatedSheetContents,\n mediaQueriesBuffer: updatedMediaQueriesContents,\n } = execCreateStyles(merge(rules, updatedRules), { flush: false }, null);\n\n const updatedMergedContents = `${updatedSheetContents}${updatedMediaQueriesContents}`;\n\n const updatedReplacedSheetContents = replaceBackReferences(out, updatedMergedContents);\n if (sheet) sheet.innerHTML = updatedReplacedSheetContents;\n return { classes: updatedOut, stylesheet: updatedSheetContents } as {\n classes: typeof updatedOut;\n stylesheet: string;\n };\n }\n return null;\n };\n\n if (coerced.flush) sheet = flushSheetContents(replacedSheetContents, options);\n // Need this TS cast to get solid code assist from the consumption-side\n return {\n classes: out as unknown,\n stylesheet: replacedSheetContents,\n updateSheet,\n } as {\n classes: O;\n stylesheet: string;\n updateSheet: typeof updateSheet;\n };\n}\n\nexport type CreateStylesArgs = Parameters<typeof createStyles>;\n", "const alphas = 'abcdefghijklmnopqrstuvwxyz'.split('');\n\nexport default function numToAlpha(num: number): string {\n return alphas[num];\n}\n", "import numToAlpha from './numToAlpha';\n\nlet inc = Date.now();\n\nexport function setSeed(seed: number | null): void {\n if (seed === null) {\n inc = Date.now();\n return;\n }\n if (typeof seed !== 'number') throw Error('Unable to setSeed as provided seed was not a valid number');\n if (seed === Number.MAX_SAFE_INTEGER)\n throw Error('Unable to setSeed because the seed was already the maximum safe JavaScript number allowed');\n if (seed === Number.POSITIVE_INFINITY || seed === Number.NEGATIVE_INFINITY)\n throw new Error('Unable to setSeed. Positive or negative infinity is not allowed');\n if (seed < 0) throw new Error('Unable to setSeed. Seed must be a number >= 0');\n inc = seed;\n}\n\nconst numPairsRegex = /(\\d{1,2})/g;\n\nexport function getUniqueSuffix(): string {\n const numPairs: string[] = [];\n const incStr = inc.toString();\n let result = numPairsRegex.exec(incStr);\n while (result) {\n numPairs.push(result[0]);\n result = numPairsRegex.exec(incStr);\n }\n let out = '_';\n numPairs.forEach(pair => {\n const val = +pair;\n if (val > 25) {\n const [first, second] = pair.split('');\n out += `${numToAlpha(+first)}${numToAlpha(+second)}`;\n } else out += numToAlpha(val);\n });\n inc += 1;\n return out;\n}\n\nexport function generateClassName(c: string): string {\n return `${c}${getUniqueSuffix()}`;\n}\n", "export type PosthookPlugin = (sheetContents: string) => string;\n\nconst posthooks: PosthookPlugin[] = [];\n\nexport function getPosthooks(): PosthookPlugin[] {\n return posthooks;\n}\n\nexport function registerPosthook(posthook: PosthookPlugin) {\n posthooks.push(posthook);\n}\n"],
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["export type { CreateStylesArgs, CreateStylesOptions } from './createStyles';\nexport { default as createStyles, keyframes, rawStyles } from './createStyles';\nexport { setSeed } from './generateClassName';\nexport type { PosthookPlugin } from './plugins';\nexport { registerPosthook } from './plugins';\nexport type { SimpleStyleRules } from './types';\n", "import { Properties } from 'csstype';\nimport merge from 'deepmerge';\n\nimport { generateClassName } from './generateClassName';\nimport { getPosthooks } from './plugins';\nimport { SimpleStyleRules } from './types';\n\nexport type CreateStylesOptions = Partial<{\n /**\n * If true, automatically renders generated styles\n * to the DOM in an injected <style /> tag\n */\n flush: boolean;\n\n /**\n * If set, along with flush: true,\n * will render the injected <style /> after this element\n */\n insertAfter?: HTMLElement;\n /**\n * If set, along with flush: true,\n * will render the injects <style /> before this element\n */\n insertBefore?: HTMLElement;\n}>;\n\nfunction isNestedSelector(r: string): boolean {\n return /&/g.test(r);\n}\n\nfunction isMedia(r: string): boolean {\n return r.toLowerCase().startsWith('@media');\n}\n\nfunction formatCSSRuleName(rule: string): string {\n return rule.replace(/([A-Z])/g, p1 => `-${p1.toLowerCase()}`);\n}\n\nfunction formatCSSRules(cssRules: Properties): string {\n return Object.entries(cssRules).reduce(\n (prev, [cssProp, cssVal]) => `${prev}${formatCSSRuleName(cssProp)}:${cssVal};`,\n '',\n );\n}\n\nfunction execCreateStyles<T extends SimpleStyleRules, K extends keyof T, O extends { [classKey in K]: string }>(\n rules: T,\n options: CreateStylesOptions,\n parentSelector: string | null,\n noGenerateClassName: boolean = false,\n): { classes: O; sheetBuffer: string; mediaQueriesBuffer: string } {\n const out = {} as O;\n let sheetBuffer = '';\n let mediaQueriesBuffer = '';\n const styleEntries = Object.entries(rules);\n let ruleWriteOpen = false;\n const guardCloseRuleWrite = () => {\n if (ruleWriteOpen) sheetBuffer += '}';\n ruleWriteOpen = false;\n };\n for (const [classNameOrCSSRule, classNameRules] of styleEntries) {\n // if the classNameRules is a string, we are dealing with a display: none; type rule\n if (isMedia(classNameOrCSSRule)) {\n if (typeof classNameRules !== 'object')\n throw new Error('Unable to map @media query because rules / props are an invalid type');\n guardCloseRuleWrite();\n mediaQueriesBuffer += `${classNameOrCSSRule}{`;\n const { mediaQueriesBuffer: mediaQueriesOutput, sheetBuffer: regularOutput } = execCreateStyles(\n classNameRules as T,\n options,\n parentSelector,\n );\n mediaQueriesBuffer += regularOutput;\n mediaQueriesBuffer += '}';\n mediaQueriesBuffer += mediaQueriesOutput;\n } else if (isNestedSelector(classNameOrCSSRule)) {\n if (!parentSelector) throw new Error('Unable to generate nested rule because parentSelector is missing');\n guardCloseRuleWrite();\n // format of { '& > span': { display: 'none' } } (or further nesting)\n const replaced = classNameOrCSSRule.replace(/&/g, parentSelector);\n for (const selector of replaced.split(/,\\s*/)) {\n const { mediaQueriesBuffer: mediaQueriesOutput, sheetBuffer: regularOutput } = execCreateStyles(\n classNameRules as T,\n options,\n selector,\n );\n sheetBuffer += regularOutput;\n mediaQueriesBuffer += mediaQueriesOutput;\n }\n } else if (!parentSelector && typeof classNameRules === 'object') {\n guardCloseRuleWrite();\n const generated = noGenerateClassName ? classNameOrCSSRule : generateClassName(classNameOrCSSRule);\n (out as any)[classNameOrCSSRule] = generated;\n const generatedSelector = `${noGenerateClassName ? '' : '.'}${generated}`;\n const { mediaQueriesBuffer: mediaQueriesOutput, sheetBuffer: regularOutput } = execCreateStyles(\n classNameRules as T,\n options,\n generatedSelector,\n );\n sheetBuffer += regularOutput;\n mediaQueriesBuffer += mediaQueriesOutput;\n } else {\n if (!parentSelector) throw new Error('Unable to write css props because parent selector is null');\n if (!ruleWriteOpen) {\n sheetBuffer += `${parentSelector}{${formatCSSRules({ [classNameOrCSSRule]: classNameRules })}`;\n ruleWriteOpen = true;\n } else sheetBuffer += formatCSSRules({ [classNameOrCSSRule]: classNameRules });\n }\n }\n guardCloseRuleWrite();\n return {\n classes: out,\n sheetBuffer,\n mediaQueriesBuffer,\n };\n}\n\nfunction replaceBackReferences<O extends { [key: string]: string }>(out: O, sheetContents: string): string {\n let outputSheetContents = sheetContents;\n const toReplace: string[] = [];\n const toReplaceRegex = /\\$\\w([a-zA-Z0-9_-]+)?/gm;\n let matches = toReplaceRegex.exec(outputSheetContents);\n while (matches) {\n toReplace.push(matches[0].valueOf());\n matches = toReplaceRegex.exec(outputSheetContents);\n }\n for (const r of toReplace) {\n outputSheetContents = outputSheetContents.replace(r, `.${out[r.substring(1)]}`);\n }\n return getPosthooks().reduce((prev, hook) => hook(prev), outputSheetContents);\n}\n\nfunction createSheet(sheetContents: string) {\n if (typeof document === 'undefined') return null;\n if (typeof document?.head?.appendChild !== 'function' || typeof document?.createElement !== 'function') return null;\n const styleTag = document.createElement('style');\n styleTag.innerHTML = sheetContents;\n return styleTag;\n}\n\nfunction flushSheetContents(sheetContents: string, options?: CreateStylesOptions) {\n // In case we're in come weird test environment that doesn't support JSDom\n const styleTag = createSheet(sheetContents);\n if (styleTag) {\n if (options?.insertAfter && options?.insertBefore) {\n throw new Error('Both insertAfter and insertBefore were provided. Please choose only one.');\n }\n if (options?.insertAfter?.after) options.insertAfter.after(styleTag as Node);\n else if (options?.insertBefore?.before) options.insertBefore.before(styleTag as Node);\n else document.head.appendChild(styleTag);\n }\n return styleTag;\n}\n\nfunction coerceCreateStylesOptions(options?: CreateStylesOptions): CreateStylesOptions {\n return {\n flush: options && typeof options.flush === 'boolean' ? options.flush : true,\n };\n}\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport function rawStyles<T extends SimpleStyleRules, K extends keyof T, O extends { [key in K]: string }>(\n rules: T,\n options?: Partial<CreateStylesOptions>,\n) {\n const coerced = coerceCreateStylesOptions(options);\n const { sheetBuffer: sheetContents, mediaQueriesBuffer: mediaQueriesContents } = execCreateStyles(\n rules,\n coerced,\n null,\n true,\n );\n\n const mergedContents = `${sheetContents}${mediaQueriesContents}`;\n\n if (coerced.flush) flushSheetContents(mergedContents, options);\n return mergedContents;\n}\n\nexport function keyframes<T extends { [increment: string]: Properties }>(\n frames: T,\n options?: CreateStylesOptions,\n): [string, string] {\n const coerced = coerceCreateStylesOptions(options);\n const keyframeName = generateClassName('keyframes_');\n const { sheetBuffer: keyframesContents } = execCreateStyles(frames, coerced, null, true);\n const sheetContents = `@keyframes ${keyframeName}{${keyframesContents}}`;\n if (coerced.flush) flushSheetContents(sheetContents);\n return [keyframeName, sheetContents];\n}\n\nexport default function createStyles<\n T extends SimpleStyleRules,\n K extends keyof T,\n O extends { [classKey in K]: string },\n>(rules: T, options?: Partial<CreateStylesOptions>) {\n const coerced = coerceCreateStylesOptions(options);\n const {\n classes: out,\n sheetBuffer: sheetContents,\n mediaQueriesBuffer: mediaQueriesContents,\n } = execCreateStyles(rules, coerced, null);\n\n const mergedContents = `${sheetContents}${mediaQueriesContents}`;\n\n const replacedSheetContents = replaceBackReferences(out, mergedContents);\n\n let sheet: ReturnType<typeof flushSheetContents> = null;\n\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const updateSheet = <T2 extends SimpleStyleRules, K2 extends keyof T2, O2 extends { [classKey in K2]: string }>(\n updatedRules: Partial<T2>,\n ) => {\n if (((options?.flush && sheet) || !options?.flush) && updatedRules) {\n // We prefer the first set, and then we shallow merge\n const {\n classes: updatedOut,\n sheetBuffer: updatedSheetContents,\n mediaQueriesBuffer: updatedMediaQueriesContents,\n } = execCreateStyles(merge(rules, updatedRules), { flush: false }, null);\n\n const updatedMergedContents = `${updatedSheetContents}${updatedMediaQueriesContents}`;\n\n const updatedReplacedSheetContents = replaceBackReferences(out, updatedMergedContents);\n if (sheet) sheet.innerHTML = updatedReplacedSheetContents;\n return { classes: updatedOut, stylesheet: updatedSheetContents } as {\n classes: typeof updatedOut;\n stylesheet: string;\n };\n }\n return null;\n };\n\n if (coerced.flush) sheet = flushSheetContents(replacedSheetContents, options);\n // Need this TS cast to get solid code assist from the consumption-side\n return {\n classes: out as unknown,\n stylesheet: replacedSheetContents,\n updateSheet,\n } as {\n classes: O;\n stylesheet: string;\n updateSheet: typeof updateSheet;\n };\n}\n\nexport type CreateStylesArgs = Parameters<typeof createStyles>;\n", "const alphas = 'abcdefghijklmnopqrstuvwxyz'.split('');\n\nexport default function numToAlpha(num: number): string {\n return alphas[num];\n}\n", "import numToAlpha from './numToAlpha';\n\nlet inc = Date.now();\n\nexport function setSeed(seed: number | null): void {\n if (seed === null) {\n inc = Date.now();\n return;\n }\n if (typeof seed !== 'number') throw Error('Unable to setSeed as provided seed was not a valid number');\n if (seed === Number.MAX_SAFE_INTEGER)\n throw Error('Unable to setSeed because the seed was already the maximum safe JavaScript number allowed');\n if (seed === Number.POSITIVE_INFINITY || seed === Number.NEGATIVE_INFINITY)\n throw new Error('Unable to setSeed. Positive or negative infinity is not allowed');\n if (seed < 0) throw new Error('Unable to setSeed. Seed must be a number >= 0');\n inc = seed;\n}\n\nconst numPairsRegex = /(\\d{1,2})/g;\n\nexport function getUniqueSuffix(): string {\n const numPairs: string[] = [];\n const incStr = inc.toString();\n let result = numPairsRegex.exec(incStr);\n while (result) {\n numPairs.push(result[0]);\n result = numPairsRegex.exec(incStr);\n }\n let out = '_';\n numPairs.forEach(pair => {\n const val = +pair;\n if (val > 25) {\n const [first, second] = pair.split('');\n out += `${numToAlpha(+first)}${numToAlpha(+second)}`;\n } else out += numToAlpha(val);\n });\n inc += 1;\n return out;\n}\n\nexport function generateClassName(c: string): string {\n return `${c}${getUniqueSuffix()}`;\n}\n", "export type PosthookPlugin = (sheetContents: string) => string;\n\nconst posthooks: PosthookPlugin[] = [];\n\nexport function getPosthooks(): PosthookPlugin[] {\n return posthooks;\n}\n\nexport function registerPosthook(posthook: PosthookPlugin) {\n posthooks.push(posthook);\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,27 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "simplestyle-js",
|
|
3
|
-
"version": "3.2.
|
|
3
|
+
"version": "3.2.2-beta.1",
|
|
4
4
|
"description": "An incredibly straightforward and simple CSS-in-JS solution with zero runtime dependencies, and out-of-the-box TypeScript support",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "git+https://github.com/benduran/simplestyle.git"
|
|
8
8
|
},
|
|
9
|
-
"scripts": {
|
|
10
|
-
"build": "run-s clean build:package copy",
|
|
11
|
-
"build:package": "package-bundler -c -r -t ./tsconfig.build.json",
|
|
12
|
-
"clean": "rm -rf ./dist",
|
|
13
|
-
"copy": "cp ./README.md ./dist && cp ./LICENSE ./dist",
|
|
14
|
-
"coveralls": "run-s test:coverage coverage:pipe",
|
|
15
|
-
"coverage:pipe": "cat ./coverage/lcov.info | coveralls",
|
|
16
|
-
"lint": "eslint './src/**/*.ts'",
|
|
17
|
-
"lint:fixall": "eslint './src/**/*.ts' --fix",
|
|
18
|
-
"setup": "npm install -g pnpm@$(cat pnpm-version) && pnpm install",
|
|
19
|
-
"test:coverage": "jest --coverage",
|
|
20
|
-
"test": "jest",
|
|
21
|
-
"test:watch": "jest --watch",
|
|
22
|
-
"test:debug": "node --inspect-brk ./node_modules/.bin/jest",
|
|
23
|
-
"git-pre-commit": "pnpm lint && pnpm test"
|
|
24
|
-
},
|
|
25
9
|
"keywords": [
|
|
26
10
|
"CSS-in-JS",
|
|
27
11
|
"CSS",
|
|
@@ -32,31 +16,32 @@
|
|
|
32
16
|
"author": "Benjamin Duran <stratodyne@gmail.com>",
|
|
33
17
|
"license": "MIT",
|
|
34
18
|
"devDependencies": {
|
|
35
|
-
"@better-builds/package-bundler": "^1.
|
|
36
|
-
"@jest/types": "^
|
|
37
|
-
"@testing-library/react": "^
|
|
19
|
+
"@better-builds/package-bundler": "^1.3.1",
|
|
20
|
+
"@jest/types": "^28.1.1",
|
|
21
|
+
"@testing-library/react": "^13.3.0",
|
|
38
22
|
"@types/autoprefixer": "^10.2.0",
|
|
39
|
-
"@types/jest": "^
|
|
23
|
+
"@types/jest": "^28.1.4",
|
|
40
24
|
"@types/jsdom": "^16.2.14",
|
|
41
|
-
"@types/react": "^
|
|
42
|
-
"@types/react-dom": "^
|
|
25
|
+
"@types/react": "^18.0.15",
|
|
26
|
+
"@types/react-dom": "^18.0.6",
|
|
43
27
|
"@zeit/git-hooks": "^0.1.4",
|
|
44
|
-
"autoprefixer": "^10.4.
|
|
45
|
-
"babel-jest": "^
|
|
28
|
+
"autoprefixer": "^10.4.7",
|
|
29
|
+
"babel-jest": "^28.1.2",
|
|
46
30
|
"coveralls": "^3.1.1",
|
|
47
31
|
"eslint-config-react-yas": "^2.0.0",
|
|
48
|
-
"jest": "^
|
|
49
|
-
"jsdom": "^
|
|
32
|
+
"jest": "^28.1.2",
|
|
33
|
+
"jest-environment-jsdom": "^28.1.2",
|
|
34
|
+
"jsdom": "^20.0.0",
|
|
50
35
|
"npm-run-all": "^4.1.5",
|
|
51
|
-
"postcss": "^8.4.
|
|
52
|
-
"react": "^
|
|
53
|
-
"react-dom": "^
|
|
54
|
-
"ts-jest": "^
|
|
55
|
-
"ts-node": "^10.
|
|
56
|
-
"typescript": "^4.
|
|
36
|
+
"postcss": "^8.4.14",
|
|
37
|
+
"react": "^18.2.0",
|
|
38
|
+
"react-dom": "^18.2.0",
|
|
39
|
+
"ts-jest": "^28.0.5",
|
|
40
|
+
"ts-node": "^10.8.2",
|
|
41
|
+
"typescript": "^4.7.4"
|
|
57
42
|
},
|
|
58
43
|
"dependencies": {
|
|
59
|
-
"csstype": "^3.0
|
|
44
|
+
"csstype": "^3.1.0",
|
|
60
45
|
"deepmerge": "^4.2.2"
|
|
61
46
|
},
|
|
62
47
|
"peerDependencies": {
|
|
@@ -67,5 +52,21 @@
|
|
|
67
52
|
},
|
|
68
53
|
"main": "./index.cjs.js",
|
|
69
54
|
"module": "./index.js",
|
|
70
|
-
"types": "./index.d.ts"
|
|
55
|
+
"types": "./index.d.ts",
|
|
56
|
+
"scripts": {
|
|
57
|
+
"build": "run-s clean build:package copy",
|
|
58
|
+
"build:package": "package-bundler -c -r -t ./tsconfig.build.json",
|
|
59
|
+
"clean": "rm -rf ./dist",
|
|
60
|
+
"copy": "cp ./README.md ./dist && cp ./LICENSE ./dist",
|
|
61
|
+
"coveralls": "run-s test:coverage coverage:pipe",
|
|
62
|
+
"coverage:pipe": "cat ./coverage/lcov.info | coveralls",
|
|
63
|
+
"lint": "eslint './src/**/*.ts'",
|
|
64
|
+
"lint:fixall": "eslint './src/**/*.ts' --fix",
|
|
65
|
+
"setup": "npm install -g pnpm@$(cat pnpm-version) && pnpm install",
|
|
66
|
+
"test:coverage": "jest --coverage",
|
|
67
|
+
"test": "jest",
|
|
68
|
+
"test:watch": "jest --watch",
|
|
69
|
+
"test:debug": "node --inspect-brk ./node_modules/.bin/jest",
|
|
70
|
+
"git-pre-commit": "pnpm lint && pnpm test"
|
|
71
|
+
}
|
|
71
72
|
}
|
package/react/index.cjs.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
"use strict";
|
|
1
2
|
var __create = Object.create;
|
|
2
3
|
var __defProp = Object.defineProperty;
|
|
3
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
@@ -155,12 +156,14 @@ function replaceBackReferences(out, sheetContents) {
|
|
|
155
156
|
return getPosthooks().reduce((prev, hook) => hook(prev), outputSheetContents);
|
|
156
157
|
}
|
|
157
158
|
function createSheet(sheetContents) {
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
159
|
+
var _a;
|
|
160
|
+
if (typeof document === "undefined")
|
|
161
|
+
return null;
|
|
162
|
+
if (typeof ((_a = document == null ? void 0 : document.head) == null ? void 0 : _a.appendChild) !== "function" || typeof (document == null ? void 0 : document.createElement) !== "function")
|
|
163
|
+
return null;
|
|
164
|
+
const styleTag = document.createElement("style");
|
|
165
|
+
styleTag.innerHTML = sheetContents;
|
|
166
|
+
return styleTag;
|
|
164
167
|
}
|
|
165
168
|
function flushSheetContents(sheetContents, options) {
|
|
166
169
|
var _a, _b;
|
|
@@ -242,14 +245,18 @@ function useCreateStyles(rules, options) {
|
|
|
242
245
|
const [cachedRules, setCachedRules] = (0, import_react.useState)(() => rules);
|
|
243
246
|
const cachedOptions = (0, import_react.useMemo)(() => ({ ...options }), [options]);
|
|
244
247
|
const didFirstWriteRef = (0, import_react.useRef)(false);
|
|
245
|
-
const styleTagRef = (0, import_react.useRef)(document.createElement("style"));
|
|
248
|
+
const styleTagRef = (0, import_react.useRef)(typeof document !== void 0 ? document.createElement("style") : null);
|
|
246
249
|
const [{ classes, stylesheet, updateSheet }, setCreateStyles] = (0, import_react.useState)(() => createStyles(rules, { ...cachedOptions, flush: false }));
|
|
247
250
|
(0, import_react.useEffect)(() => {
|
|
251
|
+
if (!styleTagRef.current)
|
|
252
|
+
return;
|
|
248
253
|
const { current: s } = styleTagRef;
|
|
249
254
|
document.head.appendChild(s);
|
|
250
255
|
return () => s.remove();
|
|
251
256
|
}, []);
|
|
252
257
|
(0, import_react.useEffect)(() => {
|
|
258
|
+
if (!styleTagRef.current)
|
|
259
|
+
return;
|
|
253
260
|
if (!didFirstWriteRef.current && !styleTagRef.current.innerHTML) {
|
|
254
261
|
didFirstWriteRef.current = true;
|
|
255
262
|
styleTagRef.current.innerHTML = stylesheet;
|
package/react/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/react/index.ts", "../../../src/react/useCreateStyles.ts", "../../../src/createStyles.ts", "../../../src/numToAlpha.ts", "../../../src/generateClassName.ts", "../../../src/plugins.ts", "../../../src/util/deepEqual.ts"],
|
|
4
|
-
"sourcesContent": ["export * from './useCreateStyles';\n", "import { useEffect, useMemo, useRef, useState } from 'react';\n\nimport createStyles, { CreateStylesOptions } from '../createStyles';\nimport { SimpleStyleRules } from '../types';\nimport { deepEqual } from '../util';\n\nexport function useCreateStyles<T extends SimpleStyleRules, K extends keyof T, O extends { [classKey in K]: string }>(\n rules: T,\n options?: Partial<Omit<CreateStylesOptions, 'flush'>>,\n) {\n const [cachedRules, setCachedRules] = useState(() => rules);\n const cachedOptions = useMemo(() => ({ ...options } as Partial<Omit<CreateStylesOptions, 'flush'>>), [options]);\n const didFirstWriteRef = useRef(false);\n const styleTagRef = useRef(document.createElement('style'));\n\n const [{ classes, stylesheet, updateSheet }, setCreateStyles] = useState(() =>\n createStyles<T, K, O>(rules, { ...cachedOptions, flush: false }),\n );\n\n useEffect(() => {\n const { current: s } = styleTagRef;\n document.head.appendChild(s);\n return () => s.remove();\n }, []);\n useEffect(() => {\n if (!didFirstWriteRef.current && !styleTagRef.current.innerHTML) {\n didFirstWriteRef.current = true;\n styleTagRef.current.innerHTML = stylesheet;\n return;\n } else if (!deepEqual(rules, cachedRules)) {\n setCachedRules(rules);\n const updated = updateSheet(rules);\n if (updated?.stylesheet) {\n styleTagRef.current.innerHTML = updated.stylesheet;\n setCreateStyles({ ...updated, updateSheet } as any);\n }\n }\n }, [cachedRules, rules, stylesheet, updateSheet]);\n return classes;\n}\n", "import { Properties } from 'csstype';\nimport merge from 'deepmerge';\n\nimport { generateClassName } from './generateClassName';\nimport { getPosthooks } from './plugins';\nimport { SimpleStyleRules } from './types';\n\nexport type CreateStylesOptions = Partial<{\n /**\n * If true, automatically renders generated styles\n * to the DOM in an injected <style /> tag\n */\n flush: boolean;\n\n /**\n * If set, along with flush: true,\n * will render the injected <style /> after this element\n */\n insertAfter?: HTMLElement;\n /**\n * If set, along with flush: true,\n * will render the injects <style /> before this element\n */\n insertBefore?: HTMLElement;\n}>;\n\nfunction isNestedSelector(r: string): boolean {\n return /&/g.test(r);\n}\n\nfunction isMedia(r: string): boolean {\n return r.toLowerCase().startsWith('@media');\n}\n\nfunction formatCSSRuleName(rule: string): string {\n return rule.replace(/([A-Z])/g, p1 => `-${p1.toLowerCase()}`);\n}\n\nfunction formatCSSRules(cssRules: Properties): string {\n return Object.entries(cssRules).reduce(\n (prev, [cssProp, cssVal]) => `${prev}${formatCSSRuleName(cssProp)}:${cssVal};`,\n '',\n );\n}\n\nfunction execCreateStyles<T extends SimpleStyleRules, K extends keyof T, O extends { [classKey in K]: string }>(\n rules: T,\n options: CreateStylesOptions,\n parentSelector: string | null,\n noGenerateClassName: boolean = false,\n): { classes: O; sheetBuffer: string; mediaQueriesBuffer: string } {\n const out = {} as O;\n let sheetBuffer = '';\n let mediaQueriesBuffer = '';\n const styleEntries = Object.entries(rules);\n let ruleWriteOpen = false;\n const guardCloseRuleWrite = () => {\n if (ruleWriteOpen) sheetBuffer += '}';\n ruleWriteOpen = false;\n };\n for (const [classNameOrCSSRule, classNameRules] of styleEntries) {\n // if the classNameRules is a string, we are dealing with a display: none; type rule\n if (isMedia(classNameOrCSSRule)) {\n if (typeof classNameRules !== 'object')\n throw new Error('Unable to map @media query because rules / props are an invalid type');\n guardCloseRuleWrite();\n mediaQueriesBuffer += `${classNameOrCSSRule}{`;\n const { mediaQueriesBuffer: mediaQueriesOutput, sheetBuffer: regularOutput } = execCreateStyles(\n classNameRules as T,\n options,\n parentSelector,\n );\n mediaQueriesBuffer += regularOutput;\n mediaQueriesBuffer += '}';\n mediaQueriesBuffer += mediaQueriesOutput;\n } else if (isNestedSelector(classNameOrCSSRule)) {\n if (!parentSelector) throw new Error('Unable to generate nested rule because parentSelector is missing');\n guardCloseRuleWrite();\n // format of { '& > span': { display: 'none' } } (or further nesting)\n const replaced = classNameOrCSSRule.replace(/&/g, parentSelector);\n for (const selector of replaced.split(/,\\s*/)) {\n const { mediaQueriesBuffer: mediaQueriesOutput, sheetBuffer: regularOutput } = execCreateStyles(\n classNameRules as T,\n options,\n selector,\n );\n sheetBuffer += regularOutput;\n mediaQueriesBuffer += mediaQueriesOutput;\n }\n } else if (!parentSelector && typeof classNameRules === 'object') {\n guardCloseRuleWrite();\n const generated = noGenerateClassName ? classNameOrCSSRule : generateClassName(classNameOrCSSRule);\n (out as any)[classNameOrCSSRule] = generated;\n const generatedSelector = `${noGenerateClassName ? '' : '.'}${generated}`;\n const { mediaQueriesBuffer: mediaQueriesOutput, sheetBuffer: regularOutput } = execCreateStyles(\n classNameRules as T,\n options,\n generatedSelector,\n );\n sheetBuffer += regularOutput;\n mediaQueriesBuffer += mediaQueriesOutput;\n } else {\n if (!parentSelector) throw new Error('Unable to write css props because parent selector is null');\n if (!ruleWriteOpen) {\n sheetBuffer += `${parentSelector}{${formatCSSRules({ [classNameOrCSSRule]: classNameRules })}`;\n ruleWriteOpen = true;\n } else sheetBuffer += formatCSSRules({ [classNameOrCSSRule]: classNameRules });\n }\n }\n guardCloseRuleWrite();\n return {\n classes: out,\n sheetBuffer,\n mediaQueriesBuffer,\n };\n}\n\nfunction replaceBackReferences<O extends { [key: string]: string }>(out: O, sheetContents: string): string {\n let outputSheetContents = sheetContents;\n const toReplace: string[] = [];\n const toReplaceRegex = /\\$\\w([a-zA-Z0-9_-]+)?/gm;\n let matches = toReplaceRegex.exec(outputSheetContents);\n while (matches) {\n toReplace.push(matches[0].valueOf());\n matches = toReplaceRegex.exec(outputSheetContents);\n }\n for (const r of toReplace) {\n outputSheetContents = outputSheetContents.replace(r, `.${out[r.substring(1)]}`);\n }\n return getPosthooks().reduce((prev, hook) => hook(prev), outputSheetContents);\n}\n\nfunction createSheet(sheetContents: string) {\n if (\n typeof document !== 'undefined' &&\n document.head &&\n document.head.appendChild &&\n typeof document.createElement === 'function'\n ) {\n const styleTag = document.createElement('style');\n styleTag.innerHTML = sheetContents;\n return styleTag;\n }\n return null;\n}\n\nfunction flushSheetContents(sheetContents: string, options?: CreateStylesOptions) {\n // In case we're in come weird test environment that doesn't support JSDom\n const styleTag = createSheet(sheetContents);\n if (styleTag) {\n if (options?.insertAfter && options?.insertBefore) {\n throw new Error('Both insertAfter and insertBefore were provided. Please choose only one.');\n }\n if (options?.insertAfter?.after) options.insertAfter.after(styleTag as Node);\n else if (options?.insertBefore?.before) options.insertBefore.before(styleTag as Node);\n else document.head.appendChild(styleTag);\n }\n return styleTag;\n}\n\nfunction coerceCreateStylesOptions(options?: CreateStylesOptions): CreateStylesOptions {\n return {\n flush: options && typeof options.flush === 'boolean' ? options.flush : true,\n };\n}\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport function rawStyles<T extends SimpleStyleRules, K extends keyof T, O extends { [key in K]: string }>(\n rules: T,\n options?: Partial<CreateStylesOptions>,\n) {\n const coerced = coerceCreateStylesOptions(options);\n const { sheetBuffer: sheetContents, mediaQueriesBuffer: mediaQueriesContents } = execCreateStyles(\n rules,\n coerced,\n null,\n true,\n );\n\n const mergedContents = `${sheetContents}${mediaQueriesContents}`;\n\n if (coerced.flush) flushSheetContents(mergedContents, options);\n return mergedContents;\n}\n\nexport function keyframes<T extends { [increment: string]: Properties }>(\n frames: T,\n options?: CreateStylesOptions,\n): [string, string] {\n const coerced = coerceCreateStylesOptions(options);\n const keyframeName = generateClassName('keyframes_');\n const { sheetBuffer: keyframesContents } = execCreateStyles(frames, coerced, null, true);\n const sheetContents = `@keyframes ${keyframeName}{${keyframesContents}}`;\n if (coerced.flush) flushSheetContents(sheetContents);\n return [keyframeName, sheetContents];\n}\n\nexport default function createStyles<\n T extends SimpleStyleRules,\n K extends keyof T,\n O extends { [classKey in K]: string },\n>(rules: T, options?: Partial<CreateStylesOptions>) {\n const coerced = coerceCreateStylesOptions(options);\n const {\n classes: out,\n sheetBuffer: sheetContents,\n mediaQueriesBuffer: mediaQueriesContents,\n } = execCreateStyles(rules, coerced, null);\n\n const mergedContents = `${sheetContents}${mediaQueriesContents}`;\n\n const replacedSheetContents = replaceBackReferences(out, mergedContents);\n\n let sheet: ReturnType<typeof flushSheetContents> = null;\n\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const updateSheet = <T2 extends SimpleStyleRules, K2 extends keyof T2, O2 extends { [classKey in K2]: string }>(\n updatedRules: Partial<T2>,\n ) => {\n if (((options?.flush && sheet) || !options?.flush) && updatedRules) {\n // We prefer the first set, and then we shallow merge\n const {\n classes: updatedOut,\n sheetBuffer: updatedSheetContents,\n mediaQueriesBuffer: updatedMediaQueriesContents,\n } = execCreateStyles(merge(rules, updatedRules), { flush: false }, null);\n\n const updatedMergedContents = `${updatedSheetContents}${updatedMediaQueriesContents}`;\n\n const updatedReplacedSheetContents = replaceBackReferences(out, updatedMergedContents);\n if (sheet) sheet.innerHTML = updatedReplacedSheetContents;\n return { classes: updatedOut, stylesheet: updatedSheetContents } as {\n classes: typeof updatedOut;\n stylesheet: string;\n };\n }\n return null;\n };\n\n if (coerced.flush) sheet = flushSheetContents(replacedSheetContents, options);\n // Need this TS cast to get solid code assist from the consumption-side\n return {\n classes: out as unknown,\n stylesheet: replacedSheetContents,\n updateSheet,\n } as {\n classes: O;\n stylesheet: string;\n updateSheet: typeof updateSheet;\n };\n}\n\nexport type CreateStylesArgs = Parameters<typeof createStyles>;\n", "const alphas = 'abcdefghijklmnopqrstuvwxyz'.split('');\n\nexport default function numToAlpha(num: number): string {\n return alphas[num];\n}\n", "import numToAlpha from './numToAlpha';\n\nlet inc = Date.now();\n\nexport function setSeed(seed: number | null): void {\n if (seed === null) {\n inc = Date.now();\n return;\n }\n if (typeof seed !== 'number') throw Error('Unable to setSeed as provided seed was not a valid number');\n if (seed === Number.MAX_SAFE_INTEGER)\n throw Error('Unable to setSeed because the seed was already the maximum safe JavaScript number allowed');\n if (seed === Number.POSITIVE_INFINITY || seed === Number.NEGATIVE_INFINITY)\n throw new Error('Unable to setSeed. Positive or negative infinity is not allowed');\n if (seed < 0) throw new Error('Unable to setSeed. Seed must be a number >= 0');\n inc = seed;\n}\n\nconst numPairsRegex = /(\\d{1,2})/g;\n\nexport function getUniqueSuffix(): string {\n const numPairs: string[] = [];\n const incStr = inc.toString();\n let result = numPairsRegex.exec(incStr);\n while (result) {\n numPairs.push(result[0]);\n result = numPairsRegex.exec(incStr);\n }\n let out = '_';\n numPairs.forEach(pair => {\n const val = +pair;\n if (val > 25) {\n const [first, second] = pair.split('');\n out += `${numToAlpha(+first)}${numToAlpha(+second)}`;\n } else out += numToAlpha(val);\n });\n inc += 1;\n return out;\n}\n\nexport function generateClassName(c: string): string {\n return `${c}${getUniqueSuffix()}`;\n}\n", "export type PosthookPlugin = (sheetContents: string) => string;\n\nconst posthooks: PosthookPlugin[] = [];\n\nexport function getPosthooks(): PosthookPlugin[] {\n return posthooks;\n}\n\nexport function registerPosthook(posthook: PosthookPlugin) {\n posthooks.push(posthook);\n}\n", "export function deepEqual<\n O1 extends Record<string | number | symbol, any>,\n O2 extends Record<string | number | symbol, any>,\n>(o1: O1, o2: O2): boolean {\n // We'll sort the keys, just in case the user kept things the same but the object is all wonky, order-wise\n const o1Keys = Object.keys(o1).sort();\n const o2Keys = Object.keys(o2).sort();\n if (o1Keys.length !== o2Keys.length) return false;\n if (o1Keys.some((key, i) => o2Keys[i] !== key)) return false;\n // Okay, the keys SHOULD be the same\n // so we need to test their values, recursively, to verify equality\n return o1Keys.reduce<boolean>((prev, key) => {\n if (!prev) return prev; // we've already failed equality checks here\n if (!(key in o2)) return false;\n if (typeof o1[key] !== 'object') {\n return prev && o1[key] === o2[key];\n }\n return prev && deepEqual(o1[key], o2[key]);\n }, true);\n}\n"],
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["export * from './useCreateStyles';\n", "import { useEffect, useMemo, useRef, useState } from 'react';\n\nimport createStyles, { CreateStylesOptions } from '../createStyles';\nimport { SimpleStyleRules } from '../types';\nimport { deepEqual } from '../util';\n\nexport function useCreateStyles<T extends SimpleStyleRules, K extends keyof T, O extends { [classKey in K]: string }>(\n rules: T,\n options?: Partial<Omit<CreateStylesOptions, 'flush'>>,\n) {\n const [cachedRules, setCachedRules] = useState(() => rules);\n const cachedOptions = useMemo(() => ({ ...options } as Partial<Omit<CreateStylesOptions, 'flush'>>), [options]);\n const didFirstWriteRef = useRef(false);\n const styleTagRef = useRef(typeof document !== undefined ? document.createElement('style') : null);\n\n const [{ classes, stylesheet, updateSheet }, setCreateStyles] = useState(() =>\n createStyles<T, K, O>(rules, { ...cachedOptions, flush: false }),\n );\n\n useEffect(() => {\n if (!styleTagRef.current) return;\n const { current: s } = styleTagRef;\n document.head.appendChild(s);\n return () => s.remove();\n }, []);\n useEffect(() => {\n if (!styleTagRef.current) return;\n if (!didFirstWriteRef.current && !styleTagRef.current.innerHTML) {\n didFirstWriteRef.current = true;\n styleTagRef.current.innerHTML = stylesheet;\n return;\n } else if (!deepEqual(rules, cachedRules)) {\n setCachedRules(rules);\n const updated = updateSheet(rules);\n if (updated?.stylesheet) {\n styleTagRef.current.innerHTML = updated.stylesheet;\n setCreateStyles({ ...updated, updateSheet } as any);\n }\n }\n }, [cachedRules, rules, stylesheet, updateSheet]);\n return classes;\n}\n", "import { Properties } from 'csstype';\nimport merge from 'deepmerge';\n\nimport { generateClassName } from './generateClassName';\nimport { getPosthooks } from './plugins';\nimport { SimpleStyleRules } from './types';\n\nexport type CreateStylesOptions = Partial<{\n /**\n * If true, automatically renders generated styles\n * to the DOM in an injected <style /> tag\n */\n flush: boolean;\n\n /**\n * If set, along with flush: true,\n * will render the injected <style /> after this element\n */\n insertAfter?: HTMLElement;\n /**\n * If set, along with flush: true,\n * will render the injects <style /> before this element\n */\n insertBefore?: HTMLElement;\n}>;\n\nfunction isNestedSelector(r: string): boolean {\n return /&/g.test(r);\n}\n\nfunction isMedia(r: string): boolean {\n return r.toLowerCase().startsWith('@media');\n}\n\nfunction formatCSSRuleName(rule: string): string {\n return rule.replace(/([A-Z])/g, p1 => `-${p1.toLowerCase()}`);\n}\n\nfunction formatCSSRules(cssRules: Properties): string {\n return Object.entries(cssRules).reduce(\n (prev, [cssProp, cssVal]) => `${prev}${formatCSSRuleName(cssProp)}:${cssVal};`,\n '',\n );\n}\n\nfunction execCreateStyles<T extends SimpleStyleRules, K extends keyof T, O extends { [classKey in K]: string }>(\n rules: T,\n options: CreateStylesOptions,\n parentSelector: string | null,\n noGenerateClassName: boolean = false,\n): { classes: O; sheetBuffer: string; mediaQueriesBuffer: string } {\n const out = {} as O;\n let sheetBuffer = '';\n let mediaQueriesBuffer = '';\n const styleEntries = Object.entries(rules);\n let ruleWriteOpen = false;\n const guardCloseRuleWrite = () => {\n if (ruleWriteOpen) sheetBuffer += '}';\n ruleWriteOpen = false;\n };\n for (const [classNameOrCSSRule, classNameRules] of styleEntries) {\n // if the classNameRules is a string, we are dealing with a display: none; type rule\n if (isMedia(classNameOrCSSRule)) {\n if (typeof classNameRules !== 'object')\n throw new Error('Unable to map @media query because rules / props are an invalid type');\n guardCloseRuleWrite();\n mediaQueriesBuffer += `${classNameOrCSSRule}{`;\n const { mediaQueriesBuffer: mediaQueriesOutput, sheetBuffer: regularOutput } = execCreateStyles(\n classNameRules as T,\n options,\n parentSelector,\n );\n mediaQueriesBuffer += regularOutput;\n mediaQueriesBuffer += '}';\n mediaQueriesBuffer += mediaQueriesOutput;\n } else if (isNestedSelector(classNameOrCSSRule)) {\n if (!parentSelector) throw new Error('Unable to generate nested rule because parentSelector is missing');\n guardCloseRuleWrite();\n // format of { '& > span': { display: 'none' } } (or further nesting)\n const replaced = classNameOrCSSRule.replace(/&/g, parentSelector);\n for (const selector of replaced.split(/,\\s*/)) {\n const { mediaQueriesBuffer: mediaQueriesOutput, sheetBuffer: regularOutput } = execCreateStyles(\n classNameRules as T,\n options,\n selector,\n );\n sheetBuffer += regularOutput;\n mediaQueriesBuffer += mediaQueriesOutput;\n }\n } else if (!parentSelector && typeof classNameRules === 'object') {\n guardCloseRuleWrite();\n const generated = noGenerateClassName ? classNameOrCSSRule : generateClassName(classNameOrCSSRule);\n (out as any)[classNameOrCSSRule] = generated;\n const generatedSelector = `${noGenerateClassName ? '' : '.'}${generated}`;\n const { mediaQueriesBuffer: mediaQueriesOutput, sheetBuffer: regularOutput } = execCreateStyles(\n classNameRules as T,\n options,\n generatedSelector,\n );\n sheetBuffer += regularOutput;\n mediaQueriesBuffer += mediaQueriesOutput;\n } else {\n if (!parentSelector) throw new Error('Unable to write css props because parent selector is null');\n if (!ruleWriteOpen) {\n sheetBuffer += `${parentSelector}{${formatCSSRules({ [classNameOrCSSRule]: classNameRules })}`;\n ruleWriteOpen = true;\n } else sheetBuffer += formatCSSRules({ [classNameOrCSSRule]: classNameRules });\n }\n }\n guardCloseRuleWrite();\n return {\n classes: out,\n sheetBuffer,\n mediaQueriesBuffer,\n };\n}\n\nfunction replaceBackReferences<O extends { [key: string]: string }>(out: O, sheetContents: string): string {\n let outputSheetContents = sheetContents;\n const toReplace: string[] = [];\n const toReplaceRegex = /\\$\\w([a-zA-Z0-9_-]+)?/gm;\n let matches = toReplaceRegex.exec(outputSheetContents);\n while (matches) {\n toReplace.push(matches[0].valueOf());\n matches = toReplaceRegex.exec(outputSheetContents);\n }\n for (const r of toReplace) {\n outputSheetContents = outputSheetContents.replace(r, `.${out[r.substring(1)]}`);\n }\n return getPosthooks().reduce((prev, hook) => hook(prev), outputSheetContents);\n}\n\nfunction createSheet(sheetContents: string) {\n if (typeof document === 'undefined') return null;\n if (typeof document?.head?.appendChild !== 'function' || typeof document?.createElement !== 'function') return null;\n const styleTag = document.createElement('style');\n styleTag.innerHTML = sheetContents;\n return styleTag;\n}\n\nfunction flushSheetContents(sheetContents: string, options?: CreateStylesOptions) {\n // In case we're in come weird test environment that doesn't support JSDom\n const styleTag = createSheet(sheetContents);\n if (styleTag) {\n if (options?.insertAfter && options?.insertBefore) {\n throw new Error('Both insertAfter and insertBefore were provided. Please choose only one.');\n }\n if (options?.insertAfter?.after) options.insertAfter.after(styleTag as Node);\n else if (options?.insertBefore?.before) options.insertBefore.before(styleTag as Node);\n else document.head.appendChild(styleTag);\n }\n return styleTag;\n}\n\nfunction coerceCreateStylesOptions(options?: CreateStylesOptions): CreateStylesOptions {\n return {\n flush: options && typeof options.flush === 'boolean' ? options.flush : true,\n };\n}\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport function rawStyles<T extends SimpleStyleRules, K extends keyof T, O extends { [key in K]: string }>(\n rules: T,\n options?: Partial<CreateStylesOptions>,\n) {\n const coerced = coerceCreateStylesOptions(options);\n const { sheetBuffer: sheetContents, mediaQueriesBuffer: mediaQueriesContents } = execCreateStyles(\n rules,\n coerced,\n null,\n true,\n );\n\n const mergedContents = `${sheetContents}${mediaQueriesContents}`;\n\n if (coerced.flush) flushSheetContents(mergedContents, options);\n return mergedContents;\n}\n\nexport function keyframes<T extends { [increment: string]: Properties }>(\n frames: T,\n options?: CreateStylesOptions,\n): [string, string] {\n const coerced = coerceCreateStylesOptions(options);\n const keyframeName = generateClassName('keyframes_');\n const { sheetBuffer: keyframesContents } = execCreateStyles(frames, coerced, null, true);\n const sheetContents = `@keyframes ${keyframeName}{${keyframesContents}}`;\n if (coerced.flush) flushSheetContents(sheetContents);\n return [keyframeName, sheetContents];\n}\n\nexport default function createStyles<\n T extends SimpleStyleRules,\n K extends keyof T,\n O extends { [classKey in K]: string },\n>(rules: T, options?: Partial<CreateStylesOptions>) {\n const coerced = coerceCreateStylesOptions(options);\n const {\n classes: out,\n sheetBuffer: sheetContents,\n mediaQueriesBuffer: mediaQueriesContents,\n } = execCreateStyles(rules, coerced, null);\n\n const mergedContents = `${sheetContents}${mediaQueriesContents}`;\n\n const replacedSheetContents = replaceBackReferences(out, mergedContents);\n\n let sheet: ReturnType<typeof flushSheetContents> = null;\n\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const updateSheet = <T2 extends SimpleStyleRules, K2 extends keyof T2, O2 extends { [classKey in K2]: string }>(\n updatedRules: Partial<T2>,\n ) => {\n if (((options?.flush && sheet) || !options?.flush) && updatedRules) {\n // We prefer the first set, and then we shallow merge\n const {\n classes: updatedOut,\n sheetBuffer: updatedSheetContents,\n mediaQueriesBuffer: updatedMediaQueriesContents,\n } = execCreateStyles(merge(rules, updatedRules), { flush: false }, null);\n\n const updatedMergedContents = `${updatedSheetContents}${updatedMediaQueriesContents}`;\n\n const updatedReplacedSheetContents = replaceBackReferences(out, updatedMergedContents);\n if (sheet) sheet.innerHTML = updatedReplacedSheetContents;\n return { classes: updatedOut, stylesheet: updatedSheetContents } as {\n classes: typeof updatedOut;\n stylesheet: string;\n };\n }\n return null;\n };\n\n if (coerced.flush) sheet = flushSheetContents(replacedSheetContents, options);\n // Need this TS cast to get solid code assist from the consumption-side\n return {\n classes: out as unknown,\n stylesheet: replacedSheetContents,\n updateSheet,\n } as {\n classes: O;\n stylesheet: string;\n updateSheet: typeof updateSheet;\n };\n}\n\nexport type CreateStylesArgs = Parameters<typeof createStyles>;\n", "const alphas = 'abcdefghijklmnopqrstuvwxyz'.split('');\n\nexport default function numToAlpha(num: number): string {\n return alphas[num];\n}\n", "import numToAlpha from './numToAlpha';\n\nlet inc = Date.now();\n\nexport function setSeed(seed: number | null): void {\n if (seed === null) {\n inc = Date.now();\n return;\n }\n if (typeof seed !== 'number') throw Error('Unable to setSeed as provided seed was not a valid number');\n if (seed === Number.MAX_SAFE_INTEGER)\n throw Error('Unable to setSeed because the seed was already the maximum safe JavaScript number allowed');\n if (seed === Number.POSITIVE_INFINITY || seed === Number.NEGATIVE_INFINITY)\n throw new Error('Unable to setSeed. Positive or negative infinity is not allowed');\n if (seed < 0) throw new Error('Unable to setSeed. Seed must be a number >= 0');\n inc = seed;\n}\n\nconst numPairsRegex = /(\\d{1,2})/g;\n\nexport function getUniqueSuffix(): string {\n const numPairs: string[] = [];\n const incStr = inc.toString();\n let result = numPairsRegex.exec(incStr);\n while (result) {\n numPairs.push(result[0]);\n result = numPairsRegex.exec(incStr);\n }\n let out = '_';\n numPairs.forEach(pair => {\n const val = +pair;\n if (val > 25) {\n const [first, second] = pair.split('');\n out += `${numToAlpha(+first)}${numToAlpha(+second)}`;\n } else out += numToAlpha(val);\n });\n inc += 1;\n return out;\n}\n\nexport function generateClassName(c: string): string {\n return `${c}${getUniqueSuffix()}`;\n}\n", "export type PosthookPlugin = (sheetContents: string) => string;\n\nconst posthooks: PosthookPlugin[] = [];\n\nexport function getPosthooks(): PosthookPlugin[] {\n return posthooks;\n}\n\nexport function registerPosthook(posthook: PosthookPlugin) {\n posthooks.push(posthook);\n}\n", "export function deepEqual<\n O1 extends Record<string | number | symbol, any>,\n O2 extends Record<string | number | symbol, any>,\n>(o1: O1, o2: O2): boolean {\n // We'll sort the keys, just in case the user kept things the same but the object is all wonky, order-wise\n const o1Keys = Object.keys(o1).sort();\n const o2Keys = Object.keys(o2).sort();\n if (o1Keys.length !== o2Keys.length) return false;\n if (o1Keys.some((key, i) => o2Keys[i] !== key)) return false;\n // Okay, the keys SHOULD be the same\n // so we need to test their values, recursively, to verify equality\n return o1Keys.reduce<boolean>((prev, key) => {\n if (!prev) return prev; // we've already failed equality checks here\n if (!(key in o2)) return false;\n if (typeof o1[key] !== 'object') {\n return prev && o1[key] === o2[key];\n }\n return prev && deepEqual(o1[key], o2[key]);\n }, true);\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/react/useCreateStyles.js
CHANGED
|
@@ -5,14 +5,18 @@ function useCreateStyles(rules, options) {
|
|
|
5
5
|
const [cachedRules, setCachedRules] = useState(() => rules);
|
|
6
6
|
const cachedOptions = useMemo(() => ({ ...options }), [options]);
|
|
7
7
|
const didFirstWriteRef = useRef(false);
|
|
8
|
-
const styleTagRef = useRef(document.createElement("style"));
|
|
8
|
+
const styleTagRef = useRef(typeof document !== void 0 ? document.createElement("style") : null);
|
|
9
9
|
const [{ classes, stylesheet, updateSheet }, setCreateStyles] = useState(() => createStyles(rules, { ...cachedOptions, flush: false }));
|
|
10
10
|
useEffect(() => {
|
|
11
|
+
if (!styleTagRef.current)
|
|
12
|
+
return;
|
|
11
13
|
const { current: s } = styleTagRef;
|
|
12
14
|
document.head.appendChild(s);
|
|
13
15
|
return () => s.remove();
|
|
14
16
|
}, []);
|
|
15
17
|
useEffect(() => {
|
|
18
|
+
if (!styleTagRef.current)
|
|
19
|
+
return;
|
|
16
20
|
if (!didFirstWriteRef.current && !styleTagRef.current.innerHTML) {
|
|
17
21
|
didFirstWriteRef.current = true;
|
|
18
22
|
styleTagRef.current.innerHTML = stylesheet;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/react/useCreateStyles.ts"],
|
|
4
|
-
"sourcesContent": ["import { useEffect, useMemo, useRef, useState } from 'react';\n\nimport createStyles, { CreateStylesOptions } from '../createStyles';\nimport { SimpleStyleRules } from '../types';\nimport { deepEqual } from '../util';\n\nexport function useCreateStyles<T extends SimpleStyleRules, K extends keyof T, O extends { [classKey in K]: string }>(\n rules: T,\n options?: Partial<Omit<CreateStylesOptions, 'flush'>>,\n) {\n const [cachedRules, setCachedRules] = useState(() => rules);\n const cachedOptions = useMemo(() => ({ ...options } as Partial<Omit<CreateStylesOptions, 'flush'>>), [options]);\n const didFirstWriteRef = useRef(false);\n const styleTagRef = useRef(document.createElement('style'));\n\n const [{ classes, stylesheet, updateSheet }, setCreateStyles] = useState(() =>\n createStyles<T, K, O>(rules, { ...cachedOptions, flush: false }),\n );\n\n useEffect(() => {\n const { current: s } = styleTagRef;\n document.head.appendChild(s);\n return () => s.remove();\n }, []);\n useEffect(() => {\n if (!didFirstWriteRef.current && !styleTagRef.current.innerHTML) {\n didFirstWriteRef.current = true;\n styleTagRef.current.innerHTML = stylesheet;\n return;\n } else if (!deepEqual(rules, cachedRules)) {\n setCachedRules(rules);\n const updated = updateSheet(rules);\n if (updated?.stylesheet) {\n styleTagRef.current.innerHTML = updated.stylesheet;\n setCreateStyles({ ...updated, updateSheet } as any);\n }\n }\n }, [cachedRules, rules, stylesheet, updateSheet]);\n return classes;\n}\n"],
|
|
5
|
-
"mappings": "AAAA;AAEA;AAEA;AAEO,yBACL,OACA,SACA;AACA,QAAM,CAAC,aAAa,kBAAkB,SAAS,MAAM,KAAK;AAC1D,QAAM,gBAAgB,QAAQ,MAAO,
|
|
4
|
+
"sourcesContent": ["import { useEffect, useMemo, useRef, useState } from 'react';\n\nimport createStyles, { CreateStylesOptions } from '../createStyles';\nimport { SimpleStyleRules } from '../types';\nimport { deepEqual } from '../util';\n\nexport function useCreateStyles<T extends SimpleStyleRules, K extends keyof T, O extends { [classKey in K]: string }>(\n rules: T,\n options?: Partial<Omit<CreateStylesOptions, 'flush'>>,\n) {\n const [cachedRules, setCachedRules] = useState(() => rules);\n const cachedOptions = useMemo(() => ({ ...options } as Partial<Omit<CreateStylesOptions, 'flush'>>), [options]);\n const didFirstWriteRef = useRef(false);\n const styleTagRef = useRef(typeof document !== undefined ? document.createElement('style') : null);\n\n const [{ classes, stylesheet, updateSheet }, setCreateStyles] = useState(() =>\n createStyles<T, K, O>(rules, { ...cachedOptions, flush: false }),\n );\n\n useEffect(() => {\n if (!styleTagRef.current) return;\n const { current: s } = styleTagRef;\n document.head.appendChild(s);\n return () => s.remove();\n }, []);\n useEffect(() => {\n if (!styleTagRef.current) return;\n if (!didFirstWriteRef.current && !styleTagRef.current.innerHTML) {\n didFirstWriteRef.current = true;\n styleTagRef.current.innerHTML = stylesheet;\n return;\n } else if (!deepEqual(rules, cachedRules)) {\n setCachedRules(rules);\n const updated = updateSheet(rules);\n if (updated?.stylesheet) {\n styleTagRef.current.innerHTML = updated.stylesheet;\n setCreateStyles({ ...updated, updateSheet } as any);\n }\n }\n }, [cachedRules, rules, stylesheet, updateSheet]);\n return classes;\n}\n"],
|
|
5
|
+
"mappings": "AAAA;AAEA;AAEA;AAEO,yBACL,OACA,SACA;AACA,QAAM,CAAC,aAAa,kBAAkB,SAAS,MAAM,KAAK;AAC1D,QAAM,gBAAgB,QAAQ,MAAO,GAAE,GAAG,QAAQ,IAAmD,CAAC,OAAO,CAAC;AAC9G,QAAM,mBAAmB,OAAO,KAAK;AACrC,QAAM,cAAc,OAAO,OAAO,aAAa,SAAY,SAAS,cAAc,OAAO,IAAI,IAAI;AAEjG,QAAM,CAAC,EAAE,SAAS,YAAY,eAAe,mBAAmB,SAAS,MACvE,aAAsB,OAAO,EAAE,GAAG,eAAe,OAAO,MAAM,CAAC,CACjE;AAEA,YAAU,MAAM;AACd,QAAI,CAAC,YAAY;AAAS;AAC1B,UAAM,EAAE,SAAS,MAAM;AACvB,aAAS,KAAK,YAAY,CAAC;AAC3B,WAAO,MAAM,EAAE,OAAO;AAAA,EACxB,GAAG,CAAC,CAAC;AACL,YAAU,MAAM;AACd,QAAI,CAAC,YAAY;AAAS;AAC1B,QAAI,CAAC,iBAAiB,WAAW,CAAC,YAAY,QAAQ,WAAW;AAC/D,uBAAiB,UAAU;AAC3B,kBAAY,QAAQ,YAAY;AAChC;AAAA,IACF,WAAW,CAAC,UAAU,OAAO,WAAW,GAAG;AACzC,qBAAe,KAAK;AACpB,YAAM,UAAU,YAAY,KAAK;AACjC,UAAI,mCAAS,YAAY;AACvB,oBAAY,QAAQ,YAAY,QAAQ;AACxC,wBAAgB,EAAE,GAAG,SAAS,YAAY,CAAQ;AAAA,MACpD;AAAA,IACF;AAAA,EACF,GAAG,CAAC,aAAa,OAAO,YAAY,WAAW,CAAC;AAChD,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/util/index.cjs.js
CHANGED
package/util/index.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/util/index.ts", "../../../src/util/deepEqual.ts"],
|
|
4
4
|
"sourcesContent": ["export * from './deepEqual';\n", "export function deepEqual<\n O1 extends Record<string | number | symbol, any>,\n O2 extends Record<string | number | symbol, any>,\n>(o1: O1, o2: O2): boolean {\n // We'll sort the keys, just in case the user kept things the same but the object is all wonky, order-wise\n const o1Keys = Object.keys(o1).sort();\n const o2Keys = Object.keys(o2).sort();\n if (o1Keys.length !== o2Keys.length) return false;\n if (o1Keys.some((key, i) => o2Keys[i] !== key)) return false;\n // Okay, the keys SHOULD be the same\n // so we need to test their values, recursively, to verify equality\n return o1Keys.reduce<boolean>((prev, key) => {\n if (!prev) return prev; // we've already failed equality checks here\n if (!(key in o2)) return false;\n if (typeof o1[key] !== 'object') {\n return prev && o1[key] === o2[key];\n }\n return prev && deepEqual(o1[key], o2[key]);\n }, true);\n}\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAO,mBAGL,IAAQ,IAAiB;AAEzB,QAAM,SAAS,OAAO,KAAK,EAAE,EAAE,KAAK;AACpC,QAAM,SAAS,OAAO,KAAK,EAAE,EAAE,KAAK;AACpC,MAAI,OAAO,WAAW,OAAO;AAAQ,WAAO;AAC5C,MAAI,OAAO,KAAK,CAAC,KAAK,MAAM,OAAO,OAAO,GAAG;AAAG,WAAO;AAGvD,SAAO,OAAO,OAAgB,CAAC,MAAM,QAAQ;AAC3C,QAAI,CAAC;AAAM,aAAO;AAClB,QAAI,CAAE,QAAO;AAAK,aAAO;AACzB,QAAI,OAAO,GAAG,SAAS,UAAU;AAC/B,aAAO,QAAQ,GAAG,SAAS,GAAG;AAAA,IAChC;AACA,WAAO,QAAQ,UAAU,GAAG,MAAM,GAAG,IAAI;AAAA,EAC3C,GAAG,IAAI;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|