@kaze-style/core - npm Package Compare versions

Comparing version 0.4.0 to 0.5.0

dist/__style.d.ts

@@ -1,2 +0,2 @@
-import type { Classes, ClassesObject } from './types/style';
-export declare const __style: <K extends string>(styles: ClassesObject<K>) => Classes<K>;
+import type { Classes } from './types/style';
+export declare const __style: <K extends string>(classes: Classes<K>) => Classes<K>;

dist/__style.js

@@ -1,1 +0,1 @@
-import{ClassName as n}from"./utils/ClassName";const r=s=>{const t={};for(const e in s)if(s.hasOwnProperty(e)){const a=s[e];t[e]=new n(Object.values(a).join(" "),a)}return t};export{r as __style};
+const e=s=>s;export{e as __style};

dist/createGlobalStyle.d.ts

@@ -5,3 +5,3 @@ import type { CssRules, KazeGlobalStyle } from './types/style';
 };
-export declare const createGlobalStyle: <Selector extends string>(globalStyles: Record<Selector, KazeGlobalStyle>) => Result;
+export declare const createGlobalStyle: (globalStyles: KazeGlobalStyle) => Result;
 export {};

dist/createGlobalStyle.js

@@ -1,1 +0,1 @@
-import{compileObjectCSS as r}from"./utils/compileObjectCSS";const S=e=>{const t=new Set;for(const l in e){const o=e[l],s=r(o);s!==""&&t.add(`${l} {${s}}`)}return{cssRules:Array.from(t)}};export{S as createGlobalStyle};
+import{compileObjectCSS as r}from"./utils/compileObjectCSS";const c=e=>{const t=new Set;for(const l in e){const o=e[l],s=r(o);s!==""&&t.add(`${l} {${s}}`)}return{cssRules:Array.from(t)}};export{c as createGlobalStyle};

dist/createStyle.js

@@ -1,1 +0,1 @@
-import{resolveStyle as r}from"./resolveStyle";import{ClassName as u}from"./utils/ClassName";const y=t=>{const l={},a={},c=[];for(const s in t){const{cssRules:n,classNameObject:e}=r({style:t[s]});c.push(...n);const o=Object.values(e).join(" ");l[s]=new u(o,e),a[s]=e}return{classes:l,classesObject:a,cssRules:Array.from(new Set(c))}};export{y as createStyle};
+import{resolveStyle as n}from"./resolveStyle";import{ClassName as o}from"./utils/ClassName";const y=e=>{const t={},l={},a=[];for(const s in e){const{cssRules:r,classNameObject:c}=n({style:e[s]});a.push(...r),t[s]=new o(c),l[s]=c}return{classes:t,classesObject:l,cssRules:Array.from(new Set(a))}};export{y as createStyle};

dist/index.d.ts

@@ -9,4 +9,5 @@ export * from './mergeStyle';
 export * from './sortCSS';
+export * from './utils/ClassName';
 export type { KazeStyle, KazeGlobalStyle } from './types/style';
 export type { ForBuildStyle } from './__preStyle';
 export type { ForBuildGlobalStyle } from './__preGlobalStyle';

dist/index.js

@@ -1,1 +0,1 @@
-export*from"./mergeStyle";export*from"./createStyle";export*from"./createGlobalStyle";export*from"./__style";export*from"./__globalStyle";export*from"./__preStyle";export*from"./__preGlobalStyle";export*from"./sortCSS";
+export*from"./mergeStyle";export*from"./createStyle";export*from"./createGlobalStyle";export*from"./__style";export*from"./__globalStyle";export*from"./__preStyle";export*from"./__preGlobalStyle";export*from"./sortCSS";export*from"./utils/ClassName";

dist/resolveStyle.d.ts

@@ -11,5 +11,7 @@ import type { CssRules, KazeStyle } from './types/style';
     media?: string;
+    layer?: string;
+    support?: string;
     resolvedStyle?: ResolvedStyle;
 };
