taishinaritomi / kaze-style Goto Github PK
View Code? Open in Web Editor NEWKaze [風] zero-runtime CSS in JS
Home Page: https://npmjs.com/package/@kaze-style/core
License: MIT License
Kaze [風] zero-runtime CSS in JS
Home Page: https://npmjs.com/package/@kaze-style/core
License: MIT License
Not separating the style files causes many problems with style extraction. Since the beginning of development, we have had a policy of not separating style files, but we are going to separate style files in order to support many UI libraries.
// Button.tsx
import { createStyle, mergeStyle } from '@kaze-style/react';
import type { ComponentProps, FC } from 'react';
const classes = createStyle({
button: {
background: 'red',
borderRadius: '6px',
':hover': {
background: 'orange',
},
},
});
export const Button: FC<ComponentProps<'button'>> = (props) => {
return (
<button
{...props}
className={mergeStyle(classes.button, props.className)}
/>
);
};
// Button.style.ts
import { createStyle } from '@kaze-style/react';
export const style = createStyle({
button: {
background: 'red',
borderRadius: '6px',
':hover': {
background: 'orange',
},
},
});
// Button.tsx
import { mergeStyle } from '@kaze-style/react';
import type { ComponentProps, FC } from 'react';
import { style } from './Button.style';
export const Button: FC<ComponentProps<'button'>> = (props) => {
return (
<button
{...props}
className={mergeStyle(style.button, props.className)}
/>
);
};
I recently stumbled upon this project whilst looking into performance issues with vanilla-extract.
I like the simplicity, and the fact that it seems to be truly atomic css. I've done some tests with provided playgrounds, and it is working very nicely.
I was mainly wondering about the roadmap. What do you want to add or change before this can be considered for a production release? Do you need help with anything?
I was also wondering about #90. It does seem like you still can use a single file for styles.
Is that intentional? If it is, very nice! My biggest issue with vanilla-extract
is the fact that I can't co-locate styles to the components, and that I need to have multiple files. Kaze-style seems to solve this pretty well.
Thank you for your work so far. This is looking very promising!
Still in the thinking stage 🧠
import { style, mergeStyle } from '@kaze-style/core';
import React from 'react';
// from https://cva.style/
// from https://vanilla-extract.style/documentation/api/style-variants/
// from https://stitches.dev/docs/variants
const palette = (..._) => (...__) => _[0];
const classes = style({
$base: {
display: 'flex',
},
})
const className = palette({
base: {
display: 'flex',
},
color: {
default: {
color: 'black'
},
red: {
color: 'red',
},
blue: {
color: 'blue',
},
},
space: {
2: {
margin: '10px',
padding: '10px',
},
4: {
margin: '10px',
padding: '10px',
},
},
});
<div className={mergeStyle(classes.$base, className({ color: 'red', spase: 2 }))}></div>
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.