├── .editorconfig ├── .gitattributes ├── .github └── workflows │ └── test.yml ├── .gitignore ├── .rollup.js ├── .tape.js ├── CHANGELOG.md ├── CONTRIBUTING.md ├── INSTALL.md ├── LICENSE.md ├── README.md ├── package.json ├── src ├── index.d.ts ├── index.js ├── onCSSDeclaration.js └── options.js └── test ├── basic.css ├── basic.expect.css ├── basic.preserve.expect.css ├── clip-path.css └── clip-path.expect.css /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | end_of_line = lf 6 | indent_style = tab 7 | insert_final_newline = true 8 | trim_trailing_whitespace = true 9 | 10 | [*.md] 11 | trim_trailing_whitespace = false 12 | 13 | [*.{json,md,yml}] 14 | indent_size = 2 15 | indent_style = space 16 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto eol=lf 2 | -------------------------------------------------------------------------------- /.github/workflows/test.yml: -------------------------------------------------------------------------------- 1 | name: test 2 | on: 3 | push: 4 | 5 | jobs: 6 | test: 7 | runs-on: ubuntu-latest 8 | strategy: 9 | matrix: 10 | node: [12, 16] 11 | steps: 12 | - uses: actions/checkout@v2 13 | - uses: actions/setup-node@v2 14 | with: 15 | node-version: ${{ matrix.node }} 16 | 17 | - run: yarn install --ignore-scripts 18 | - run: yarn run test 19 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | dist 2 | node_modules 3 | package-lock.json 4 | yarn.lock 5 | *.log* 6 | *.result.css 7 | .* 8 | !.editorconfig 9 | !.gitattributes 10 | !.github 11 | !.gitignore 12 | !.rollup.js 13 | !.tape.js 14 | -------------------------------------------------------------------------------- /.rollup.js: -------------------------------------------------------------------------------- 1 | import babel from '@rollup/plugin-babel' 2 | import copy from 'rollup-plugin-copy' 3 | 4 | export default { 5 | input: 'src/index.js', 6 | output: [ 7 | { file: 'dist/index.cjs', format: 'cjs', sourcemap: true, exports: 'default' }, 8 | { file: 'dist/index.mjs', format: 'esm', sourcemap: true }, 9 | ], 10 | plugins: [ 11 | babel({ 12 | babelHelpers: 'bundled', 13 | plugins: [ 14 | '@babel/plugin-syntax-dynamic-import' 15 | ], 16 | presets: [ 17 | [ 18 | '@babel/env', 19 | { 20 | modules: false, 21 | targets: { 22 | node: 10, 23 | }, 24 | }, 25 | ], 26 | ], 27 | }), 28 | copy({ 29 | targets: [ 30 | { 31 | src: 'src/index.d.ts', 32 | dest: 'dist' 33 | }, 34 | ], 35 | }), 36 | ], 37 | } 38 | -------------------------------------------------------------------------------- /.tape.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | 'basic': { 3 | message: 'supports basic usage' 4 | }, 5 | 'basic:preserve': { 6 | message: 'supports { preserve: true } usage', 7 | options: { 8 | preserve: true 9 | } 10 | }, 11 | 'clip-path': { 12 | message: 'ignores clip-path with hash in url' 13 | } 14 | }; 15 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changes to PostCSS Color Hex Alpha 2 | 3 | ### 8.0.0 (September 22, 2021) 4 | 5 | - Updated: PostCSS Values Parser to v8 (major). 6 | - Added missing `dist` to bundle. 7 | - Added missing `exports` to `package.json` 8 | - Added missing `types` to `package.json` 9 | - Added bundling & testing as prepublish step. 10 | 11 | ### 7.0.0 (January 12, 2021) 12 | 13 | - Updated: Support for PostCSS v8+ 14 | 15 | ### 6.0.0 (April 25, 2020) 16 | 17 | - Updated: `postcss` to 7.0.27 (patch). 18 | - Updated: `postcss-values-parser` to 3.2.0 (major). 19 | - Updated: Node support to 10.0.0 (major). 20 | - Updated: Feature to use new percentage syntax. 21 | - Removed: Support for the removed `gray()` function. 22 | 23 | ### 5.0.3 (March 30, 2019) 24 | 25 | - Fixed: Issue with SVG hashes being interpretted as hex colors 26 | - Updated: `postcss` to 7.0.14 (patch) 27 | - Updated: `postcss-values-parser` to 2.0.1 (patch) 28 | 29 | ### 5.0.2 (September 18, 2018) 30 | 31 | - Updated: PostCSS Values Parser 2 (patch for this project) 32 | 33 | ### 5.0.1 (September 18, 2018) 34 | 35 | - Fixed: Issue correclty calculating each channel 36 | 37 | ### 5.0.0 (September 18, 2018) 38 | 39 | - Initial version 40 | 41 | ### 4.0.0 (September 17, 2018) 42 | 43 | - Updated: Support for PostCSS v7+ 44 | - Updated: Support for Node v6+ 45 | - Updated: color v3+ 46 | 47 | ### 3.0.0 (May 15, 2017) 48 | 49 | - Added: compatibility with postcss v6.x 50 | - Updated dependencies 51 | 52 | ### 2.0.0 (September 8, 2015) 53 | 54 | - Added: compatibility with postcss v5.x 55 | - Removed: compatiblity with postcss v4.x 56 | 57 | ### 1.3.0 (August 13, 2015) 58 | 59 | - Added: compatibility with postcss v4.1.x 60 | ([#3](https://github.com/postcss/postcss-color-hex-alpha/pull/3)) 61 | 62 | ### 1.1.0 (November 25, 2014) 63 | 64 | - Enhanced exceptions 65 | 66 | ### 1.0.0 - (October 4, 2014) 67 | 68 | Initial release from [postcss-color](https://github.com/postcss/postcss-color) 69 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to PostCSS Color Hex Alpha 2 | 3 | You want to help? You rock! Now, take a moment to be sure your contributions 4 | make sense to everyone else. 5 | 6 | ## Reporting Issues 7 | 8 | Found a problem? Want a new feature? 9 | 10 | - See if your issue or idea has [already been reported]. 11 | - Provide a [reduced test case] or a [live example]. 12 | 13 | Remember, a bug is a _demonstrable problem_ caused by _our_ code. 14 | 15 | ## Submitting Pull Requests 16 | 17 | Pull requests are the greatest contributions, so be sure they are focused in 18 | scope and avoid unrelated commits. 19 | 20 | 1. To begin; [fork this project], clone your fork, and add our upstream. 21 | ```bash 22 | # Clone your fork of the repo into the current directory 23 | git clone git@github.com:YOUR_USER/postcss-color-hex-alpha.git 24 | 25 | # Navigate to the newly cloned directory 26 | cd postcss-color-hex-alpha 27 | 28 | # Assign the original repo to a remote called "upstream" 29 | git remote add upstream git@github.com:postcss/postcss-color-hex-alpha.git 30 | 31 | # Install the tools necessary for testing 32 | npm install 33 | ``` 34 | 35 | 2. Create a branch for your feature or fix: 36 | ```bash 37 | # Move into a new branch for your feature 38 | git checkout -b feature/thing 39 | ``` 40 | ```bash 41 | # Move into a new branch for your fix 42 | git checkout -b fix/something 43 | ``` 44 | 45 | 3. If your code follows our practices, then push your feature branch: 46 | ```bash 47 | # Test current code 48 | npm test 49 | ``` 50 | ```bash 51 | # Push the branch for your new feature 52 | git push origin feature/thing 53 | ``` 54 | ```bash 55 | # Or, push the branch for your update 56 | git push origin update/something 57 | ``` 58 | 59 | That’s it! Now [open a pull request] with a clear title and description. 60 | 61 | [already been reported]: issues 62 | [fork this project]: fork 63 | [live example]: https://codepen.io/pen 64 | [open a pull request]: https://help.github.com/articles/using-pull-requests/ 65 | [reduced test case]: https://css-tricks.com/reduced-test-cases/ 66 | -------------------------------------------------------------------------------- /INSTALL.md: -------------------------------------------------------------------------------- 1 | # Installing PostCSS Color Hex Alpha 2 | 3 | [PostCSS Color Hex Alpha] runs in all Node environments, with special instructions for: 4 | 5 | | [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) | 6 | | --- | --- | --- | --- | --- | --- | 7 | 8 | ## Node 9 | 10 | Add [PostCSS Color Hex Alpha] to your project: 11 | 12 | ```bash 13 | npm install postcss-color-hex-alpha --save-dev 14 | ``` 15 | 16 | Use [PostCSS Color Hex Alpha] to process your CSS: 17 | 18 | ```js 19 | const postcssColorHexAlpha = require('postcss-color-hex-alpha'); 20 | 21 | postcssColorHexAlpha.process(YOUR_CSS /*, processOptions, pluginOptions */); 22 | ``` 23 | 24 | Or use it as a [PostCSS] plugin: 25 | 26 | ```js 27 | const postcss = require('postcss'); 28 | const postcssColorHexAlpha = require('postcss-color-hex-alpha'); 29 | 30 | postcss([ 31 | postcssColorHexAlpha(/* pluginOptions */) 32 | ]).process(YOUR_CSS /*, processOptions */); 33 | ``` 34 | 35 | ## PostCSS CLI 36 | 37 | Add [PostCSS CLI] to your project: 38 | 39 | ```bash 40 | npm install postcss-cli --save-dev 41 | ``` 42 | 43 | Use [PostCSS Color Hex Alpha] in your `postcss.config.js` configuration file: 44 | 45 | ```js 46 | const postcssColorHexAlpha = require('postcss-color-hex-alpha'); 47 | 48 | module.exports = { 49 | plugins: [ 50 | postcssColorHexAlpha(/* pluginOptions */) 51 | ] 52 | } 53 | ``` 54 | 55 | ## Webpack 56 | 57 | Add [PostCSS Loader] to your project: 58 | 59 | ```bash 60 | npm install postcss-loader --save-dev 61 | ``` 62 | 63 | Use [PostCSS Color Hex Alpha] in your Webpack configuration: 64 | 65 | ```js 66 | const postcssColorHexAlpha = require('postcss-color-hex-alpha'); 67 | 68 | module.exports = { 69 | module: { 70 | rules: [ 71 | { 72 | test: /\.css$/, 73 | use: [ 74 | 'style-loader', 75 | { loader: 'css-loader', options: { importLoaders: 1 } }, 76 | { loader: 'postcss-loader', options: { 77 | ident: 'postcss', 78 | plugins: () => [ 79 | postcssColorHexAlpha(/* pluginOptions */) 80 | ] 81 | } } 82 | ] 83 | } 84 | ] 85 | } 86 | } 87 | ``` 88 | 89 | ## Create React App 90 | 91 | Add [React App Rewired] and [React App Rewire PostCSS] to your project: 92 | 93 | ```bash 94 | npm install react-app-rewired react-app-rewire-postcss --save-dev 95 | ``` 96 | 97 | Use [React App Rewire PostCSS] and [PostCSS Color Hex Alpha] in your 98 | `config-overrides.js` file: 99 | 100 | ```js 101 | const reactAppRewirePostcss = require('react-app-rewire-postcss'); 102 | const postcssColorHexAlpha = require('postcss-color-hex-alpha'); 103 | 104 | module.exports = config => reactAppRewirePostcss(config, { 105 | plugins: () => [ 106 | postcssColorHexAlpha(/* pluginOptions */) 107 | ] 108 | }); 109 | ``` 110 | 111 | ## Gulp 112 | 113 | Add [Gulp PostCSS] to your project: 114 | 115 | ```bash 116 | npm install gulp-postcss --save-dev 117 | ``` 118 | 119 | Use [PostCSS Color Hex Alpha] in your Gulpfile: 120 | 121 | ```js 122 | const postcss = require('gulp-postcss'); 123 | const postcssColorHexAlpha = require('postcss-color-hex-alpha'); 124 | 125 | gulp.task('css', () => gulp.src('./src/*.css').pipe( 126 | postcss([ 127 | postcssColorHexAlpha(/* pluginOptions */) 128 | ]) 129 | ).pipe( 130 | gulp.dest('.') 131 | )); 132 | ``` 133 | 134 | ## Grunt 135 | 136 | Add [Grunt PostCSS] to your project: 137 | 138 | ```bash 139 | npm install grunt-postcss --save-dev 140 | ``` 141 | 142 | Use [PostCSS Color Hex Alpha] in your Gruntfile: 143 | 144 | ```js 145 | const postcssColorHexAlpha = require('postcss-color-hex-alpha'); 146 | 147 | grunt.loadNpmTasks('grunt-postcss'); 148 | 149 | grunt.initConfig({ 150 | postcss: { 151 | options: { 152 | use: [ 153 | postcssColorHexAlpha(/* pluginOptions */) 154 | ] 155 | }, 156 | dist: { 157 | src: '*.css' 158 | } 159 | } 160 | }); 161 | ``` 162 | 163 | [Gulp PostCSS]: https://github.com/postcss/gulp-postcss 164 | [Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss 165 | [PostCSS]: https://github.com/postcss/postcss 166 | [PostCSS CLI]: https://github.com/postcss/postcss-cli 167 | [PostCSS Loader]: https://github.com/postcss/postcss-loader 168 | [PostCSS Color Hex Alpha]: https://github.com/postcss/postcss-color-hex-alpha 169 | [React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss 170 | [React App Rewired]: https://github.com/timarney/react-app-rewired 171 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | # The MIT License (MIT) 2 | 3 | Copyright © PostCSS 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies 9 | of the Software, and to permit persons to whom the Software is furnished to do 10 | so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
⚠️ PostCSS Color Hex Alpha was moved to @csstools/postcss-plugins. ⚠️
2 | Read the announcement
3 | 4 | # PostCSS Color Hex Alpha [PostCSS][postcss] 5 | 6 | [![NPM Version][npm-img]][npm-url] 7 | [![CSS Standard Status][css-img]][css-url] 8 | [![Build Status][cli-img]][cli-url] 9 | [![Support Chat][git-img]][git-url] 10 | 11 | [PostCSS Color Hex Alpha] lets you use 4 & 8 character hex color notation in 12 | CSS, following the [CSS Color Module] specification. 13 | 14 | [!['Can I use' table](https://caniuse.bitsofco.de/image/css-rrggbbaa.png)](https://caniuse.com/#feat=css-rrggbbaa) 15 | 16 | ```pcss 17 | body { 18 | background: #9d9c; 19 | } 20 | 21 | /* becomes */ 22 | 23 | body { 24 | background: rgba(153, 221, 153, 0.8); 25 | } 26 | ``` 27 | 28 | ## Usage 29 | 30 | Add [PostCSS Color Hex Alpha] to your project: 31 | 32 | ```bash 33 | npm install postcss-color-hex-alpha --save-dev 34 | ``` 35 | 36 | Use [PostCSS Color Hex Alpha] to process your CSS: 37 | 38 | ```js 39 | const postcss = require('postcss'); 40 | const postcssColorHexAlpha = require('postcss-color-hex-alpha'); 41 | 42 | postcss([ 43 | postcssColorHexAlpha(/* pluginOptions */) 44 | ]).process(YOUR_CSS /*, processOptions */); 45 | ``` 46 | 47 | [PostCSS Color Hex Alpha] runs in all Node environments, with special instructions for: 48 | 49 | | [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) | 50 | | --- | --- | --- | --- | --- | --- | 51 | 52 | ## Options 53 | 54 | ### preserve 55 | 56 | The `preserve` option determines whether 4 & 8 character hex color notation 57 | should be preserved in their original form. By default, these are not preserved. 58 | 59 | ```js 60 | postcssColorHexAlpha({ 61 | preserve: true 62 | }); 63 | ``` 64 | 65 | ```pcss 66 | body { 67 | background: #9d9c; 68 | } 69 | 70 | /* becomes */ 71 | 72 | body { 73 | background: rgba(153, 221, 153, 0.8); 74 | background: #9d9c; 75 | } 76 | ``` 77 | 78 | [cli-img]: https://github.com/postcss/postcss-color-hex-alpha/workflows/test/badge.svg 79 | [cli-url]: https://github.com/postcss/postcss-color-hex-alpha/actions/workflows/test.yml?query=workflow/test 80 | [css-img]: https://cssdb.org/images/badges/hexadecimal-alpha-notation.svg 81 | [css-url]: https://cssdb.org/#hexadecimal-alpha-notation 82 | [git-img]: https://img.shields.io/badge/support-chat-blue.svg 83 | [git-url]: https://gitter.im/postcss/postcss 84 | [npm-img]: https://img.shields.io/npm/v/postcss-color-hex-alpha.svg 85 | [npm-url]: https://www.npmjs.com/package/postcss-color-hex-alpha 86 | 87 | [PostCSS]: https://github.com/postcss/postcss 88 | [PostCSS Color Hex Alpha]: https://github.com/postcss/postcss-color-hex-alpha 89 | [CSS Color Module]: https://www.w3.org/TR/css-color-4/#hex-notation 90 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "postcss-color-hex-alpha", 3 | "version": "8.0.0", 4 | "description": "Use 4 & 8 character hex color notation in CSS", 5 | "author": "Jonathan Neal ", 6 | "contributors": [ 7 | "Maxime Thirouin" 8 | ], 9 | "license": "MIT", 10 | "repository": "postcss/postcss-color-hex-alpha", 11 | "homepage": "https://github.com/postcss/postcss-color-hex-alpha#readme", 12 | "bugs": "https://github.com/postcss/postcss-color-hex-alpha/issues", 13 | "main": "dist/index.cjs", 14 | "module": "dist/index.mjs", 15 | "types": "./dist/index.d.ts", 16 | "exports": { 17 | ".": { 18 | "import": "./dist/index.mjs", 19 | "require": "./dist/index.cjs", 20 | "types": "./dist/index.d.ts" 21 | } 22 | }, 23 | "scripts": { 24 | "build": "npx rollup -c .rollup.js", 25 | "build:watch": "npx rollup -c .rollup.js --watch", 26 | "lint": "npx eslint --cache src", 27 | "lint:fix": "npx eslint --cache --fix", 28 | "pretest": "npm install && npm run build", 29 | "test": "npm run lint && npm run tape", 30 | "tape": "npx postcss-tape", 31 | "prepublishOnly": "npm test" 32 | }, 33 | "engines": { 34 | "node": ">=10.0.0" 35 | }, 36 | "dependencies": { 37 | "postcss-value-parser": "^4.2.0" 38 | }, 39 | "peerDependencies": { 40 | "postcss": "^8.3.7" 41 | }, 42 | "devDependencies": { 43 | "@babel/core": "^7.15.5", 44 | "@babel/preset-env": "^7.15.6", 45 | "@rollup/plugin-babel": "^5.3.0", 46 | "eslint": "^7.32.0", 47 | "postcss": "^8.3.7", 48 | "postcss-tape": "^6.0.1", 49 | "pre-commit": "^1.2.2", 50 | "rollup": "^2.57.0", 51 | "rollup-plugin-copy": "^3.4.0" 52 | }, 53 | "eslintConfig": { 54 | "env": { 55 | "browser": true, 56 | "es6": true, 57 | "node": true 58 | }, 59 | "extends": "eslint:recommended", 60 | "parserOptions": { 61 | "ecmaVersion": 2020, 62 | "sourceType": "module" 63 | }, 64 | "root": true 65 | }, 66 | "keywords": [ 67 | "postcss", 68 | "css", 69 | "postcss-plugin", 70 | "color", 71 | "hex", 72 | "alpha", 73 | "transparent", 74 | "transparency", 75 | "4-digit", 76 | "8-digit", 77 | "w3c", 78 | "csswg", 79 | "specification", 80 | "spec" 81 | ] 82 | } 83 | -------------------------------------------------------------------------------- /src/index.d.ts: -------------------------------------------------------------------------------- 1 | export type PluginOptions = { 2 | /** Defines whether the original declaration should remain. */ 3 | preserve?: boolean 4 | } 5 | 6 | export type Plugin = { 7 | (pluginOptions?: PluginOptions): { 8 | postcssPlugin: 'postcss-color-hex-alpha' 9 | } 10 | postcss: true 11 | } 12 | 13 | declare const plugin: Plugin 14 | 15 | export default plugin 16 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import onCSSDeclaration from './onCSSDeclaration' 2 | import options from './options' 3 | 4 | /** Transform 4 & 8 character hex color notation in CSS. */ 5 | export default function postcssColorHexAlpha(/** @type {PostCSSPluginInitializer} */ opts) { 6 | options.preserve = 'preserve' in Object(opts) ? Boolean(opts.preserve) : false 7 | 8 | return { 9 | postcssPlugin: 'postcss-color-hex-alpha', 10 | Declaration: onCSSDeclaration 11 | } 12 | } 13 | 14 | postcssColorHexAlpha.postcss = true 15 | -------------------------------------------------------------------------------- /src/onCSSDeclaration.js: -------------------------------------------------------------------------------- 1 | import valuesParser from 'postcss-value-parser'; 2 | import options from './options'; 3 | 4 | /** @type {(decl: CSSDeclaration) => void} Transform 4 & 8 character hex color notation in CSS Declarations. */ 5 | const onCSSDeclaration = (decl) => { 6 | if (hasAlphaHex(decl)) { 7 | const { value: originalValue } = decl; 8 | 9 | // replace instances of hexa with rgba() 10 | const valueAST = valuesParser(originalValue); 11 | 12 | valueAST.walk((node) => { 13 | if (isAlphaHex(node)) { 14 | hexa2rgba(node); 15 | } 16 | }); 17 | 18 | const modifiedValue = valueAST.toString(); 19 | 20 | if (modifiedValue !== originalValue) { 21 | if (options.preserve) decl.cloneBefore({ value: modifiedValue }); 22 | else decl.value = modifiedValue; 23 | } 24 | } 25 | }; 26 | 27 | /** Expresssion to match an exact hexa */ 28 | const alphaHexValueRegExp = /^#([0-9A-Fa-f]{4}(?:[0-9A-Fa-f]{4})?)$/; 29 | 30 | /** Expresssion to match any hexa */ 31 | const alphaHexRegExp = /#([0-9A-Fa-f]{4}(?:[0-9A-Fa-f]{4})?)\b/; 32 | 33 | /** Returns whether a node has a hexa. */ 34 | const hasAlphaHex = (node) => alphaHexRegExp.test(node.value); 35 | 36 | /** Returns whether a node matches a hexa node. */ 37 | const isAlphaHex = (node) => 38 | node.type === 'word' && alphaHexValueRegExp.test(node.value); 39 | 40 | /** Decimal precision. */ 41 | const alphaDecimalPrecision = 100000; 42 | 43 | const hexa2rgba = (node) => { 44 | // hex is the node value 45 | const hex = node.value; 46 | 47 | // conditionally expand a hex 48 | const hex8 = `0x${ 49 | hex.length === 5 ? hex.slice(1).replace(/[0-9A-f]/g, '$&$&') : hex.slice(1) 50 | }`; 51 | 52 | // extract the red, blue, green, and alpha values from the hex 53 | const [r, g, b, a] = [ 54 | parseInt(hex8.slice(2, 4), 16), 55 | parseInt(hex8.slice(4, 6), 16), 56 | parseInt(hex8.slice(6, 8), 16), 57 | Math.round( 58 | (parseInt(hex8.slice(8, 10), 16) / 255) * alphaDecimalPrecision 59 | ) / alphaDecimalPrecision, 60 | ]; 61 | 62 | node.value = `rgba(${r},${g},${b},${a})`; 63 | }; 64 | 65 | export default onCSSDeclaration; 66 | 67 | /** @typedef {import('postcss').Declaration} CSSDeclaration */ 68 | -------------------------------------------------------------------------------- /src/options.js: -------------------------------------------------------------------------------- 1 | export default { 2 | /** Whether to preserve the original functional color declaration. */ 3 | preserve: false 4 | } 5 | -------------------------------------------------------------------------------- /test/basic.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #9d9 linear-gradient(#9823f8a9, #9823f834); 3 | color: red; 4 | color: #f00; 5 | color: #f00f; 6 | color: #0000ff; 7 | color: #0000ff00; 8 | content: "#f00"; 9 | content: "#0000ff00"; 10 | } 11 | 12 | body { 13 | background-color: #f3f3f3f3; 14 | color: #0003; 15 | } 16 | -------------------------------------------------------------------------------- /test/basic.expect.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #9d9 linear-gradient(rgba(152,35,248,0.66275), rgba(152,35,248,0.20392)); 3 | color: red; 4 | color: #f00; 5 | color: rgba(255,0,0,1); 6 | color: #0000ff; 7 | color: rgba(0,0,255,0); 8 | content: "#f00"; 9 | content: "#0000ff00"; 10 | } 11 | 12 | body { 13 | background-color: rgba(243,243,243,0.95294); 14 | color: rgba(0,0,0,0.2); 15 | } 16 | -------------------------------------------------------------------------------- /test/basic.preserve.expect.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #9d9 linear-gradient(rgba(152,35,248,0.66275), rgba(152,35,248,0.20392)); 3 | background: #9d9 linear-gradient(#9823f8a9, #9823f834); 4 | color: red; 5 | color: #f00; 6 | color: rgba(255,0,0,1); 7 | color: #f00f; 8 | color: #0000ff; 9 | color: rgba(0,0,255,0); 10 | color: #0000ff00; 11 | content: "#f00"; 12 | content: "#0000ff00"; 13 | } 14 | 15 | body { 16 | background-color: rgba(243,243,243,0.95294); 17 | background-color: #f3f3f3f3; 18 | color: rgba(0,0,0,0.2); 19 | color: #0003; 20 | } 21 | -------------------------------------------------------------------------------- /test/clip-path.css: -------------------------------------------------------------------------------- 1 | #svg-element { 2 | clip-path: url(#SVGID_1_); 3 | } 4 | -------------------------------------------------------------------------------- /test/clip-path.expect.css: -------------------------------------------------------------------------------- 1 | #svg-element { 2 | clip-path: url(#SVGID_1_); 3 | } 4 | --------------------------------------------------------------------------------