-export declare const resolveStyle: ({ style, pseudo, media, resolvedStyle, }: Args) => ResolvedStyle;
+export declare const resolveStyle: ({ style, pseudo, media, layer, support, resolvedStyle, }: Args) => ResolvedStyle;
 export {};

dist/resolveStyle.js

@@ -1,1 +0,1 @@
-import{combinedQuery as p}from"./utils/combinedQuery";import{compileCSS as y}from"./utils/compileCSS";import{compileKeyFrameCSS as f}from"./utils/compileKeyFrameCSS";import{hashClassName as u}from"./utils/hashClassName";import{hashSelector as S}from"./utils/hashSelector";import{isMediaQuerySelector as N}from"./utils/isMediaQuerySelector";import{isNestedSelector as b}from"./utils/isNestedSelector";import{isObject as R}from"./utils/isObject";import{isShortHandProperty as C}from"./utils/isShortHandProperty";import{normalizeNestedProperty as O}from"./utils/normalizeNestedProperty";import{omit as h}from"./utils/omit";import{resolveShortHandStyle as j}from"./utils/resolveShortHandStyle";const i=({style:l,pseudo:o="",media:m="",resolvedStyle:t={classNameObject:{},cssRules:[]}})=>{for(const n in l){const e=n,s=l[e];if(typeof s=="string"||typeof s=="number"||Array.isArray(s))if(C(e)){const r=j(e,s);i({style:Object.assign(h(l,[e]),r),pseudo:o,media:m,resolvedStyle:t})}else{const r=u({media:m,pseudo:o,property:e,styleValue:s}),c=S({media:m,pseudo:o,property:e}),a=y({media:m,pseudo:o,property:e,styleValue:s,className:r});t.cssRules.push(a),Object.assign(t.classNameObject,{[c]:r})}else if(e==="animationName"){const r=s,{keyframesRule:c,keyframeName:a}=f(r);t.cssRules.push(c),Object.assign(t.classNameObject,{[a]:a}),i({style:{animationName:a},pseudo:o,media:m,resolvedStyle:t})}else if(R(s))if(N(e)){const r=p(m,e.slice(6).trim());i({style:s,pseudo:o,media:r,resolvedStyle:t})}else b(e)&&i({style:s,pseudo:o+O(e),media:m,resolvedStyle:t})}return t};export{i as resolveStyle};
+import{combinedQuery as f}from"./utils/combinedQuery";import{compileCSS as N}from"./utils/compileCSS";import{compileKeyFrameCSS as b}from"./utils/compileKeyFrameCSS";import{hashClassName as u}from"./utils/hashClassName";import{hashSelector as h}from"./utils/hashSelector";import{hyphenateProperty as R}from"./utils/hyphenateProperty";import{isLayerSelector as g}from"./utils/isLayerSelector";import{isMediaQuerySelector as C}from"./utils/isMediaQuerySelector";import{isNestedSelector as O}from"./utils/isNestedSelector";import{isObject as j}from"./utils/isObject";import{isShortHandProperty as K}from"./utils/isShortHandProperty";import{isSupportQuerySelector as Q}from"./utils/isSupportQuerySelector";import{normalizeNestedProperty as z}from"./utils/normalizeNestedProperty";import{omit as A}from"./utils/omit";import{resolveShortHandStyle as P}from"./utils/resolveShortHandStyle";const a=({style:y,pseudo:m="",media:i="",layer:o="",support:c="",resolvedStyle:r={classNameObject:{},cssRules:[]}})=>{for(const p in y){const e=p,s=y[e];if(typeof s=="string"||typeof s=="number"||Array.isArray(s))if(K(e)){const t=P(e,s);a({style:Object.assign(A(y,[e]),t),pseudo:m,media:i,layer:o,support:c,resolvedStyle:r})}else{const t=R(e),l=u({media:i,pseudo:m,property:t,layer:o,support:c,styleValue:s}),n=h({media:i,pseudo:m,layer:o,support:c,property:t}),S=N({media:i,pseudo:m,property:t,layer:o,support:c,styleValue:s,className:l});r.cssRules.push(S),Object.assign(r.classNameObject,{[n]:l})}else if(e==="animationName"){const t=s,{keyframesRule:l,keyframeName:n}=b(t);r.cssRules.push(l),Object.assign(r.classNameObject,{[n]:n}),a({style:{animationName:n},pseudo:m,media:i,layer:o,support:c,resolvedStyle:r})}else if(j(s))if(C(e)){const t=f(i,e.slice(6).trim());a({style:s,pseudo:m,layer:o,media:t,support:c,resolvedStyle:r})}else if(g(e)){const t=(o?`${o}.`:"")+e.slice(6).trim();a({style:s,pseudo:m,layer:t,media:i,support:c,resolvedStyle:r})}else if(Q(e)){const t=f(c,e.slice(9).trim());a({style:s,pseudo:m,layer:o,media:i,support:t,resolvedStyle:r})}else O(e)&&a({style:s,pseudo:m+z(e),media:i,layer:o,support:c,resolvedStyle:r})}return r};export{a as resolveStyle};

