PostCSS Color Function 使用教程

PostCSS Color Function 使用教程

postcss-color-functionPostCSS plugin to transform W3C CSS color function to more compatible CSS项目地址:https://gitcode.com/gh_mirrors/po/postcss-color-function

1. 项目的目录结构及介绍

postcss-color-function/
├── lib/
│   ├── index.js
│   ├── parser.js
│   ├── transform.js
│   └── visitor.js
├── test/
│   ├── basic.css
│   ├── basic.expect.css
│   ├── index.js
│   ├── parser.js
│   ├── transform.js
│   └── visitor.js
├── .editorconfig
├── .eslintrc
├── .gitignore
├── .travis.yml
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── package.json
└── yarn.lock

• lib/：包含项目的主要逻辑文件。
  • index.js：入口文件。
  • parser.js：解析颜色函数的文件。
  • transform.js：转换颜色函数的文件。
  • visitor.js：访问者模式的实现文件。
• test/：包含项目的测试文件。
  • basic.css：测试用的CSS文件。
  • basic.expect.css：测试期望的CSS文件。
  • index.js：测试入口文件。
  • parser.js：测试解析器的文件。
  • transform.js：测试转换器的文件。
  • visitor.js：测试访问者的文件。
• .editorconfig：编辑器配置文件。
• .eslintrc：ESLint 配置文件。
• .gitignore：Git 忽略文件配置。
• .travis.yml：Travis CI 配置文件。
• CHANGELOG.md：变更日志。
• CONTRIBUTING.md：贡献指南。
• LICENSE：许可证文件。
• README.md：项目说明文件。
• package.json：项目依赖和脚本配置文件。
• yarn.lock：Yarn 锁定文件。

2. 项目的启动文件介绍

项目的启动文件是 lib/index.js，它是整个插件的入口点。该文件导出了一个 PostCSS 插件，用于处理 CSS 中的颜色函数。

// lib/index.js
'use strict';

var parser = require('./parser');
var transform = require('./transform');
var visitor = require('./visitor');

module.exports = function(options) {
  return {
    postcssPlugin: 'postcss-color-function',
    Once(root) {
      root.walkDecls(visitor(parser, transform));
    }
  };
};

module.exports.postcss = true;

3. 项目的配置文件介绍

项目的配置文件主要是 package.json，它包含了项目的依赖、脚本和其他元数据。

{
  "name": "postcss-color-function",
  "version": "4.1.0",
  "description": "PostCSS plugin to transform W3C CSS color function to more compatible CSS.",
  "keywords": [
    "css",
    "postcss",
    "postcss-plugin",
    "color",
    "colour",
    "function"
  ],
  "author": "Maxime Thirouin",
  "license": "MIT",
  "repository": "https://github.com/postcss/postcss-color-function.git",
  "files": [
    "index.js",
    "lib"
  ],
  "dependencies": {
    "css-color-function": "^1.3.3",
    "postcss": "^7.0.2",
    "postcss-message-helpers": "^2.0.0",
    "color": "^0.11.1"
  },
  "devDependencies": {
    "eslint": "^4.19.1",
    "eslint-config-postcss": "^2.0.2",
    "jest": "^22.4.3"
  },
  "scripts": {
    "test": "jest",
    "lint": "eslint ."
  },
  "eslintConfig": {
    "extends": "eslint-config-postcss/es5"
  },
  "jest": {
    "testEnvironment": "node"
  }
}

• name：项目名称。
• version：项目版本。
• description：项目描述。
• keywords：项目关键词。
• author：项目作者。
• license：项目许可证。
• repository：项目仓库地址。
• files：项目文件列表。
• dependencies：项目依赖。
• devDependencies：开发依赖。
• scripts：项目脚本。
• eslintConfig：ESLint 配置。
• jest：Jest 测试配置。

postcss-color-functionPostCSS plugin to transform W3C CSS color function to more compatible CSS项目地址:https://gitcode.com/gh_mirrors/po/postcss-color-function