{"id":13563788,"url":"https://github.com/csstools/postcss-custom-selectors","last_synced_at":"2025-04-03T20:31:44.402Z","repository":{"id":24138354,"uuid":"27527549","full_name":"csstools/postcss-custom-selectors","owner":"csstools","description":"Use Custom Selectors in CSS","archived":true,"fork":false,"pushed_at":"2022-06-06T05:46:27.000Z","size":360,"stargazers_count":131,"open_issues_count":0,"forks_count":24,"subscribers_count":11,"default_branch":"master","last_synced_at":"2024-04-14T05:31:41.022Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://postcss.github.io/postcss-custom-selectors","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/csstools.png","metadata":{"files":{"readme":"README-zh.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-12-04T06:55:00.000Z","updated_at":"2023-10-03T20:50:40.000Z","dependencies_parsed_at":"2022-08-22T10:11:16.071Z","dependency_job_id":null,"html_url":"https://github.com/csstools/postcss-custom-selectors","commit_stats":null,"previous_names":["postcss/postcss-custom-selector","postcss/postcss-custom-selectors"],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csstools%2Fpostcss-custom-selectors","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csstools%2Fpostcss-custom-selectors/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csstools%2Fpostcss-custom-selectors/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csstools%2Fpostcss-custom-selectors/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/csstools","download_url":"https://codeload.github.com/csstools/postcss-custom-selectors/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247074800,"owners_count":20879329,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T13:01:23.274Z","updated_at":"2025-04-03T20:31:44.378Z","avatar_url":"https://github.com/csstools.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# PostCSS Custom Selectors \n\n[![Build Status](https://travis-ci.org/postcss/postcss-custom-selectors.svg?branch=master)](https://travis-ci.org/postcss/postcss-custom-selectors) \n[![NPM Downloads](https://img.shields.io/npm/dm/postcss-custom-selectors.svg?style=flat)](https://www.npmjs.com/package/postcss-custom-selectors) \n[![NPM Version](http://img.shields.io/npm/v/postcss-custom-selectors.svg?style=flat)](https://www.npmjs.com/package/postcss-custom-selectors) \n[![License](https://img.shields.io/npm/l/postcss-custom-selectors.svg?style=flat)](http://opensource.org/licenses/MIT) \n\n\u003e [PostCSS](https://github.com/postcss/postcss) 实现 [W3C CSS Extensions(Custom Selectors)](http://dev.w3.org/csswg/css-extensions/#custom-selectors) 的插件。\n\n[English](README.md)\n\n![GIF Demo](http://gtms01.alicdn.com/tps/i1/TB1ZCe3GVXXXXbzXFXXRi48IXXX-780-610.gif)\n\n## 安装\n\n    $ npm install postcss-custom-selectors\n\n## 快速开始\n\n示例1：\n\n```js\n// dependencies\nvar fs = require('fs')\nvar postcss = require('postcss')\nvar selector = require('postcss-custom-selectors')\n\n// css to be processed\nvar css = fs.readFileSync('input.css', 'utf8')\n\n// process css using postcss-custom-selectors\nvar output = postcss()\n  .use(selector())\n  .process(css)\n  .css\n  \nconsole.log('\\n====\u003eOutput CSS:\\n', output)  \n```\n\n或者：\n\n```js\nvar output = postcss(selector())\n  .process(css)\n  .css\n```\n\ninput.css：\n\n```css\n@custom-selector :--heading h1, h2, h3, h4, h5, h6;\n\narticle :--heading + p { \n  margin-top: 0;\n}\n```\n\n你将得到：\n\n```css\narticle h1 + p,\narticle h2 + p,\narticle h3 + p,\narticle h4 + p,\narticle h5 + p,\narticle h6 + p { \n  margin-top: 0;\n}\n```\n\n## CSS 语法\n\n    @custom-selector = @custom-selector :\u003cextension-name\u003e \u003cselector\u003e;\n\n\n## 如何使用\n\n自定义选择器是一个伪类，所以必须使用 `:--`来定义。\n\n\n例如，模拟一个 [:any-link](http://dev.w3.org/csswg/selectors/#the-any-link-pseudo) 选择器：\n\n示例2：\n\ninput.css:\n\n```css\n@custom-selector :--any-link :link, :visited;\n\na:--any-link {\n  color: blue;\n}\n```\n\noutput:\n\n```css\na:link,\na:visited {\n  color: blue;\n}\n```\n\n### 多个选择器\n\n`@custom-selector` 目前**不支持**在同一个选择器中调用多个自定义选择器，例如：\n\n示例3：\n\n```css\n@custom-selector :--heading h1, h2, h3, h4, h5, h6;\n@custom-selector :--any-link :link, :visited;\n\n.demo :--heading, a:--any-link { \n  font-size: 32px;\n}\n```\n\n将会输出错误的 CSS 代码。\n\n```css\n.demo h1,\n.demo h2,\n.demo h3,\n.demo h4,\n.demo h5,\n.demo h6,:link,\n:visited { \n  font-size: 32px;\n}\n```\n\n\n### Node Watch\n\n依赖 [chokidar](https://github.com/paulmillr/chokidar) 模块。\n\n```js\nvar fs = require('fs')\nvar chokidar = require('chokidar')\nvar postcss = require('postcss')\nvar selector = require('postcss-custom-selectors')\n\nvar src = 'input.css'\n\nconsole.info('Watching…\\nModify the input.css and save.')\n\nchokidar.watch(src, {\n  ignored: /[\\/\\\\]\\./,\n  persistent: true\n}).on('all',\n  function(event, path, stats) {\n    var css = fs.readFileSync(src, 'utf8')\n    var output = postcss(selector())\n      .process(css)\n      .css\n    fs.writeFileSync('output.css', output)\n  })\n```\n\n### Grunt\n\n```js\nmodule.exports = function(grunt) {\n  grunt.initConfig({\n    pkg: grunt.file.readJSON('package.json'),\n    postcss: {\n      options: {\n        processors: [\n          require('autoprefixer-core')({ browsers: ['\u003e 0%'] }).postcss, //Other plugin\n          require('postcss-custom-selectors')(),\n        ]\n      },\n      dist: {\n        src: ['src/*.css'],\n        dest: 'build/grunt.css'\n      }\n    }\n  });\n\n  grunt.loadNpmTasks('grunt-contrib-uglify');\n  grunt.loadNpmTasks('grunt-postcss');\n\n  grunt.registerTask('default', ['postcss']);\n}\n```\n\n### Gulp\n\n```js\nvar gulp = require('gulp');\nvar rename = require('gulp-rename');\nvar postcss = require('gulp-postcss');\nvar selector = require('postcss-custom-selectors')\nvar autoprefixer = require('autoprefixer-core')\n\ngulp.task('default', function () {\n    var processors = [\n        autoprefixer({ browsers: ['\u003e 0%'] }), //Other plugin\n        selector()\n    ];\n    gulp.src('src/*.css')\n        .pipe(postcss(processors))\n        .pipe(rename('gulp.css'))\n        .pipe(gulp.dest('build'))\n});\ngulp.watch('src/*.css', ['default']);\n```\n\n\n\n### 选项\n\n#### 1. **`lineBreak`**(default: `true`)\n\n设置多个选择器是否换行，默认开启换行。\n\n关闭换行：\n\n```js\nvar options = {\n  lineBreak: false\n}\n\nvar output = postcss(selector(options))\n  .process(css)\n  .css\n```\n\n「示例1」中的 `input.css` 将输出为：\n\n```css\narticle h1 + p, article h2 + p, article h3 + p, article h4 + p, article h5 + p, article h6 + p {\n  margin-top: 0;\n}\n```\n\n#### 2. **`extensions`** (default: `{}`)\n\n该选项允许你自定义一个对象来设置 `\u003cextension-name\u003e`（选择器别名）和 `\u003cselector\u003e`，这些定义将覆盖 CSS 中相同别名的 `@custom-selector`。\n\n```js\nvar options = {\n  extensions: {\n    ':--any' : 'section, article, aside, nav'\n  }\n}\n\nvar output = postcss(selector(options))\n  .process(css)\n  .css;\n```\n\ninput.css\n\n```css\n/* 不会生效 */\nsection h1,\narticle h1,\naside h1,\nnav h1 {\n  margin-top: 16px;\n}\n```\n\noutput:\n\n```css\nsection h1, article h1, aside h1, nav h1 {\n  margin-top: 16px;\n}\n```\n\n\n## 贡献\n\n* 安装相关的依赖模块。\n* 尊重编码风格（安装 [EditorConfig](http://editorconfig.org/)）。\n* 在[test](test)目录添加测试用例。\n* 运行测试。\n\n```\n$ git clone https://github.com/postcss/postcss-custom-selectors.git\n$ git checkout -b patch\n$ npm install\n$ npm test\n```\n\n## [Changelog](CHANGELOG.md)\n\n## [License](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcsstools%2Fpostcss-custom-selectors","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcsstools%2Fpostcss-custom-selectors","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcsstools%2Fpostcss-custom-selectors/lists"}