dist/types/style.d.ts

@@ -1,4 +0,4 @@
-import type { AtRules, Pseudos, PropertiesFallback, StandardShorthandProperties } from 'csstype';
+import type { Pseudos, PropertiesFallback, PropertiesHyphenFallback, AtRule } from 'csstype';
 import type { ClassName } from '../utils/ClassName';
-import type { NestedObject } from './utils';
+import type { NestedObject, TrimPrefix } from './utils';
 export declare type CSSValue = string | number;
@@ -8,4 +8,5 @@ declare type CSSPseudos = {
 };
-declare type CSSAtRules = {
-    [_ in AtRules]?: SupportedAllStyle;
+declare type PredictType = '@media screen and (max-width: 0)' | '@media screen and (min-width: 0)' | '@media (prefers-color-scheme: dark)' | '@media (prefers-color-scheme: light)' | '@layer utilities' | '@layer base' | '@supports (display: grid)' | '@supports not (display: grid)';
+declare type PredictTypeRules = {
+    [_ in PredictType]?: SupportedAllStyle;
 };
@@ -16,8 +17,15 @@ export declare type CSSKeyframes = Record<'from' | 'to' | string, SupportedCSSProperties>;
 };
-export declare const supportedShorthandProperties: readonly ["margin", "padding", "gap", "inset", "overflow", "outline", "borderRadius"];
-export declare type SupportedShorthandProperties = typeof supportedShorthandProperties[number];
-export declare type SupportedCSSProperties = Omit<PropertiesFallback<CSSValue>, 'animationName' | keyof Omit<StandardShorthandProperties, SupportedShorthandProperties>>;
-export declare type SupportedAllStyle = SupportedCSSProperties & CSSPseudos & CSSAtRules & CSSAnimationNameProperty;
+export declare const supportShorthandProperties: readonly ["margin", "padding", "gap", "inset", "overflow", "outline", "borderRadius"];
+export declare type SupportShorthandProperties = {
+    [Properties in `$${typeof supportShorthandProperties[number]}`]?: PropertiesFallback<CSSValue>[TrimPrefix<Properties, '$'>];
+};
+export declare type SupportedCSSProperties = Omit<PropertiesFallback<CSSValue> & PropertiesHyphenFallback<CSSValue> & SupportShorthandProperties, 'animationName' | 'animation-name'>;
+export declare type SupportedAllStyle = SupportedCSSProperties & CSSPseudos & PredictTypeRules & CSSAnimationNameProperty;
 export declare type KazeStyle = NestedObject<NestedObject<NestedObject<NestedObject<NestedObject<SupportedAllStyle>>>>>;
-export declare type KazeGlobalStyle = PropertiesFallback<CSSValue>;
+declare type SupportedGlobalStyle = PropertiesFallback<CSSValue> & PropertiesHyphenFallback<CSSValue>;
+declare type FontFace = {
+    '@font-face'?: AtRule.FontFaceFallback<CSSValue> & AtRule.FontFaceHyphenFallback<CSSValue>;
+};
+declare type PredictGlobalType = 'body' | 'html' | '*' | '::before,::after' | '*,::before,::after';
+export declare type KazeGlobalStyle = FontFace | Record<string | PredictGlobalType, SupportedGlobalStyle>;
 export declare type CssRules = string[];
