├── .github └── workflows │ └── test.yml ├── .gitignore ├── .rollup.mjs ├── .tape.js ├── CHANGELOG.md ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE.md ├── README.md ├── package.json ├── src └── index.js └── test ├── basic.clone.expect.css ├── basic.css ├── basic.expect.css ├── basic.replace.expect.css ├── basic.warn.expect.css ├── vendor.css ├── vendor.expect.css └── vendor.loose.expect.css /.github/workflows/test.yml: -------------------------------------------------------------------------------- 1 | name: test 2 | on: 3 | push: 4 | 5 | concurrency: 6 | group: branch-node-${{ github.ref }} 7 | cancel-in-progress: true 8 | 9 | jobs: 10 | test: 11 | runs-on: ubuntu-latest 12 | strategy: 13 | matrix: 14 | node: [18, 'lts/*'] 15 | steps: 16 | - uses: actions/checkout@v2 17 | - uses: actions/setup-node@v2 18 | with: 19 | node-version: ${{ matrix.node }} 20 | 21 | - run: npm i 22 | - run: npm run build 23 | - run: npm run test 24 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .* 2 | !.editorconfig 3 | !.gitignore 4 | !.github 5 | !.rollup.mjs 6 | !.tape.js 7 | !.travis.yml 8 | *.log* 9 | *.result.css 10 | /index.* 11 | node_modules 12 | package-lock.json 13 | dist 14 | -------------------------------------------------------------------------------- /.rollup.mjs: -------------------------------------------------------------------------------- 1 | export default { 2 | input: 'src/index.js', 3 | output: [ 4 | { file: 'dist/index.cjs', format: 'cjs', sourcemap: false, strict: false, exports: 'auto' }, 5 | { file: 'dist/index.mjs', format: 'esm', sourcemap: false, strict: false, exports: 'auto' } 6 | ] 7 | }; 8 | -------------------------------------------------------------------------------- /.tape.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | 'basic': { 3 | message: 'supports basic usage' 4 | }, 5 | 'basic:clone': { 6 | message: 'supports "clone" method', 7 | options: { method: 'clone' } 8 | }, 9 | 'basic:replace': { 10 | message: 'supports "replace" method', 11 | options: { method: 'replace' } 12 | }, 13 | 'basic:warn': { 14 | message: 'supports "warn" method', 15 | options: { method: 'warn' }, 16 | warnings: 3 17 | }, 18 | 'vendor': { 19 | message: 'ignores vendor prefixes if strict' 20 | }, 21 | 'vendor:loose': { 22 | message: 'supports vendor prefixes if not strict', 23 | options: { strict: false } 24 | } 25 | }; 26 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changes to Input Range 2 | 3 | ### 6.0.0 (October 23, 2024) 4 | 5 | - Updated: `postcss-selector-parser` 6 | - Updated: minimum node version is now 18. 7 | 8 | ### 5.0.0 (April 12, 2022) 9 | 10 | - Added: PostCSS 8 compatibility (breaking) 11 | - Added: Exports CJS and ESM formats. 12 | - Updated: Engines now match `postcss` so only 12, 14, and 16. 13 | 14 | ### 4.0.0 (June 28, 2017) 15 | 16 | - Added: PostCSS 6 compatibility 17 | - Added: Node 4+ compatibility 18 | - Updated: Fix for selector walking 19 | - Updated: Development dependencies 20 | 21 | ### 3.0.1 (December 8, 2016) 22 | 23 | - Updated: Use destructing assignment on plugin options 24 | - Updated: Use template literals 25 | 26 | ### 3.0.0 (December 6, 2016) 27 | 28 | - Updated: boilerplate conventions (Node v6.9.1 LTS) 29 | 30 | ### 2.0.0 (October 9, 2015) 31 | 32 | Added: `strict` option to process prefixed properties. 33 | Changed: Default `method` is `replace` as there is no spec. 34 | Updated: Documentation and tests 35 | 36 | ### 1.0.0 (October 9, 2015) 37 | 38 | Added: Initial version 39 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to make participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, sex characteristics, gender identity and expression, 9 | level of experience, education, socio-economic status, nationality, personal 10 | appearance, race, religion, or sexual identity and orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | * Using welcoming and inclusive language 18 | * Being respectful of differing viewpoints and experiences 19 | * Gracefully accepting constructive criticism 20 | * Focusing on what is best for the community 21 | * Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | * The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances 27 | * Trolling, insulting/derogatory comments, and personal or political attacks 28 | * Public or private harassment 29 | * Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission 31 | * Other conduct which could reasonably be considered inappropriate in a 32 | professional setting 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainers are responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainers have the right and responsibility to remove, edit, or 41 | reject comments, commits, code, wiki edits, issues, and other contributions 42 | that are not aligned to this Code of Conduct, or to ban temporarily or 43 | permanently any contributor for other behaviors that they deem inappropriate, 44 | threatening, offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies within all project spaces, and it also applies when 49 | an individual is representing the project or its community in public spaces. 50 | Examples of representing a project or community include using an official 51 | project e-mail address, posting via an official social media account, or acting 52 | as an appointed representative at an online or offline event. Representation of 53 | a project may be further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by contacting Jonathan Neal . All 59 | complaints will be reviewed and investigated and will result in a response that 60 | is deemed necessary and appropriate to the circumstances. The project team is 61 | obligated to maintain confidentiality with regard to the reporter of an incident. 62 | Further details of specific enforcement policies may be posted separately. 63 | 64 | Project maintainers who do not follow or enforce the Code of Conduct in good 65 | faith may face temporary or permanent repercussions as determined by other 66 | members of the project's leadership. 67 | 68 | ## Attribution 69 | 70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html 72 | 73 | [homepage]: https://www.contributor-covenant.org 74 | 75 | For answers to common questions about this code of conduct, see 76 | https://www.contributor-covenant.org/faq 77 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to Input Range 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-input-range.git 24 | 25 | # Navigate to the newly cloned directory 26 | cd postcss-input-range 27 | 28 | # Assign the original repo to a remote called "upstream" 29 | git remote add upstream git@github.com:jonathantneal/postcss-input-range.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 | -------------------------------------------------------------------------------- /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, 34 | communicate, 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 41 | in 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 makes 60 | the Waiver for the benefit of each member of the public at large and to the 61 | detriment of Affirmer’s heirs and successors, fully intending that such Waiver 62 | shall not be subject to revocation, rescission, cancellation, termination, or 63 | any other legal or equitable action to disrupt the quiet enjoyment of the Work 64 | by the public as contemplated by Affirmer’s express Statement of Purpose. 65 | 66 | 3. Public License Fallback. Should any part of the Waiver for any reason be 67 | judged legally invalid or ineffective under applicable law, then the Waiver 68 | shall be preserved to the maximum extent permitted taking into account 69 | Affirmer’s express Statement of Purpose. In addition, to the extent the Waiver 70 | is so judged Affirmer hereby grants to each affected person a royalty-free, non 71 | transferable, non sublicensable, non exclusive, irrevocable and unconditional 72 | license to exercise Affirmer’s Copyright and Related Rights in the Work (i) in 73 | all territories worldwide, (ii) for the maximum duration provided by applicable 74 | law or treaty (including future time extensions), (iii) in any current or 75 | future medium and for any number of copies, and (iv) for any purpose 76 | whatsoever, including without limitation commercial, advertising or promotional 77 | purposes (the “License”). The License shall be deemed effective as of the date 78 | CC0 was applied by Affirmer to the Work. Should any part of the License for any 79 | reason be judged legally invalid or ineffective under applicable law, such 80 | partial invalidity or ineffectiveness shall not invalidate the remainder of the 81 | License, and in such case Affirmer hereby affirms that he or she will not (i) 82 | exercise any of his or her remaining Copyright and Related Rights in the Work 83 | or (ii) assert any associated claims and causes of action with respect to the 84 | Work, in either case contrary to Affirmer’s express Statement of Purpose. 85 | 86 | 4. Limitations and Disclaimers. 87 | 1. No trademark or patent rights held by Affirmer are waived, abandoned, 88 | surrendered, licensed or otherwise affected by this document. 89 | 2. Affirmer offers the Work as-is and makes no representations or 90 | warranties of any kind concerning the Work, express, implied, statutory 91 | or otherwise, including without limitation warranties of title, 92 | merchantability, fitness for a particular purpose, non infringement, or 93 | the absence of latent or other defects, accuracy, or the present or 94 | absence of errors, whether or not discoverable, all to the greatest 95 | extent permissible under applicable law. 96 | 3. Affirmer disclaims responsibility for clearing rights of other persons 97 | that may apply to the Work or any use thereof, including without 98 | limitation any person’s Copyright and Related Rights in the Work. 99 | Further, Affirmer disclaims responsibility for obtaining any necessary 100 | consents, permissions or other rights required for any use of the Work. 101 | 4. Affirmer understands and acknowledges that Creative Commons is not a 102 | party to this document and has no duty or obligation with respect to 103 | this CC0 or use of the Work. 104 | 105 | For more information, please see 106 | https://creativecommons.org/publicdomain/zero/1.0/. 107 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Input Range [PostCSS Logo][postcss] 2 | 3 | [![NPM Version][npm-img]][npm-url] 4 | [![test](https://github.com/csstools/postcss-input-range/actions/workflows/test.yml/badge.svg)](https://github.com/csstools/postcss-input-range/actions/workflows/test.yml) 5 | [Discord][discord] 6 | 7 | [Input Range] lets you style input ranges with unprefixed selectors. 8 | 9 | ```css 10 | /* before */ 11 | 12 | ::range-track { 13 | background: #3071a9; 14 | width: 100%; 15 | } 16 | 17 | ::range-thumb { 18 | border-radius: 3px; 19 | cursor: pointer; 20 | } 21 | 22 | /* after */ 23 | 24 | ::-moz-range-track { 25 | background: #3071a9; 26 | width: 100%; 27 | } 28 | 29 | ::-ms-track { 30 | background: #3071a9; 31 | width: 100%; 32 | } 33 | 34 | ::-webkit-slider-runnable-track { 35 | background: #3071a9; 36 | width: 100%; 37 | } 38 | 39 | ::-moz-range-thumb { 40 | border-radius: 3px; 41 | cursor: pointer; 42 | } 43 | 44 | ::-ms-thumb { 45 | border-radius: 3px; 46 | cursor: pointer; 47 | } 48 | 49 | ::-webkit-slider-thumb { 50 | border-radius: 3px; 51 | cursor: pointer; 52 | } 53 | ``` 54 | 55 | ## Supported selectors 56 | 57 | #### `::range-track` 58 | 59 | Styles the track of a range. 60 | 61 | #### `::range-thumb` 62 | 63 | Styles the thumb of a range. 64 | 65 | #### `::range-lower` 66 | 67 | Styles the lower track of a range before the thumb. *Only supported in 68 | Firefox, Edge and IE 10+.* 69 | 70 | #### `::range-upper` 71 | 72 | Styles the upper track of a range after the thumb. *Only supported in 73 | Edge and IE 10+.* 74 | 75 | ## Options 76 | 77 | ### `method` 78 | 79 | Type: `String` 80 | Default: `'replace'` 81 | 82 | ##### `clone` 83 | 84 | Copies any rules with `::range` pseudo-elements to new rules using prefixes. 85 | 86 | ```css 87 | /* before */ 88 | 89 | ::range-thumb { 90 | border-radius: 3px; 91 | } 92 | 93 | /* after */ 94 | 95 | ::-moz-range-thumb { 96 | border-radius: 3px; 97 | } 98 | 99 | ::-ms-thumb { 100 | border-radius: 3px; 101 | } 102 | 103 | ::-webkit-slider-thumb { 104 | border-radius: 3px; 105 | } 106 | 107 | ::range-thumb { 108 | border-radius: 3px; 109 | } 110 | ``` 111 | 112 | ##### `replace` 113 | 114 | Copies any rules with `::range` pseudo-elements to new rules using prefixes while removing the original. 115 | 116 | ```css 117 | /* before */ 118 | 119 | ::range-thumb { 120 | border-radius: 3px; 121 | } 122 | 123 | /* after */ 124 | 125 | ::-moz-range-thumb { 126 | border-radius: 3px; 127 | } 128 | 129 | ::-ms-thumb { 130 | border-radius: 3px; 131 | } 132 | 133 | ::-webkit-slider-thumb { 134 | border-radius: 3px; 135 | } 136 | ``` 137 | 138 | ##### `warn` 139 | 140 | Warns whenever a `::range` pseudo-class is found. 141 | 142 | ### `strict` 143 | 144 | Type: `Boolean` 145 | Default: `true` 146 | 147 | ##### `true` 148 | 149 | Ignores prefixed `::range`-type pseudo-classes. 150 | 151 | ```css 152 | /* before */ 153 | 154 | ::-ms-thumb { 155 | border-radius: 3px; 156 | } 157 | 158 | /* after */ 159 | 160 | ::-ms-thumb { 161 | border-radius: 3px; 162 | } 163 | ``` 164 | 165 | ##### `false` 166 | 167 | Processes prefixed `::range`-type pseudo-classes. 168 | 169 | ```css 170 | /* before */ 171 | 172 | ::-ms-thumb { 173 | border-radius: 3px; 174 | } 175 | 176 | /* after */ 177 | 178 | ::-moz-range-thumb { 179 | border-radius: 3px; 180 | } 181 | 182 | ::-ms-thumb { 183 | border-radius: 3px; 184 | } 185 | 186 | ::-webkit-slider-thumb { 187 | border-radius: 3px; 188 | } 189 | ``` 190 | 191 | ## Usage 192 | 193 | Add [Input Range] to your build tool: 194 | 195 | ```bash 196 | npm install postcss postcss-input-range --save-dev 197 | ``` 198 | 199 | #### Node 200 | 201 | Use [Input Range] to process your CSS: 202 | 203 | ```js 204 | require('postcss-input-range').process(YOUR_CSS); 205 | ``` 206 | 207 | #### PostCSS 208 | 209 | Add [PostCSS] to your build tool: 210 | 211 | ```bash 212 | npm install postcss --save-dev 213 | ``` 214 | 215 | Use [Input Range] as a plugin: 216 | 217 | ```js 218 | postcss([ 219 | require('postcss-input-range')() 220 | ]).process(YOUR_CSS); 221 | ``` 222 | 223 | #### Gulp 224 | 225 | Add [Gulp PostCSS] to your build tool: 226 | 227 | ```bash 228 | npm install gulp-postcss --save-dev 229 | ``` 230 | 231 | Use [Input Range] in your Gulpfile: 232 | 233 | ```js 234 | var postcss = require('gulp-postcss'); 235 | 236 | gulp.task('css', function () { 237 | return gulp.src('./src/*.css').pipe( 238 | postcss([ 239 | require('postcss-input-range')() 240 | ]) 241 | ).pipe( 242 | gulp.dest('.') 243 | ); 244 | }); 245 | ``` 246 | 247 | #### Grunt 248 | 249 | Add [Grunt PostCSS] to your build tool: 250 | 251 | ```bash 252 | npm install grunt-postcss --save-dev 253 | ``` 254 | 255 | Use [Input Range] in your Gruntfile: 256 | 257 | ```js 258 | grunt.loadNpmTasks('grunt-postcss'); 259 | 260 | grunt.initConfig({ 261 | postcss: { 262 | options: { 263 | use: [ 264 | require('postcss-input-range')() 265 | ] 266 | }, 267 | dist: { 268 | src: '*.css' 269 | } 270 | } 271 | }); 272 | ``` 273 | 274 | [npm-url]: https://www.npmjs.com/package/postcss-input-range 275 | [npm-img]: https://img.shields.io/npm/v/postcss-input-range.svg 276 | [discord]: https://discord.gg/bUadyRwkJS 277 | 278 | [Input Range]: https://github.com/csstools/postcss-input-range 279 | [PostCSS]: https://github.com/postcss/postcss 280 | [Gulp PostCSS]: https://github.com/postcss/gulp-postcss 281 | [Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss 282 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "postcss-input-range", 3 | "version": "6.0.0", 4 | "description": "Style range inputs with unprefixed pseudo-classes", 5 | "author": "Jonathan Neal ", 6 | "license": "CC0-1.0", 7 | "repository": "jonathantneal/postcss-input-range", 8 | "homepage": "https://github.com/jonathantneal/postcss-input-range#readme", 9 | "bugs": "https://github.com/jonathantneal/postcss-input-range/issues", 10 | "main": "dist/index.cjs", 11 | "module": "dist/index.mjs", 12 | "exports": { 13 | ".": { 14 | "import": "./dist/index.mjs", 15 | "require": "./dist/index.cjs", 16 | "default": "./dist/index.mjs" 17 | } 18 | }, 19 | "files": [ 20 | "CHANGELOG.md", 21 | "LICENSE.md", 22 | "README.md", 23 | "dist" 24 | ], 25 | "scripts": { 26 | "build": "rollup --config .rollup.mjs --silent", 27 | "clean": "node -e \"fs.rmSync('./dist', { recursive: true, force: true });\"", 28 | "prepublishOnly": "npm run clean && npm run build && npm run test", 29 | "test": "postcss-tape" 30 | }, 31 | "engines": { 32 | "node": ">=18" 33 | }, 34 | "dependencies": { 35 | "postcss-selector-parser": "^7.0.0" 36 | }, 37 | "devDependencies": { 38 | "postcss": "^8.4.6", 39 | "postcss-tape": "^6.0.1", 40 | "rollup": "^4.0.0" 41 | }, 42 | "peerDependencies": { 43 | "postcss": "^8.0.0" 44 | }, 45 | "postcssConfig": { 46 | "config": ".tape.js" 47 | }, 48 | "keywords": [ 49 | "postcss", 50 | "css", 51 | "postcss-plugin", 52 | "styles", 53 | "ranges", 54 | "inputs", 55 | "types", 56 | "pseudos", 57 | "classes", 58 | "thumbs", 59 | "tracks" 60 | ] 61 | } 62 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | // tooling 2 | import parser from 'postcss-selector-parser'; 3 | 4 | // pseudo map 5 | const prefixi = { 6 | '::range-track': ['::-moz-range-track', '::-ms-track', '::-webkit-slider-runnable-track'], 7 | '::range-thumb': ['::-moz-range-thumb', '::-ms-thumb', '::-webkit-slider-thumb'], 8 | '::range-lower': ['::-moz-range-progress', '::-ms-fill-lower'], 9 | '::range-upper': ['::-ms-fill-upper'] 10 | }; 11 | 12 | // pseudo-class matchers 13 | const matcherStrict = /::(range-track|range-thumb|range-lower|range-upper)/i; 14 | const matcherLoose = /::(range-track|range-thumb|range-lower|range-upper|-moz-range-track|-ms-track|-webkit-slider-runnable-track|-moz-range-thumb|-ms-thumb|-webkit-slider-thumb|-moz-range-progress|-ms-fill-lower|-ms-fill-upper)/i; 15 | 16 | // mark created rules 17 | const newMarker = Symbol(); 18 | 19 | const postcssInputRange = (opts = {}) => { 20 | // options 21 | const method = opts && 'method' in opts ? opts.method : 'replace'; 22 | const strict = opts && 'strict' in opts ? Boolean(opts.strict) : true; 23 | 24 | // sanitized method 25 | const safeMethod = (/^(clone|warn)$/i).test(method) ? method.toLowerCase() : 'replace'; 26 | 27 | // pseudo-class matcher 28 | const selectorMatch = strict ? matcherStrict : matcherLoose; 29 | 30 | return { 31 | postcssPlugin: 'postcss-input-range', 32 | Rule (rule, { result }) { 33 | let cloned; 34 | 35 | // walk each matching rule 36 | if (!selectorMatch.test(rule.selector) || rule[newMarker]) { 37 | return; 38 | } 39 | 40 | parser((selectors) => { 41 | selectors.each((selector) => { 42 | selector.walkPseudos((pseudo) => { 43 | Object.keys(prefixi).forEach((name) => { 44 | if (pseudo.value !== name && (strict || prefixi[name].indexOf(pseudo.value) === -1)) { 45 | return; 46 | } 47 | 48 | if (safeMethod === 'warn') { 49 | result.warn(`${ pseudo.value } detected`, { 50 | node: rule 51 | }); 52 | return; 53 | } 54 | 55 | prefixi[name].forEach((prefix) => { 56 | pseudo.value = prefix; 57 | 58 | cloned = rule.cloneBefore({ 59 | selector: selector.toString() 60 | }); 61 | cloned[newMarker] = true; 62 | }); 63 | 64 | }); 65 | }); 66 | }); 67 | }).process(rule.selector); 68 | 69 | if (cloned && safeMethod === 'replace') { 70 | rule.remove(); 71 | } 72 | }, 73 | }; 74 | }; 75 | 76 | postcssInputRange.postcss = true; 77 | 78 | export default postcssInputRange; 79 | -------------------------------------------------------------------------------- /test/basic.clone.expect.css: -------------------------------------------------------------------------------- 1 | ::-moz-range-track { 2 | background: #3071a9; 3 | width: 100%; 4 | } 5 | 6 | ::-ms-track { 7 | background: #3071a9; 8 | width: 100%; 9 | } 10 | 11 | ::-webkit-slider-runnable-track { 12 | background: #3071a9; 13 | width: 100%; 14 | } 15 | 16 | ::range-track { 17 | background: #3071a9; 18 | width: 100%; 19 | } 20 | 21 | ::-moz-range-thumb { 22 | border-radius: 3px; 23 | cursor: pointer; 24 | } 25 | 26 | ::-ms-thumb { 27 | border-radius: 3px; 28 | cursor: pointer; 29 | } 30 | 31 | ::-webkit-slider-thumb { 32 | border-radius: 3px; 33 | cursor: pointer; 34 | } 35 | 36 | ::range-thumb { 37 | border-radius: 3px; 38 | cursor: pointer; 39 | } 40 | 41 | ::-moz-range-progress { 42 | background: #78a300; 43 | } 44 | 45 | ::-ms-fill-lower { 46 | background: #78a300; 47 | } 48 | 49 | ::range-lower { 50 | background: #78a300; 51 | } 52 | -------------------------------------------------------------------------------- /test/basic.css: -------------------------------------------------------------------------------- 1 | ::range-track { 2 | background: #3071a9; 3 | width: 100%; 4 | } 5 | 6 | ::range-thumb { 7 | border-radius: 3px; 8 | cursor: pointer; 9 | } 10 | 11 | ::range-lower { 12 | background: #78a300; 13 | } 14 | -------------------------------------------------------------------------------- /test/basic.expect.css: -------------------------------------------------------------------------------- 1 | ::-moz-range-track { 2 | background: #3071a9; 3 | width: 100%; 4 | } 5 | 6 | ::-ms-track { 7 | background: #3071a9; 8 | width: 100%; 9 | } 10 | 11 | ::-webkit-slider-runnable-track { 12 | background: #3071a9; 13 | width: 100%; 14 | } 15 | 16 | ::-moz-range-thumb { 17 | border-radius: 3px; 18 | cursor: pointer; 19 | } 20 | 21 | ::-ms-thumb { 22 | border-radius: 3px; 23 | cursor: pointer; 24 | } 25 | 26 | ::-webkit-slider-thumb { 27 | border-radius: 3px; 28 | cursor: pointer; 29 | } 30 | 31 | ::-moz-range-progress { 32 | background: #78a300; 33 | } 34 | 35 | ::-ms-fill-lower { 36 | background: #78a300; 37 | } 38 | -------------------------------------------------------------------------------- /test/basic.replace.expect.css: -------------------------------------------------------------------------------- 1 | ::-moz-range-track { 2 | background: #3071a9; 3 | width: 100%; 4 | } 5 | 6 | ::-ms-track { 7 | background: #3071a9; 8 | width: 100%; 9 | } 10 | 11 | ::-webkit-slider-runnable-track { 12 | background: #3071a9; 13 | width: 100%; 14 | } 15 | 16 | ::-moz-range-thumb { 17 | border-radius: 3px; 18 | cursor: pointer; 19 | } 20 | 21 | ::-ms-thumb { 22 | border-radius: 3px; 23 | cursor: pointer; 24 | } 25 | 26 | ::-webkit-slider-thumb { 27 | border-radius: 3px; 28 | cursor: pointer; 29 | } 30 | 31 | ::-moz-range-progress { 32 | background: #78a300; 33 | } 34 | 35 | ::-ms-fill-lower { 36 | background: #78a300; 37 | } 38 | -------------------------------------------------------------------------------- /test/basic.warn.expect.css: -------------------------------------------------------------------------------- 1 | ::range-track { 2 | background: #3071a9; 3 | width: 100%; 4 | } 5 | 6 | ::range-thumb { 7 | border-radius: 3px; 8 | cursor: pointer; 9 | } 10 | 11 | ::range-lower { 12 | background: #78a300; 13 | } 14 | -------------------------------------------------------------------------------- /test/vendor.css: -------------------------------------------------------------------------------- 1 | ::-ms-track { 2 | background: #3071a9; 3 | width: 100%; 4 | } 5 | 6 | ::-moz-range-thumb { 7 | border-radius: 3px; 8 | cursor: pointer; 9 | } 10 | 11 | ::-moz-range-progress { 12 | background: #78a300; 13 | } 14 | -------------------------------------------------------------------------------- /test/vendor.expect.css: -------------------------------------------------------------------------------- 1 | ::-ms-track { 2 | background: #3071a9; 3 | width: 100%; 4 | } 5 | 6 | ::-moz-range-thumb { 7 | border-radius: 3px; 8 | cursor: pointer; 9 | } 10 | 11 | ::-moz-range-progress { 12 | background: #78a300; 13 | } 14 | -------------------------------------------------------------------------------- /test/vendor.loose.expect.css: -------------------------------------------------------------------------------- 1 | ::-moz-range-track { 2 | background: #3071a9; 3 | width: 100%; 4 | } 5 | 6 | ::-ms-track { 7 | background: #3071a9; 8 | width: 100%; 9 | } 10 | 11 | ::-webkit-slider-runnable-track { 12 | background: #3071a9; 13 | width: 100%; 14 | } 15 | 16 | ::-moz-range-thumb { 17 | border-radius: 3px; 18 | cursor: pointer; 19 | } 20 | 21 | ::-ms-thumb { 22 | border-radius: 3px; 23 | cursor: pointer; 24 | } 25 | 26 | ::-webkit-slider-thumb { 27 | border-radius: 3px; 28 | cursor: pointer; 29 | } 30 | 31 | ::-moz-range-progress { 32 | background: #78a300; 33 | } 34 | 35 | ::-ms-fill-lower { 36 | background: #78a300; 37 | } 38 | --------------------------------------------------------------------------------