@kaze-style/core - npm Package Compare versions

Comparing version 0.3.5 to 0.3.7

dist/index.d.ts

 export * from './mergeStyle';
 export * from './createStyle';
+export * from './createGlobalStyle';
 export * from './__style';
+export * from './__globalStyle';
 export * from './__preStyle';
-export type { KazeStyle, ResolvedStyle } from './types/style';
+export * from './__preGlobalStyle';
+export type { KazeStyle, KazeGlobalStyle, ResolvedStyle, ResolvedGlobalStyle, } from './types/style';
 export * from './sortCSS';

dist/index.js

@@ -1,1 +0,1 @@
-export*from"./mergeStyle";export*from"./createStyle";export*from"./__style";export*from"./__preStyle";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";

dist/sortCSS.js

@@ -1,1 +0,1 @@
-import{MEDIA as m}from"stylis";import{RULESET as a,KEYFRAMES as s,COMMENT as f,serialize as l,stringify as y,compile as d}from"stylis";const u=["normal","link","visited","focus-within","focus","focus-visible","hover","active","keyframes","at-rules","media"];function E(e){return e.type===s?"keyframes":e.type.includes(m)?"media":"normal"}function c(e,i=""){return e.type===a||e.type===s?e.value+i:Array.isArray(e.children)?e.value+"["+e.children.map(n=>c(n,i)).join(",")+"]":""}const b=e=>{const n=d(e).filter(r=>r.type!==f).map(r=>({...r,bucketName:E(r),reference:c(r)})).reduce((r,t)=>(r[t.reference]=t,r),{}),o=Object.values(n).sort((r,t)=>r.bucketName===t.bucketName?0:u.indexOf(r.bucketName)-u.indexOf(t.bucketName));return l(o,y)};export{b as sortCSS};
+import{RULESET as l,KEYFRAMES as s,MEDIA as f,COMMENT as E,serialize as m,stringify as y,compile as d}from"stylis";import{GLOBAL_STYLE_END_COMMENT as p,GLOBAL_STYLE_START_COMMENT as g}from"./utils/constants";const u=["global","normal","link","visited","focus-within","focus","focus-visible","hover","active","keyframes","at-rules","media"];function b(r){return r.type===s?"keyframes":r.type.includes(f)?"media":"normal"}function o(r,t=""){return r.type===l||r.type===s?r.value+t:Array.isArray(r.children)?r.value+"["+r.children.map(n=>o(n,t)).join(",")+"]":""}const O=r=>{let t=!1;const c=d(r).map(e=>(e.type===E&&(e.value===g?t=!0:e.value===p&&(t=!1)),{...e,bucketName:t?"global":b(e),reference:o(e)})).reduce((e,i)=>(e[i.reference]=i,e),{}),a=Object.values(c).sort((e,i)=>e.bucketName===i.bucketName?0:u.indexOf(e.bucketName)-u.indexOf(i.bucketName));return m(a,y)};export{O as sortCSS};

dist/types/style.d.ts

@@ -14,3 +14,3 @@ import type { AtRules, Pseudos, PropertiesFallback, StandardShorthandProperties } from 'csstype';
 };
-export declare const supportedShorthandProperties: readonly ["margin", "padding", "gap", "inset", "overflow", "borderRadius"];
+export declare const supportedShorthandProperties: readonly ["margin", "padding", "gap", "inset", "overflow", "outline", "borderRadius"];
 export declare type SupportedShorthandProperties = typeof supportedShorthandProperties[number];
@@ -20,2 +20,3 @@ export declare type SupportedCSSProperties = Omit<PropertiesFallback<CSSValue>, 'animationName' | keyof Omit<StandardShorthandProperties, SupportedShorthandProperties>>;
 export declare type KazeStyle = NestedObject<NestedObject<NestedObject<NestedObject<NestedObject<SupportedAllStyle>>>>>;
+export declare type KazeGlobalStyle = PropertiesFallback<CSSValue>;
 export declare type ResolvedStyle = {
@@ -26,2 +27,6 @@ cssRules: string[];
 };
+export declare type ResolvedGlobalStyle = {
+    cssRules: string[];
+    index: number;
+};
 export {};

