From 28ee2bf7c7c21bbaed8b3232041b869e9ebfba05 Mon Sep 17 00:00:00 2001 From: Antonio Laguna Date: Sun, 23 Jan 2022 17:59:58 +0100 Subject: [PATCH 1/4] WIP: PostCSS Normalize Display Values --- package-lock.json | 25 ++++ .../.gitignore | 6 + .../postcss-normalize-display-values/.nvmrc | 1 + .../.tape.mjs | 8 ++ .../CHANGELOG.md | 1 + .../INSTALL.md | 3 + .../LICENSE.md | 108 ++++++++++++++++++ .../README.md | 5 + .../package.json | 45 ++++++++ .../src/index.ts | 75 ++++++++++++ .../src/mappings.ts | 43 +++++++ .../stryker.conf.json | 19 +++ .../test/_import.mjs | 6 + .../test/_require.cjs | 6 + .../test/basic.css | 71 ++++++++++++ .../test/basic.expect.css | 71 ++++++++++++ .../test/basic.preserve-true.expect.css | 71 ++++++++++++ .../tsconfig.json | 9 ++ 18 files changed, 573 insertions(+) create mode 100644 plugins/postcss-normalize-display-values/.gitignore create mode 100644 plugins/postcss-normalize-display-values/.nvmrc create mode 100644 plugins/postcss-normalize-display-values/.tape.mjs create mode 100644 plugins/postcss-normalize-display-values/CHANGELOG.md create mode 100644 plugins/postcss-normalize-display-values/INSTALL.md create mode 100644 plugins/postcss-normalize-display-values/LICENSE.md create mode 100644 plugins/postcss-normalize-display-values/README.md create mode 100644 plugins/postcss-normalize-display-values/package.json create mode 100644 plugins/postcss-normalize-display-values/src/index.ts create mode 100644 plugins/postcss-normalize-display-values/src/mappings.ts create mode 100644 plugins/postcss-normalize-display-values/stryker.conf.json create mode 100644 plugins/postcss-normalize-display-values/test/_import.mjs create mode 100644 plugins/postcss-normalize-display-values/test/_require.cjs create mode 100644 plugins/postcss-normalize-display-values/test/basic.css create mode 100644 plugins/postcss-normalize-display-values/test/basic.expect.css create mode 100644 plugins/postcss-normalize-display-values/test/basic.preserve-true.expect.css create mode 100644 plugins/postcss-normalize-display-values/tsconfig.json diff --git a/package-lock.json b/package-lock.json index 430bd02e5..13e7e8ccb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1755,6 +1755,10 @@ "resolved": "plugins/postcss-is-pseudo-class", "link": true }, + "node_modules/@csstools/postcss-normalize-display-values": { + "resolved": "plugins/postcss-normalize-display-values", + "link": true + }, "node_modules/@csstools/postcss-tape": { "resolved": "packages/postcss-tape", "link": true @@ -6605,6 +6609,7 @@ } }, "plugins/postcss-hwb-function": { + "name": "@csstools/postcss-hwb-function", "version": "1.0.0", "license": "CC0-1.0", "dependencies": { @@ -6696,6 +6701,20 @@ "postcss": "^8.3" } }, + "plugins/postcss-normalize-display-values": { + "name": "@csstools/postcss-normalize-display-values", + "version": "1.0.0", + "license": "CC0-1.0", + "dependencies": { + "postcss-value-parser": "^4.2.0" + }, + "engines": { + "node": "^12 || ^14 || >=16" + }, + "peerDependencies": { + "postcss": "^8.3" + } + }, "plugins/postcss-overflow-shorthand": { "version": "3.0.2", "license": "CC0-1.0", @@ -7945,6 +7964,12 @@ "postcss-tape": "^6.0.1" } }, + "@csstools/postcss-normalize-display-values": { + "version": "file:plugins/postcss-normalize-display-values", + "requires": { + "postcss-value-parser": "^4.2.0" + } + }, "@csstools/postcss-tape": { "version": "file:packages/postcss-tape", "requires": { diff --git a/plugins/postcss-normalize-display-values/.gitignore b/plugins/postcss-normalize-display-values/.gitignore new file mode 100644 index 000000000..7172b04f1 --- /dev/null +++ b/plugins/postcss-normalize-display-values/.gitignore @@ -0,0 +1,6 @@ +node_modules +package-lock.json +yarn.lock +*.result.css +*.result.css.map +dist/* diff --git a/plugins/postcss-normalize-display-values/.nvmrc b/plugins/postcss-normalize-display-values/.nvmrc new file mode 100644 index 000000000..f0b10f153 --- /dev/null +++ b/plugins/postcss-normalize-display-values/.nvmrc @@ -0,0 +1 @@ +v16.13.1 diff --git a/plugins/postcss-normalize-display-values/.tape.mjs b/plugins/postcss-normalize-display-values/.tape.mjs new file mode 100644 index 000000000..83647cd07 --- /dev/null +++ b/plugins/postcss-normalize-display-values/.tape.mjs @@ -0,0 +1,8 @@ +import postcssTape from '../../packages/postcss-tape/dist/index.mjs'; +import plugin from '@csstools/postcss-normalize-display-values'; + +postcssTape(plugin)({ + basic: { + message: 'supports basic usage', + }, +}); diff --git a/plugins/postcss-normalize-display-values/CHANGELOG.md b/plugins/postcss-normalize-display-values/CHANGELOG.md new file mode 100644 index 000000000..2475e1207 --- /dev/null +++ b/plugins/postcss-normalize-display-values/CHANGELOG.md @@ -0,0 +1 @@ +# Changes to PostCSS Base Plugin diff --git a/plugins/postcss-normalize-display-values/INSTALL.md b/plugins/postcss-normalize-display-values/INSTALL.md new file mode 100644 index 000000000..ceacefa74 --- /dev/null +++ b/plugins/postcss-normalize-display-values/INSTALL.md @@ -0,0 +1,3 @@ +# Installing PostCSS Base Plugin + + diff --git a/plugins/postcss-normalize-display-values/LICENSE.md b/plugins/postcss-normalize-display-values/LICENSE.md new file mode 100644 index 000000000..0bc1fa706 --- /dev/null +++ b/plugins/postcss-normalize-display-values/LICENSE.md @@ -0,0 +1,108 @@ +# CC0 1.0 Universal + +## Statement of Purpose + +The laws of most jurisdictions throughout the world automatically confer +exclusive Copyright and Related Rights (defined below) upon the creator and +subsequent owner(s) (each and all, an “owner”) of an original work of +authorship and/or a database (each, a “Work”). + +Certain owners wish to permanently relinquish those rights to a Work for the +purpose of contributing to a commons of creative, cultural and scientific works +(“Commons”) that the public can reliably and without fear of later claims of +infringement build upon, modify, incorporate in other works, reuse and +redistribute as freely as possible in any form whatsoever and for any purposes, +including without limitation commercial purposes. These owners may contribute +to the Commons to promote the ideal of a free culture and the further +production of creative, cultural and scientific works, or to gain reputation or +greater distribution for their Work in part through the use and efforts of +others. + +For these and/or other purposes and motivations, and without any expectation of +additional consideration or compensation, the person associating CC0 with a +Work (the “Affirmer”), to the extent that he or she is an owner of Copyright +and Related Rights in the Work, voluntarily elects to apply CC0 to the Work and +publicly distribute the Work under its terms, with knowledge of his or her +Copyright and Related Rights in the Work and the meaning and intended legal +effect of CC0 on those rights. + +1. Copyright and Related Rights. A Work made available under CC0 may be + protected by copyright and related or neighboring rights (“Copyright and + Related Rights”). Copyright and Related Rights include, but are not limited + to, the following: + 1. the right to reproduce, adapt, distribute, perform, display, communicate, + and translate a Work; + 2. moral rights retained by the original author(s) and/or performer(s); + 3. publicity and privacy rights pertaining to a person’s image or likeness + depicted in a Work; + 4. rights protecting against unfair competition in regards to a Work, + subject to the limitations in paragraph 4(i), below; + 5. rights protecting the extraction, dissemination, use and reuse of data in + a Work; + 6. database rights (such as those arising under Directive 96/9/EC of the + European Parliament and of the Council of 11 March 1996 on the legal + protection of databases, and under any national implementation thereof, + including any amended or successor version of such directive); and + 7. other similar, equivalent or corresponding rights throughout the world + based on applicable law or treaty, and any national implementations + thereof. + +2. Waiver. To the greatest extent permitted by, but not in contravention of, + applicable law, Affirmer hereby overtly, fully, permanently, irrevocably and + unconditionally waives, abandons, and surrenders all of Affirmer’s Copyright + and Related Rights and associated claims and causes of action, whether now + known or unknown (including existing as well as future claims and causes of + action), in the Work (i) in all territories worldwide, (ii) for the maximum + duration provided by applicable law or treaty (including future time + extensions), (iii) in any current or future medium and for any number of + copies, and (iv) for any purpose whatsoever, including without limitation + commercial, advertising or promotional purposes (the “Waiver”). Affirmer + makes the Waiver for the benefit of each member of the public at large and + to the detriment of Affirmer’s heirs and successors, fully intending that + such Waiver shall not be subject to revocation, rescission, cancellation, + termination, or any other legal or equitable action to disrupt the quiet + enjoyment of the Work by the public as contemplated by Affirmer’s express + Statement of Purpose. + +3. Public License Fallback. Should any part of the Waiver for any reason be + judged legally invalid or ineffective under applicable law, then the Waiver + shall be preserved to the maximum extent permitted taking into account + Affirmer’s express Statement of Purpose. In addition, to the extent the + Waiver is so judged Affirmer hereby grants to each affected person a + royalty-free, non transferable, non sublicensable, non exclusive, + irrevocable and unconditional license to exercise Affirmer’s Copyright and + Related Rights in the Work (i) in all territories worldwide, (ii) for the + maximum duration provided by applicable law or treaty (including future time + extensions), (iii) in any current or future medium and for any number of + copies, and (iv) for any purpose whatsoever, including without limitation + commercial, advertising or promotional purposes (the “License”). The License + shall be deemed effective as of the date CC0 was applied by Affirmer to the + Work. Should any part of the License for any reason be judged legally + invalid or ineffective under applicable law, such partial invalidity or + ineffectiveness shall not invalidate the remainder of the License, and in + such case Affirmer hereby affirms that he or she will not (i) exercise any + of his or her remaining Copyright and Related Rights in the Work or (ii) + assert any associated claims and causes of action with respect to the Work, + in either case contrary to Affirmer’s express Statement of Purpose. + +4. Limitations and Disclaimers. + 1. No trademark or patent rights held by Affirmer are waived, abandoned, + surrendered, licensed or otherwise affected by this document. + 2. Affirmer offers the Work as-is and makes no representations or warranties + of any kind concerning the Work, express, implied, statutory or + otherwise, including without limitation warranties of title, + merchantability, fitness for a particular purpose, non infringement, or + the absence of latent or other defects, accuracy, or the present or + absence of errors, whether or not discoverable, all to the greatest + extent permissible under applicable law. + 3. Affirmer disclaims responsibility for clearing rights of other persons + that may apply to the Work or any use thereof, including without + limitation any person’s Copyright and Related Rights in the Work. + Further, Affirmer disclaims responsibility for obtaining any necessary + consents, permissions or other rights required for any use of the Work. + 4. Affirmer understands and acknowledges that Creative Commons is not a + party to this document and has no duty or obligation with respect to this + CC0 or use of the Work. + +For more information, please see +http://creativecommons.org/publicdomain/zero/1.0/. diff --git a/plugins/postcss-normalize-display-values/README.md b/plugins/postcss-normalize-display-values/README.md new file mode 100644 index 000000000..a631e79c7 --- /dev/null +++ b/plugins/postcss-normalize-display-values/README.md @@ -0,0 +1,5 @@ +# PostCSS Base Plugin [][postcss] + + + +[postcss]: https://github.com/postcss/postcss diff --git a/plugins/postcss-normalize-display-values/package.json b/plugins/postcss-normalize-display-values/package.json new file mode 100644 index 000000000..d6b5c47f0 --- /dev/null +++ b/plugins/postcss-normalize-display-values/package.json @@ -0,0 +1,45 @@ +{ + "name": "@csstools/postcss-normalize-display-values", + "version": "1.0.0", + "description": "A base plugin", + "author": "Jonathan Neal ", + "license": "CC0-1.0", + "engines": { + "node": "^12 || ^14 || >=16" + }, + "main": "dist/index.cjs", + "module": "dist/index.mjs", + "types": "dist/index.d.ts", + "files": [ + "CHANGELOG.md", + "LICENSE.md", + "README.md", + "dist" + ], + "scripts": { + "build": "rollup -c ../../rollup/default.js", + "clean": "node -e \"fs.rmSync('./dist', { recursive: true, force: true });\"", + "lint": "eslint ./src --ext .js --ext .ts --ext .mjs --no-error-on-unmatched-pattern", + "prepublishOnly": "npm run clean && npm run build && npm run test", + "stryker": "stryker run --logLevel error", + "test": "node .tape.mjs && npm run test:exports", + "test:exports": "node ./test/_import.mjs && node ./test/_require.cjs" + }, + "dependencies": { + "postcss-value-parser": "^4.2.0" + }, + "peerDependencies": { + "postcss": "^8.3" + }, + "keywords": [ + "postcss-plugin" + ], + "repository": { + "type": "git", + "url": "https://github.com/csstools/postcss-plugins.git", + "directory": "plugins/postcss-normalize-display-values" + }, + "volta": { + "extends": "../../package.json" + } +} diff --git a/plugins/postcss-normalize-display-values/src/index.ts b/plugins/postcss-normalize-display-values/src/index.ts new file mode 100644 index 000000000..235f99c07 --- /dev/null +++ b/plugins/postcss-normalize-display-values/src/index.ts @@ -0,0 +1,75 @@ +import type { PluginCreator } from 'postcss'; +import valueParser from 'postcss-value-parser'; +import mappings from './mappings'; + +function transform(value) { + const { nodes } = valueParser(value); + + if (nodes.length === 1) { + return value; + } + + const values = nodes + .filter((list, index) => index % 2 === 0) + .filter((node) => node.type === 'word') + .map((n) => n.value.toLowerCase()); + + if (values.length === 0) { + return value; + } + + const match = mappings.get(values.toString()); + + if (!match) { + return value; + } + + return match; +} + +const creator: PluginCreator<{ preserve: boolean }> = (opts?: { preserve: boolean }) => { + const preserve = 'preserve' in Object(opts) ? Boolean(opts.preserve) : false; + + return { + postcssPlugin: 'postcss-normalize-display-values', + prepare() { + const cache = new Map(); + return { + Declaration: { + display(decl) { + const value = decl.value; + + if (!value) { + return; + } + + if (cache.has(value)) { + if (preserve) { + decl.cloneBefore({ value: cache.get(value) }); + } else { + decl.value = cache.get(value); + } + + return; + } + + const result = transform(value); + + if (preserve) { + decl.cloneBefore({ value: result }); + } else { + decl.value = result; + } + + cache.set(value, result); + }, + }, + }; + }, + }; +}; + +creator.postcss = true; + +export default creator; + diff --git a/plugins/postcss-normalize-display-values/src/mappings.ts b/plugins/postcss-normalize-display-values/src/mappings.ts new file mode 100644 index 000000000..f91e63391 --- /dev/null +++ b/plugins/postcss-normalize-display-values/src/mappings.ts @@ -0,0 +1,43 @@ +const block = 'block'; +const flex = 'flex'; +const flow = 'flow'; +const flowRoot = 'flow-root'; +const grid = 'grid'; +const inline = 'inline'; +const inlineBlock = 'inline-block'; +const inlineFlex = 'inline-flex'; +const inlineGrid = 'inline-grid'; +const inlineTable = 'inline-table'; +const listItem = 'list-item'; +const ruby = 'ruby'; +const rubyBase = 'ruby-base'; +const rubyText = 'ruby-text'; +const runIn = 'run-in'; +const table = 'table'; +const tableCell = 'table-cell'; +const tableCaption = 'table-caption'; + +/** + * Specification: https://www.w3.org/TR/css-display-3/#the-display-properties + */ +export default new Map([ + [[block, flow].toString(), block], + [[block, flowRoot].toString(), flowRoot], + [[inline, flow].toString(), inline], + [[inline, flowRoot].toString(), inlineBlock], + [[runIn, flow].toString(), runIn], + [[listItem, block, flow].toString(), listItem], + [[inline, flow, listItem].toString(), inline + ' ' + listItem], + [[block, flex].toString(), flex], + [[inline, flex].toString(), inlineFlex], + [[block, grid].toString(), grid], + [[inline, grid].toString(), inlineGrid], + [[inline, ruby].toString(), ruby], + // `block ruby` is same + [[block, table].toString(), table], + [[inline, table].toString(), inlineTable], + [[tableCell, flow].toString(), tableCell], + [[tableCaption, flow].toString(), tableCaption], + [[rubyBase, flow].toString(), rubyBase], + [[rubyText, flow].toString(), rubyText], +]); diff --git a/plugins/postcss-normalize-display-values/stryker.conf.json b/plugins/postcss-normalize-display-values/stryker.conf.json new file mode 100644 index 000000000..091dc740c --- /dev/null +++ b/plugins/postcss-normalize-display-values/stryker.conf.json @@ -0,0 +1,19 @@ +{ + "$schema": "../../node_modules/@stryker-mutator/core/schema/stryker-schema.json", + "mutate": [ + "src/**/*.ts" + ], + "buildCommand": "npm run build", + "testRunner": "command", + "coverageAnalysis": "perTest", + "tempDirName": "../../.stryker-tmp", + "commandRunner": { + "command": "npm run test:tape" + }, + "thresholds": { + "high": 100, + "low": 100, + "break": 100 + }, + "inPlace": true +} diff --git a/plugins/postcss-normalize-display-values/test/_import.mjs b/plugins/postcss-normalize-display-values/test/_import.mjs new file mode 100644 index 000000000..f2c4fecb0 --- /dev/null +++ b/plugins/postcss-normalize-display-values/test/_import.mjs @@ -0,0 +1,6 @@ +import assert from 'assert'; +import plugin from '@csstools/postcss-normalize-display-values'; +plugin(); + +assert.ok(plugin.postcss, 'should have "postcss flag"'); +assert.equal(typeof plugin, 'function', 'should return a function'); diff --git a/plugins/postcss-normalize-display-values/test/_require.cjs b/plugins/postcss-normalize-display-values/test/_require.cjs new file mode 100644 index 000000000..77a17bb14 --- /dev/null +++ b/plugins/postcss-normalize-display-values/test/_require.cjs @@ -0,0 +1,6 @@ +const assert = require('assert'); +const plugin = require('@csstools/postcss-normalize-display-values'); +plugin(); + +assert.ok(plugin.postcss, 'should have "postcss flag"'); +assert.equal(typeof plugin, 'function', 'should return a function'); diff --git a/plugins/postcss-normalize-display-values/test/basic.css b/plugins/postcss-normalize-display-values/test/basic.css new file mode 100644 index 000000000..16a68bc5d --- /dev/null +++ b/plugins/postcss-normalize-display-values/test/basic.css @@ -0,0 +1,71 @@ +.block-flow { + display: block flow; +} + +.block-flow-root { + display: block flow-root; +} + +.inline-flow { + display: inline flow; +} + +.inline-flow-root { + display: inline flow-root; +} + +.run-in-flow { + display: run-in flow; +} + +.list-item-block-flow { + display: list-item block flow; +} + +.inline-flow-list-item { + display: inline flow list-item; +} + +.block-flex { + display: block flex; +} + +.inline-flex { + display: inline flex; +} + +.block-grid { + display: block grid; +} + +.inline-grid { + display: inline grid; +} + +.inline-ruby { + display: inline ruby; +} + +.block-table { + display: block table; +} + +.inline-table { + display: inline table; +} + +.table-cell-flow { + display: table-cell flow; +} + +.table-caption-flow { + display: table-caption flow; +} + +.ruby-base-flow { + display: ruby-base flow; +} + +.ruby-text-flow { + display: ruby-text flow; +} diff --git a/plugins/postcss-normalize-display-values/test/basic.expect.css b/plugins/postcss-normalize-display-values/test/basic.expect.css new file mode 100644 index 000000000..a38809681 --- /dev/null +++ b/plugins/postcss-normalize-display-values/test/basic.expect.css @@ -0,0 +1,71 @@ +.block-flow { + display: block; +} + +.block-flow-root { + display: flow-root; +} + +.inline-flow { + display: inline; +} + +.inline-flow-root { + display: inline-block; +} + +.run-in-flow { + display: run-in; +} + +.list-item-block-flow { + display: list-item; +} + +.inline-flow-list-item { + display: inline list-item; +} + +.block-flex { + display: flex; +} + +.inline-flex { + display: inline-flex; +} + +.block-grid { + display: grid; +} + +.inline-grid { + display: inline-grid; +} + +.inline-ruby { + display: ruby; +} + +.block-table { + display: table; +} + +.inline-table { + display: inline-table; +} + +.table-cell-flow { + display: table-cell; +} + +.table-caption-flow { + display: table-caption; +} + +.ruby-base-flow { + display: ruby-base; +} + +.ruby-text-flow { + display: ruby-text; +} diff --git a/plugins/postcss-normalize-display-values/test/basic.preserve-true.expect.css b/plugins/postcss-normalize-display-values/test/basic.preserve-true.expect.css new file mode 100644 index 000000000..a38809681 --- /dev/null +++ b/plugins/postcss-normalize-display-values/test/basic.preserve-true.expect.css @@ -0,0 +1,71 @@ +.block-flow { + display: block; +} + +.block-flow-root { + display: flow-root; +} + +.inline-flow { + display: inline; +} + +.inline-flow-root { + display: inline-block; +} + +.run-in-flow { + display: run-in; +} + +.list-item-block-flow { + display: list-item; +} + +.inline-flow-list-item { + display: inline list-item; +} + +.block-flex { + display: flex; +} + +.inline-flex { + display: inline-flex; +} + +.block-grid { + display: grid; +} + +.inline-grid { + display: inline-grid; +} + +.inline-ruby { + display: ruby; +} + +.block-table { + display: table; +} + +.inline-table { + display: inline-table; +} + +.table-cell-flow { + display: table-cell; +} + +.table-caption-flow { + display: table-caption; +} + +.ruby-base-flow { + display: ruby-base; +} + +.ruby-text-flow { + display: ruby-text; +} diff --git a/plugins/postcss-normalize-display-values/tsconfig.json b/plugins/postcss-normalize-display-values/tsconfig.json new file mode 100644 index 000000000..68a2606f6 --- /dev/null +++ b/plugins/postcss-normalize-display-values/tsconfig.json @@ -0,0 +1,9 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "dist", + "declarationDir": "." + }, + "include": ["./src/**/*"], + "exclude": ["dist"], +} From 536d864ab51e165224003d4773c21044ec4781e7 Mon Sep 17 00:00:00 2001 From: Antonio Laguna Date: Tue, 25 Jan 2022 13:18:44 +0100 Subject: [PATCH 2/4] Completing plugin --- .../.tape.mjs | 6 + .../CHANGELOG.md | 6 +- .../INSTALL.md | 165 +++++++++++++++++- .../README.md | 85 ++++++++- .../package.json | 32 +++- .../src/index.ts | 20 ++- .../stryker.conf.json | 19 -- .../test/basic.preserve-true.expect.css | 18 ++ 8 files changed, 316 insertions(+), 35 deletions(-) delete mode 100644 plugins/postcss-normalize-display-values/stryker.conf.json diff --git a/plugins/postcss-normalize-display-values/.tape.mjs b/plugins/postcss-normalize-display-values/.tape.mjs index 83647cd07..a58d23384 100644 --- a/plugins/postcss-normalize-display-values/.tape.mjs +++ b/plugins/postcss-normalize-display-values/.tape.mjs @@ -5,4 +5,10 @@ postcssTape(plugin)({ basic: { message: 'supports basic usage', }, + 'basic:preserve-true': { + message: 'supports variables with { preserve: true } usage', + options: { + preserve: true + } + }, }); diff --git a/plugins/postcss-normalize-display-values/CHANGELOG.md b/plugins/postcss-normalize-display-values/CHANGELOG.md index 2475e1207..72250b28e 100644 --- a/plugins/postcss-normalize-display-values/CHANGELOG.md +++ b/plugins/postcss-normalize-display-values/CHANGELOG.md @@ -1 +1,5 @@ -# Changes to PostCSS Base Plugin +# Changes to PostCSS Normalize Display Values + +### 1.0.0 + +- Initial version diff --git a/plugins/postcss-normalize-display-values/INSTALL.md b/plugins/postcss-normalize-display-values/INSTALL.md index ceacefa74..b0ad3a181 100644 --- a/plugins/postcss-normalize-display-values/INSTALL.md +++ b/plugins/postcss-normalize-display-values/INSTALL.md @@ -1,3 +1,164 @@ -# Installing PostCSS Base Plugin +# Installing PostCSS Normalize Display Values - +[PostCSS Normalize Display Values] runs in all Node environments, with special +instructions for: + +| [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) | +| --- | --- | --- | --- | --- | --- | + +## Node + +Add [PostCSS Normalize Display Values] to your project: + +```bash +npm install postcss @csstools/postcss-normalize-display-values --save-dev +``` + +Use it as a [PostCSS] plugin: + +```js +const postcss = require('postcss'); +const postcssNormalizeDisplayValues = require('@csstools/postcss-normalize-display-values'); + +postcss([ + postcssNormalizeDisplayValues(/* pluginOptions */) +]).process(YOUR_CSS /*, processOptions */); +``` + +## PostCSS CLI + +Add [PostCSS CLI] to your project: + +```bash +npm install postcss-cli --save-dev +``` + +Use [PostCSS Normalize Display Values] in your `postcss.config.js` configuration +file: + +```js +const postcssNormalizeDisplayValues = require('@csstools/postcss-normalize-display-values'); + +module.exports = { + plugins: [ + postcssNormalizeDisplayValues(/* pluginOptions */) + ] +} +``` + +## Webpack + +Add [PostCSS Loader] to your project: + +```bash +npm install postcss-loader --save-dev +``` + +Use [PostCSS Normalize Display Values] in your Webpack configuration: + +```js +const postcssNormalizeDisplayValues = require('@csstools/postcss-normalize-display-values'); + +module.exports = { + module: { + rules: [ + { + test: /\.css$/, + use: [ + 'style-loader', + { loader: 'css-loader', options: { importLoaders: 1 } }, + { loader: 'postcss-loader', options: { + ident: 'postcss', + plugins: () => [ + postcssNormalizeDisplayValues(/* pluginOptions */) + ] + } } + ] + } + ] + } +} +``` + +## Create React App + +Add [React App Rewired] and [React App Rewire PostCSS] to your project: + +```bash +npm install react-app-rewired react-app-rewire-postcss --save-dev +``` + +Use [React App Rewire PostCSS] and [PostCSS Normalize Display Values] in your +`config-overrides.js` file: + +```js +const reactAppRewirePostcss = require('react-app-rewire-postcss'); +const postcssNormalizeDisplayValues = require('@csstools/postcss-normalize-display-values'); + +module.exports = config => reactAppRewirePostcss(config, { + plugins: () => [ + postcssNormalizeDisplayValues(/* pluginOptions */) + ] +}); +``` + +## Gulp + +Add [Gulp PostCSS] to your project: + +```bash +npm install gulp-postcss --save-dev +``` + +Use [PostCSS Normalize Display Values] in your Gulpfile: + +```js +const postcss = require('gulp-postcss'); +const postcssNormalizeDisplayValues = require('@csstools/postcss-normalize-display-values'); + +gulp.task('css', () => gulp.src('./src/*.css').pipe( + postcss([ + postcssNormalizeDisplayValues(/* pluginOptions */) + ]) +).pipe( + gulp.dest('.') +)); +``` + +## Grunt + +Add [Grunt PostCSS] to your project: + +```bash +npm install grunt-postcss --save-dev +``` + +Use [PostCSS Normalize Display Values] in your Gruntfile: + +```js +const postcssNormalizeDisplayValues = require('@csstools/postcss-normalize-display-values'); + +grunt.loadNpmTasks('grunt-postcss'); + +grunt.initConfig({ + postcss: { + options: { + use: [ + postcssNormalizeDisplayValues(/* pluginOptions */) + ] + }, + dist: { + src: '*.css' + } + } +}); +``` + +[Gulp PostCSS]: https://github.com/postcss/gulp-postcss +[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss +[PostCSS]: https://github.com/postcss/postcss +[PostCSS CLI]: https://github.com/postcss/postcss-cli +[PostCSS Loader]: https://github.com/postcss/postcss-loader +[PostCSS Normalize Display Values]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-normalize-display-values +[React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss +[React App Rewired]: https://github.com/timarney/react-app-rewired diff --git a/plugins/postcss-normalize-display-values/README.md b/plugins/postcss-normalize-display-values/README.md index a631e79c7..e3f1e068b 100644 --- a/plugins/postcss-normalize-display-values/README.md +++ b/plugins/postcss-normalize-display-values/README.md @@ -1,5 +1,86 @@ -# PostCSS Base Plugin [][postcss] +# PostCSS Normalize Display Values [][postcss] - +[][npm-url] +[][css-url] +[][cli-url] +[][discord] + +[PostCSS Normalize Display Values] lets you specify definition of outer and inner displays types for an element. + +```pcss +.element { + display: inline flow-root; +} + +/* becomes */ + +.element { + display: inline-block; +} +``` + +_See prior work by [cssnano](https://github.com/cssnano) here [postcss-normalize-display-values](https://github.com/cssnano/cssnano/tree/master/packages/postcss-normalize-display-values) +To ensure long term maintenance and to provide the needed features this plugin was recreated based on cssnano's work._ + +## Usage + +Add [PostCSS Normalize Display Values] to your project: + +```bash +npm install postcss @csstools/postcss-normalize-display-values --save-dev +``` + +Use it as a [PostCSS] plugin: + +```js +const postcss = require('postcss'); +const postcssNormalizeDisplayValues = require('@csstools/postcss-normalize-display-values'); + +postcss([ + postcssNormalizeDisplayValues(/* pluginOptions */) +]).process(YOUR_CSS /*, processOptions */); +``` + +[PostCSS Normalize Display Values] runs in all Node environments, with special +instructions for: + +| [Node](INSTALL.md#node) | [PostCSS CLI](INSTALL.md#postcss-cli) | [Webpack](INSTALL.md#webpack) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) | +| --- | --- | --- | --- | --- | --- | + +## Options + +### preserve + +The `preserve` option determines whether the original source +is preserved. By default, it is not preserved. + +```js +postcssNormalizeDisplayValues({ preserve: true }) +``` + +```pcss +.element { + display: inline flow-root; +} + +/* becomes */ + +.element { + display: inline-block; + display: inline flow-root; +} +``` [postcss]: https://github.com/postcss/postcss + +[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test +[css-url]: https://cssdb.org/#display-two-values +[discord]: https://discord.gg/bUadyRwkJS +[npm-url]: https://www.npmjs.com/package/@csstools/postcss-normalize-display-values + +[CSS Fonts]: https://www.w3.org/TR/css-display-3/#the-display-properties +[Gulp PostCSS]: https://github.com/postcss/gulp-postcss +[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss +[PostCSS]: https://github.com/postcss/postcss +[PostCSS Loader]: https://github.com/postcss/postcss-loader +[PostCSS Normalize Display Values]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-normalize-display-values diff --git a/plugins/postcss-normalize-display-values/package.json b/plugins/postcss-normalize-display-values/package.json index d6b5c47f0..05f51e25b 100644 --- a/plugins/postcss-normalize-display-values/package.json +++ b/plugins/postcss-normalize-display-values/package.json @@ -1,7 +1,7 @@ { "name": "@csstools/postcss-normalize-display-values", "version": "1.0.0", - "description": "A base plugin", + "description": "Use two values display syntax for inner and outer display types.", "author": "Jonathan Neal ", "license": "CC0-1.0", "engines": { @@ -10,6 +10,13 @@ "main": "dist/index.cjs", "module": "dist/index.mjs", "types": "dist/index.d.ts", + "exports": { + ".": { + "import": "./dist/index.mjs", + "require": "./dist/index.cjs", + "default": "./dist/index.mjs" + } + }, "files": [ "CHANGELOG.md", "LICENSE.md", @@ -21,7 +28,6 @@ "clean": "node -e \"fs.rmSync('./dist', { recursive: true, force: true });\"", "lint": "eslint ./src --ext .js --ext .ts --ext .mjs --no-error-on-unmatched-pattern", "prepublishOnly": "npm run clean && npm run build && npm run test", - "stryker": "stryker run --logLevel error", "test": "node .tape.mjs && npm run test:exports", "test:exports": "node ./test/_import.mjs && node ./test/_require.cjs" }, @@ -32,7 +38,27 @@ "postcss": "^8.3" }, "keywords": [ - "postcss-plugin" + "postcss-plugin", + "css", + "display", + "block", + "flex", + "flow", + "flow-root", + "grid", + "inline", + "inline-block", + "inline-flex", + "inline-grid", + "inline-table", + "list-item", + "ruby", + "ruby-base", + "ruby-text", + "run-in", + "table", + "table-cell", + "table-caption" ], "repository": { "type": "git", diff --git a/plugins/postcss-normalize-display-values/src/index.ts b/plugins/postcss-normalize-display-values/src/index.ts index 235f99c07..5a172e9fa 100644 --- a/plugins/postcss-normalize-display-values/src/index.ts +++ b/plugins/postcss-normalize-display-values/src/index.ts @@ -44,10 +44,12 @@ const creator: PluginCreator<{ preserve: boolean }> = (opts?: { preserve: boolea } if (cache.has(value)) { - if (preserve) { - decl.cloneBefore({ value: cache.get(value) }); - } else { - decl.value = cache.get(value); + if (decl.value !== cache.get(value)) { + if (preserve) { + decl.cloneBefore({ value: cache.get(value) }); + } else { + decl.value = cache.get(value); + } } return; @@ -55,10 +57,12 @@ const creator: PluginCreator<{ preserve: boolean }> = (opts?: { preserve: boolea const result = transform(value); - if (preserve) { - decl.cloneBefore({ value: result }); - } else { - decl.value = result; + if (decl.value !== result) { + if (preserve) { + decl.cloneBefore( { value: result } ); + } else { + decl.value = result; + } } cache.set(value, result); diff --git a/plugins/postcss-normalize-display-values/stryker.conf.json b/plugins/postcss-normalize-display-values/stryker.conf.json deleted file mode 100644 index 091dc740c..000000000 --- a/plugins/postcss-normalize-display-values/stryker.conf.json +++ /dev/null @@ -1,19 +0,0 @@ -{ - "$schema": "../../node_modules/@stryker-mutator/core/schema/stryker-schema.json", - "mutate": [ - "src/**/*.ts" - ], - "buildCommand": "npm run build", - "testRunner": "command", - "coverageAnalysis": "perTest", - "tempDirName": "../../.stryker-tmp", - "commandRunner": { - "command": "npm run test:tape" - }, - "thresholds": { - "high": 100, - "low": 100, - "break": 100 - }, - "inPlace": true -} diff --git a/plugins/postcss-normalize-display-values/test/basic.preserve-true.expect.css b/plugins/postcss-normalize-display-values/test/basic.preserve-true.expect.css index a38809681..bfd9fb7ce 100644 --- a/plugins/postcss-normalize-display-values/test/basic.preserve-true.expect.css +++ b/plugins/postcss-normalize-display-values/test/basic.preserve-true.expect.css @@ -1,71 +1,89 @@ .block-flow { display: block; + display: block flow; } .block-flow-root { display: flow-root; + display: block flow-root; } .inline-flow { display: inline; + display: inline flow; } .inline-flow-root { display: inline-block; + display: inline flow-root; } .run-in-flow { display: run-in; + display: run-in flow; } .list-item-block-flow { display: list-item; + display: list-item block flow; } .inline-flow-list-item { display: inline list-item; + display: inline flow list-item; } .block-flex { display: flex; + display: block flex; } .inline-flex { display: inline-flex; + display: inline flex; } .block-grid { display: grid; + display: block grid; } .inline-grid { display: inline-grid; + display: inline grid; } .inline-ruby { display: ruby; + display: inline ruby; } .block-table { display: table; + display: block table; } .inline-table { display: inline-table; + display: inline table; } .table-cell-flow { display: table-cell; + display: table-cell flow; } .table-caption-flow { display: table-caption; + display: table-caption flow; } .ruby-base-flow { display: ruby-base; + display: ruby-base flow; } .ruby-text-flow { display: ruby-text; + display: ruby-text flow; } From 9e1b24e124066d5bb5e646b5c94344663748e918 Mon Sep 17 00:00:00 2001 From: Antonio Laguna Date: Tue, 25 Jan 2022 13:21:37 +0100 Subject: [PATCH 3/4] Labeler work --- .github/labeler.yml | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/.github/labeler.yml b/.github/labeler.yml index 1be04be84..74cf54dc2 100644 --- a/.github/labeler.yml +++ b/.github/labeler.yml @@ -113,6 +113,10 @@ - plugins/postcss-nesting/** - experimental/postcss-nesting/** +"plugins/postcss-normalize-display-values": + - plugins/postcss-normalize-display-values/** + - experimental/postcss-normalize-display-values/** + "plugins/postcss-overflow-shorthand": - plugins/postcss-overflow-shorthand/** - experimental/postcss-overflow-shorthand/** From f658cebee5d479a415a590a675d255a86e3794fe Mon Sep 17 00:00:00 2001 From: Antonio Laguna Date: Tue, 25 Jan 2022 13:46:08 +0100 Subject: [PATCH 4/4] Some changes --- .../.tape.mjs | 4 +- .../README.md | 8 +-- .../src/index.ts | 11 ++-- .../src/mappings.ts | 56 ++++++------------- .../test/basic.expect.css | 18 ++++++ ...ct.css => basic.preserve-false.expect.css} | 18 ------ 6 files changed, 47 insertions(+), 68 deletions(-) rename plugins/postcss-normalize-display-values/test/{basic.preserve-true.expect.css => basic.preserve-false.expect.css} (61%) diff --git a/plugins/postcss-normalize-display-values/.tape.mjs b/plugins/postcss-normalize-display-values/.tape.mjs index a58d23384..f99d4b4cc 100644 --- a/plugins/postcss-normalize-display-values/.tape.mjs +++ b/plugins/postcss-normalize-display-values/.tape.mjs @@ -5,10 +5,10 @@ postcssTape(plugin)({ basic: { message: 'supports basic usage', }, - 'basic:preserve-true': { + 'basic:preserve-false': { message: 'supports variables with { preserve: true } usage', options: { - preserve: true + preserve: false } }, }); diff --git a/plugins/postcss-normalize-display-values/README.md b/plugins/postcss-normalize-display-values/README.md index e3f1e068b..80caf5c95 100644 --- a/plugins/postcss-normalize-display-values/README.md +++ b/plugins/postcss-normalize-display-values/README.md @@ -16,6 +16,7 @@ .element { display: inline-block; + display: inline flow-root; } ``` @@ -52,10 +53,10 @@ instructions for: ### preserve The `preserve` option determines whether the original source -is preserved. By default, it is not preserved. +is preserved. By default, it is preserved. ```js -postcssNormalizeDisplayValues({ preserve: true }) +postcssNormalizeDisplayValues({ preserve: false }) ``` ```pcss @@ -66,8 +67,7 @@ postcssNormalizeDisplayValues({ preserve: true }) /* becomes */ .element { - display: inline-block; - display: inline flow-root; + display: inline-block; } ``` diff --git a/plugins/postcss-normalize-display-values/src/index.ts b/plugins/postcss-normalize-display-values/src/index.ts index 5a172e9fa..dc9a27da9 100644 --- a/plugins/postcss-normalize-display-values/src/index.ts +++ b/plugins/postcss-normalize-display-values/src/index.ts @@ -10,15 +10,14 @@ function transform(value) { } const values = nodes - .filter((list, index) => index % 2 === 0) - .filter((node) => node.type === 'word') - .map((n) => n.value.toLowerCase()); + .filter((node) => node.type === 'word') // only display values + .map((node) => node.value.toLowerCase()); // to lower case - if (values.length === 0) { + if (values.length <= 1) { return value; } - const match = mappings.get(values.toString()); + const match = mappings.get(values.join(',')); if (!match) { return value; @@ -28,7 +27,7 @@ function transform(value) { } const creator: PluginCreator<{ preserve: boolean }> = (opts?: { preserve: boolean }) => { - const preserve = 'preserve' in Object(opts) ? Boolean(opts.preserve) : false; + const preserve = 'preserve' in Object(opts) ? Boolean(opts.preserve) : true; return { postcssPlugin: 'postcss-normalize-display-values', diff --git a/plugins/postcss-normalize-display-values/src/mappings.ts b/plugins/postcss-normalize-display-values/src/mappings.ts index f91e63391..05396e69f 100644 --- a/plugins/postcss-normalize-display-values/src/mappings.ts +++ b/plugins/postcss-normalize-display-values/src/mappings.ts @@ -1,43 +1,23 @@ -const block = 'block'; -const flex = 'flex'; -const flow = 'flow'; -const flowRoot = 'flow-root'; -const grid = 'grid'; -const inline = 'inline'; -const inlineBlock = 'inline-block'; -const inlineFlex = 'inline-flex'; -const inlineGrid = 'inline-grid'; -const inlineTable = 'inline-table'; -const listItem = 'list-item'; -const ruby = 'ruby'; -const rubyBase = 'ruby-base'; -const rubyText = 'ruby-text'; -const runIn = 'run-in'; -const table = 'table'; -const tableCell = 'table-cell'; -const tableCaption = 'table-caption'; - /** * Specification: https://www.w3.org/TR/css-display-3/#the-display-properties */ export default new Map([ - [[block, flow].toString(), block], - [[block, flowRoot].toString(), flowRoot], - [[inline, flow].toString(), inline], - [[inline, flowRoot].toString(), inlineBlock], - [[runIn, flow].toString(), runIn], - [[listItem, block, flow].toString(), listItem], - [[inline, flow, listItem].toString(), inline + ' ' + listItem], - [[block, flex].toString(), flex], - [[inline, flex].toString(), inlineFlex], - [[block, grid].toString(), grid], - [[inline, grid].toString(), inlineGrid], - [[inline, ruby].toString(), ruby], - // `block ruby` is same - [[block, table].toString(), table], - [[inline, table].toString(), inlineTable], - [[tableCell, flow].toString(), tableCell], - [[tableCaption, flow].toString(), tableCaption], - [[rubyBase, flow].toString(), rubyBase], - [[rubyText, flow].toString(), rubyText], + ['block,flow', 'block'], + ['block,flow-root', 'flow-root'], + ['inline,flow', 'inline'], + ['inline,flow-root', 'inline-block'], + ['run-in,flow', 'run-in'], + ['list-item,block,flow', 'list-item'], + ['inline,flow,list-item', 'inline list-item'], + ['block,flex', 'flex'], + ['inline,flex', 'inline-flex'], + ['block,grid', 'grid'], + ['inline,grid', 'inline-grid'], + ['inline,ruby', 'ruby'], + ['block,table', 'table'], + ['inline,table', 'inline-table'], + ['table-cell,flow', 'table-cell'], + ['table-caption,flow', 'table-caption'], + ['ruby-base,flow', 'ruby-base'], + ['ruby-text,flow', 'ruby-text'], ]); diff --git a/plugins/postcss-normalize-display-values/test/basic.expect.css b/plugins/postcss-normalize-display-values/test/basic.expect.css index a38809681..bfd9fb7ce 100644 --- a/plugins/postcss-normalize-display-values/test/basic.expect.css +++ b/plugins/postcss-normalize-display-values/test/basic.expect.css @@ -1,71 +1,89 @@ .block-flow { display: block; + display: block flow; } .block-flow-root { display: flow-root; + display: block flow-root; } .inline-flow { display: inline; + display: inline flow; } .inline-flow-root { display: inline-block; + display: inline flow-root; } .run-in-flow { display: run-in; + display: run-in flow; } .list-item-block-flow { display: list-item; + display: list-item block flow; } .inline-flow-list-item { display: inline list-item; + display: inline flow list-item; } .block-flex { display: flex; + display: block flex; } .inline-flex { display: inline-flex; + display: inline flex; } .block-grid { display: grid; + display: block grid; } .inline-grid { display: inline-grid; + display: inline grid; } .inline-ruby { display: ruby; + display: inline ruby; } .block-table { display: table; + display: block table; } .inline-table { display: inline-table; + display: inline table; } .table-cell-flow { display: table-cell; + display: table-cell flow; } .table-caption-flow { display: table-caption; + display: table-caption flow; } .ruby-base-flow { display: ruby-base; + display: ruby-base flow; } .ruby-text-flow { display: ruby-text; + display: ruby-text flow; } diff --git a/plugins/postcss-normalize-display-values/test/basic.preserve-true.expect.css b/plugins/postcss-normalize-display-values/test/basic.preserve-false.expect.css similarity index 61% rename from plugins/postcss-normalize-display-values/test/basic.preserve-true.expect.css rename to plugins/postcss-normalize-display-values/test/basic.preserve-false.expect.css index bfd9fb7ce..a38809681 100644 --- a/plugins/postcss-normalize-display-values/test/basic.preserve-true.expect.css +++ b/plugins/postcss-normalize-display-values/test/basic.preserve-false.expect.css @@ -1,89 +1,71 @@ .block-flow { display: block; - display: block flow; } .block-flow-root { display: flow-root; - display: block flow-root; } .inline-flow { display: inline; - display: inline flow; } .inline-flow-root { display: inline-block; - display: inline flow-root; } .run-in-flow { display: run-in; - display: run-in flow; } .list-item-block-flow { display: list-item; - display: list-item block flow; } .inline-flow-list-item { display: inline list-item; - display: inline flow list-item; } .block-flex { display: flex; - display: block flex; } .inline-flex { display: inline-flex; - display: inline flex; } .block-grid { display: grid; - display: block grid; } .inline-grid { display: inline-grid; - display: inline grid; } .inline-ruby { display: ruby; - display: inline ruby; } .block-table { display: table; - display: block table; } .inline-table { display: inline-table; - display: inline table; } .table-cell-flow { display: table-cell; - display: table-cell flow; } .table-caption-flow { display: table-caption; - display: table-caption flow; } .ruby-base-flow { display: ruby-base; - display: ruby-base flow; } .ruby-text-flow { display: ruby-text; - display: ruby-text flow; }