@@ -24,0 +32,0 @@ export declare type Classes<K extends string> = Record<K, string>;

dist/types/style.js

@@ -1,1 +0,1 @@
-const e=["margin","padding","gap","inset","overflow","outline","borderRadius"];export{e as supportedShorthandProperties};
+const e=["margin","padding","gap","inset","overflow","outline","borderRadius"];export{e as supportShorthandProperties};

dist/types/utils.d.ts

@@ -6,1 +6,2 @@ export declare type ValueOf<T> = T[keyof T];
 };
+export declare type TrimPrefix<S extends string, P extends string> = S extends `${P}${infer E}` ? E : S;

dist/utils/ClassName.d.ts

 export declare class ClassName extends String {
     object: Record<string, string>;
-    constructor(className: string, object: ClassName['object']);
+    constructor(object: ClassName['object']);
 }

dist/utils/ClassName.js

@@ -1,1 +0,1 @@
-class c extends String{constructor(s,t){super(s);this.object=t}}export{c as ClassName};
+class t extends String{object;constructor(s){super(Object.values(s).join(" ")),this.object=s}}export{t as ClassName};

dist/utils/combinedQuery.d.ts

@@ -1,1 +0,1 @@
-export declare const combinedQuery: (currentMediaQuery: string, nestedMediaQuery: string) => string;
+export declare const combinedQuery: (currentQuery: string, nestedQuery: string) => string;

dist/utils/combinedQuery.js

@@ -1,1 +0,1 @@
-const r=(n,t)=>n.length===0?t:`${n} and ${t}`;export{r as combinedQuery};
+const i=(n,t)=>n.length===0?t:`${n} and ${t}`;export{i as combinedQuery};

dist/utils/compileCSS.d.ts

@@ -9,4 +9,6 @@ import type { CSSValue } from '../types/style';
     media?: string;
+    layer?: string;
+    support?: string;
 };
-export declare const compileCSS: ({ className, property, styleValue, pseudo, media, }: CompileCSS) => string;
+export declare const compileCSS: ({ className, property, styleValue, pseudo, media, layer, support, }: CompileCSS) => string;
 export {};

dist/utils/compileCSS.js

