@csstools/postcss-content-alt-text 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,8 @@
+# Changes to PostCSS Content Alt Text
+
+### 1.0.0
+
+_July 7, 2024_
+
+- Initial version
+- Updated [`@csstools/postcss-progressive-custom-properties`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties) to [`3.3.0`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties/CHANGELOG.md#330) (minor)

package/LICENSE.md

@@ -0,0 +1,18 @@
+MIT No Attribution (MIT-0)
+
+Copyright © CSSTools Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the “Software”), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the Software is furnished to do
+so.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,109 @@
+# PostCSS Content Alt Text [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][PostCSS]
+
+[<img alt="npm version" src="https://img.shields.io/npm/v/@csstools/postcss-content-alt-text.svg" height="20">][npm-url] [<img alt="Build Status" src="https://github.com/csstools/postcss-plugins/workflows/test/badge.svg" height="20">][cli-url] [<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord]<br><br>[<img alt="Baseline Status" src="https://cssdb.org/images/badges-baseline/content-alt-text.svg" height="20">][css-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/content-alt-text.svg" height="20">][css-url] 
+
+```bash
+npm install @csstools/postcss-content-alt-text --save-dev
+```
+
+[PostCSS Content Alt Text] generates fallback values for `content` with alt text following the [CSS Generated Content Module].
+
+```pcss
+.foo {
+	content: url(tree.jpg) / "A beautiful tree in a dark forest";
+}
+
+/* becomes */
+
+.foo {
+	content: url(tree.jpg)  "A beautiful tree in a dark forest";
+	content: url(tree.jpg) / "A beautiful tree in a dark forest";
+}
+```
+
+## Usage
+
+Add [PostCSS Content Alt Text] to your project:
+
+```bash
+npm install postcss @csstools/postcss-content-alt-text --save-dev
+```
+
+Use it as a [PostCSS] plugin:
+
+```js
+const postcss = require('postcss');
+const postcssContentAltText = require('@csstools/postcss-content-alt-text');
+
+postcss([
+	postcssContentAltText(/* pluginOptions */)
+]).process(YOUR_CSS /*, processOptions */);
+```
+
+[PostCSS Content Alt Text] runs in all Node environments, with special
+instructions for:
+
+- [Node](INSTALL.md#node)
+- [PostCSS CLI](INSTALL.md#postcss-cli)
+- [PostCSS Load Config](INSTALL.md#postcss-load-config)
+- [Webpack](INSTALL.md#webpack)
+- [Next.js](INSTALL.md#nextjs)
+- [Gulp](INSTALL.md#gulp)
+- [Grunt](INSTALL.md#grunt)
+
+## Options
+
+### preserve
+
+The `preserve` option determines whether the original notation
+is preserved. By default, it is preserved.
+
+```js
+postcssContentAltText({ preserve: false })
+```
+
+```pcss
+.foo {
+	content: url(tree.jpg) / "A beautiful tree in a dark forest";
+}
+
+/* becomes */
+
+.foo {
+	content: url(tree.jpg)  "A beautiful tree in a dark forest";
+}
+```
+
+### stripAltText
+
+The `stripAltText` option determines whether the alt text is removed from the value.  
+By default, it is not removed.  
+Instead it is added to the `content` value itself to ensure content is accessible.
+
+Only set this to `true` if you are sure the alt text is not needed.
+
+```js
+postcssContentAltText({ stripAltText: true })
+```
+
+```pcss
+.foo {
+	content: url(tree.jpg) / "A beautiful tree in a dark forest";
+}
+
+/* becomes */
+
+.foo {
+	content: url(tree.jpg) ;
+	content: url(tree.jpg) / "A beautiful tree in a dark forest";
+}
+```
+
+[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test
+[css-url]: https://cssdb.org/#content-alt-text
+[discord]: https://discord.gg/bUadyRwkJS
+[npm-url]: https://www.npmjs.com/package/@csstools/postcss-content-alt-text
+
+[PostCSS]: https://github.com/postcss/postcss
+[PostCSS Content Alt Text]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-content-alt-text
+[CSS Generated Content Module]: https://drafts.csswg.org/css-content/#content-property

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";var e=require("@csstools/css-parser-algorithms"),s=require("@csstools/css-tokenizer"),t=require("@csstools/postcss-progressive-custom-properties"),o=require("@csstools/utilities");const r={test:e=>e.includes("content:")&&e.includes("/")},basePlugin=t=>({postcssPlugin:"postcss-content-alt-text",Declaration(n){if("content"!==n.prop||!n.value.includes("/"))return;if(o.hasFallback(n))return;if(o.hasSupportsAtRuleAncestor(n,r))return;const i=e.parseListOfComponentValues(s.tokenize({css:n.value}));let c=0;for(let o=i.length-1;o>=0;o--){const r=i[o];if(!e.isTokenNode(r))continue;const n=r.value;s.isTokenDelim(n)&&("/"===n[4].value&&(c++,!0===t?.stripAltText?i.splice(o,i.length):i.splice(o,1)))}if(1!==c)return;const l=e.stringify([i]);l!==n.value&&(n.cloneBefore({value:l}),!1===t?.preserve&&n.remove())}});basePlugin.postcss=!0;const creator=e=>{const s=Object.assign({enableProgressiveCustomProperties:!0,preserve:!0,stripAltText:!1},e);return s.enableProgressiveCustomProperties&&s.preserve?{postcssPlugin:"postcss-content-alt-text",plugins:[t(),basePlugin(s)]}:basePlugin(s)};creator.postcss=!0,module.exports=creator;

package/dist/index.d.ts

@@ -0,0 +1,24 @@
+import type { PluginCreator } from 'postcss';
+
+/** postcss-content-alt-text plugin options */
+export declare type basePluginOptions = {
+    /** Preserve the original notation. default: true */
+    preserve: boolean;
+    /** Strip alt text */
+    stripAltText: boolean;
+};
+
+declare const creator: PluginCreator<pluginOptions>;
+export default creator;
+
+/** postcss-content-alt-text plugin options */
+export declare type pluginOptions = {
+    /** Preserve the original notation. default: true */
+    preserve?: boolean;
+    /** Strip alt text */
+    stripAltText?: boolean;
+    /** Enable "@csstools/postcss-progressive-custom-properties". default: true */
+    enableProgressiveCustomProperties?: boolean;
+};
+
+export { }

package/dist/index.mjs

@@ -0,0 +1 @@
+import{parseListOfComponentValues as s,isTokenNode as e,stringify as t}from"@csstools/css-parser-algorithms";import{tokenize as o,isTokenDelim as r}from"@csstools/css-tokenizer";import n from"@csstools/postcss-progressive-custom-properties";import{hasFallback as c,hasSupportsAtRuleAncestor as i}from"@csstools/utilities";const l={test:s=>s.includes("content:")&&s.includes("/")},basePlugin=n=>({postcssPlugin:"postcss-content-alt-text",Declaration(p){if("content"!==p.prop||!p.value.includes("/"))return;if(c(p))return;if(i(p,l))return;const u=s(o({css:p.value}));let a=0;for(let s=u.length-1;s>=0;s--){const t=u[s];if(!e(t))continue;const o=t.value;r(o)&&("/"===o[4].value&&(a++,!0===n?.stripAltText?u.splice(s,u.length):u.splice(s,1)))}if(1!==a)return;const m=t([u]);m!==p.value&&(p.cloneBefore({value:m}),!1===n?.preserve&&p.remove())}});basePlugin.postcss=!0;const creator=s=>{const e=Object.assign({enableProgressiveCustomProperties:!0,preserve:!0,stripAltText:!1},s);return e.enableProgressiveCustomProperties&&e.preserve?{postcssPlugin:"postcss-content-alt-text",plugins:[n(),basePlugin(e)]}:basePlugin(e)};creator.postcss=!0;export{creator as default};

package/package.json

@@ -0,0 +1,77 @@
+{
+	"name": "@csstools/postcss-content-alt-text",
+	"description": "Generate fallback values for content with alt text",
+	"version": "1.0.0",
+	"contributors": [
+		{
+			"name": "Antonio Laguna",
+			"email": "antonio@laguna.es",
+			"url": "https://antonio.laguna.es"
+		},
+		{
+			"name": "Romain Menke",
+			"email": "romainmenke@gmail.com"
+		}
+	],
+	"license": "MIT-0",
+	"funding": [
+		{
+			"type": "github",
+			"url": "https://github.com/sponsors/csstools"
+		},
+		{
+			"type": "opencollective",
+			"url": "https://opencollective.com/csstools"
+		}
+	],
+	"engines": {
+		"node": "^14 || ^16 || >=18"
+	},
+	"type": "module",
+	"main": "dist/index.cjs",
+	"module": "dist/index.mjs",
+	"exports": {
+		".": {
+			"import": {
+				"types": "./dist/index.d.ts",
+				"default": "./dist/index.mjs"
+			},
+			"require": {
+				"default": "./dist/index.cjs"
+			}
+		}
+	},
+	"files": [
+		"CHANGELOG.md",
+		"LICENSE.md",
+		"README.md",
+		"dist"
+	],
+	"dependencies": {
+		"@csstools/css-parser-algorithms": "^2.7.1",
+		"@csstools/css-tokenizer": "^2.4.1",
+		"@csstools/postcss-progressive-custom-properties": "^3.3.0",
+		"@csstools/utilities": "^1.0.0"
+	},
+	"peerDependencies": {
+		"postcss": "^8.4"
+	},
+	"scripts": {},
+	"homepage": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-content-alt-text#readme",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/csstools/postcss-plugins.git",
+		"directory": "plugins/postcss-content-alt-text"
+	},
+	"bugs": "https://github.com/csstools/postcss-plugins/issues",
+	"keywords": [
+		"accessibility",
+		"alt",
+		"content",
+		"css",
+		"csswg",
+		"fallback",
+		"postcss-plugin",
+		"w3c"
+	]
+}