dist/types/style.js

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

dist/utils/compileObjectCSS.d.ts

@@ -1,2 +0,2 @@
-import type { KazeStyle } from '../types/style';
-export declare const compileObjectCSS: (style: KazeStyle) => string;
+import type { KazeGlobalStyle, KazeStyle } from '../types/style';
+export declare const compileObjectCSS: (style: KazeStyle | KazeGlobalStyle) => string;

dist/utils/compileObjectCSS.js

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

dist/utils/constants.d.ts

 export declare const PREFIX = "z";
+export declare const GLOBAL_STYLE_START_COMMENT = "/* KAZE STYLE GLOBAL STYLE START */";
+export declare const GLOBAL_STYLE_END_COMMENT = "/* KAZE STYLE GLOBAL STYLE END */";

dist/utils/constants.js

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

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" | "borderRadius";
+export declare const isShortHandProperty: (property: keyof KazeStyle) => property is "margin" | "padding" | "gap" | "inset" | "overflow" | "outline" | "borderRadius";

dist/utils/resolveShortHandStyle.js

@@ -1,1 +0,1 @@
-import{generateStyles as a}from"./generateStyles";const n=(t,s)=>{const o=Array.isArray(s)?s.map(e=>e.toString()):s.toString().split(" ").filter(e=>e!=="");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,i=e,l=r]=o;return{top:e,right:r,bottom:i,left:l}}else if(t==="overflow"){const[e,r=e]=o;return{overflowX:e,overflowY:r}}else if(t==="borderRadius"){const[e,r=e,i=e,l=r]=o;return{borderBottomRightRadius:i,borderBottomLeftRadius:l,borderTopRightRadius:r,borderTopLeftRadius:e}}else return{}};export{n as resolveShortHandStyle};
+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};

package.json

 {
   "name": "@kaze-style/core",
-  "version": "0.3.5",
+  "version": "0.3.7",
   "license": "MIT",
@@ -21,3 +21,3 @@ "author": "Taishi Naritomi",
   "scripts": {
-    "dev": "tsx ./../../scripts/build.ts watch",
+    "dev": "tsx ./../../scripts/build.ts --watch",
     "build": "tsx ./../../scripts/build.ts",
@@ -27,5 +27,5 @@ "test": "tsdx test"
   "dependencies": {
-    "csstype": "^3.1.0",
-    "stylis": "^4.1.1"
+    "csstype": "^3.1.1",
+    "stylis": "^4.1.2"
   }
 }

README.md

@@ -20,6 +20,20 @@ <div>
 
+## Feature
+
+🛠 &nbsp; KazeStyle can choose when to extract css. (build time & run time)
+
+💪 &nbsp; Type-safe styles via [csstype](https://github.com/frenic/csstype)
+
+🦷 &nbsp; Reuse styles using Atomic CSS
+
+👘 &nbsp; Can ignore specificity and merge styles
+
+🎨 &nbsp; Consistent styling using "@kaze-style/themes" (under development)
+
 ## Example
 
 ```ts
+//Component.tsx
 import { createStyle } from '@kaze-style/react';
+
 const classes = createStyle({
@@ -36,2 +50,26 @@ button: {
 
+### Setup Next.js（build time extract）
+
+```ts
+//next.config.mjs
+import { withKazeStyle } from '@kaze-style/next-plugin';
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default withKazeStyle(nextConfig);
+```
+
+## Inspiration
+
+KazeStyle was designed with reference to several CSS in JS libraries.
+
+[microsoft/griffel](https://github.com/microsoft/griffel)
+
+[seek-oss/vanilla-extract](https://github.com/seek-oss/vanilla-extract)
+
+[argyleink/open-props](https://github.com/argyleink/open-props)
+
+[callstack/linaria](https://github.com/callstack/linaria)
+
 ## Author
@@ -38,0 +76,0 @@

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

55488

increased by16.39%

Number of package files

61

increased by10.91%

Lines of code

202

increased by16.76%

Number of lines in readme file

80

increased by90.48%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• Updatedcsstype@^3.1.1

• Updatedstylis@^4.1.2