oncss

oncss? ????? ? ?????? ???? ??? ? ?? ??? CSS ??? ???? CSS-in-JS ????????. ??? ???, ??? ???, ?? ????? ??? ???? ???? ??? ???? ??? React? ?? JavaScript ??????? ??? ??? ?????.

---

??

npm? ?? oncss ???? ?????.

npm install oncss

?????? CSS ?? ????:

import css from 'oncss';

---

?? ??: CSS ??

CSS ??? CSS? ???? ???? ??????? ????? ??? oncss? ?????. ??? ?????:

• CSS ??: ?? CSS ?? ? ?? ?????.
• ?? ???: &? ???? ?? ??? ??? ???? ?????.
• ??? ??: @media ??? ???? ??? ???? ?????.
• ????: @keyframes? ???? ?????? ????.
• ?? ???: @global? ???? ????? ???? ?????.
• ??? ?? ???: ???? ?? ??? ??? ???? ?????.
• ?? At-??: @container, @layer ? @supports? ?? ?? At-??? ?????.

?? ?

const buttonStyles = css({
  backgroundColor: 'blue',
  color: 'white',
  padding: '10px 20px',
  borderRadius: '5px',
  '&:hover': {
    backgroundColor: 'darkblue',
  },
  '@media (min-width: 768px)': {
    padding: '15px 30px',
  },
});

console.log(buttonStyles);

---

?? ??

CSS ??? ?? ??? ?? ????? ? ????.

?? ??? ??

??? ?

npm install oncss

??? ??

???? ??? ???? ???? ??? ???? ?? ? ????.

import css from 'oncss';

---

?? ??

oncss? React? ???? ?????. ??? ??? ??? ?? ??? ????? ?? ???.

?? ?

const buttonStyles = css({
  backgroundColor: 'blue',
  color: 'white',
  padding: '10px 20px',
  borderRadius: '5px',
  '&:hover': {
    backgroundColor: 'darkblue',
  },
  '@media (min-width: 768px)': {
    padding: '15px 30px',
  },
});

console.log(buttonStyles);

---

?? ??

??? ???

?? ?? ?? ?? ???? ??? ??:

const styles = css({
  fontSize: 16,
  padding: 10,
}, {
  classPrefix: 'myprefix',
  breakpoints: {
    sm: 480,
    md: 768,
    lg: 1024,
  },
});

??? ??

??? ???? ?? ??:

const responsiveStyles = css({
  fontSize: 14,
  padding: {
    sm: 12,
    lg: 24
  },

}, {
  breakpoints: {
    sm: 480,
    md: 768,
    lg: 1024,
  },
});

????

????? ?? ? ??:

import React from 'react';
import css from 'oncss';

const buttonStyle = css({
  backgroundColor: 'green',
  color: 'white',
  padding: '10px 20px',
  borderRadius: '8px',
  '&:hover': {
    backgroundColor: 'darkgreen',
  },
});

function Button() {
  return <button classname="{buttonStyle.toString()}">Click Me</button>;
}

export default Button;

??? ???

??? ???? ??? ??:

const cardStyles = css({
  padding: '20px',
  border: '1px solid #ccc',
  '& h1': {
    fontSize: '24px',
    margin: 0,
  },
  '&:hover': {
    boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
  },
});

---

???? At-??

oncss? ??? ??? ???? ?? ??? CSS at-rules? ?????. ??? ??? ?? ???? at-rules ?????.

---

?? ? ????

oncss? ??? CSS ???? ???? ???? ?? CSSFactory? ???? ??? ???(SSR)? ?????. ?? ?? ???? ???? HTML? ???? ???? ??? ? ????.

??? ?

??? React? ?? ? ???? oncss? ???? ??? ?? ????.

npm install oncss

??CSS?

formatCSSValue? ??? ?? px? ?? ??? ???? CSS ?? ??? ???? ???? ?????.

import css from 'oncss';

---

?????? ??

oncss? ??? TypeScript ??? ????? CSS ?? ? ??? ?? ??? ??? ? ????.

CSS ?? ??

CSSProps ??? ???? CSS ??? ??? ??? ? ????.

const buttonStyles = css({
  backgroundColor: 'blue',
  color: 'white',
  padding: '10px 20px',
  borderRadius: '5px',
  '&:hover': {
    backgroundColor: 'darkblue',
  },
  '@media (min-width: 768px)': {
    padding: '15px 30px',
  },
});

console.log(buttonStyles);

??? ?? ??

?? ??? ??? ??? ?? ????.

const styles = css({
  fontSize: 16,
  padding: 10,
}, {
  classPrefix: 'myprefix',
  breakpoints: {
    sm: 480,
    md: 768,
    lg: 1024,
  },
});

---

??

oncss? ?? ? ??????? ???? ??????. ??? ????? ???? ??????? ??? ?? ??? ??? ?? ????? ?? ??? ?????.

??

? ??? ONCSS? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!