├── .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.js ├── onCSSDeclaration.js ├── onCSSFunction.js └── options.js └── test ├── basic.css ├── basic.expect.css └── basic.preserve-true.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, 14, 16] 11 | steps: 12 | - uses: actions/checkout@v2 13 | - uses: actions/setup-node@v2 14 | with: 15 | node-version: ${{ matrix.node }} 16 | 17 | - run: npm install --ignore-scripts 18 | - run: npm 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 | !.gitignore 11 | !.rollup.js 12 | !.tape.js 13 | !.github 14 | -------------------------------------------------------------------------------- /.rollup.js: -------------------------------------------------------------------------------- 1 | import babel from '@rollup/plugin-babel'; 2 | 3 | export default { 4 | input: 'src/index.js', 5 | output: [ 6 | { file: 'dist/index.cjs.js', format: 'cjs', sourcemap: true, exports: 'default' }, 7 | { file: 'dist/index.esm.js', format: 'esm', sourcemap: true, exports: 'default' } 8 | ], 9 | plugins: [ 10 | babel({ 11 | babelHelpers: 'bundled', 12 | presets: [ 13 | ['@babel/preset-env', { 14 | corejs: 3, 15 | loose: true, 16 | modules: false, 17 | targets: { node: 10 }, 18 | useBuiltIns: 'entry' 19 | }] 20 | ] 21 | }), 22 | ], 23 | onwarn(warning, warn) { 24 | if (warning.code !== 'UNRESOLVED_IMPORT') warn(warning) 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /.tape.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | 'basic': { 3 | message: 'supports basic usage', 4 | warnings: 1, 5 | }, 6 | 'basic:preserve-true': { 7 | message: 'supports { preserve: true } usage', 8 | warnings: 1, 9 | options: { 10 | preserve: true 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changes to PostCSS Lab Function 2 | 3 | ### 4.0.1 (November 18, 2021) 4 | 5 | - Added: Safeguards against postcss-values-parser potentially throwing an error. 6 | - Updated: postcss-value-parser to 6.0.1 (patch) 7 | 8 | ### 4.0.0 (September 17, 2021) 9 | 10 | - Updated: Support for PostCS 8+ (major). 11 | - Updated: Support for Node 12+ (major). 12 | 13 | ### 3.1.2 (April 25, 2020) 14 | 15 | - Updated: Publish 16 | 17 | ### 3.1.1 (April 25, 2020) 18 | 19 | - Updated: Using `walkType` to evade walker bug in `postcss-values-parser` 20 | 21 | ### 3.1.0 (April 25, 2020) 22 | 23 | - Updated: `postcss-values-parser` to 3.2.0 (minor). 24 | 25 | ### 3.0.1 (April 12, 2020) 26 | 27 | - Updated: Ownership moved to CSSTools. 28 | 29 | ### 3.0.0 (April 12, 2020) 30 | 31 | - Updated: `postcss-values-parser` to 3.1.1 (major). 32 | - Updated: Node support to 10.0.0 (major). 33 | - Updated: Feature to use new percentage syntax. 34 | - Removed: Support for the removed `gray()` function. 35 | 36 | ### 2.0.1 (September 18, 2018) 37 | 38 | - Updated: PostCSS Values Parser 2.0.0 39 | 40 | ### 2.0.0 (September 17, 2018) 41 | 42 | - Updated: Support for PostCSS 7+ 43 | - Updated: Support for Node 6+ 44 | 45 | ### 1.1.0 (July 24, 2018) 46 | 47 | - Added: Support for `gray(a / b)` as `lab(a 0 0 / b)` 48 | 49 | ### 1.0.1 (May 11, 2018) 50 | 51 | - Fixed: Values beyond the acceptable 0-255 RGB range 52 | 53 | ### 1.0.0 (May 11, 2018) 54 | 55 | - Initial version 56 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to PostCSS Lab Function 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-lab-function.git 24 | 25 | # Navigate to the newly cloned directory 26 | cd postcss-lab-function 27 | 28 | # Assign the original repo to a remote called "upstream" 29 | git remote add upstream git@github.com:csstools/postcss-lab-function.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 Lab Function 2 | 3 | [PostCSS Lab Function] runs in all Node environments, with special 4 | instructions for: 5 | 6 | | [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) | 7 | | --- | --- | --- | --- | --- | --- | 8 | 9 | ## Node 10 | 11 | Add [PostCSS Lab Function] to your project: 12 | 13 | ```bash 14 | npm install postcss postcss-lab-function --save-dev 15 | ``` 16 | 17 | Use it as a [PostCSS] plugin: 18 | 19 | ```js 20 | const postcss = require('postcss'); 21 | const postcssLabFunction = require('postcss-lab-function'); 22 | 23 | postcss([ 24 | postcssLabFunction(/* pluginOptions */) 25 | ]).process(YOUR_CSS /*, processOptions */); 26 | ``` 27 | 28 | ## PostCSS CLI 29 | 30 | Add [PostCSS CLI] to your project: 31 | 32 | ```bash 33 | npm install postcss-cli --save-dev 34 | ``` 35 | 36 | Use [PostCSS Lab Function] in your `postcss.config.js` configuration 37 | file: 38 | 39 | ```js 40 | const postcssLabFunction = require('postcss-lab-function'); 41 | 42 | module.exports = { 43 | plugins: [ 44 | postcssLabFunction(/* pluginOptions */) 45 | ] 46 | } 47 | ``` 48 | 49 | ## Webpack 50 | 51 | Add [PostCSS Loader] to your project: 52 | 53 | ```bash 54 | npm install postcss-loader --save-dev 55 | ``` 56 | 57 | Use [PostCSS Lab Function] in your Webpack configuration: 58 | 59 | ```js 60 | const postcssLabFunction = require('postcss-lab-function'); 61 | 62 | module.exports = { 63 | module: { 64 | rules: [ 65 | { 66 | test: /\.css$/, 67 | use: [ 68 | 'style-loader', 69 | { loader: 'css-loader', options: { importLoaders: 1 } }, 70 | { loader: 'postcss-loader', options: { 71 | ident: 'postcss', 72 | plugins: () => [ 73 | postcssLabFunction(/* pluginOptions */) 74 | ] 75 | } } 76 | ] 77 | } 78 | ] 79 | } 80 | } 81 | ``` 82 | 83 | ## Create React App 84 | 85 | Add [React App Rewired] and [React App Rewire PostCSS] to your project: 86 | 87 | ```bash 88 | npm install react-app-rewired react-app-rewire-postcss --save-dev 89 | ``` 90 | 91 | Use [React App Rewire PostCSS] and [PostCSS Lab Function] in your 92 | `config-overrides.js` file: 93 | 94 | ```js 95 | const reactAppRewirePostcss = require('react-app-rewire-postcss'); 96 | const postcssLabFunction = require('postcss-lab-function'); 97 | 98 | module.exports = config => reactAppRewirePostcss(config, { 99 | plugins: () => [ 100 | postcssLabFunction(/* pluginOptions */) 101 | ] 102 | }); 103 | ``` 104 | 105 | ## Gulp 106 | 107 | Add [Gulp PostCSS] to your project: 108 | 109 | ```bash 110 | npm install gulp-postcss --save-dev 111 | ``` 112 | 113 | Use [PostCSS Lab Function] in your Gulpfile: 114 | 115 | ```js 116 | const postcss = require('gulp-postcss'); 117 | const postcssLabFunction = require('postcss-lab-function'); 118 | 119 | gulp.task('css', () => gulp.src('./src/*.css').pipe( 120 | postcss([ 121 | postcssLabFunction(/* pluginOptions */) 122 | ]) 123 | ).pipe( 124 | gulp.dest('.') 125 | )); 126 | ``` 127 | 128 | ## Grunt 129 | 130 | Add [Grunt PostCSS] to your project: 131 | 132 | ```bash 133 | npm install grunt-postcss --save-dev 134 | ``` 135 | 136 | Use [PostCSS Lab Function] in your Gruntfile: 137 | 138 | ```js 139 | const postcssLabFunction = require('postcss-lab-function'); 140 | 141 | grunt.loadNpmTasks('grunt-postcss'); 142 | 143 | grunt.initConfig({ 144 | postcss: { 145 | options: { 146 | use: [ 147 | postcssLabFunction(/* pluginOptions */) 148 | ] 149 | }, 150 | dist: { 151 | src: '*.css' 152 | } 153 | } 154 | }); 155 | ``` 156 | 157 | [Gulp PostCSS]: https://github.com/postcss/gulp-postcss 158 | [Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss 159 | [PostCSS]: https://github.com/postcss/postcss 160 | [PostCSS CLI]: https://github.com/postcss/postcss-cli 161 | [PostCSS Loader]: https://github.com/postcss/postcss-loader 162 | [PostCSS Lab Function]: https://github.com/csstools/postcss-lab-function 163 | [React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss 164 | [React App Rewired]: https://github.com/timarney/react-app-rewired 165 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | # CC0 1.0 Universal 2 | 3 | ## Statement of Purpose 4 | 5 | The laws of most jurisdictions throughout the world automatically confer 6 | exclusive Copyright and Related Rights (defined below) upon the creator and 7 | subsequent owner(s) (each and all, an “owner”) of an original work of 8 | authorship and/or a database (each, a “Work”). 9 | 10 | Certain owners wish to permanently relinquish those rights to a Work for the 11 | purpose of contributing to a commons of creative, cultural and scientific works 12 | (“Commons”) that the public can reliably and without fear of later claims of 13 | infringement build upon, modify, incorporate in other works, reuse and 14 | redistribute as freely as possible in any form whatsoever and for any purposes, 15 | including without limitation commercial purposes. These owners may contribute 16 | to the Commons to promote the ideal of a free culture and the further 17 | production of creative, cultural and scientific works, or to gain reputation or 18 | greater distribution for their Work in part through the use and efforts of 19 | others. 20 | 21 | For these and/or other purposes and motivations, and without any expectation of 22 | additional consideration or compensation, the person associating CC0 with a 23 | Work (the “Affirmer”), to the extent that he or she is an owner of Copyright 24 | and Related Rights in the Work, voluntarily elects to apply CC0 to the Work and 25 | publicly distribute the Work under its terms, with knowledge of his or her 26 | Copyright and Related Rights in the Work and the meaning and intended legal 27 | effect of CC0 on those rights. 28 | 29 | 1. Copyright and Related Rights. A Work made available under CC0 may be 30 | protected by copyright and related or neighboring rights (“Copyright and 31 | Related Rights”). Copyright and Related Rights include, but are not limited 32 | to, the following: 33 | 1. the right to reproduce, adapt, distribute, perform, display, communicate, 34 | and translate a Work; 35 | 2. moral rights retained by the original author(s) and/or performer(s); 36 | 3. publicity and privacy rights pertaining to a person’s image or likeness 37 | depicted in a Work; 38 | 4. rights protecting against unfair competition in regards to a Work, 39 | subject to the limitations in paragraph 4(i), below; 40 | 5. rights protecting the extraction, dissemination, use and reuse of data in 41 | a Work; 42 | 6. database rights (such as those arising under Directive 96/9/EC of the 43 | European Parliament and of the Council of 11 March 1996 on the legal 44 | protection of databases, and under any national implementation thereof, 45 | including any amended or successor version of such directive); and 46 | 7. other similar, equivalent or corresponding rights throughout the world 47 | based on applicable law or treaty, and any national implementations 48 | thereof. 49 | 50 | 2. Waiver. To the greatest extent permitted by, but not in contravention of, 51 | applicable law, Affirmer hereby overtly, fully, permanently, irrevocably and 52 | unconditionally waives, abandons, and surrenders all of Affirmer’s Copyright 53 | and Related Rights and associated claims and causes of action, whether now 54 | known or unknown (including existing as well as future claims and causes of 55 | action), in the Work (i) in all territories worldwide, (ii) for the maximum 56 | duration provided by applicable law or treaty (including future time 57 | extensions), (iii) in any current or future medium and for any number of 58 | copies, and (iv) for any purpose whatsoever, including without limitation 59 | commercial, advertising or promotional purposes (the “Waiver”). Affirmer 60 | makes the Waiver for the benefit of each member of the public at large and 61 | to the detriment of Affirmer’s heirs and successors, fully intending that 62 | such Waiver shall not be subject to revocation, rescission, cancellation, 63 | termination, or any other legal or equitable action to disrupt the quiet 64 | enjoyment of the Work by the public as contemplated by Affirmer’s express 65 | Statement of Purpose. 66 | 67 | 3. Public License Fallback. Should any part of the Waiver for any reason be 68 | judged legally invalid or ineffective under applicable law, then the Waiver 69 | shall be preserved to the maximum extent permitted taking into account 70 | Affirmer’s express Statement of Purpose. In addition, to the extent the 71 | Waiver is so judged Affirmer hereby grants to each affected person a 72 | royalty-free, non transferable, non sublicensable, non exclusive, 73 | irrevocable and unconditional license to exercise Affirmer’s Copyright and 74 | Related Rights in the Work (i) in all territories worldwide, (ii) for the 75 | maximum duration provided by applicable law or treaty (including future time 76 | extensions), (iii) in any current or future medium and for any number of 77 | copies, and (iv) for any purpose whatsoever, including without limitation 78 | commercial, advertising or promotional purposes (the “License”). The License 79 | shall be deemed effective as of the date CC0 was applied by Affirmer to the 80 | Work. Should any part of the License for any reason be judged legally 81 | invalid or ineffective under applicable law, such partial invalidity or 82 | ineffectiveness shall not invalidate the remainder of the License, and in 83 | such case Affirmer hereby affirms that he or she will not (i) exercise any 84 | of his or her remaining Copyright and Related Rights in the Work or (ii) 85 | assert any associated claims and causes of action with respect to the Work, 86 | in either case contrary to Affirmer’s express Statement of Purpose. 87 | 88 | 4. Limitations and Disclaimers. 89 | 1. No trademark or patent rights held by Affirmer are waived, abandoned, 90 | surrendered, licensed or otherwise affected by this document. 91 | 2. Affirmer offers the Work as-is and makes no representations or warranties 92 | of any kind concerning the Work, express, implied, statutory or 93 | otherwise, including without limitation warranties of title, 94 | merchantability, fitness for a particular purpose, non infringement, or 95 | the absence of latent or other defects, accuracy, or the present or 96 | absence of errors, whether or not discoverable, all to the greatest 97 | extent permissible under applicable law. 98 | 3. Affirmer disclaims responsibility for clearing rights of other persons 99 | that may apply to the Work or any use thereof, including without 100 | limitation any person’s Copyright and Related Rights in the Work. 101 | Further, Affirmer disclaims responsibility for obtaining any necessary 102 | consents, permissions or other rights required for any use of the Work. 103 | 4. Affirmer understands and acknowledges that Creative Commons is not a 104 | party to this document and has no duty or obligation with respect to this 105 | CC0 or use of the Work. 106 | 107 | For more information, please see 108 | http://creativecommons.org/publicdomain/zero/1.0/. 109 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
⚠️ PostCSS Lab Function was moved to @csstools/postcss-plugins. ⚠️
2 | Read the announcement
3 | 4 | # PostCSS Lab Function [PostCSS Logo][postcss] 5 | 6 | [npm version][npm-url] 7 | [CSS Standard Status][css-url] 8 | [Build Status][cli-url] 9 | [support chat][git-url] 10 | 11 | 12 | [PostCSS Lab Function] lets you use `lab` and `lch` color functions in 13 | CSS, following the [CSS Color] specification. 14 | 15 | ```pcss 16 | :root { 17 | --firebrick: lab(40% 56.6 39); 18 | --firebrick-a50: lch(40% 68.8 34.5 / 50%); 19 | } 20 | 21 | /* becomes */ 22 | 23 | :root { 24 | --firebrick: rgb(178, 34, 34); 25 | --firebrick-a50: rgba(178, 34, 34, .5); 26 | } 27 | ``` 28 | 29 | ## Usage 30 | 31 | Add [PostCSS Lab Function] to your project: 32 | 33 | ```bash 34 | npm install postcss postcss-lab-function --save-dev 35 | ``` 36 | 37 | Use it as a [PostCSS] plugin: 38 | 39 | ```js 40 | const postcss = require('postcss'); 41 | const postcssLabFunction = require('postcss-lab-function'); 42 | 43 | postcss([ 44 | postcssLabFunction(/* pluginOptions */) 45 | ]).process(YOUR_CSS /*, processOptions */); 46 | ``` 47 | 48 | [PostCSS Lab Function] runs in all Node environments, with special 49 | instructions for: 50 | 51 | | [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) | 52 | | --- | --- | --- | --- | --- | --- | 53 | 54 | ## Options 55 | 56 | ### preserve 57 | 58 | The `preserve` option determines whether the original functional color notation 59 | is preserved. By default, it is not preserved. 60 | 61 | ```js 62 | postcssLabFunction({ preserve: true }) 63 | ``` 64 | 65 | ```pcss 66 | :root { 67 | --firebrick: lab(40% 56.6 39); 68 | --firebrick-a50: lch(40% 68.8 34.5 / 50%); 69 | } 70 | 71 | /* becomes */ 72 | 73 | :root { 74 | --firebrick: rgb(178, 34, 34); 75 | --firebrick: lab(40% 56.6 39); 76 | --firebrick-a50: rgba(178, 34, 34, .5); 77 | --firebrick-a50: lch(40% 68.8 34.5 / 50%); 78 | } 79 | ``` 80 | 81 | [cli-url]: https://github.com/csstools/postcss-lab-function/actions/workflows/test.yml?query=workflow/test 82 | [css-url]: https://cssdb.org/#lab-function 83 | [git-url]: https://gitter.im/postcss/postcss 84 | [npm-url]: https://www.npmjs.com/package/postcss-lab-function 85 | 86 | [CSS Color]: https://drafts.csswg.org/css-color/#specifying-lab-lch 87 | [Gulp PostCSS]: https://github.com/postcss/gulp-postcss 88 | [Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss 89 | [PostCSS]: https://github.com/postcss/postcss 90 | [PostCSS Loader]: https://github.com/postcss/postcss-loader 91 | [PostCSS Lab Function]: https://github.com/csstools/postcss-lab-function 92 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "postcss-lab-function", 3 | "version": "4.0.1", 4 | "description": "Use lab() and lch() color functions in CSS", 5 | "author": "Jonathan Neal ", 6 | "license": "CC0-1.0", 7 | "repository": "csstools/postcss-lab-function", 8 | "homepage": "https://github.com/csstools/postcss-lab-function#readme", 9 | "bugs": "https://github.com/csstools/postcss-lab-function/issues", 10 | "main": "dist/index.cjs.js", 11 | "module": "dist/index.esm.mjs", 12 | "files": [ 13 | "dist" 14 | ], 15 | "scripts": { 16 | "build": "npx rollup -c .rollup.js", 17 | "build:watch": "npx rollup -c .rollup.js --watch", 18 | "lint": "npx eslint --cache src", 19 | "lint:fix": "npx eslint --cache --fix", 20 | "pretest": "npm install && npm run build", 21 | "test": "npm run lint && npm run tape", 22 | "tape": "npx postcss-tape", 23 | "prepublishOnly": "npm test" 24 | }, 25 | "engines": { 26 | "node": ">=12" 27 | }, 28 | "dependencies": { 29 | "@csstools/convert-colors": "2.0.0", 30 | "postcss-values-parser": "6.0.1" 31 | }, 32 | "peerDependencies": { 33 | "postcss": "^8.3" 34 | }, 35 | "devDependencies": { 36 | "@babel/core": "^7.16.0", 37 | "@babel/preset-env": "^7.16.4", 38 | "@rollup/plugin-babel": "^5.3.0", 39 | "eslint": "^8.2.0", 40 | "postcss": "^8.3.11", 41 | "postcss-tape": "^6.0.1", 42 | "rollup": "^2.60.0" 43 | }, 44 | "babel": { 45 | "presets": [ 46 | [ 47 | "@babel/env", 48 | { 49 | "targets": "maintained node versions" 50 | } 51 | ] 52 | ] 53 | }, 54 | "eslintConfig": { 55 | "env": { 56 | "es6": true, 57 | "node": true 58 | }, 59 | "extends": "eslint:recommended", 60 | "parserOptions": { 61 | "sourceType": "module" 62 | } 63 | }, 64 | "keywords": [ 65 | "postcss", 66 | "css", 67 | "postcss-plugin", 68 | "color", 69 | "colors", 70 | "rgb", 71 | "rgba", 72 | "hsl", 73 | "hsla", 74 | "hwb", 75 | "functional", 76 | "notation", 77 | "design", 78 | "syntax", 79 | "space", 80 | "comma" 81 | ] 82 | } 83 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import onCSSDeclaration from './onCSSDeclaration' 2 | import options from './options' 3 | 4 | /** Transform lab() and lch() functions in CSS. */ 5 | const postcssPlugin = /** @type {PostCSSPluginInitializer} */ opts => { 6 | options.preserve = 'preserve' in Object(opts) ? Boolean(opts.preserve) : false 7 | 8 | return { 9 | postcssPlugin: 'postcss-lab-function', 10 | Declaration: onCSSDeclaration, 11 | } 12 | } 13 | 14 | postcssPlugin.postcss = true 15 | 16 | export default postcssPlugin 17 | 18 | /** @typedef {import('postcss').Plugin} PostCSSPlugin */ 19 | /** @typedef {(opts: options) => PostCSSPlugin} PostCSSPluginInitializer */ 20 | -------------------------------------------------------------------------------- /src/onCSSDeclaration.js: -------------------------------------------------------------------------------- 1 | import { parse } from 'postcss-values-parser' 2 | import onCSSFunction from './onCSSFunction' 3 | import options from './options' 4 | 5 | /** @type {(decl: CSSDeclaration) => void} Transform lab() and lch() functions in CSS Declarations. */ 6 | const onCSSDeclaration = (decl, { result }) => { 7 | const { value: originalValue } = decl 8 | 9 | if (hasAnyColorFunction(originalValue)) { 10 | let valueAST 11 | 12 | try { 13 | valueAST = parse(originalValue, { ignoreUnknownWords: true }) 14 | } catch (error) { 15 | decl.warn( 16 | result, 17 | `Failed to parse value '${originalValue}' as a lab or hcl function. Leaving the original value intact.` 18 | ) 19 | } 20 | 21 | if (typeof valueAST === 'undefined') { 22 | return 23 | } 24 | 25 | valueAST.walkType('func', onCSSFunction) 26 | 27 | const modifiedValue = String(valueAST) 28 | 29 | if (modifiedValue !== originalValue) { 30 | if (options.preserve) decl.cloneBefore({ value: modifiedValue }) 31 | else decl.value = modifiedValue 32 | } 33 | } 34 | } 35 | 36 | export default onCSSDeclaration 37 | 38 | /** @type {(value: RegExp) => (value: string) => boolean} Return a function that checks whether the expression exists in a value. */ 39 | const createRegExpTest = Function.bind.bind(RegExp.prototype.test) 40 | 41 | /** Return whether the value has a lab() or lch() function. */ 42 | const hasAnyColorFunction = createRegExpTest(/(^|[^\w-])(lab|lch)\(/i) 43 | 44 | /** @typedef {import('postcss').Declaration} CSSDeclaration */ 45 | -------------------------------------------------------------------------------- /src/onCSSFunction.js: -------------------------------------------------------------------------------- 1 | import { lab2rgb, lch2rgb } from '@csstools/convert-colors' 2 | import { parse } from 'postcss-values-parser' 3 | 4 | /** @type {(decl: CSSFunction) => void} Transform lab() and lch() functions. */ 5 | const onCSSFunction = node => { 6 | /** @type {{ name: string, nodes: CSSNode[] }} */ 7 | const { name, nodes } = node 8 | 9 | if (isColorFunctionName(name)) { 10 | if (isLabFunctionContents(nodes) || isLchFunctionContents(nodes)) { 11 | // rename the Color function to `rgb` 12 | Object.assign(node, { name: 'rgb' }) 13 | 14 | /** @type {CSSPunctuation} Slash punctuation before the Alpha channel. */ 15 | const slashNode = nodes[3] 16 | 17 | /** @type {CSSNumber} Alpha channel. */ 18 | const alphaNode = nodes[4] 19 | 20 | if (alphaNode) { 21 | if (isPercentage(alphaNode) && !isCalc(alphaNode)) { 22 | // transform the Alpha channel from a Percentage to (0-1) Number 23 | Object.assign(alphaNode, { value: String(alphaNode.value / 100), unit: '' }) 24 | } 25 | 26 | // if the color is fully opaque (i.e. the Alpha channel is `1`) 27 | if (alphaNode.value === '1') { 28 | // remove the Slash and Alpha channel 29 | slashNode.remove() 30 | alphaNode.remove() 31 | } else { 32 | // otherwise, rename the Color function to `rgba` 33 | Object.assign(node, { name: 'rgba' }) 34 | } 35 | } 36 | 37 | // replace a remaining Slash with a Comma 38 | if (slashNode && isSlash(slashNode)) { 39 | slashNode.replaceWith(commaNode.clone()) 40 | } 41 | 42 | /** Extracted Color channels. */ 43 | const [channelNode1, channelNode2, channelNode3] = nodes 44 | 45 | /** Corresponding Color transformer. */ 46 | const toRGB = isLabColorFunctionName(name) ? lab2rgb : lch2rgb 47 | 48 | /** RGB channels from the source color. */ 49 | const rgbValues = toRGB( 50 | ...[ 51 | channelNode1.value, 52 | channelNode2.value, 53 | channelNode3.value 54 | ].map( 55 | channelNumber => parseFloat(channelNumber) 56 | ) 57 | ).map( 58 | channelValue => Math.max(Math.min(parseInt(channelValue * 2.55), 255), 0) 59 | ) 60 | 61 | channelNode3.replaceWith( 62 | channelNode3.clone({ value: String(rgbValues[2]) }) 63 | ) 64 | 65 | channelNode2.replaceWith( 66 | channelNode2.clone({ value: String(rgbValues[1]) }), 67 | commaNode.clone() 68 | ) 69 | 70 | channelNode1.replaceWith( 71 | channelNode1.clone({ value: String(rgbValues[0]), unit: '' }), 72 | commaNode.clone() 73 | ) 74 | } 75 | } 76 | } 77 | 78 | export default onCSSFunction 79 | 80 | const commaNode = parse(',').first 81 | 82 | /** @type {(value: RegExp) => (value: string) => boolean} Return a function that checks whether the expression exists in a value. */ 83 | const createRegExpTest = Function.bind.bind(RegExp.prototype.test) 84 | 85 | /** Return whether the function name is `lab` or `lch`. */ 86 | const isColorFunctionName = createRegExpTest(/^(lab|lch)$/i) 87 | 88 | /** Return whether the function name is `calc`. */ 89 | const isCalcFunctionName = createRegExpTest(/^calc$/i) 90 | 91 | /** Return whether the function name is `lab`. */ 92 | const isLabColorFunctionName = createRegExpTest(/^lab$/i) 93 | 94 | /** Return whether the unit is alpha-like. */ 95 | const isAlphaLikeUnit = createRegExpTest(/^%?$/i) 96 | 97 | /** Return whether the unit is hue-like. */ 98 | const isHueLikeUnit = createRegExpTest(/^(deg|grad|rad|turn)?$/i) 99 | 100 | /** @type {(node: CSSFunction) => boolean} Return whether the node is an Alpha-like unit. */ 101 | const isAlphaValue = node => isCalc(node) || node.type === 'numeric' && isAlphaLikeUnit(node.unit) 102 | 103 | /** @type {(node: CSSFunction) => boolean} Return whether the node is a calc() function. */ 104 | const isCalc = node => node.type === 'func' && isCalcFunctionName(node.name) 105 | 106 | /** @type {(node: CSSNumber) => boolean} Return whether the node is a Hue-like unit. */ 107 | const isHue = node => isCalc(node) || node.type === 'numeric' && isHueLikeUnit(node.unit) 108 | 109 | /** @type {(node: CSSNumber) => boolean} Return whether the node is a Number unit. */ 110 | const isNumber = node => isCalc(node) || node.type === 'numeric' && node.unit === '' 111 | 112 | /** @type {(node: CSSNumber) => boolean} Return whether the node is a Percentage unit. */ 113 | const isPercentage = node => isCalc(node) || node.type === 'numeric' && node.unit === '%' 114 | 115 | /** @type {(node: CSSOperator) => boolean} Return whether the node is a Slash delimiter. */ 116 | const isSlash = node => node.type === 'operator' && node.value === '/' 117 | 118 | /** @type {(nodes: Node[]) => boolean} Return whether a set of nodes is a lab() function. */ 119 | const isLabFunctionContents = nodes => nodes.every( 120 | (node, index) => typeof labFunctionContents[index] === 'function' && labFunctionContents[index](node) 121 | ) 122 | 123 | /** Set of nodes in a lab() function. */ 124 | const labFunctionContents = [isPercentage, isNumber, isNumber, isSlash, isAlphaValue] 125 | 126 | /** @type {(nodes: Node[]) => boolean} Return whether a set of nodes is a lch() function. */ 127 | const isLchFunctionContents = nodes => nodes.every( 128 | (node, index) => typeof lchFunctionContents[index] === 'function' && lchFunctionContents[index](node) 129 | ) 130 | 131 | /** Set of nodes in a lch() function. */ 132 | const lchFunctionContents = [isPercentage, isNumber, isHue, isSlash, isAlphaValue] 133 | 134 | /** @typedef {import('postcss-values-parser').Func} CSSFunction */ 135 | /** @typedef {import('postcss-values-parser').Node} CSSNode */ 136 | /** @typedef {import('postcss-values-parser').Numeric} CSSNumber */ 137 | /** @typedef {import('postcss-values-parser').Operator} CSSOperator */ 138 | /** @typedef {import('postcss-values-parser').Punctuation} CSSPunctuation */ 139 | -------------------------------------------------------------------------------- /src/options.js: -------------------------------------------------------------------------------- 1 | export default { 2 | /** Whether to preserve the original functional color declaration. */ 3 | preserve: false 4 | } 5 | -------------------------------------------------------------------------------- /test/basic.css: -------------------------------------------------------------------------------- 1 | .test-lab { 2 | color: lab(40% 56.6 39); 3 | color: lab(40% 56.6 39 / 1); 4 | color: lab(40% 56.6 39 / .5); 5 | color: lab(40% 56.6 39 / 100%); 6 | color: lab(40% 56.6 39 / 50%); 7 | color: lab(100% 50 0); 8 | } 9 | 10 | .test-lch { 11 | color: lch(40% 68.8 34.5); 12 | color: lch(40% 68.8 34.5 / 1); 13 | color: lch(40% 68.8 34.5 / .5); 14 | color: lch(40% 68.8 34.5 / 100%); 15 | color: lch(40% 68.8 34.5 / 50%); 16 | color: lch(100% 50 0); 17 | } 18 | 19 | .test-unparseable-lab-function { 20 | background-image: lab(; ); 21 | } 22 | -------------------------------------------------------------------------------- /test/basic.expect.css: -------------------------------------------------------------------------------- 1 | .test-lab { 2 | color: rgb(178, 34, 34); 3 | color: rgb(178, 34, 34); 4 | color: rgba(178, 34, 34, .5); 5 | color: rgb(178, 34, 34); 6 | color: rgba(178, 34, 34, 0.5); 7 | color: rgb(255, 216, 255); 8 | } 9 | 10 | .test-lch { 11 | color: rgb(178, 34, 34); 12 | color: rgb(178, 34, 34); 13 | color: rgba(178, 34, 34, .5); 14 | color: rgb(178, 34, 34); 15 | color: rgba(178, 34, 34, 0.5); 16 | color: rgb(255, 216, 255); 17 | } 18 | 19 | .test-unparseable-lab-function { 20 | background-image: lab(; ); 21 | } 22 | -------------------------------------------------------------------------------- /test/basic.preserve-true.expect.css: -------------------------------------------------------------------------------- 1 | .test-lab { 2 | color: rgb(178, 34, 34); 3 | color: lab(40% 56.6 39); 4 | color: rgb(178, 34, 34); 5 | color: lab(40% 56.6 39 / 1); 6 | color: rgba(178, 34, 34, .5); 7 | color: lab(40% 56.6 39 / .5); 8 | color: rgb(178, 34, 34); 9 | color: lab(40% 56.6 39 / 100%); 10 | color: rgba(178, 34, 34, 0.5); 11 | color: lab(40% 56.6 39 / 50%); 12 | color: rgb(255, 216, 255); 13 | color: lab(100% 50 0); 14 | } 15 | 16 | .test-lch { 17 | color: rgb(178, 34, 34); 18 | color: lch(40% 68.8 34.5); 19 | color: rgb(178, 34, 34); 20 | color: lch(40% 68.8 34.5 / 1); 21 | color: rgba(178, 34, 34, .5); 22 | color: lch(40% 68.8 34.5 / .5); 23 | color: rgb(178, 34, 34); 24 | color: lch(40% 68.8 34.5 / 100%); 25 | color: rgba(178, 34, 34, 0.5); 26 | color: lch(40% 68.8 34.5 / 50%); 27 | color: rgb(255, 216, 255); 28 | color: lch(100% 50 0); 29 | } 30 | 31 | .test-unparseable-lab-function { 32 | background-image: lab(; ); 33 | } 34 | --------------------------------------------------------------------------------