next-style 1.1.6 → 1.1.7
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/dist/index.d.ts +15 -50
- package/dist/index.js +2 -2
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
import type { Properties } from "csstype";
|
|
2
2
|
import type { DetailedReactHTMLElement } from "react";
|
|
3
|
+
/**
|
|
4
|
+
* Style object supported by next-style
|
|
5
|
+
*/
|
|
3
6
|
export type NextStyleProperties = {
|
|
4
7
|
[K in keyof Properties<string | number>]?: Properties<string | number>[K];
|
|
5
8
|
} & {
|
|
@@ -30,71 +33,33 @@ declare class RelationBuilder {
|
|
|
30
33
|
private source;
|
|
31
34
|
private pseudo?;
|
|
32
35
|
constructor(ns: NextStyle, source: string, pseudo?: PseudoState | undefined);
|
|
33
|
-
/** :hover */
|
|
34
36
|
hover(): RelationBuilder;
|
|
35
|
-
/** :focus */
|
|
36
37
|
focus(): RelationBuilder;
|
|
37
|
-
/** :active */
|
|
38
38
|
active(): RelationBuilder;
|
|
39
|
-
/**
|
|
40
|
-
* Adjacent sibling selector
|
|
41
|
-
*
|
|
42
|
-
* CSS:
|
|
43
|
-
* div:hover + p
|
|
44
|
-
*
|
|
45
|
-
* @example
|
|
46
|
-
* when(div).hover().adjacent(p, { color: "red" })
|
|
47
|
-
*/
|
|
48
39
|
adjacent(target: string, style: NextStyleProperties): void;
|
|
49
|
-
/**
|
|
50
|
-
* Child selector
|
|
51
|
-
*
|
|
52
|
-
* CSS:
|
|
53
|
-
* div:hover > p
|
|
54
|
-
*
|
|
55
|
-
* @example
|
|
56
|
-
* when(div).hover().child(p, { color: "red" })
|
|
57
|
-
*/
|
|
58
40
|
child(target: string, style: NextStyleProperties): void;
|
|
59
|
-
/**
|
|
60
|
-
* General sibling selector
|
|
61
|
-
*
|
|
62
|
-
* CSS:
|
|
63
|
-
* div:hover ~ p
|
|
64
|
-
*
|
|
65
|
-
* @example
|
|
66
|
-
* when(div).hover().sibling(p, { color: "red" })
|
|
67
|
-
*/
|
|
68
41
|
sibling(target: string, style: NextStyleProperties): void;
|
|
69
|
-
/**
|
|
70
|
-
* Descendant selector
|
|
71
|
-
*
|
|
72
|
-
* CSS:
|
|
73
|
-
* div:hover p
|
|
74
|
-
*
|
|
75
|
-
* @example
|
|
76
|
-
* when(div).hover().descendant(p, { color: "red" })
|
|
77
|
-
*/
|
|
78
42
|
descendant(target: string, style: NextStyleProperties): void;
|
|
79
43
|
private emit;
|
|
80
44
|
}
|
|
45
|
+
/**
|
|
46
|
+
* NextStyle runtime CSS-in-JS engine
|
|
47
|
+
*/
|
|
81
48
|
export declare class NextStyle {
|
|
82
49
|
private prefix;
|
|
83
50
|
private rules;
|
|
84
51
|
constructor(prefix?: string);
|
|
85
|
-
css
|
|
86
|
-
global
|
|
52
|
+
css(style: NextStyleProperties): string;
|
|
53
|
+
global(selector: string, style: NextStyleProperties): void;
|
|
87
54
|
/**
|
|
88
|
-
*
|
|
89
|
-
*
|
|
90
|
-
* @example
|
|
91
|
-
* when(container).hover().sibling(text)
|
|
55
|
+
* Apply default global CSS reset
|
|
92
56
|
*/
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
57
|
+
globalReset(): void;
|
|
58
|
+
when(source: string): RelationBuilder;
|
|
59
|
+
keyframes(frames: KeyframesObject): string;
|
|
60
|
+
fontFace(font: FontFaceObject): void;
|
|
61
|
+
toTextCss(): string | null;
|
|
62
|
+
StyleProvider(): DetailedReactHTMLElement<{
|
|
98
63
|
children: string;
|
|
99
64
|
}, HTMLStyleElement> | null;
|
|
100
65
|
}
|
package/dist/index.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import postcss from"postcss";import{createElement}from"react";import autoprefixer from"autoprefixer";var processor=postcss([autoprefixer({overrideBrowserslist:[">0.2%","not dead","not op_mini all"]})]),postcssCache=new Map;function postcssTransform(cssText){let cached=postcssCache.get(cssText);if(cached)return cached;let result=processor.process(cssText,{from:void 0}).css;return postcssCache.set(cssText,result),result}function stableStringify(value){if(value==null||typeof value!=="object")return JSON.stringify(value);if(Array.isArray(value))return`[${value.map(stableStringify).join(",")}]`;return`{${Object.keys(value).sort().map((k)=>`"${k}":${stableStringify(value[k])}`).join(",")}}`}function createHashName(seed){let hash=BigInt("0xcbf29ce484222325"),prime=BigInt("0x100000001b3");for(let i=0;i<seed.length;i++)hash^=BigInt(seed.charCodeAt(i)),hash*=prime,hash&=BigInt("0xffffffffffffffff");return hash.toString(36).slice(0,9)}function toKebabCase(prop){return prop.replace(/[A-Z]/g,(m)=>`-${m.toLowerCase()}`)}var MEDIA_MAP={_sm:"(min-width:640px)",_md:"(min-width:768px)",_lg:"(min-width:1024px)",_xl:"(min-width:1280px)",_xxl:"(min-width:1536px)"};function mergeMedia(parent,current){if(!parent)return current;if(!current)return parent;return`${parent} and ${current}`}function serializeNested(style,ctx){let css="",
|
|
2
|
-
`;return cssText}
|
|
1
|
+
import postcss from"postcss";import{createElement}from"react";import autoprefixer from"autoprefixer";var processor=postcss([autoprefixer({overrideBrowserslist:[">0.2%","not dead","not op_mini all"]})]),postcssCache=new Map;function postcssTransform(cssText){let cached=postcssCache.get(cssText);if(cached)return cached;let result=processor.process(cssText,{from:void 0}).css;return postcssCache.set(cssText,result),result}function stableStringify(value){if(value==null||typeof value!=="object")return JSON.stringify(value);if(Array.isArray(value))return`[${value.map(stableStringify).join(",")}]`;return`{${Object.keys(value).sort().map((k)=>`"${k}":${stableStringify(value[k])}`).join(",")}}`}function createHashName(seed){let hash=BigInt("0xcbf29ce484222325"),prime=BigInt("0x100000001b3");for(let i=0;i<seed.length;i++)hash^=BigInt(seed.charCodeAt(i)),hash*=prime,hash&=BigInt("0xffffffffffffffff");return hash.toString(36).slice(0,9)}function toKebabCase(prop){return prop.replace(/[A-Z]/g,(m)=>`-${m.toLowerCase()}`)}var MEDIA_MAP={_sm:"(min-width:640px)",_md:"(min-width:768px)",_lg:"(min-width:1024px)",_xl:"(min-width:1280px)",_xxl:"(min-width:1536px)"};function mergeMedia(parent,current){if(!parent)return current;if(!current)return parent;return`${parent} and ${current}`}function serializeNested(style,ctx){let css="",declarations=[];for(let key in style){let value=style[key];if(value==null||typeof value==="object"||key.startsWith("_"))continue;declarations.push(`${toKebabCase(key)}:${value}`)}if(declarations.length){let rule=`${ctx.selector}{ ${declarations.join("; ")} }`;css+=ctx.media?`@media ${ctx.media}{ ${rule} }`:rule}for(let pseudo of["_hover","_focus","_active"]){let value=style[pseudo];if(!value)continue;css+=serializeNested(value,{selector:`${ctx.selector}:${pseudo.slice(1)}`,media:ctx.media})}for(let key in MEDIA_MAP){let mediaKey=key,value=style[mediaKey];if(!value)continue;css+=serializeNested(value,{selector:ctx.selector,media:mergeMedia(ctx.media,MEDIA_MAP[mediaKey])})}return css}class RelationBuilder{ns;source;pseudo;constructor(ns,source,pseudo){this.ns=ns;this.source=source;this.pseudo=pseudo}hover(){return new RelationBuilder(this.ns,this.source,"hover")}focus(){return new RelationBuilder(this.ns,this.source,"focus")}active(){return new RelationBuilder(this.ns,this.source,"active")}adjacent(target,style){this.emit("+",target,style)}child(target,style){this.emit(">",target,style)}sibling(target,style){this.emit("~",target,style)}descendant(target,style){this.emit(" ",target,style)}emit(combinator,target,style){let pseudo=this.pseudo?`:${this.pseudo}`:"",selector=`.${this.source}${pseudo}${combinator}.${target}`;this.ns.global(selector,style)}}class NextStyle{prefix;rules=new Map;constructor(prefix="next"){this.prefix=prefix}css(style){let seed=stableStringify(style),hash=createHashName(seed),className=`${this.prefix}_${hash}`,key=`class:${className}`;if(!this.rules.has(key)){let raw=serializeNested(style,{selector:`.${className}`}),cssText=postcssTransform(raw);this.rules.set(key,cssText)}return className}global(selector,style){let key=`global:${selector}`;if(!this.rules.has(key)){let raw=serializeNested(style,{selector}),cssText=postcssTransform(raw);this.rules.set(key,cssText)}}globalReset(){this.global("html,body",{maxWidth:"100vw",overflowX:"hidden"}),this.global("body",{color:"black",background:"white",fontFamily:"Arial, Helvetica, sans-serif",WebkitFontSmoothing:"antialiased",MozOsxFontSmoothing:"grayscale"}),this.global("*",{boxSizing:"border-box",padding:0,margin:0}),this.global("a",{color:"inherit",textDecoration:"none"})}when(source){return new RelationBuilder(this,source)}keyframes(frames){let seed=stableStringify(frames),hash=createHashName(seed),name=`${this.prefix}_${hash}`,key=`@keyframes:${name}`;if(!this.rules.has(key)){let body="";for(let step in frames){let declarations=[],frame=frames[step];for(let prop in frame)declarations.push(`${toKebabCase(prop)}:${frame[prop]}`);body+=`${step}{ ${declarations.join("; ")} }`}let cssText=postcssTransform(`@keyframes ${name}{ ${body} }`);this.rules.set(key,cssText)}return name}fontFace(font){let seed=stableStringify(font),key=`@font-face:${createHashName(seed)}`;if(!this.rules.has(key)){let declarations=[];for(let prop in font)declarations.push(`${toKebabCase(prop)}:${font[prop]}`);let cssText=postcssTransform(`@font-face{ ${declarations.join("; ")} }`);this.rules.set(key,cssText)}}toTextCss(){if(this.rules.size===0)return null;let cssText="";for(let rule of this.rules.values())cssText+=rule+`
|
|
2
|
+
`;return cssText}StyleProvider(){if(this.rules.size===0)return null;let cssText="";for(let rule of this.rules.values())cssText+=rule+`
|
|
3
3
|
`;return createElement("style",{children:cssText})}}export{NextStyle};
|
package/package.json
CHANGED