CSS

CSS 相关的工具

style-observer ---> 监听 CSS 属性变化

可以理解为 MutationObserver for css。解决了诸多边缘问题，一些特性：

• Observe changes to custom properties
• Observe changes to standard properties (except display, transition, animation)
• Observe changes on any element (including those in Shadow DOM)

const observer = new StyleObserver(records => console.log(records));
const properties = ["color", "--my-custom-property"];
const targets = document.querySelectorAll(".my-element");
observer.observe(targets, properties);

powergitch ---> 为元素添加毛刺效果

<!-- Image -->
<img src='https://.../image.png' class='glitch' />

<!-- Button -->
<button class='glitch'>
    click me 🤷‍♂️
</button>

<!-- Any DOM element -->
<div class='glitch'>
    <p>Hello <b>World</b></p>
</div>

import { PowerGlitch } from 'powerglitch'
PowerGlitch.glitch('.glitch')

CSSgram ---> 图片滤镜库

CSSgram 是一个 CSS 库，以 CSS 类的形式提供了大量的图片滤镜，我们可以在图片上添加这些类，来实现滤镜效果

<!-- HTML -->
<figure class="aden">
  <img src="../img.png">
</figure>

stitches ---> CSS-in-js 方案（React）

有着非常灵活的CSS配置，在继承、主题、全局场景下支持很好，适用于CSS属性切换频率高的项目

const Button = styled('button', {
  backgroundColor: 'gainsboro',
  borderRadius: '9999px',
  fontSize: '13px',
  border: '0',
});

() => <Button>Button</Button>;

csstype ---> 为css-in-js提供类型支持

支持ts和flowJs写法，让CSS也拥有类型能力

import type * as CSS from 'csstype';

const style: CSS.Properties = {
  colour: 'white', // Type error on property
  textAlign: 'middle', // Type error on value
};

let button = document.createElement('button');

Object.assign(button.style, style);

daisyui ---> 基于 tailwindCSS 的 UI 框架

You need Node.js and Tailwind CSS installed.

Install

daisyUI install

$ npm i daisyui@latest

Setting

Then add daisyUI to your tailwind.config.js files

module.exports = {
  //...
  plugins: [require("daisyui")],
}

critters ---> 提取 inline CSS

import Critters from 'critters';

const critters = new Critters({
  // optional configuration (see below)
});

const html = `
  <style>
    .red { color: red }
    .blue { color: blue }
  </style>
  <div class="blue">I'm Blue</div>
`;

const inlined = await critters.process(html);

console.log(inlined);
// "<style>.blue{color:blue}</style><div class=\"blue\">I'm Blue</div>"

Pollen ---> CSS 变量库

支持 CSS、CSS in JS、Object Style、Inline Style 等多种写法

.button {
   font-family: var(--font-sans);
   font-size: var(--scale-00);
   font-weight: var(--weight-medium); 
   line-height: var(--line-none);
   padding: var(--size-3) var(--size-5);
   background: var(--color-blue);
   border-radius: var(--radius-xs);
   color: white;
}

lightningcss ---> CSS 压缩/解析/转换

import { transform } from 'lightningcss';

let { code, map } = transform({
  filename: 'style.css',
  code: Buffer.from('.foo { color: red }'),
  minify: true,
  sourceMap: true
});

open-props ---> CSS 变量框架

.card {
  border-radius: var(--radius-2);
  padding: var(--size-fluid-3);
  box-shadow: var(--shadow-2);

  &:hover {
    box-shadow: var(--shadow-3);
  }

  @media (--motionOK) {
    animation: var(--animation-fade-in);
  }
}

cssnano ---> A css modular minifier

A css mudular minifier, built on top of PostCSS ecosystem.

import postcss from 'postcss';
import cssnano from 'cssnano';
import litePreset from 'cssnano-preset-lite';
import autoprefixer from 'autoprefixer';
const preset = litePreset({ discardComments: false });

postcss([cssnano({ preset, plugins: [autoprefixer] })])
  .process("/* Your CSS here */");

clean-css ---> CSS 压缩工具

除了压缩功能，还有这极为灵活的兼容模式

var CleanCSS = require('clean-css');
var input = 'a{font-weight:bold;}';
var options = { /* options */ };
var output = new CleanCSS(options).minify(input);