@@ -1,1 +0,1 @@
-import{hyphenateProperty as o}from"./hyphenateProperty";const y=({className:t,property:$,styleValue:p,pseudo:i,media:l})=>{let r="",e="";return i?/^(:|\[|>|\ )/.test(i)?r=`.${t}${i.replace(/&/g,`.${t}`)}`:r=`${i.replace(/&/g,`.${t}`)}`:r=`.${t}`,Array.isArray(p)?e=`${r}{${o($)}:${p.join(" ")};}`:e=`${r}{${o($)}:${p};}`,l&&(e=`@media ${l} {${e}}`),e};export{y as compileCSS};
+const o=({className:t,property:l,styleValue:$,pseudo:i,media:p,layer:s,support:n})=>{let e="",r="";return i?/^(:|\[|>|\ )/.test(i)?e=`.${t}${i.replace(/&/g,`.${t}`)}`:e=`${i.replace(/&/g,`.${t}`)}`:e=`.${t}`,Array.isArray($)?r=`${e}{${l}:${$.join(" ")};}`:r=`${e}{${l}:${$};}`,p&&(r=`@media ${p} {${r}}`),s&&(r=`@layer ${s} {${r}}`),n&&(r=`@supports ${n} {${r}}`),r};export{o as compileCSS};

dist/utils/compileObjectCSS.d.ts

 import type { KazeGlobalStyle, KazeStyle } from '../types/style';
-export declare const compileObjectCSS: (style: KazeStyle | KazeGlobalStyle) => string;
+import type { ValueOf } from '../types/utils';
+export declare const compileObjectCSS: (style: KazeStyle | ValueOf<KazeGlobalStyle>) => string;

dist/utils/compileObjectCSS.js

@@ -1,1 +0,1 @@
-import{hyphenateProperty as l}from"./hyphenateProperty";const y=t=>{const o=[];for(const s in t){const e=t[s];(typeof e=="string"||typeof e=="number")&&o.push(l(s)+":"+e+";")}return o.join("")};export{y as compileObjectCSS};
+import{hyphenateProperty as s}from"./hyphenateProperty";const p=t=>{const o=[];for(const l in t){const e=t[l];(typeof e=="string"||typeof e=="number")&&o.push(s(l)+":"+e+";")}return o.join("")};export{p as compileObjectCSS};

dist/utils/constants.d.ts

@@ -1,2 +0,1 @@
-export declare const PREFIX = "z";
 export declare const STYLE_START_COMMENT = "/* KAZE STYLE STYLE START */";
@@ -3,0 +2,0 @@ export declare const STYLE_END_COMMENT = "/* KAZE STYLE STYLE END */";

dist/utils/constants.js

@@ -1,1 +0,1 @@
-const E="z",T="/* KAZE STYLE STYLE START */",L="/* KAZE STYLE STYLE END */",S="/* KAZE STYLE GLOBAL STYLE START */",A="/* KAZE STYLE GLOBAL STYLE END */";export{A as GLOBAL_STYLE_END_COMMENT,S as GLOBAL_STYLE_START_COMMENT,E as PREFIX,L as STYLE_END_COMMENT,T as STYLE_START_COMMENT};
+const E="/* KAZE STYLE STYLE START */",T="/* KAZE STYLE STYLE END */",L="/* KAZE STYLE GLOBAL STYLE START */",S="/* KAZE STYLE GLOBAL STYLE END */";export{S as GLOBAL_STYLE_END_COMMENT,L as GLOBAL_STYLE_START_COMMENT,T as STYLE_END_COMMENT,E as STYLE_START_COMMENT};

dist/utils/hashClassName.d.ts

@@ -7,5 +7,7 @@ import type { CSSValue } from '../types/style';
     media?: string;
+    layer?: string;
+    support?: string;
     styleValue?: AndArray<CSSValue>;
 };
-export declare const hashClassName: ({ property, pseudo, styleValue, media, }: Args) => string;
+export declare const hashClassName: ({ property, pseudo, styleValue, media, layer, support, }: Args) => string;
 export {};

dist/utils/hashClassName.js

@@ -1,1 +0,1 @@
-import{hash as p}from"../hash";const o=({property:t="",pseudo:s="",styleValue:r="",media:e=""})=>`_${p(`${t}${s}${e}${Array.isArray(r)?r.join(" "):r}`)}`;export{o as hashClassName};
+import{hash as o}from"../hash";const n=({property:t="",pseudo:s="",styleValue:r="",media:p="",layer:e="",support:i=""})=>`_${o(`${t}${s}${p}${e}${i}${Array.isArray(r)?r.join(" "):r}`)}`;export{n as hashClassName};

dist/utils/hashSelector.d.ts

@@ -5,4 +5,6 @@ declare type Args = {
     media?: string;
+    layer?: string;
+    support?: string;
 };
-export declare const hashSelector: ({ property, pseudo, media, }: Args) => string;
+export declare const hashSelector: ({ property, pseudo, media, layer, support, }: Args) => string;
 export {};

dist/utils/hashSelector.js

@@ -1,1 +0,1 @@
-import{hash as e}from"../hash";const g=({property:r="",pseudo:t="",media:s=""})=>`_${e(`${r}${t}${s}`)}`;export{g as hashSelector};
+import{hash as i}from"../hash";const o=({property:r="",pseudo:t="",media:s="",layer:e="",support:g=""})=>`_${i(`${r}${t}${s}${e}${g}`)}`;export{o as hashSelector};

dist/utils/hyphenateProperty.js

@@ -1,1 +0,1 @@
-const r={},o=e=>{if(r.hasOwnProperty(e))return r[e]||"";const n=e.includes("-")?e:e.replace(/[A-Z]/g,t=>"-"+t.toLowerCase());return r[e]=n,n};export{o as hyphenateProperty};
+const n=e=>e.includes("-")?e:e.replace(/[A-Z]/g,r=>"-"+r.toLowerCase());export{n as hyphenateProperty};

dist/utils/isShortHandProperty.d.ts

 import type { KazeStyle } from '../types/style';
-export declare const isShortHandProperty: (property: keyof KazeStyle) => property is "margin" | "padding" | "gap" | "inset" | "overflow" | "outline" | "borderRadius";
+export declare const isShortHandProperty: (property: keyof KazeStyle) => property is "$margin" | "$padding" | "$gap" | "$inset" | "$overflow" | "$outline" | "$borderRadius";

dist/utils/isShortHandProperty.js

@@ -1,1 +0,1 @@
-import{supportedShorthandProperties as t}from"../types/style";const p=r=>t.some(e=>e===r);export{p as isShortHandProperty};
+const r=t=>t.startsWith("$");export{r as isShortHandProperty};

dist/utils/resolveShortHandStyle.d.ts

@@ -1,3 +0,3 @@
-import type { CSSValue, SupportedShorthandProperties, SupportedCSSProperties } from '../types/style';
+import type { CSSValue, SupportShorthandProperties, SupportedCSSProperties } from '../types/style';
 import type { AndArray } from '../types/utils';
-export declare const resolveShortHandStyle: (property: SupportedShorthandProperties, styleValue: AndArray<CSSValue>) => SupportedCSSProperties;
+export declare const resolveShortHandStyle: (_property: keyof SupportShorthandProperties, styleValue: AndArray<CSSValue>) => SupportedCSSProperties;

dist/utils/resolveShortHandStyle.js

@@ -1,1 +0,1 @@
-import{generateStyles as u}from"./generateStyles";const n=(r,s)=>{const o=Array.isArray(s)?s.map(e=>e.toString()):s.toString().split(" ").filter(e=>e!=="");if(r==="margin"||r==="padding")return u(r,"",...o);if(r==="gap"){const[e,t=e]=o;return{columnGap:e,rowGap:t}}else if(r==="inset"){const[e,t=e,l=e,i=t]=o;return{top:e,right:t,bottom:l,left:i}}else if(r==="borderRadius"){const[e,t=e,l=e,i=t]=o;return{borderTopLeftRadius:e,borderTopRightRadius:t,borderBottomRightRadius:l,borderBottomLeftRadius:i}}else if(r==="overflow"){const[e,t=e]=o;return{overflowX:e,overflowY:t}}else if(r==="outline"){const[e,t,l]=o;return{outlineWidth:e,...t&&{outlineColor:t},...l&&{outlineStyle:l}}}else return{}};export{n as resolveShortHandStyle};
+import{generateStyles as a}from"./generateStyles";import{normalizeShorthandProperty as n}from"./normalizeShorthandProperty";const f=(u,i)=>{const o=Array.isArray(i)?i.map(e=>e.toString()):i.toString().split(" ").filter(e=>e!==""),t=n(u);if(t==="margin"||t==="padding")return a(t,"",...o);if(t==="gap"){const[e,r=e]=o;return{columnGap:e,rowGap:r}}else if(t==="inset"){const[e,r=e,l=e,s=r]=o;return{top:e,right:r,bottom:l,left:s}}else if(t==="borderRadius"){const[e,r=e,l=e,s=r]=o;return{borderTopLeftRadius:e,borderTopRightRadius:r,borderBottomRightRadius:l,borderBottomLeftRadius:s}}else if(t==="overflow"){const[e,r=e]=o;return{overflowX:e,overflowY:r}}else if(t==="outline"){const[e,r,l]=o;return{outlineWidth:e,...r&&{outlineColor:r},...l&&{outlineStyle:l}}}else return{}};export{f as resolveShortHandStyle};

package.json

 {
   "name": "@kaze-style/core",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "license": "MIT",
@@ -5,0 +5,0 @@ "author": "Taishi Naritomi",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

64990

increased by5.09%

Number of package files

71

increased by9.23%

Lines of code

259

increased by12.12%

No dependency changes