diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml new file mode 100644 index 0000000..2fe421c --- /dev/null +++ b/.github/workflows/test.yml @@ -0,0 +1,29 @@ +name: test +on: + push: + +concurrency: + group: branch-node-${{ github.ref }} + cancel-in-progress: true + +jobs: + test: + runs-on: ubuntu-latest + strategy: + matrix: + node: [18, 20, 'lts/*'] + os: [ubuntu-latest] + include: + - os: macos-latest + node: 'lts/*' + - os: windows-latest + node: 'lts/*' + steps: + - uses: actions/checkout@v4 + - uses: actions/setup-node@v4 + with: + node-version: ${{ matrix.node }} + + - run: npm ci + - run: npm run build + - run: npm run test diff --git a/.gitignore b/.gitignore index 5bd3ef6..0b752d7 100644 --- a/.gitignore +++ b/.gitignore @@ -1,12 +1,4 @@ -dist node_modules -package-lock.json *.log* *.result.css -.* -!.editorconfig -!.gitattributes -!.gitignore -!.rollup.js -!.tape.js -!.travis.yml + diff --git a/.rollup.js b/.rollup.js deleted file mode 100644 index 3f3b227..0000000 --- a/.rollup.js +++ /dev/null @@ -1,28 +0,0 @@ -import pkg from './package.json' - -export default { - ...pkg.rollup, - plugins: [patchBabelPluginSyntaxImportMeta(), ...pkg.rollup.plugins.map(plugin => require(plugin)())], - onwarn(warning, warn) { - if (warning.code !== 'UNRESOLVED_IMPORT') warn(warning) - } -} - -function patchBabelPluginSyntaxImportMeta () { - return { - name: 'patch-babel-plugin-syntax-import-meta', - renderChunk (code, chunk, options) { - const currentUrlMatch = /var url = require\('url'\);([\W\w]+)const currentURL[^\n]+\n(const currentFilename)[^\n]+/ - - const shouldTransformImportMeta = options.format === 'cjs' && currentUrlMatch.test(code) - - if (shouldTransformImportMeta) { - const updatedCode = code.replace(currentUrlMatch, '$1$2 = __filename;') - - return updatedCode - } - - return null - } - } -} diff --git a/.rollup.mjs b/.rollup.mjs new file mode 100644 index 0000000..6a96293 --- /dev/null +++ b/.rollup.mjs @@ -0,0 +1,7 @@ +export default { + input: 'src/index.js', + output: [ + { file: 'index.cjs', format: 'cjs', exports: 'default', sourcemap: false, strict: false }, + { file: 'index.mjs', format: 'esm', sourcemap: false, strict: false } + ] +} diff --git a/.tape.js b/.tape.js deleted file mode 100644 index b848046..0000000 --- a/.tape.js +++ /dev/null @@ -1,83 +0,0 @@ -module.exports = { - /* Test Basic Usage */ - 'basic-normalize': { - message: 'supports @import-normalize usage' - }, - 'basic-sanitize': { - message: 'supports @import-sanitize usage' - }, - - /* Test @import Usage */ - 'import-normalize': { - message: 'supports @import "normalize" usage', - expect: "normalize.expect.css" - }, - 'import-normalize-opinionated': { - message: 'supports @import "normalize/opinionated" usage' - }, - 'import-sanitize': { - message: 'supports @import "sanitize" usage', - expect: "sanitize.expect.css" - }, - 'import-sanitize-forms': { - message: 'supports @import "sanitize/forms" usage' - }, - 'import-sanitize-all': { - message: 'supports @import "sanitize/*" + (forms + page + typography) usage' - }, - - /* Test { browsers } Usage */ - 'browsers-normalize': { - message: 'supports { browsers: "last 2 * versions, not EdgeHTML" }', - options: { - browsers: 'last 2 chrome versions, edge >= 72, last 2 firefox versions, last 2 safari versions, last 1 ios versions, last 1 android versions' - } - }, - - /* Test { forceImport } Usage */ - 'force-normalize': { - message: 'supports { forceImport: true }', - options: { - forceImport: true - } - }, - 'force-sanitize': { - message: 'supports { forceImport: "sanitize" }', - options: { - forceImport: 'sanitize' - } - }, - 'force-sanitize-all': { - message: 'supports { forceImport: "sanitize/*" }', - options: { - forceImport: 'sanitize/*' - } - }, - - /* Test { allowDuplicates } Usage */ - 'duplicates': { - message: 'supports preventing duplicates' - }, - 'duplicates:allow': { - message: 'supports allowing duplicates { allowDuplicates: true }', - options: { - allowDuplicates: true - } - }, - - /* Test PostCSS Import Usage */ - 'postcss-import': { - message: 'supports PostCSS Import Usage', - source: 'import-normalize.css', - expect: 'import-normalize.expect.css', - plugin: (() => { - const postcss = require('postcss'); - const postcssImport = require('postcss-import'); - const postcssNormalize = require('.'); - - const plugin = postcss([ postcssImport(postcssNormalize().postcssImport()) ]); - - return plugin; - })() - } -}; diff --git a/.travis.yml b/.travis.yml deleted file mode 100644 index c3e7765..0000000 --- a/.travis.yml +++ /dev/null @@ -1,14 +0,0 @@ -# https://docs.travis-ci.com/user/travis-lint - -language: node_js - -os: - - windows - - linux - - osx - -node_js: - - 10 - -install: - - npm install --ignore-scripts diff --git a/CHANGELOG.md b/CHANGELOG.md index d6dba73..fec0e51 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,48 +1,79 @@ # Changes to PostCSS Normalize +### 13.0.1 + +- Maintenance release after updating dependencies + +### 13.0.0 + +- Pin versions of `@csstools/normalize.css` and `sanitize.css` + +### 12.0.0 + +- Remove TypeScript types. This package is a dual published cjs and esm and it isn't worth it, all info is in `README.md`. +- Set minimum node version to 18 +- Fix resolution of `@csstools/normalize.css` path when using ESM + +### 11.0.0 + +- Cleanup build dependencies + +### 10.0.1 (September 15, 2021) + +- Added: `sanitize.css` to support 13+ (major). + +This version removes support for `pages.css` yet is released as a patch version +to resolve issues in **Create React App**. This is a betrayal of semantic +versioning. + +### 10.0.0 (April 28, 2021) + +- Updated: PostCSS support to ^8 (major). +- Updated: Node support to 12+ (major). + ### 9.0.0 (April 12, 2020) -- Updated: `normalize.css` to support any version (major) -- Updated: `sanitize.css` to support any version (major) +- Updated: `normalize.css` to support any version (major). +- Updated: `sanitize.css` to support any version (major). - Updated: Node support to 10.0.0 (major). -- Removed: Unused `browserslist` dependency +- Removed: Unused `browserslist` dependency. ### 8.0.1 (June 10, 2019) -- Fixed: Issue with Windows failing to resolve normalize -- Updated: `browserslist` to 4.6.2 (patch) -- Updated: `postcss` to 7.0.17 (patch) +- Fixed: Issue with Windows failing to resolve normalize. +- Updated: `browserslist` to 4.6.2 (patch). +- Updated: `postcss` to 7.0.17 (patch). ### 8.0.0 (June 3, 2019) -- Added: `sanitize.css` 10.0.0 (major) -- Updated: `@csstools/normalize.css` to 10.1.0 (major) -- Updated: `browserslist` to 4.5.6 (minor) -- Updated: `postcss` to 7.0.16 (patch) -- Updated: Node 8+ compatibility (major) +- Added: `sanitize.css` 10.0.0 (major). +- Updated: `@csstools/normalize.css` to 10.1.0 (major). +- Updated: `browserslist` to 4.5.6 (minor). +- Updated: `postcss` to 7.0.16 (patch). +- Updated: Node 8+ compatibility (major). ### 7.0.1 (August 24, 2018) -- Use postcss-browser-comments v2.0.0 (major, but a patch for this project) +- Use postcss-browser-comments 2.0.0 (major, but a patch for this project). PostCSS Browser Comments was using an older version of PostCSS, requiring 2 versions of PostCSS to use PostCSS Normalize. This update resolves that. ### 7.0.0 (August 24, 2018) -- Use normalize.css v9.0.1 (major) +- Use normalize.css 9.0.1 (major). ### 6.0.0 (June 16, 2018) -- Use normalize.css v8 (major) -- Include normalize.css comments -- Include normalize.css sourcemap +- Use normalize.css 8 (major). +- Include normalize.css comments. +- Include normalize.css sourcemap. ### 5.0.0 (June 7, 2018) -- Update `browserslist` to 3.2.8 (major) -- Update: `postcss` to 6.0.22 (patch) -- Update: Node support from v4 to 6 (major) +- Update `browserslist` to 3.2.8 (major). +- Update: `postcss` to 6.0.22 (patch). +- Update: Node support from 4 to 6 (major). ### 4.0.0 (June 21, 2017) @@ -51,24 +82,24 @@ versions of PostCSS to use PostCSS Normalize. This update resolves that. ### 3.0.0 (May 26, 2017) -- Use csstools/normalize.css v7 +- Use csstools/normalize.css 7. - Change the insertion point to `@import-normalize` to avoid confusion or - collision with standard import behavior + collision with standard import behavior. ### 2.1.0 (May 26, 2017) -- Support an insertion point via `@import postcss-normalize` -- Update tree creation to avoid AST issues with source +- Support an insertion point via `@import postcss-normalize`. +- Update tree creation to avoid AST issues with source. ### 2.0.1 (May 21, 2017) -- Update tree creation to avoid AST issues with other PostCSS plugins +- Update tree creation to avoid AST issues with other PostCSS plugins. ### 2.0.0 (May 17, 2017) -- Support PostCSS 6 -- Support Node 4 +- Support PostCSS 6. +- Support Node 4. ### 1.0.0 (May 2, 2017) -- Initial version +- Initial version. diff --git a/README.md b/README.md index fd97477..d584849 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ # PostCSS Normalize [][postcss] [][npm-url] -[][cli-url] +[][cli-url] [][git-url] [PostCSS Normalize] lets you use the parts of [normalize.css] or [sanitize.css] @@ -128,7 +128,7 @@ with `@import` transforms. ``` ```pcss -@import-normalize "opinionated.css"; +@import-normalize "normalize/opinionated.css"; ``` ```pcss @@ -183,13 +183,16 @@ configure either with the following combinations: @import "normalize"; /* also, @import "normalize.css" */ @import "normalize/opinionated"; /* also, @import "normalize.css/opinionated.css", @import "normalize.css/*" */ @import "sanitize"; /* also, @import "sanitize.css" */ +@import "sanitize/assets"; /* also, @import "sanitize.css/assets.css" */ @import "sanitize/forms"; /* also, @import "sanitize.css/forms.css" */ +@import "sanitize/reduce-motion"; /* also, @import "sanitize.css/reduce-motion.css" */ +@import "sanitize/system-ui"; /* also, @import "sanitize.css/system-ui.css" */ @import "sanitize/typography"; /* also, @import "sanitize.css/typography.css" */ -@import "sanitize/page"; /* also, @import "sanitize.css/page.css" */ +@import "sanitize/ui-monospace"; /* also, @import "sanitize.css/ui-monospace.css" */ @import "sanitize/*"; /* also, @import "sanitize.css/*" (sanitize + all additions) */ ``` -[cli-img]: https://img.shields.io/travis/csstools/postcss-normalize/master.svg +[cli-img]: https://img.shields.io/travis/csstools/postcss-normalize/main.svg [cli-url]: https://travis-ci.org/csstools/postcss-normalize [git-img]: https://img.shields.io/badge/support-chat-blue.svg [git-url]: https://gitter.im/postcss/postcss diff --git a/SECURITY.md b/SECURITY.md new file mode 100644 index 0000000..71711c2 --- /dev/null +++ b/SECURITY.md @@ -0,0 +1,19 @@ +# Security Policy + +## Supported Versions + +Only the latest version of plugins and packages will receive security patches. +Please reach out if you need extended support for an older version. + +| Version | Supported | +| ------- | ------------------ | +| 5.1.x | :white_check_mark: | +| 5.0.x | :x: | +| 4.0.x | :x: | +| < 4.0 | :x: | + +## Security contact information + +To report a security vulnerability, please use the +[Tidelift security contact](https://tidelift.com/security). +Tidelift will coordinate the fix and disclosure. diff --git a/index.cjs b/index.cjs new file mode 100644 index 0000000..b8b1371 --- /dev/null +++ b/index.cjs @@ -0,0 +1,252 @@ +var postcssBrowserComments = require('postcss-browser-comments'); +var path = require('node:path'); +var node_module = require('node:module'); +var path$1 = require('path'); +var fs = require('fs'); +var postcss = require('postcss'); + +var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null; +const assign = (...objects) => Object.assign(...objects); +const create = (...objects) => assign(Object.create(null), ...objects); + +const require$1 = node_module.createRequire((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('index.cjs', document.baseURI).href))); + +// get resolved filenames for normalize.css +const normalizeCSS = require$1.resolve('@csstools/normalize.css'); +const normalizeDir = path.dirname(normalizeCSS); +const normalizeOpinionatedCSS = path.join(normalizeDir, 'opinionated.css'); + +// get resolved filenames for sanitize.css +const sanitizeCSS = require$1.resolve('sanitize.css'); +const sanitizeDir = path.dirname(sanitizeCSS); +const sanitizeAssetsCSS = path.join(sanitizeDir, 'assets.css'); +const sanitizeFormsCSS = path.join(sanitizeDir, 'forms.css'); +const sanitizeReduceMotionCSS = path.join(sanitizeDir, 'reduce-motion.css'); +const sanitizeTypographyCSS = path.join(sanitizeDir, 'typography.css'); +const sanitizeSystemUiCSS = path.join(sanitizeDir, 'system-ui.css'); +const sanitizeUiMonospace = path.join(sanitizeDir, 'ui-monospace.css'); + +// export a hashmap of css library filenames +const parsableFilenames = create({ + [normalizeCSS]: true, + [normalizeOpinionatedCSS]: true, + [sanitizeCSS]: true, + [sanitizeAssetsCSS]: true, + [sanitizeFormsCSS]: true, + [sanitizeReduceMotionCSS]: true, + [sanitizeTypographyCSS]: true, + [sanitizeSystemUiCSS]: true, + [sanitizeUiMonospace]: true, +}); + +// export a hashmap of css library filenames by id +const resolvedFilenamesById = create({ + 'normalize': [normalizeCSS], + 'normalize/opinionated': [normalizeOpinionatedCSS], + 'normalize/*': [normalizeOpinionatedCSS], + 'sanitize': [sanitizeCSS], + 'sanitize/assets': [sanitizeAssetsCSS], + 'sanitize/forms': [sanitizeCSS, sanitizeFormsCSS], + 'sanitize/page': [sanitizeAssetsCSS], // deprecated; remaining for v10.0.0 compatibility + 'sanitize/reduce-motion': [sanitizeCSS, sanitizeReduceMotionCSS], + 'sanitize/system-ui': [sanitizeCSS, sanitizeSystemUiCSS], + 'sanitize/typography': [sanitizeCSS, sanitizeTypographyCSS], + 'sanitize/ui-monospace': [sanitizeCSS, sanitizeUiMonospace], + 'sanitize/*': [sanitizeCSS, sanitizeFormsCSS], +}); + +const cache$1 = create(); + +async function readFile (filename) { + filename = path$1.resolve(filename); + + cache$1[filename] = cache$1[filename] || create(); + + return new Promise( + (resolve, reject) => fs.stat( + filename, + (statsError, { mtime }) => statsError + ? reject(statsError) + : mtime === cache$1[filename].mtime + ? resolve(cache$1[filename].data) + : fs.readFile( + filename, + 'utf8', + (readFileError, data) => readFileError + ? reject(readFileError) + : resolve( + (cache$1[filename] = { data, mtime }).data + ) + ) + ) + ) +} + +const cache = create(null); + +var parse = (filename, transformer) => readFile(filename).then( + // cache the parsed css root + css => (cache[css] = cache[css] || postcss.parse(css, { from: filename })) +).then( + // clone the cached root + root => root.clone() +).then( + // transform the cloned root + clone => Promise.resolve( + transformer(clone) + ).then( + // resolve the cloned root + () => clone + ) +); + +var postcssImportNormalize = commentsTransformer => opts => { + opts = create(opts); + + // return an postcss-import configuration + return create({ + load (filename, importOptions) { + return filename in parsableFilenames + // parse the file (the file and css are conservatively cached) + ? parse(filename, commentsTransformer).then( + root => root.toResult({ to: filename, map: true }).css + ) + : typeof opts.load === 'function' + // otherwise, use the override loader + ? opts.load.call(null, filename, importOptions) + // otherwise, return the (conservatively cached) contents of the file + : readFile(filename) + }, + resolve (id, basedir, importOptions) { + // get the css id by removing css extensions + const cssId = id.replace(cssExtRegExp$1, ''); + + return cssId in resolvedFilenamesById + // return the known resolved path for the css id + ? resolvedFilenamesById[cssId] + : typeof opts.resolve === 'function' + // otherwise, use the override resolver + ? opts.resolve.call(null, id, basedir, importOptions) + // otherwise, return the id to be resolved by postcss-import + : id + } + }) +}; + +const cssExtRegExp$1 = /\.css\b/g; + +const postcssPlugin = (commentsTransformer, opts) => root => { + const promises = []; + const insertedFilenames = {}; + + // use @import insertion point + root.walkAtRules( + importRegExp, + atrule => { + // get name as a fallback value for the library (e.g. @import-normalize is like @import "normalize.css") + const name = atrule.name.match(importRegExp)[1]; + + // get url from "library", 'library', url("library"), url('library'), or the fallback value + const url = (atrule.params.match(paramsRegExp) || []).slice(1).find(part => part) || name; + + if (url) { + // get the css id by removing css extensions + const cssId = url.replace(cssExtRegExp, ''); + + if (cssId in resolvedFilenamesById) { + // promise the library import is replaced with its contents + promises.push( + Promise.all( + resolvedFilenamesById[cssId].filter( + // ignore filenames that have already been inserted + filename => insertedFilenames[filename] = opts.allowDuplicates || !(filename in insertedFilenames) + ).map( + // parse the file (the file and css are conservatively cached) + filename => parse(filename, commentsTransformer) + ) + ).then(roots => { + if (roots.length) { + // combine all the library nodes returned by the parsed files + const nodes = roots.reduce( + (all, root) => all.concat(root.nodes), + [] + ); + + // replace the import with all the library nodes + atrule.replaceWith(...nodes); + } + }) + ); + } + } + } + ); + + return Promise.all([].concat( + // promise the library imports are replaced with their contents + promises, + // promise certain libraries are prepended + Promise.all( + [].concat( + opts.forceImport || [] + ).reduce( + // filter the id to be a known id or boolean true + (all, id) => { + if (id === true) { + all.push(...resolvedFilenamesById.normalize); + } else if (typeof id === 'string') { + const cssId = id.replace(cssExtRegExp, ''); + + if (cssId in resolvedFilenamesById) { + all.push(...resolvedFilenamesById[cssId]); + } + } + + return all + }, + [] + ).filter( + // ignore filenames that have already been inserted + filename => insertedFilenames[filename] = opts.allowDuplicates || !(filename in insertedFilenames) + ).map( + // parse the file (the file and css are conservatively cached) + filename => parse(filename, commentsTransformer) + ) + ).then(roots => { + if (roots.length) { + // combine all the library nodes returned by the parsed files + const nodes = roots.reduce( + (all, root) => all.concat(root.nodes), + [] + ); + + // prepend the stylesheet with all the library nodes + root.prepend(...nodes); + } + }) + )) +}; + +const cssExtRegExp = /\.css\b/g; +const importRegExp = /^import(?:-(normalize|sanitize))?$/; +const paramsRegExp = /^\s*(?:url\((?:"(.+)"|'(.+)')\)|"(.+)"|'(.+)')[\W\w]*$/; + +const plugin = opts => { + opts = create(opts); + + const commentsTransformer = postcssBrowserComments(opts).Once; + const normalizeTransformer = postcssPlugin(commentsTransformer, opts); + const postcssImportConfig = postcssImportNormalize(commentsTransformer); + + return { + postcssPlugin: 'postcss-normalize', + Once(root) { + return normalizeTransformer(root) + }, + postcssImport: postcssImportConfig + } +}; + +plugin.postcss = true; + +module.exports = plugin; diff --git a/index.mjs b/index.mjs new file mode 100644 index 0000000..17709fb --- /dev/null +++ b/index.mjs @@ -0,0 +1,251 @@ +import postcssBrowserComments from 'postcss-browser-comments'; +import path from 'node:path'; +import { createRequire } from 'node:module'; +import path$1 from 'path'; +import fs from 'fs'; +import postcss from 'postcss'; + +const assign = (...objects) => Object.assign(...objects); +const create = (...objects) => assign(Object.create(null), ...objects); + +const require = createRequire(import.meta.url); + +// get resolved filenames for normalize.css +const normalizeCSS = require.resolve('@csstools/normalize.css'); +const normalizeDir = path.dirname(normalizeCSS); +const normalizeOpinionatedCSS = path.join(normalizeDir, 'opinionated.css'); + +// get resolved filenames for sanitize.css +const sanitizeCSS = require.resolve('sanitize.css'); +const sanitizeDir = path.dirname(sanitizeCSS); +const sanitizeAssetsCSS = path.join(sanitizeDir, 'assets.css'); +const sanitizeFormsCSS = path.join(sanitizeDir, 'forms.css'); +const sanitizeReduceMotionCSS = path.join(sanitizeDir, 'reduce-motion.css'); +const sanitizeTypographyCSS = path.join(sanitizeDir, 'typography.css'); +const sanitizeSystemUiCSS = path.join(sanitizeDir, 'system-ui.css'); +const sanitizeUiMonospace = path.join(sanitizeDir, 'ui-monospace.css'); + +// export a hashmap of css library filenames +const parsableFilenames = create({ + [normalizeCSS]: true, + [normalizeOpinionatedCSS]: true, + [sanitizeCSS]: true, + [sanitizeAssetsCSS]: true, + [sanitizeFormsCSS]: true, + [sanitizeReduceMotionCSS]: true, + [sanitizeTypographyCSS]: true, + [sanitizeSystemUiCSS]: true, + [sanitizeUiMonospace]: true, +}); + +// export a hashmap of css library filenames by id +const resolvedFilenamesById = create({ + 'normalize': [normalizeCSS], + 'normalize/opinionated': [normalizeOpinionatedCSS], + 'normalize/*': [normalizeOpinionatedCSS], + 'sanitize': [sanitizeCSS], + 'sanitize/assets': [sanitizeAssetsCSS], + 'sanitize/forms': [sanitizeCSS, sanitizeFormsCSS], + 'sanitize/page': [sanitizeAssetsCSS], // deprecated; remaining for v10.0.0 compatibility + 'sanitize/reduce-motion': [sanitizeCSS, sanitizeReduceMotionCSS], + 'sanitize/system-ui': [sanitizeCSS, sanitizeSystemUiCSS], + 'sanitize/typography': [sanitizeCSS, sanitizeTypographyCSS], + 'sanitize/ui-monospace': [sanitizeCSS, sanitizeUiMonospace], + 'sanitize/*': [sanitizeCSS, sanitizeFormsCSS], +}); + +const cache$1 = create(); + +async function readFile (filename) { + filename = path$1.resolve(filename); + + cache$1[filename] = cache$1[filename] || create(); + + return new Promise( + (resolve, reject) => fs.stat( + filename, + (statsError, { mtime }) => statsError + ? reject(statsError) + : mtime === cache$1[filename].mtime + ? resolve(cache$1[filename].data) + : fs.readFile( + filename, + 'utf8', + (readFileError, data) => readFileError + ? reject(readFileError) + : resolve( + (cache$1[filename] = { data, mtime }).data + ) + ) + ) + ) +} + +const cache = create(null); + +var parse = (filename, transformer) => readFile(filename).then( + // cache the parsed css root + css => (cache[css] = cache[css] || postcss.parse(css, { from: filename })) +).then( + // clone the cached root + root => root.clone() +).then( + // transform the cloned root + clone => Promise.resolve( + transformer(clone) + ).then( + // resolve the cloned root + () => clone + ) +); + +var postcssImportNormalize = commentsTransformer => opts => { + opts = create(opts); + + // return an postcss-import configuration + return create({ + load (filename, importOptions) { + return filename in parsableFilenames + // parse the file (the file and css are conservatively cached) + ? parse(filename, commentsTransformer).then( + root => root.toResult({ to: filename, map: true }).css + ) + : typeof opts.load === 'function' + // otherwise, use the override loader + ? opts.load.call(null, filename, importOptions) + // otherwise, return the (conservatively cached) contents of the file + : readFile(filename) + }, + resolve (id, basedir, importOptions) { + // get the css id by removing css extensions + const cssId = id.replace(cssExtRegExp$1, ''); + + return cssId in resolvedFilenamesById + // return the known resolved path for the css id + ? resolvedFilenamesById[cssId] + : typeof opts.resolve === 'function' + // otherwise, use the override resolver + ? opts.resolve.call(null, id, basedir, importOptions) + // otherwise, return the id to be resolved by postcss-import + : id + } + }) +}; + +const cssExtRegExp$1 = /\.css\b/g; + +const postcssPlugin = (commentsTransformer, opts) => root => { + const promises = []; + const insertedFilenames = {}; + + // use @import insertion point + root.walkAtRules( + importRegExp, + atrule => { + // get name as a fallback value for the library (e.g. @import-normalize is like @import "normalize.css") + const name = atrule.name.match(importRegExp)[1]; + + // get url from "library", 'library', url("library"), url('library'), or the fallback value + const url = (atrule.params.match(paramsRegExp) || []).slice(1).find(part => part) || name; + + if (url) { + // get the css id by removing css extensions + const cssId = url.replace(cssExtRegExp, ''); + + if (cssId in resolvedFilenamesById) { + // promise the library import is replaced with its contents + promises.push( + Promise.all( + resolvedFilenamesById[cssId].filter( + // ignore filenames that have already been inserted + filename => insertedFilenames[filename] = opts.allowDuplicates || !(filename in insertedFilenames) + ).map( + // parse the file (the file and css are conservatively cached) + filename => parse(filename, commentsTransformer) + ) + ).then(roots => { + if (roots.length) { + // combine all the library nodes returned by the parsed files + const nodes = roots.reduce( + (all, root) => all.concat(root.nodes), + [] + ); + + // replace the import with all the library nodes + atrule.replaceWith(...nodes); + } + }) + ); + } + } + } + ); + + return Promise.all([].concat( + // promise the library imports are replaced with their contents + promises, + // promise certain libraries are prepended + Promise.all( + [].concat( + opts.forceImport || [] + ).reduce( + // filter the id to be a known id or boolean true + (all, id) => { + if (id === true) { + all.push(...resolvedFilenamesById.normalize); + } else if (typeof id === 'string') { + const cssId = id.replace(cssExtRegExp, ''); + + if (cssId in resolvedFilenamesById) { + all.push(...resolvedFilenamesById[cssId]); + } + } + + return all + }, + [] + ).filter( + // ignore filenames that have already been inserted + filename => insertedFilenames[filename] = opts.allowDuplicates || !(filename in insertedFilenames) + ).map( + // parse the file (the file and css are conservatively cached) + filename => parse(filename, commentsTransformer) + ) + ).then(roots => { + if (roots.length) { + // combine all the library nodes returned by the parsed files + const nodes = roots.reduce( + (all, root) => all.concat(root.nodes), + [] + ); + + // prepend the stylesheet with all the library nodes + root.prepend(...nodes); + } + }) + )) +}; + +const cssExtRegExp = /\.css\b/g; +const importRegExp = /^import(?:-(normalize|sanitize))?$/; +const paramsRegExp = /^\s*(?:url\((?:"(.+)"|'(.+)')\)|"(.+)"|'(.+)')[\W\w]*$/; + +const plugin = opts => { + opts = create(opts); + + const commentsTransformer = postcssBrowserComments(opts).Once; + const normalizeTransformer = postcssPlugin(commentsTransformer, opts); + const postcssImportConfig = postcssImportNormalize(commentsTransformer); + + return { + postcssPlugin: 'postcss-normalize', + Once(root) { + return normalizeTransformer(root) + }, + postcssImport: postcssImportConfig + } +}; + +plugin.postcss = true; + +export { plugin as default }; diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..9760247 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,737 @@ +{ + "name": "postcss-normalize", + "version": "13.0.1", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "postcss-normalize", + "version": "13.0.1", + "license": "CC0-1.0", + "dependencies": { + "@csstools/normalize.css": "12.1.1", + "postcss-browser-comments": "^6.0.1", + "sanitize.css": "13.0.0" + }, + "devDependencies": { + "@csstools/postcss-tape": "^5.0.0", + "browserslist": "^4.16.5", + "postcss": "^8.4.31", + "postcss-import": "^16.0.0", + "rollup": "^4.21.2" + }, + "engines": { + "node": ">= 18" + }, + "peerDependencies": { + "browserslist": ">= 4", + "postcss": ">= 8" + } + }, + "node_modules/@csstools/normalize.css": { + "version": "12.1.1", + "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-12.1.1.tgz", + "integrity": "sha512-YAYeJ+Xqh7fUou1d1j9XHl44BmsuThiTr4iNrgCQ3J27IbhXsxXDGZ1cXv8Qvs99d4rBbLiSKy3+WZiet32PcQ==", + "license": "CC0-1.0" + }, + "node_modules/@csstools/postcss-tape": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@csstools/postcss-tape/-/postcss-tape-5.0.0.tgz", + "integrity": "sha512-sgzZnQvzbO/+jW7dhzW0O9VRhzDA8HjijFU0X5kB7EzZVaEapiru9Kk44BrzPUQK9eSafkHKSXmYcEaCt0EWLQ==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT-0", + "dependencies": { + "postcss": "~8.4", + "postcss-8.4": "npm:postcss@~8.4" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/@rollup/rollup-android-arm-eabi": { + "version": "4.29.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.29.1.tgz", + "integrity": "sha512-ssKhA8RNltTZLpG6/QNkCSge+7mBQGUqJRisZ2MDQcEGaK93QESEgWK2iOpIDZ7k9zPVkG5AS3ksvD5ZWxmItw==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ] + }, + "node_modules/@rollup/rollup-android-arm64": { + "version": "4.29.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.29.1.tgz", + "integrity": "sha512-CaRfrV0cd+NIIcVVN/jx+hVLN+VRqnuzLRmfmlzpOzB87ajixsN/+9L5xNmkaUUvEbI5BmIKS+XTwXsHEb65Ew==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ] + }, + "node_modules/@rollup/rollup-darwin-arm64": { + "version": "4.29.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.29.1.tgz", + "integrity": "sha512-2ORr7T31Y0Mnk6qNuwtyNmy14MunTAMx06VAPI6/Ju52W10zk1i7i5U3vlDRWjhOI5quBcrvhkCHyF76bI7kEw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ] + }, + "node_modules/@rollup/rollup-darwin-x64": { + "version": "4.29.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.29.1.tgz", + "integrity": "sha512-j/Ej1oanzPjmN0tirRd5K2/nncAhS9W6ICzgxV+9Y5ZsP0hiGhHJXZ2JQ53iSSjj8m6cRY6oB1GMzNn2EUt6Ng==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ] + }, + "node_modules/@rollup/rollup-freebsd-arm64": { + "version": "4.29.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.29.1.tgz", + "integrity": "sha512-91C//G6Dm/cv724tpt7nTyP+JdN12iqeXGFM1SqnljCmi5yTXriH7B1r8AD9dAZByHpKAumqP1Qy2vVNIdLZqw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ] + }, + "node_modules/@rollup/rollup-freebsd-x64": { + "version": "4.29.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.29.1.tgz", + "integrity": "sha512-hEioiEQ9Dec2nIRoeHUP6hr1PSkXzQaCUyqBDQ9I9ik4gCXQZjJMIVzoNLBRGet+hIUb3CISMh9KXuCcWVW/8w==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ] + }, + "node_modules/@rollup/rollup-linux-arm-gnueabihf": { + "version": "4.29.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.29.1.tgz", + "integrity": "sha512-Py5vFd5HWYN9zxBv3WMrLAXY3yYJ6Q/aVERoeUFwiDGiMOWsMs7FokXihSOaT/PMWUty/Pj60XDQndK3eAfE6A==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-arm-musleabihf": { + "version": "4.29.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.29.1.tgz", + "integrity": "sha512-RiWpGgbayf7LUcuSNIbahr0ys2YnEERD4gYdISA06wa0i8RALrnzflh9Wxii7zQJEB2/Eh74dX4y/sHKLWp5uQ==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-arm64-gnu": { + "version": "4.29.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.29.1.tgz", + "integrity": "sha512-Z80O+taYxTQITWMjm/YqNoe9d10OX6kDh8X5/rFCMuPqsKsSyDilvfg+vd3iXIqtfmp+cnfL1UrYirkaF8SBZA==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-arm64-musl": { + "version": "4.29.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.29.1.tgz", + "integrity": "sha512-fOHRtF9gahwJk3QVp01a/GqS4hBEZCV1oKglVVq13kcK3NeVlS4BwIFzOHDbmKzt3i0OuHG4zfRP0YoG5OF/rA==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-loongarch64-gnu": { + "version": "4.29.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.29.1.tgz", + "integrity": "sha512-5a7q3tnlbcg0OodyxcAdrrCxFi0DgXJSoOuidFUzHZ2GixZXQs6Tc3CHmlvqKAmOs5eRde+JJxeIf9DonkmYkw==", + "cpu": [ + "loong64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-powerpc64le-gnu": { + "version": "4.29.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.29.1.tgz", + "integrity": "sha512-9b4Mg5Yfz6mRnlSPIdROcfw1BU22FQxmfjlp/CShWwO3LilKQuMISMTtAu/bxmmrE6A902W2cZJuzx8+gJ8e9w==", + "cpu": [ + "ppc64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-riscv64-gnu": { + "version": "4.29.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.29.1.tgz", + "integrity": "sha512-G5pn0NChlbRM8OJWpJFMX4/i8OEU538uiSv0P6roZcbpe/WfhEO+AT8SHVKfp8qhDQzaz7Q+1/ixMy7hBRidnQ==", + "cpu": [ + "riscv64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-s390x-gnu": { + "version": "4.29.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.29.1.tgz", + "integrity": "sha512-WM9lIkNdkhVwiArmLxFXpWndFGuOka4oJOZh8EP3Vb8q5lzdSCBuhjavJsw68Q9AKDGeOOIHYzYm4ZFvmWez5g==", + "cpu": [ + "s390x" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-x64-gnu": { + "version": "4.29.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.29.1.tgz", + "integrity": "sha512-87xYCwb0cPGZFoGiErT1eDcssByaLX4fc0z2nRM6eMtV9njAfEE6OW3UniAoDhX4Iq5xQVpE6qO9aJbCFumKYQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-x64-musl": { + "version": "4.29.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.29.1.tgz", + "integrity": "sha512-xufkSNppNOdVRCEC4WKvlR1FBDyqCSCpQeMMgv9ZyXqqtKBfkw1yfGMTUTs9Qsl6WQbJnsGboWCp7pJGkeMhKA==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-win32-arm64-msvc": { + "version": "4.29.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.29.1.tgz", + "integrity": "sha512-F2OiJ42m77lSkizZQLuC+jiZ2cgueWQL5YC9tjo3AgaEw+KJmVxHGSyQfDUoYR9cci0lAywv2Clmckzulcq6ig==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ] + }, + "node_modules/@rollup/rollup-win32-ia32-msvc": { + "version": "4.29.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.29.1.tgz", + "integrity": "sha512-rYRe5S0FcjlOBZQHgbTKNrqxCBUmgDJem/VQTCcTnA2KCabYSWQDrytOzX7avb79cAAweNmMUb/Zw18RNd4mng==", + "cpu": [ + "ia32" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ] + }, + "node_modules/@rollup/rollup-win32-x64-msvc": { + "version": "4.29.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.29.1.tgz", + "integrity": "sha512-+10CMg9vt1MoHj6x1pxyjPSMjHTIlqs8/tBztXvPAx24SKs9jwVnKqHJumlH/IzhaPUaj3T6T6wfZr8okdXaIg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ] + }, + "node_modules/@types/estree": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz", + "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==", + "dev": true, + "license": "MIT" + }, + "node_modules/browserslist": { + "version": "4.24.3", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.3.tgz", + "integrity": "sha512-1CPmv8iobE2fyRMV97dAcMVegvvWKxmq94hkLiAkUGwKVTyDLw33K+ZxiFrREKmmps4rIw6grcCFCnTMSZ/YiA==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/browserslist" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "caniuse-lite": "^1.0.30001688", + "electron-to-chromium": "^1.5.73", + "node-releases": "^2.0.19", + "update-browserslist-db": "^1.1.1" + }, + "bin": { + "browserslist": "cli.js" + }, + "engines": { + "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7" + } + }, + "node_modules/caniuse-lite": { + "version": "1.0.30001690", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001690.tgz", + "integrity": "sha512-5ExiE3qQN6oF8Clf8ifIDcMRCRE/dMGcETG/XGMD8/XiXm6HXQgQTh1yZYLXXpSOsEUlJm1Xr7kGULZTuGtP/w==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/caniuse-lite" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "CC-BY-4.0" + }, + "node_modules/electron-to-chromium": { + "version": "1.5.76", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.76.tgz", + "integrity": "sha512-CjVQyG7n7Sr+eBXE86HIulnL5N8xZY1sgmOPGuq/F0Rr0FJq63lg0kEtOIDfZBk44FnDLf6FUJ+dsJcuiUDdDQ==", + "license": "ISC" + }, + "node_modules/escalade": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz", + "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, + "node_modules/fsevents": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", + "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", + "dev": true, + "hasInstallScript": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, + "node_modules/function-bind": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", + "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==", + "dev": true, + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/hasown": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz", + "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "function-bind": "^1.1.2" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/is-core-module": { + "version": "2.16.1", + "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz", + "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==", + "dev": true, + "license": "MIT", + "dependencies": { + "hasown": "^2.0.2" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/nanoid": { + "version": "3.3.8", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz", + "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "bin": { + "nanoid": "bin/nanoid.cjs" + }, + "engines": { + "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" + } + }, + "node_modules/node-releases": { + "version": "2.0.19", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz", + "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==", + "license": "MIT" + }, + "node_modules/path-parse": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", + "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==", + "dev": true, + "license": "MIT" + }, + "node_modules/picocolors": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz", + "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==", + "license": "ISC" + }, + "node_modules/pify": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", + "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/postcss": { + "version": "8.4.49", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz", + "integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "nanoid": "^3.3.7", + "picocolors": "^1.1.1", + "source-map-js": "^1.2.1" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, + "node_modules/postcss-8.4": { + "name": "postcss", + "version": "8.4.49", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz", + "integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "nanoid": "^3.3.7", + "picocolors": "^1.1.1", + "source-map-js": "^1.2.1" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, + "node_modules/postcss-browser-comments": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/postcss-browser-comments/-/postcss-browser-comments-6.0.1.tgz", + "integrity": "sha512-VE5mVLOW+L31a+Eyi7i5j7PmzOydObKLA9VwGBpTZy2OYB3XY1E7/xHxv4tURtEI/qb5h2TyyGHPhZ31sXOEXg==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT-0", + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "browserslist": "^4.23.1", + "postcss": "^8.4" + } + }, + "node_modules/postcss-import": { + "version": "16.1.0", + "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-16.1.0.tgz", + "integrity": "sha512-7hsAZ4xGXl4MW+OKEWCnF6T5jqBw80/EE9aXg1r2yyn1RsVEU8EtKXbijEODa+rg7iih4bKf7vlvTGYR4CnPNg==", + "dev": true, + "license": "MIT", + "dependencies": { + "postcss-value-parser": "^4.0.0", + "read-cache": "^1.0.0", + "resolve": "^1.1.7" + }, + "engines": { + "node": ">=18.0.0" + }, + "peerDependencies": { + "postcss": "^8.0.0" + } + }, + "node_modules/postcss-value-parser": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", + "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", + "dev": true, + "license": "MIT" + }, + "node_modules/read-cache": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", + "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==", + "dev": true, + "license": "MIT", + "dependencies": { + "pify": "^2.3.0" + } + }, + "node_modules/resolve": { + "version": "1.22.10", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz", + "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==", + "dev": true, + "license": "MIT", + "dependencies": { + "is-core-module": "^2.16.0", + "path-parse": "^1.0.7", + "supports-preserve-symlinks-flag": "^1.0.0" + }, + "bin": { + "resolve": "bin/resolve" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/rollup": { + "version": "4.29.1", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.29.1.tgz", + "integrity": "sha512-RaJ45M/kmJUzSWDs1Nnd5DdV4eerC98idtUOVr6FfKcgxqvjwHmxc5upLF9qZU9EpsVzzhleFahrT3shLuJzIw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/estree": "1.0.6" + }, + "bin": { + "rollup": "dist/bin/rollup" + }, + "engines": { + "node": ">=18.0.0", + "npm": ">=8.0.0" + }, + "optionalDependencies": { + "@rollup/rollup-android-arm-eabi": "4.29.1", + "@rollup/rollup-android-arm64": "4.29.1", + "@rollup/rollup-darwin-arm64": "4.29.1", + "@rollup/rollup-darwin-x64": "4.29.1", + "@rollup/rollup-freebsd-arm64": "4.29.1", + "@rollup/rollup-freebsd-x64": "4.29.1", + "@rollup/rollup-linux-arm-gnueabihf": "4.29.1", + "@rollup/rollup-linux-arm-musleabihf": "4.29.1", + "@rollup/rollup-linux-arm64-gnu": "4.29.1", + "@rollup/rollup-linux-arm64-musl": "4.29.1", + "@rollup/rollup-linux-loongarch64-gnu": "4.29.1", + "@rollup/rollup-linux-powerpc64le-gnu": "4.29.1", + "@rollup/rollup-linux-riscv64-gnu": "4.29.1", + "@rollup/rollup-linux-s390x-gnu": "4.29.1", + "@rollup/rollup-linux-x64-gnu": "4.29.1", + "@rollup/rollup-linux-x64-musl": "4.29.1", + "@rollup/rollup-win32-arm64-msvc": "4.29.1", + "@rollup/rollup-win32-ia32-msvc": "4.29.1", + "@rollup/rollup-win32-x64-msvc": "4.29.1", + "fsevents": "~2.3.2" + } + }, + "node_modules/sanitize.css": { + "version": "13.0.0", + "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz", + "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA==", + "license": "CC0-1.0" + }, + "node_modules/source-map-js": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", + "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==", + "license": "BSD-3-Clause", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/supports-preserve-symlinks-flag": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", + "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/update-browserslist-db": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.1.tgz", + "integrity": "sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/browserslist" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "escalade": "^3.2.0", + "picocolors": "^1.1.0" + }, + "bin": { + "update-browserslist-db": "cli.js" + }, + "peerDependencies": { + "browserslist": ">= 4.21.0" + } + } + } +} diff --git a/package.json b/package.json index 8f57a03..3141cb8 100644 --- a/package.json +++ b/package.json @@ -1,51 +1,47 @@ { "name": "postcss-normalize", - "version": "9.0.0", + "version": "13.0.1", "description": "Use the parts of normalize.css or sanitize.css you need from your browserslist", "author": "Jonathan Neal ", "license": "CC0-1.0", "repository": "csstools/postcss-normalize", "homepage": "https://github.com/csstools/postcss-normalize#readme", "bugs": "https://github.com/csstools/postcss-normalize/issues", - "main": "dist/index.cjs.js", - "module": "dist/index.esm.mjs", + "main": "./index.cjs", + "module": "./index.mjs", + "exports": { + "require": "./index.cjs", + "import": "./index.mjs", + "default": "./index.mjs" + }, "files": [ - "dist" + "index.cjs", + "index.mjs" ], "scripts": { - "build": "npx rollup -c .rollup.js", - "build:watch": "npx rollup -c .rollup.js --watch", - "lint": "npx eslint --cache src", - "lint:fix": "npx eslint --cache --fix", - "pretest": "npm install && npm run build", - "test": "npm run lint && npm run tape", - "tape": "npx postcss-tape" + "prepublishOnly": "npm test", + "build": "rollup --config .rollup.mjs --silent", + "test": "npm run build && node --test", + "test:rewrite-expects": "REWRITE_EXPECTS=true node --test" }, "engines": { - "node": ">=10.0.0" + "node": ">= 18" + }, + "peerDependencies": { + "browserslist": ">= 4", + "postcss": ">= 8" }, "dependencies": { - "@csstools/normalize.css": "10.1.0", - "postcss-browser-comments": "^3.0.0", - "sanitize.css": "11.0.0" + "@csstools/normalize.css": "12.1.1", + "postcss-browser-comments": "^6.0.1", + "sanitize.css": "13.0.0" }, "devDependencies": { - "@babel/core": "^7.9.0", - "@babel/plugin-syntax-import-meta": "^7.8.3", - "@babel/preset-env": "^7.9.5", - "babel-eslint": "^10.1.0", - "browserslist": "^4.16.3", - "eslint": "^6.8.0", - "postcss": "^8.2.8", - "postcss-import": "^12.0.1", - "postcss-tape": "^6.0.1", - "pre-commit": "^1.2.2", - "rollup": "^2.6.0", - "rollup-plugin-babel": "^4.4.0" - }, - "peerDependencies": { - "browserslist": "^4.16.3", - "postcss": "^8.2.8" + "@csstools/postcss-tape": "^5.0.0", + "browserslist": "^4.16.5", + "postcss": "^8.4.31", + "postcss-import": "^16.0.0", + "rollup": "^4.21.2" }, "babel": { "plugins": [ @@ -60,30 +56,6 @@ ] ] }, - "eslintConfig": { - "env": { - "es6": true, - "node": true - }, - "extends": "eslint:recommended", - "parser": "babel-eslint" - }, - "rollup": { - "input": "src/index.js", - "plugins": [ - "rollup-plugin-babel" - ], - "output": [ - { - "file": "dist/index.cjs.js", - "format": "cjs" - }, - { - "file": "dist/index.esm.js", - "format": "esm" - } - ] - }, "keywords": [ "postcss", "css", diff --git a/src/index.js b/src/index.js index 6a0ec6f..e48b4b4 100644 --- a/src/index.js +++ b/src/index.js @@ -1,14 +1,14 @@ -import { create } from './lib/util'; -import postcssBrowserComments from 'postcss-browser-comments'; -import postcssImportNormalize from './lib/postcssImportNormalize'; -import postcssNormalize from './lib/postcssNormalize'; +import { create } from './lib/util' +import postcssBrowserComments from 'postcss-browser-comments' +import postcssImportNormalize from './lib/postcssImportNormalize' +import postcssNormalize from './lib/postcssNormalize' const plugin = opts => { - opts = create(opts); + opts = create(opts) - const commentsTransformer = postcssBrowserComments(opts).Once; - const normalizeTransformer = postcssNormalize(commentsTransformer, opts); - const postcssImportConfig = postcssImportNormalize(commentsTransformer, opts); + const commentsTransformer = postcssBrowserComments(opts).Once + const normalizeTransformer = postcssNormalize(commentsTransformer, opts) + const postcssImportConfig = postcssImportNormalize(commentsTransformer, opts) return { postcssPlugin: 'postcss-normalize', @@ -19,6 +19,6 @@ const plugin = opts => { } } -plugin.postcss = true; +plugin.postcss = true -export default plugin; +export default plugin diff --git a/src/lib/cssMap.js b/src/lib/cssMap.js index c355f99..698f0a5 100644 --- a/src/lib/cssMap.js +++ b/src/lib/cssMap.js @@ -1,30 +1,37 @@ -import { create } from './util'; -import Module from 'module'; -import path from 'path'; -import { URL } from 'url'; +import { create } from './util' +import path from 'node:path' // get esm-compatible script metadata -const currentURL = import.meta.url; -const currentFilename = new URL(currentURL).pathname; -const currentDirname = path.dirname(currentFilename); +import { createRequire } from 'node:module' +const require = createRequire(import.meta.url) -// get resolved filenames for css libraries -const normalizeCSS = resolve('@csstools/normalize.css'); -const normalizeOpinionatedCSS = resolve('@csstools/normalize.css/opinionated.css'); -const sanitizeCSS = resolve('sanitize.css'); -const sanitizeFormsCSS = resolve('sanitize.css/forms.css'); -const sanitizePageCSS = resolve('sanitize.css/page.css'); -const sanitizeTypographyCSS = resolve('sanitize.css/typography.css'); +// get resolved filenames for normalize.css +const normalizeCSS = require.resolve('@csstools/normalize.css') +const normalizeDir = path.dirname(normalizeCSS) +const normalizeOpinionatedCSS = path.join(normalizeDir, 'opinionated.css') + +// get resolved filenames for sanitize.css +const sanitizeCSS = require.resolve('sanitize.css') +const sanitizeDir = path.dirname(sanitizeCSS) +const sanitizeAssetsCSS = path.join(sanitizeDir, 'assets.css') +const sanitizeFormsCSS = path.join(sanitizeDir, 'forms.css') +const sanitizeReduceMotionCSS = path.join(sanitizeDir, 'reduce-motion.css') +const sanitizeTypographyCSS = path.join(sanitizeDir, 'typography.css') +const sanitizeSystemUiCSS = path.join(sanitizeDir, 'system-ui.css') +const sanitizeUiMonospace = path.join(sanitizeDir, 'ui-monospace.css') // export a hashmap of css library filenames export const parsableFilenames = create({ [normalizeCSS]: true, [normalizeOpinionatedCSS]: true, [sanitizeCSS]: true, + [sanitizeAssetsCSS]: true, [sanitizeFormsCSS]: true, - [sanitizePageCSS]: true, - [sanitizeTypographyCSS]: true -}); + [sanitizeReduceMotionCSS]: true, + [sanitizeTypographyCSS]: true, + [sanitizeSystemUiCSS]: true, + [sanitizeUiMonospace]: true, +}) // export a hashmap of css library filenames by id export const resolvedFilenamesById = create({ @@ -32,17 +39,12 @@ export const resolvedFilenamesById = create({ 'normalize/opinionated': [normalizeOpinionatedCSS], 'normalize/*': [normalizeOpinionatedCSS], 'sanitize': [sanitizeCSS], + 'sanitize/assets': [sanitizeAssetsCSS], 'sanitize/forms': [sanitizeCSS, sanitizeFormsCSS], - 'sanitize/page': [sanitizeCSS, sanitizePageCSS], + 'sanitize/page': [sanitizeAssetsCSS], // deprecated; remaining for v10.0.0 compatibility + 'sanitize/reduce-motion': [sanitizeCSS, sanitizeReduceMotionCSS], + 'sanitize/system-ui': [sanitizeCSS, sanitizeSystemUiCSS], 'sanitize/typography': [sanitizeCSS, sanitizeTypographyCSS], - 'sanitize/*': [sanitizeCSS, sanitizeFormsCSS, sanitizePageCSS, sanitizeTypographyCSS] -}); - -// get the resolved filename of a package/module -function resolve (id) { - return resolve[id] = resolve[id] || Module._resolveFilename(id, { - id: currentFilename, - filename: currentFilename, - paths: Module._nodeModulePaths(currentDirname) - }); -} + 'sanitize/ui-monospace': [sanitizeCSS, sanitizeUiMonospace], + 'sanitize/*': [sanitizeCSS, sanitizeFormsCSS], +}) diff --git a/src/lib/parse.js b/src/lib/parse.js index 57beeeb..1b39d5e 100644 --- a/src/lib/parse.js +++ b/src/lib/parse.js @@ -1,8 +1,8 @@ -import { create } from './util'; -import readFile from './readFile'; -import postcss from 'postcss'; +import { create } from './util' +import readFile from './readFile' +import postcss from 'postcss' -const cache = create(null); +const cache = create(null) export default (filename, transformer) => readFile(filename).then( // cache the parsed css root @@ -18,4 +18,4 @@ export default (filename, transformer) => readFile(filename).then( // resolve the cloned root () => clone ) -); +) diff --git a/src/lib/postcssImportNormalize.js b/src/lib/postcssImportNormalize.js index df605e6..f581cad 100644 --- a/src/lib/postcssImportNormalize.js +++ b/src/lib/postcssImportNormalize.js @@ -1,10 +1,10 @@ -import { create } from './util'; -import { parsableFilenames, resolvedFilenamesById } from './cssMap'; -import parse from './parse'; -import readFile from './readFile'; +import { create } from './util' +import { parsableFilenames, resolvedFilenamesById } from './cssMap' +import parse from './parse' +import readFile from './readFile' export default commentsTransformer => opts => { - opts = create(opts); + opts = create(opts) // return an postcss-import configuration return create({ @@ -18,11 +18,11 @@ export default commentsTransformer => opts => { // otherwise, use the override loader ? opts.load.call(null, filename, importOptions) // otherwise, return the (conservatively cached) contents of the file - : readFile(filename); + : readFile(filename) }, resolve (id, basedir, importOptions) { // get the css id by removing css extensions - const cssId = id.replace(cssExtRegExp, ''); + const cssId = id.replace(cssExtRegExp, '') return cssId in resolvedFilenamesById // return the known resolved path for the css id @@ -31,9 +31,9 @@ export default commentsTransformer => opts => { // otherwise, use the override resolver ? opts.resolve.call(null, id, basedir, importOptions) // otherwise, return the id to be resolved by postcss-import - : id; + : id } - }); -}; + }) +} -const cssExtRegExp = /\.css\b/g; +const cssExtRegExp = /\.css\b/g diff --git a/src/lib/postcssNormalize.js b/src/lib/postcssNormalize.js index dab44ae..6396f7d 100644 --- a/src/lib/postcssNormalize.js +++ b/src/lib/postcssNormalize.js @@ -1,23 +1,23 @@ -import { resolvedFilenamesById } from './cssMap'; -import parse from './parse'; +import { resolvedFilenamesById } from './cssMap' +import parse from './parse' const postcssPlugin = (commentsTransformer, opts) => root => { - const promises = []; - const insertedFilenames = {}; + const promises = [] + const insertedFilenames = {} // use @import insertion point root.walkAtRules( importRegExp, atrule => { // get name as a fallback value for the library (e.g. @import-normalize is like @import "normalize.css") - const name = atrule.name.match(importRegExp)[1]; + const name = atrule.name.match(importRegExp)[1] // get url from "library", 'library', url("library"), url('library'), or the fallback value - const url = (atrule.params.match(paramsRegExp) || []).slice(1).find(part => part) || name; + const url = (atrule.params.match(paramsRegExp) || []).slice(1).find(part => part) || name if (url) { // get the css id by removing css extensions - const cssId = url.replace(cssExtRegExp, ''); + const cssId = url.replace(cssExtRegExp, '') if (cssId in resolvedFilenamesById) { // promise the library import is replaced with its contents @@ -36,17 +36,17 @@ const postcssPlugin = (commentsTransformer, opts) => root => { const nodes = roots.reduce( (all, root) => all.concat(root.nodes), [] - ); + ) // replace the import with all the library nodes - atrule.replaceWith(...nodes); + atrule.replaceWith(...nodes) } }) - ); + ) } } } - ); + ) return Promise.all([].concat( // promise the library imports are replaced with their contents @@ -61,14 +61,14 @@ const postcssPlugin = (commentsTransformer, opts) => root => { if (id === true) { all.push(...resolvedFilenamesById.normalize) } else if (typeof id === 'string') { - const cssId = id.replace(cssExtRegExp, ''); + const cssId = id.replace(cssExtRegExp, '') if (cssId in resolvedFilenamesById) { - all.push(...resolvedFilenamesById[cssId]); + all.push(...resolvedFilenamesById[cssId]) } } - return all; + return all }, [] ).filter( @@ -84,17 +84,17 @@ const postcssPlugin = (commentsTransformer, opts) => root => { const nodes = roots.reduce( (all, root) => all.concat(root.nodes), [] - ); + ) // prepend the stylesheet with all the library nodes - root.prepend(...nodes); + root.prepend(...nodes) } }) - )); -}; + )) +} -const cssExtRegExp = /\.css\b/g; -const importRegExp = /^import(?:-(normalize|sanitize))?$/; -const paramsRegExp = /^\s*(?:url\((?:"(.+)"|'(.+)')\)|"(.+)"|'(.+)')[\W\w]*$/; +const cssExtRegExp = /\.css\b/g +const importRegExp = /^import(?:-(normalize|sanitize))?$/ +const paramsRegExp = /^\s*(?:url\((?:"(.+)"|'(.+)')\)|"(.+)"|'(.+)')[\W\w]*$/ -export default postcssPlugin; +export default postcssPlugin diff --git a/src/lib/readFile.js b/src/lib/readFile.js index 9a6e66d..0936e5c 100644 --- a/src/lib/readFile.js +++ b/src/lib/readFile.js @@ -1,13 +1,13 @@ -import { create } from './util'; -import path from 'path'; -import fs from 'fs'; +import { create } from './util' +import path from 'path' +import fs from 'fs' -const cache = create(); +const cache = create() export default async function readFile (filename) { - filename = path.resolve(filename); + filename = path.resolve(filename) - cache[filename] = cache[filename] || create(); + cache[filename] = cache[filename] || create() return new Promise( (resolve, reject) => fs.stat( @@ -26,5 +26,5 @@ export default async function readFile (filename) { ) ) ) - ); + ) } diff --git a/src/lib/util.js b/src/lib/util.js index 6a124ad..338402e 100644 --- a/src/lib/util.js +++ b/src/lib/util.js @@ -1,2 +1,2 @@ -export const assign = (...objects) => Object.assign(...objects); -export const create = (...objects) => assign(Object.create(null), ...objects); +export const assign = (...objects) => Object.assign(...objects) +export const create = (...objects) => assign(Object.create(null), ...objects) diff --git a/test/_import.mjs b/test/_import.mjs new file mode 100644 index 0000000..c568447 --- /dev/null +++ b/test/_import.mjs @@ -0,0 +1,11 @@ +import plugin from 'postcss-normalize'; +import postcss from 'postcss'; +import assert from 'node:assert'; + +postcss([plugin()]).process('@import "sanitize.css"', { from: null }).then((result) => { + assert.ok(result.css.includes(':where(')); +}); + +postcss([plugin()]).process('@import "normalize.css"', { from: null }).then((result) => { + assert.ok(result.css.includes(':where(')); +}); diff --git a/test/_require.cjs b/test/_require.cjs new file mode 100644 index 0000000..0511ac4 --- /dev/null +++ b/test/_require.cjs @@ -0,0 +1,11 @@ +const plugin = require('postcss-normalize'); +const postcss = require('postcss'); +const assert = require('node:assert'); + +postcss([plugin()]).process('@import "sanitize.css"', { from: null }).then((result) => { + assert.ok(result.css.includes(':where(')); +}); + +postcss([plugin()]).process('@import "normalize.css"', { from: null }).then((result) => { + assert.ok(result.css.includes(':where(')); +}); diff --git a/test/_tape.mjs b/test/_tape.mjs new file mode 100644 index 0000000..df1daee --- /dev/null +++ b/test/_tape.mjs @@ -0,0 +1,128 @@ +import { postcssTape } from '@csstools/postcss-tape'; +import plugin from 'postcss-normalize'; +import postcss from 'postcss'; +import postcssImport from 'postcss-import'; + +const fixed_browserslist = [ + "IE 10", + "ie_mob 10", + "Safari 7", + "iOS 7", + "Chrome 60", + "ChromeAndroid 60", + "Firefox 60", + "FirefoxAndroid 60", + "Edge 16", + "> 0.01%" +] + +postcssTape(plugin)({ + /* Test Basic Usage */ + 'basic-normalize': { + message: 'supports @import-normalize usage', + options: { + browsers: fixed_browserslist + } + }, + 'basic-normalize-opinionated': { + message: 'supports @import-normalize "opinionated.css" usage', + options: { + browsers: fixed_browserslist + } + }, + 'basic-sanitize': { + message: 'supports @import-sanitize usage', + options: { + browsers: fixed_browserslist + } + }, + + /* Test @import Usage */ + 'import-normalize': { + message: 'supports @import "normalize" usage', + options: { + browsers: fixed_browserslist + }, + expect: "normalize.expect.css" + }, + 'import-normalize-opinionated': { + message: 'supports @import "normalize/opinionated" usage', + options: { + browsers: fixed_browserslist + } + }, + 'import-sanitize': { + message: 'supports @import "sanitize" usage', + options: { + browsers: fixed_browserslist + }, + expect: "sanitize.expect.css" + }, + 'import-sanitize-forms': { + message: 'supports @import "sanitize/forms" usage', + options: { + browsers: fixed_browserslist + } + }, + 'import-sanitize-all': { + message: 'supports @import "sanitize/*" + (forms + page + typography) usage', + options: { + browsers: fixed_browserslist + } + }, + + /* Test { browsers } Usage */ + 'browsers-normalize': { + message: 'supports { browsers: "last 2 * versions, not EdgeHTML" }', + options: { + browsers: 'last 2 chrome versions, edge >= 72, last 2 firefox versions, last 2 safari versions, last 1 ios versions, last 1 android versions' + } + }, + + /* Test { forceImport } Usage */ + 'force-normalize': { + message: 'supports { forceImport: true }', + options: { + forceImport: true, + browsers: fixed_browserslist + } + }, + 'force-sanitize': { + message: 'supports { forceImport: "sanitize" }', + options: { + forceImport: 'sanitize', + browsers: fixed_browserslist + } + }, + 'force-sanitize-all': { + message: 'supports { forceImport: "sanitize/*" }', + options: { + forceImport: 'sanitize/*', + browsers: fixed_browserslist + } + }, + + /* Test { allowDuplicates } Usage */ + 'duplicates': { + message: 'supports preventing duplicates', + options: { + browsers: fixed_browserslist + } + }, + 'duplicates:allow': { + message: 'supports allowing duplicates { allowDuplicates: true }', + options: { + allowDuplicates: true, + browsers: fixed_browserslist + } + }, + + /* Test PostCSS Import Usage */ + 'postcss-import': { + message: 'supports PostCSS Import Usage', + source: 'import-normalize.css', + plugins: [(() => { + return postcss([postcssImport(plugin({ browsers: fixed_browserslist }).postcssImport()) ]) + })()] + } +}) diff --git a/test/basic-normalize-opinionated.css b/test/basic-normalize-opinionated.css new file mode 100644 index 0000000..2687f52 --- /dev/null +++ b/test/basic-normalize-opinionated.css @@ -0,0 +1,5 @@ +@import-normalize "normalize/opinionated.css"; + +body { + font-family: sans-serif; +} diff --git a/test/basic-normalize-opinionated.expect.css b/test/basic-normalize-opinionated.expect.css new file mode 100644 index 0000000..051d098 --- /dev/null +++ b/test/basic-normalize-opinionated.expect.css @@ -0,0 +1,269 @@ +/* Document + * ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +:where(html) { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + text-size-adjust: 100%; /* 2 */ +} + +/* Sections + * ========================================================================== */ + +/** + * Remove the margin in all browsers. (opinionated) + */ + +:where(body) { + margin: 0; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Edge, Firefox, and Safari. + */ + +:where(h1) { + font-size: 2em; + margin-block-end: 0.67em; + margin-block-start: 0.67em; +} + +/* Grouping content + * ========================================================================== */ + +/** + * Remove the margin on nested lists in Chrome, Edge, and Safari. + */ + +:where(dl, ol, ul) :where(dl, ol, ul) { + margin-block-end: 0; + margin-block-start: 0; +} + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Correct the inheritance of border color in Firefox. + */ + +:where(hr) { + box-sizing: content-box; /* 1 */ + color: inherit; /* 2 */ + height: 0; /* 1 */ +} + +/* Text-level semantics + * ========================================================================== */ + +/** + * Add the correct text decoration in Safari. + */ + +:where(abbr[title]) { + text-decoration: underline; + text-decoration: underline dotted; +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +:where(b, strong) { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +:where(code, kbd, pre, samp) { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +:where(small) { + font-size: 80%; +} + +/* Tabular data + * ========================================================================== */ + +/** + * 1. Correct table border color in Chrome, Edge, and Safari. + * 2. Remove text indentation from table contents in Chrome, Edge, and Safari. + */ + +:where(table) { + border-color: currentColor; /* 1 */ + text-indent: 0; /* 2 */ +} + +/* Forms + * ========================================================================== */ + +/** + * Remove the margin on controls in Safari. + */ + +:where(button, input, select) { + margin: 0; +} + +/** + * Remove the inheritance of text transform in Firefox. + */ + +:where(button) { + text-transform: none; +} + +/** + * Correct the inability to style buttons in iOS and Safari. + */ + +:where(button, input:is([type="button" i], [type="reset" i], [type="submit" i])) { + -webkit-appearance: button; +} + +/** + * Add the correct vertical alignment in Chrome, Edge, and Firefox. + */ + +:where(progress) { + vertical-align: baseline; +} + +/** + * Remove the inheritance of text transform in Firefox. + */ + +:where(select) { + text-transform: none; +} + +/** + * Remove the margin in Firefox and Safari. + */ + +:where(textarea) { + margin: 0; +} + +/** + * 1. Correct the odd appearance in Chrome, Edge, and Safari. + * 2. Correct the outline style in Safari. + */ + +:where(input[type="search" i]) { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Safari. + */ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/** + * Correct the text style of placeholders in Chrome, Edge, and Safari. + */ + +::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; +} + +/** + * Remove the inner padding in Chrome, Edge, and Safari on macOS. + */ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style upload buttons in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/** + * Remove the inner border and padding of focus outlines in Firefox. + */ + +:where(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i]))::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus outline styles unset by the previous rule in Firefox. + */ + +:where(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i]))::-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Remove the additional :invalid styles in Firefox. + */ + +:where(:-moz-ui-invalid) { + box-shadow: none; +} + +/* Interactive + * ========================================================================== */ + +/* + * Add the correct styles in Safari. + */ + +:where(dialog) { + background-color: white; + border: solid; + color: black; + height: -moz-fit-content; + height: fit-content; + left: 0; + margin: auto; + padding: 1em; + position: absolute; + right: 0; + width: -moz-fit-content; + width: fit-content; +} + +:where(dialog:not([open])) { + display: none; +} + +/* + * Add the correct display in all browsers. + */ + +:where(summary) { + display: list-item; +} + +body { + font-family: sans-serif; +} diff --git a/test/basic-normalize.expect.css b/test/basic-normalize.expect.css index 8356120..a7d4961 100644 --- a/test/basic-normalize.expect.css +++ b/test/basic-normalize.expect.css @@ -3,14 +3,13 @@ /** * 1. Correct the line height in all browsers. - * 2. Prevent adjustments of font size after orientation changes in - * IE on Windows Phone and in iOS. + * 2. Prevent adjustments of font size after orientation changes in iOS. */ -html { +:where(html) { line-height: 1.15; /* 1 */ - -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ + text-size-adjust: 100%; /* 2 */ } /* Sections @@ -21,74 +20,43 @@ html { * `article` contexts in Chrome, Edge, Firefox, and Safari. */ -h1 { +:where(h1) { font-size: 2em; - margin: 0.67em 0; + margin-block-end: 0.67em; + margin-block-start: 0.67em; } /* Grouping content * ========================================================================== */ /** - * Remove the margin on nested lists in Chrome, Edge, IE, and Safari. + * Remove the margin on nested lists in Chrome, Edge, and Safari. */ -dl dl, -dl ol, -dl ul, -ol dl, -ul dl { - margin: 0; -} - -/** - * Remove the margin on nested lists in Edge 18- and IE. - */ - -ol ol, -ol ul, -ul ol, -ul ul { - margin: 0; +:where(dl, ol, ul) :where(dl, ol, ul) { + margin-block-end: 0; + margin-block-start: 0; } /** * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge 18- and IE. + * 2. Correct the inheritance of border color in Firefox. */ -hr { +:where(hr) { box-sizing: content-box; /* 1 */ + color: inherit; /* 2 */ height: 0; /* 1 */ - overflow: visible; /* 2 */ -} - -/** - * Add the correct display in IE. - */ - -main { - display: block; -} - -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - -pre { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ } /* Text-level semantics * ========================================================================== */ /** - * Add the correct text decoration in Edge 18-, IE, and Safari. + * Add the correct text decoration in Safari. */ -abbr[title] { +:where(abbr[title]) { text-decoration: underline; text-decoration: underline dotted; } @@ -97,8 +65,7 @@ abbr[title] { * Add the correct font weight in Chrome, Edge, and Safari. */ -b, -strong { +:where(b, strong) { font-weight: bolder; } @@ -107,9 +74,7 @@ strong { * 2. Correct the odd `em` font sizing in all browsers. */ -code, -kbd, -samp { +:where(code, kbd, pre, samp) { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } @@ -118,19 +83,21 @@ samp { * Add the correct font size in all browsers. */ -small { +:where(small) { font-size: 80%; } -/* Embedded content +/* Tabular data * ========================================================================== */ /** - * Hide the overflow in IE. + * 1. Correct table border color in Chrome, Edge, and Safari. + * 2. Remove text indentation from table contents in Chrome, Edge, and Safari. */ -svg:not(:root) { - overflow: hidden; +:where(table) { + border-color: currentColor; /* 1 */ + text-indent: 0; /* 2 */ } /* Forms @@ -140,88 +107,48 @@ svg:not(:root) { * Remove the margin on controls in Safari. */ -button, -input, -select { +:where(button, input, select) { margin: 0; } /** - * 1. Show the overflow in IE. - * 2. Remove the inheritance of text transform in Edge 18-, Firefox, and IE. + * Remove the inheritance of text transform in Firefox. */ -button { - overflow: visible; /* 1 */ - text-transform: none; /* 2 */ +:where(button) { + text-transform: none; } /** * Correct the inability to style buttons in iOS and Safari. */ -button, -[type="button"], -[type="reset"], -[type="submit"] { +:where(button, input:is([type="button" i], [type="reset" i], [type="submit" i])) { -webkit-appearance: button; } /** - * Correct the padding in Firefox. - */ - -fieldset { - padding: 0.35em 0.75em 0.625em; -} - -/** - * Show the overflow in Edge 18- and IE. - */ - -input { - overflow: visible; -} - -/** - * 1. Correct the text wrapping in Edge 18- and IE. - * 2. Correct the color inheritance from `fieldset` elements in IE. - */ - -legend { - box-sizing: border-box; /* 1 */ - color: inherit; /* 2 */ - display: table; /* 1 */ - max-width: 100%; /* 1 */ - white-space: normal; /* 1 */ -} - -/** - * 1. Add the correct display in Edge 18- and IE. - * 2. Add the correct vertical alignment in Chrome, Edge, and Firefox. + * Add the correct vertical alignment in Chrome, Edge, and Firefox. */ -progress { - display: inline-block; /* 1 */ - vertical-align: baseline; /* 2 */ +:where(progress) { + vertical-align: baseline; } /** * Remove the inheritance of text transform in Firefox. */ -select { +:where(select) { text-transform: none; } /** - * 1. Remove the margin in Firefox and Safari. - * 2. Remove the default vertical scrollbar in IE. + * Remove the margin in Firefox and Safari. */ -textarea { - margin: 0; /* 1 */ - overflow: auto; /* 2 */ +:where(textarea) { + margin: 0; } /** @@ -229,7 +156,7 @@ textarea { * 2. Correct the outline style in Safari. */ -[type="search"] { +:where(input[type="search" i]) { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } @@ -274,7 +201,7 @@ textarea { * Remove the inner border and padding of focus outlines in Firefox. */ -::-moz-focus-inner { +:where(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i]))::-moz-focus-inner { border-style: none; padding: 0; } @@ -283,7 +210,7 @@ textarea { * Restore the focus outline styles unset by the previous rule in Firefox. */ -:-moz-focusring { +:where(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i]))::-moz-focusring { outline: 1px dotted ButtonText; } @@ -291,7 +218,7 @@ textarea { * Remove the additional :invalid styles in Firefox. */ -:-moz-ui-invalid { +:where(:-moz-ui-invalid) { box-shadow: none; } @@ -299,24 +226,14 @@ textarea { * ========================================================================== */ /* - * Add the correct display in Edge 18- and IE. - */ - -details { - display: block; -} - -/* - * Add the correct styles in Edge 18-, IE, and Safari. + * Add the correct styles in Safari. */ -dialog { +:where(dialog) { background-color: white; border: solid; color: black; - display: block; height: -moz-fit-content; - height: -webkit-fit-content; height: fit-content; left: 0; margin: auto; @@ -324,11 +241,10 @@ dialog { position: absolute; right: 0; width: -moz-fit-content; - width: -webkit-fit-content; width: fit-content; } -dialog:not([open]) { +:where(dialog:not([open])) { display: none; } @@ -336,24 +252,10 @@ dialog:not([open]) { * Add the correct display in all browsers. */ -summary { +:where(summary) { display: list-item; } -/* Scripting - * ========================================================================== */ - -/** - * Add the correct display in IE. - */ - -template { - display: none; -} - -/* User interaction - * ========================================================================== */ - body { font-family: sans-serif; } diff --git a/test/basic-sanitize.expect.css b/test/basic-sanitize.expect.css index b5deaea..6e8f059 100644 --- a/test/basic-sanitize.expect.css +++ b/test/basic-sanitize.expect.css @@ -2,13 +2,14 @@ * ========================================================================== */ /** - * Add border box sizing in all browsers (opinionated). + * 1. Add border box sizing in all browsers (opinionated). + * 2. Backgrounds do not repeat by default (opinionated). */ *, ::before, ::after { - box-sizing: border-box; + box-sizing: border-box; /* 1 */ } /** @@ -25,22 +26,20 @@ /** * 1. Use the default cursor in all browsers (opinionated). * 2. Change the line height in all browsers (opinionated). - * 3. Use a 4-space tab width in all browsers (opinionated). - * 4. Remove the grey highlight on links in iOS (opinionated). - * 5. Prevent adjustments of font size after orientation changes in - * IE on Windows Phone and in iOS. - * 6. Breaks words to prevent overflow in all browsers (opinionated). + * 3. Breaks words to prevent overflow in all browsers (opinionated). + * 4. Use a 4-space tab width in all browsers (opinionated). + * 5. Remove the grey highlight on links in iOS (opinionated). + * 6. Prevent adjustments of font size after orientation changes in iOS. */ -html { +:where(:root) { cursor: default; /* 1 */ line-height: 1.5; /* 2 */ - -moz-tab-size: 4; /* 3 */ - tab-size: 4; /* 3 */ - -webkit-tap-highlight-color: transparent /* 4 */; - -ms-text-size-adjust: 100%; /* 5 */ - -webkit-text-size-adjust: 100%; /* 5 */ - word-break: break-word; /* 6 */ + overflow-wrap: break-word; /* 3 */ + -moz-tab-size: 4; /* 4 */ + tab-size: 4; /* 4 */ + -webkit-tap-highlight-color: transparent; /* 5 */ + -webkit-text-size-adjust: 100%; /* 6 */ } /* Sections @@ -50,7 +49,7 @@ html { * Remove the margin in all browsers (opinionated). */ -body { +:where(body) { margin: 0; } @@ -59,7 +58,7 @@ body { * `article` contexts in Chrome, Edge, Firefox, and Safari. */ -h1 { +:where(h1) { font-size: 2em; margin: 0.67em 0; } @@ -68,74 +67,61 @@ h1 { * ========================================================================== */ /** - * Remove the margin on nested lists in Chrome, Edge, IE, and Safari. + * Remove the margin on nested lists in Chrome, Edge, and Safari. */ -dl dl, -dl ol, -dl ul, -ol dl, -ul dl { +:where(dl, ol, ul) :where(dl, ol, ul) { margin: 0; } /** - * Remove the margin on nested lists in Edge 18- and IE. + * 1. Correct the inheritance of border color in Firefox. + * 2. Add the correct box sizing in Firefox. */ -ol ol, -ol ul, -ul ol, -ul ul { - margin: 0; +:where(hr) { + color: inherit; /* 1 */ + height: 0; /* 2 */ } /** - * 1. Add the correct sizing in Firefox. - * 2. Show the overflow in Edge 18- and IE. + * Remove the list style on navigation lists in all browsers (opinionated). */ -hr { - height: 0; /* 1 */ - overflow: visible; /* 2 */ +:where(nav) :where(ol, ul) { + list-style-type: none; + padding: 0; } /** - * Add the correct display in IE. + * Prevent VoiceOver from ignoring list semantics in Safari (opinionated). */ -main { - display: block; -} - -/** - * Remove the list style on navigation lists in all browsers (opinionated). - */ - -nav ol, -nav ul { - list-style: none; - padding: 0; +:where(nav li)::before { + content: "\200B"; + float: left; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. + * 3. Prevent overflow of the container in all browsers (opinionated). */ -pre { +:where(pre) { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ + overflow: auto; /* 3 */ } /* Text-level semantics * ========================================================================== */ /** - * Add the correct text decoration in Edge 18-, IE, and Safari. + * Add the correct text decoration in Safari. */ -abbr[title] { +:where(abbr[title]) { text-decoration: underline; text-decoration: underline dotted; } @@ -144,8 +130,7 @@ abbr[title] { * Add the correct font weight in Chrome, Edge, and Safari. */ -b, -strong { +:where(b, strong) { font-weight: bolder; } @@ -154,9 +139,7 @@ strong { * 2. Correct the odd `em` font sizing in all browsers. */ -code, -kbd, -samp { +:where(code, kbd, samp) { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } @@ -165,7 +148,7 @@ samp { * Add the correct font size in all browsers. */ -small { +:where(small) { font-size: 80%; } @@ -176,12 +159,7 @@ small { * Change the alignment on media elements in all browsers (opinionated). */ -audio, -canvas, -iframe, -img, -svg, -video { +:where(audio, canvas, iframe, img, svg, video) { vertical-align: middle; } @@ -189,7 +167,7 @@ video { * Remove the border on iframes in all browsers (opinionated). */ -iframe { +:where(iframe) { border-style: none; } @@ -197,27 +175,23 @@ iframe { * Change the fill color to match the text color in all browsers (opinionated). */ -svg:not([fill]) { +:where(svg:not([fill])) { fill: currentColor; } -/** - * Hide the overflow in IE. - */ - -svg:not(:root) { - overflow: hidden; -} - /* Tabular data * ========================================================================== */ /** - * Collapse border spacing in all browsers (opinionated). + * 1. Collapse border spacing in all browsers (opinionated). + * 2. Correct table border color inheritance in all Chrome, Edge, and Safari. + * 3. Remove text indentation from table contents in Chrome, Edge, and Safari. */ -table { - border-collapse: collapse; +:where(table) { + border-collapse: collapse; /* 1 */ + border-color: inherit; /* 2 */ + text-indent: 0; /* 3 */ } /* Forms @@ -227,90 +201,41 @@ table { * Remove the margin on controls in Safari. */ -button, -input, -select { +:where(button, input, select) { margin: 0; } -/** - * 1. Show the overflow in IE. - * 2. Remove the inheritance of text transform in Edge 18-, Firefox, and IE. - */ - -button { - overflow: visible; /* 1 */ - text-transform: none; /* 2 */ -} - /** * Correct the inability to style buttons in iOS and Safari. */ -button, -[type="button"], -[type="reset"], -[type="submit"] { +:where(button, [type="button" i], [type="reset" i], [type="submit" i]) { -webkit-appearance: button; } /** - * 1. Change the inconsistent appearance in all browsers (opinionated). - * 2. Correct the padding in Firefox. - */ - -fieldset { - border: 1px solid #a0a0a0; /* 1 */ - padding: 0.35em 0.75em 0.625em; /* 2 */ -} - -/** - * Show the overflow in Edge 18- and IE. - */ - -input { - overflow: visible; -} - -/** - * 1. Correct the text wrapping in Edge 18- and IE. - * 2. Correct the color inheritance from `fieldset` elements in IE. + * Change the inconsistent appearance in all browsers (opinionated). */ -legend { - color: inherit; /* 2 */ - display: table; /* 1 */ - max-width: 100%; /* 1 */ - white-space: normal; /* 1 */ +:where(fieldset) { + border: 1px solid #a0a0a0; } /** - * 1. Add the correct display in Edge 18- and IE. - * 2. Add the correct vertical alignment in Chrome, Edge, and Firefox. + * Add the correct vertical alignment in Chrome, Edge, and Firefox. */ -progress { - display: inline-block; /* 1 */ - vertical-align: baseline; /* 2 */ -} - -/** - * Remove the inheritance of text transform in Firefox. - */ - -select { - text-transform: none; +:where(progress) { + vertical-align: baseline; } /** * 1. Remove the margin in Firefox and Safari. - * 2. Remove the default vertical scrollbar in IE. * 3. Change the resize direction in all browsers (opinionated). */ -textarea { +:where(textarea) { margin: 0; /* 1 */ - overflow: auto; /* 2 */ resize: vertical; /* 3 */ } @@ -319,7 +244,7 @@ textarea { * 2. Correct the outline style in Safari. */ -[type="search"] { +:where([type="search" i]) { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } @@ -360,53 +285,18 @@ textarea { font: inherit; /* 2 */ } -/** - * Remove the inner border and padding of focus outlines in Firefox. - */ - -::-moz-focus-inner { - border-style: none; - padding: 0; -} - -/** - * Restore the focus outline styles unset by the previous rule in Firefox. - */ - -:-moz-focusring { - outline: 1px dotted ButtonText; -} - -/** - * Remove the additional :invalid styles in Firefox. - */ - -:-moz-ui-invalid { - box-shadow: none; -} - /* Interactive * ========================================================================== */ /* - * Add the correct display in Edge 18- and IE. - */ - -details { - display: block; -} - -/* - * Add the correct styles in Edge 18-, IE, and Safari. + * Add the correct styles in Safari. */ -dialog { +:where(dialog) { background-color: white; border: solid; color: black; - display: block; height: -moz-fit-content; - height: -webkit-fit-content; height: fit-content; left: 0; margin: auto; @@ -414,55 +304,21 @@ dialog { position: absolute; right: 0; width: -moz-fit-content; - width: -webkit-fit-content; width: fit-content; } -dialog:not([open]) { +:where(dialog:not([open])) { display: none; } /* - * Add the correct display in all browsers. + * Add the correct display in Safari. */ -summary { +:where(details > summary:first-of-type) { display: list-item; } -/* Scripting - * ========================================================================== */ - -/** - * Add the correct display in IE. - */ - -template { - display: none; -} - -/* User interaction - * ========================================================================== */ - -/* - * 1. Remove the tapping delay in IE 10. - * 2. Remove the tapping delay on clickable elements - in all browsers (opinionated). - */ - -a, -area, -button, -input, -label, -select, -summary, -textarea, -[tabindex] { - -ms-touch-action: manipulation; /* 1 */ - touch-action: manipulation; /* 2 */ -} - /* Accessibility * ========================================================================== */ @@ -470,7 +326,7 @@ textarea, * Change the cursor on busy elements in all browsers (opinionated). */ -[aria-busy="true"] { +:where([aria-busy="true" i]) { cursor: progress; } @@ -478,7 +334,7 @@ textarea, * Change the cursor on control elements in all browsers (opinionated). */ -[aria-controls] { +:where([aria-controls]) { cursor: pointer; } @@ -487,8 +343,7 @@ textarea, * inoperable elements in all browsers (opinionated). */ -[aria-disabled="true"], -[disabled] { +:where([aria-disabled="true" i], [disabled]) { cursor: not-allowed; } @@ -497,11 +352,11 @@ textarea, * in all browsers (opinionated). */ -[aria-hidden="false"][hidden] { +:where([aria-hidden="false" i][hidden]) { display: initial; } -[aria-hidden="false"][hidden]:not(:focus) { +:where([aria-hidden="false" i][hidden]:not(:focus)) { clip: rect(0, 0, 0, 0); position: absolute; } diff --git a/test/duplicates.allow.expect.css b/test/duplicates.allow.expect.css index e11ceb5..34ce1e3 100644 --- a/test/duplicates.allow.expect.css +++ b/test/duplicates.allow.expect.css @@ -2,13 +2,12 @@ * ========================================================================== */ /** * 1. Correct the line height in all browsers. - * 2. Prevent adjustments of font size after orientation changes in - * IE on Windows Phone and in iOS. + * 2. Prevent adjustments of font size after orientation changes in iOS. */ -html { +:where(html) { line-height: 1.15; /* 1 */ - -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ + text-size-adjust: 100%; /* 2 */ } /* Sections * ========================================================================== */ @@ -16,171 +15,111 @@ html { * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Edge, Firefox, and Safari. */ -h1 { +:where(h1) { font-size: 2em; - margin: 0.67em 0; + margin-block-end: 0.67em; + margin-block-start: 0.67em; } /* Grouping content * ========================================================================== */ /** - * Remove the margin on nested lists in Chrome, Edge, IE, and Safari. + * Remove the margin on nested lists in Chrome, Edge, and Safari. */ -dl dl, -dl ol, -dl ul, -ol dl, -ul dl { - margin: 0; -} -/** - * Remove the margin on nested lists in Edge 18- and IE. - */ -ol ol, -ol ul, -ul ol, -ul ul { - margin: 0; +:where(dl, ol, ul) :where(dl, ol, ul) { + margin-block-end: 0; + margin-block-start: 0; } /** * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge 18- and IE. + * 2. Correct the inheritance of border color in Firefox. */ -hr { +:where(hr) { box-sizing: content-box; /* 1 */ + color: inherit; /* 2 */ height: 0; /* 1 */ - overflow: visible; /* 2 */ -} -/** - * Add the correct display in IE. - */ -main { - display: block; -} -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ -pre { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ } /* Text-level semantics * ========================================================================== */ /** - * Add the correct text decoration in Edge 18-, IE, and Safari. + * Add the correct text decoration in Safari. */ -abbr[title] { +:where(abbr[title]) { text-decoration: underline; text-decoration: underline dotted; } /** * Add the correct font weight in Chrome, Edge, and Safari. */ -b, -strong { +:where(b, strong) { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ -code, -kbd, -samp { +:where(code, kbd, pre, samp) { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ -small { +:where(small) { font-size: 80%; } -/* Embedded content +/* Tabular data * ========================================================================== */ /** - * Hide the overflow in IE. + * 1. Correct table border color in Chrome, Edge, and Safari. + * 2. Remove text indentation from table contents in Chrome, Edge, and Safari. */ -svg:not(:root) { - overflow: hidden; +:where(table) { + border-color: currentColor; /* 1 */ + text-indent: 0; /* 2 */ } /* Forms * ========================================================================== */ /** * Remove the margin on controls in Safari. */ -button, -input, -select { +:where(button, input, select) { margin: 0; } /** - * 1. Show the overflow in IE. - * 2. Remove the inheritance of text transform in Edge 18-, Firefox, and IE. + * Remove the inheritance of text transform in Firefox. */ -button { - overflow: visible; /* 1 */ - text-transform: none; /* 2 */ +:where(button) { + text-transform: none; } /** * Correct the inability to style buttons in iOS and Safari. */ -button, -[type="button"], -[type="reset"], -[type="submit"] { +:where(button, input:is([type="button" i], [type="reset" i], [type="submit" i])) { -webkit-appearance: button; } /** - * Correct the padding in Firefox. - */ -fieldset { - padding: 0.35em 0.75em 0.625em; -} -/** - * Show the overflow in Edge 18- and IE. - */ -input { - overflow: visible; -} -/** - * 1. Correct the text wrapping in Edge 18- and IE. - * 2. Correct the color inheritance from `fieldset` elements in IE. + * Add the correct vertical alignment in Chrome, Edge, and Firefox. */ -legend { - box-sizing: border-box; /* 1 */ - color: inherit; /* 2 */ - display: table; /* 1 */ - max-width: 100%; /* 1 */ - white-space: normal; /* 1 */ -} -/** - * 1. Add the correct display in Edge 18- and IE. - * 2. Add the correct vertical alignment in Chrome, Edge, and Firefox. - */ -progress { - display: inline-block; /* 1 */ - vertical-align: baseline; /* 2 */ +:where(progress) { + vertical-align: baseline; } /** * Remove the inheritance of text transform in Firefox. */ -select { +:where(select) { text-transform: none; } /** - * 1. Remove the margin in Firefox and Safari. - * 2. Remove the default vertical scrollbar in IE. + * Remove the margin in Firefox and Safari. */ -textarea { - margin: 0; /* 1 */ - overflow: auto; /* 2 */ +:where(textarea) { + margin: 0; } /** * 1. Correct the odd appearance in Chrome, Edge, and Safari. * 2. Correct the outline style in Safari. */ -[type="search"] { +:where(input[type="search" i]) { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } @@ -215,40 +154,32 @@ textarea { /** * Remove the inner border and padding of focus outlines in Firefox. */ -::-moz-focus-inner { +:where(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i]))::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus outline styles unset by the previous rule in Firefox. */ -:-moz-focusring { +:where(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i]))::-moz-focusring { outline: 1px dotted ButtonText; } /** * Remove the additional :invalid styles in Firefox. */ -:-moz-ui-invalid { +:where(:-moz-ui-invalid) { box-shadow: none; } /* Interactive * ========================================================================== */ /* - * Add the correct display in Edge 18- and IE. + * Add the correct styles in Safari. */ -details { - display: block; -} -/* - * Add the correct styles in Edge 18-, IE, and Safari. - */ -dialog { +:where(dialog) { background-color: white; border: solid; color: black; - display: block; height: -moz-fit-content; - height: -webkit-fit-content; height: fit-content; left: 0; margin: auto; @@ -256,39 +187,27 @@ dialog { position: absolute; right: 0; width: -moz-fit-content; - width: -webkit-fit-content; width: fit-content; } -dialog:not([open]) { +:where(dialog:not([open])) { display: none; } /* * Add the correct display in all browsers. */ -summary { +:where(summary) { display: list-item; } -/* Scripting - * ========================================================================== */ -/** - * Add the correct display in IE. - */ -template { - display: none; -} -/* User interaction - * ========================================================================== */ /* Document * ========================================================================== */ /** * 1. Correct the line height in all browsers. - * 2. Prevent adjustments of font size after orientation changes in - * IE on Windows Phone and in iOS. + * 2. Prevent adjustments of font size after orientation changes in iOS. */ -html { +:where(html) { line-height: 1.15; /* 1 */ - -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ + text-size-adjust: 100%; /* 2 */ } /* Sections * ========================================================================== */ @@ -296,171 +215,111 @@ html { * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Edge, Firefox, and Safari. */ -h1 { +:where(h1) { font-size: 2em; - margin: 0.67em 0; + margin-block-end: 0.67em; + margin-block-start: 0.67em; } /* Grouping content * ========================================================================== */ /** - * Remove the margin on nested lists in Chrome, Edge, IE, and Safari. + * Remove the margin on nested lists in Chrome, Edge, and Safari. */ -dl dl, -dl ol, -dl ul, -ol dl, -ul dl { - margin: 0; -} -/** - * Remove the margin on nested lists in Edge 18- and IE. - */ -ol ol, -ol ul, -ul ol, -ul ul { - margin: 0; +:where(dl, ol, ul) :where(dl, ol, ul) { + margin-block-end: 0; + margin-block-start: 0; } /** * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge 18- and IE. + * 2. Correct the inheritance of border color in Firefox. */ -hr { +:where(hr) { box-sizing: content-box; /* 1 */ + color: inherit; /* 2 */ height: 0; /* 1 */ - overflow: visible; /* 2 */ -} -/** - * Add the correct display in IE. - */ -main { - display: block; -} -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ -pre { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ } /* Text-level semantics * ========================================================================== */ /** - * Add the correct text decoration in Edge 18-, IE, and Safari. + * Add the correct text decoration in Safari. */ -abbr[title] { +:where(abbr[title]) { text-decoration: underline; text-decoration: underline dotted; } /** * Add the correct font weight in Chrome, Edge, and Safari. */ -b, -strong { +:where(b, strong) { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ -code, -kbd, -samp { +:where(code, kbd, pre, samp) { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ -small { +:where(small) { font-size: 80%; } -/* Embedded content +/* Tabular data * ========================================================================== */ /** - * Hide the overflow in IE. + * 1. Correct table border color in Chrome, Edge, and Safari. + * 2. Remove text indentation from table contents in Chrome, Edge, and Safari. */ -svg:not(:root) { - overflow: hidden; +:where(table) { + border-color: currentColor; /* 1 */ + text-indent: 0; /* 2 */ } /* Forms * ========================================================================== */ /** * Remove the margin on controls in Safari. */ -button, -input, -select { +:where(button, input, select) { margin: 0; } /** - * 1. Show the overflow in IE. - * 2. Remove the inheritance of text transform in Edge 18-, Firefox, and IE. + * Remove the inheritance of text transform in Firefox. */ -button { - overflow: visible; /* 1 */ - text-transform: none; /* 2 */ +:where(button) { + text-transform: none; } /** * Correct the inability to style buttons in iOS and Safari. */ -button, -[type="button"], -[type="reset"], -[type="submit"] { +:where(button, input:is([type="button" i], [type="reset" i], [type="submit" i])) { -webkit-appearance: button; } /** - * Correct the padding in Firefox. - */ -fieldset { - padding: 0.35em 0.75em 0.625em; -} -/** - * Show the overflow in Edge 18- and IE. - */ -input { - overflow: visible; -} -/** - * 1. Correct the text wrapping in Edge 18- and IE. - * 2. Correct the color inheritance from `fieldset` elements in IE. + * Add the correct vertical alignment in Chrome, Edge, and Firefox. */ -legend { - box-sizing: border-box; /* 1 */ - color: inherit; /* 2 */ - display: table; /* 1 */ - max-width: 100%; /* 1 */ - white-space: normal; /* 1 */ -} -/** - * 1. Add the correct display in Edge 18- and IE. - * 2. Add the correct vertical alignment in Chrome, Edge, and Firefox. - */ -progress { - display: inline-block; /* 1 */ - vertical-align: baseline; /* 2 */ +:where(progress) { + vertical-align: baseline; } /** * Remove the inheritance of text transform in Firefox. */ -select { +:where(select) { text-transform: none; } /** - * 1. Remove the margin in Firefox and Safari. - * 2. Remove the default vertical scrollbar in IE. + * Remove the margin in Firefox and Safari. */ -textarea { - margin: 0; /* 1 */ - overflow: auto; /* 2 */ +:where(textarea) { + margin: 0; } /** * 1. Correct the odd appearance in Chrome, Edge, and Safari. * 2. Correct the outline style in Safari. */ -[type="search"] { +:where(input[type="search" i]) { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } @@ -495,40 +354,32 @@ textarea { /** * Remove the inner border and padding of focus outlines in Firefox. */ -::-moz-focus-inner { +:where(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i]))::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus outline styles unset by the previous rule in Firefox. */ -:-moz-focusring { +:where(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i]))::-moz-focusring { outline: 1px dotted ButtonText; } /** * Remove the additional :invalid styles in Firefox. */ -:-moz-ui-invalid { +:where(:-moz-ui-invalid) { box-shadow: none; } /* Interactive * ========================================================================== */ /* - * Add the correct display in Edge 18- and IE. + * Add the correct styles in Safari. */ -details { - display: block; -} -/* - * Add the correct styles in Edge 18-, IE, and Safari. - */ -dialog { +:where(dialog) { background-color: white; border: solid; color: black; - display: block; height: -moz-fit-content; - height: -webkit-fit-content; height: fit-content; left: 0; margin: auto; @@ -536,28 +387,17 @@ dialog { position: absolute; right: 0; width: -moz-fit-content; - width: -webkit-fit-content; width: fit-content; } -dialog:not([open]) { +:where(dialog:not([open])) { display: none; } /* * Add the correct display in all browsers. */ -summary { +:where(summary) { display: list-item; } -/* Scripting - * ========================================================================== */ -/** - * Add the correct display in IE. - */ -template { - display: none; -} -/* User interaction - * ========================================================================== */ body { display: flex; diff --git a/test/duplicates.expect.css b/test/duplicates.expect.css index e7015bf..44724cb 100644 --- a/test/duplicates.expect.css +++ b/test/duplicates.expect.css @@ -2,13 +2,12 @@ * ========================================================================== */ /** * 1. Correct the line height in all browsers. - * 2. Prevent adjustments of font size after orientation changes in - * IE on Windows Phone and in iOS. + * 2. Prevent adjustments of font size after orientation changes in iOS. */ -html { +:where(html) { line-height: 1.15; /* 1 */ - -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ + text-size-adjust: 100%; /* 2 */ } /* Sections * ========================================================================== */ @@ -16,171 +15,111 @@ html { * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Edge, Firefox, and Safari. */ -h1 { +:where(h1) { font-size: 2em; - margin: 0.67em 0; + margin-block-end: 0.67em; + margin-block-start: 0.67em; } /* Grouping content * ========================================================================== */ /** - * Remove the margin on nested lists in Chrome, Edge, IE, and Safari. + * Remove the margin on nested lists in Chrome, Edge, and Safari. */ -dl dl, -dl ol, -dl ul, -ol dl, -ul dl { - margin: 0; -} -/** - * Remove the margin on nested lists in Edge 18- and IE. - */ -ol ol, -ol ul, -ul ol, -ul ul { - margin: 0; +:where(dl, ol, ul) :where(dl, ol, ul) { + margin-block-end: 0; + margin-block-start: 0; } /** * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge 18- and IE. + * 2. Correct the inheritance of border color in Firefox. */ -hr { +:where(hr) { box-sizing: content-box; /* 1 */ + color: inherit; /* 2 */ height: 0; /* 1 */ - overflow: visible; /* 2 */ -} -/** - * Add the correct display in IE. - */ -main { - display: block; -} -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ -pre { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ } /* Text-level semantics * ========================================================================== */ /** - * Add the correct text decoration in Edge 18-, IE, and Safari. + * Add the correct text decoration in Safari. */ -abbr[title] { +:where(abbr[title]) { text-decoration: underline; text-decoration: underline dotted; } /** * Add the correct font weight in Chrome, Edge, and Safari. */ -b, -strong { +:where(b, strong) { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ -code, -kbd, -samp { +:where(code, kbd, pre, samp) { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ -small { +:where(small) { font-size: 80%; } -/* Embedded content +/* Tabular data * ========================================================================== */ /** - * Hide the overflow in IE. + * 1. Correct table border color in Chrome, Edge, and Safari. + * 2. Remove text indentation from table contents in Chrome, Edge, and Safari. */ -svg:not(:root) { - overflow: hidden; +:where(table) { + border-color: currentColor; /* 1 */ + text-indent: 0; /* 2 */ } /* Forms * ========================================================================== */ /** * Remove the margin on controls in Safari. */ -button, -input, -select { +:where(button, input, select) { margin: 0; } /** - * 1. Show the overflow in IE. - * 2. Remove the inheritance of text transform in Edge 18-, Firefox, and IE. + * Remove the inheritance of text transform in Firefox. */ -button { - overflow: visible; /* 1 */ - text-transform: none; /* 2 */ +:where(button) { + text-transform: none; } /** * Correct the inability to style buttons in iOS and Safari. */ -button, -[type="button"], -[type="reset"], -[type="submit"] { +:where(button, input:is([type="button" i], [type="reset" i], [type="submit" i])) { -webkit-appearance: button; } /** - * Correct the padding in Firefox. - */ -fieldset { - padding: 0.35em 0.75em 0.625em; -} -/** - * Show the overflow in Edge 18- and IE. - */ -input { - overflow: visible; -} -/** - * 1. Correct the text wrapping in Edge 18- and IE. - * 2. Correct the color inheritance from `fieldset` elements in IE. + * Add the correct vertical alignment in Chrome, Edge, and Firefox. */ -legend { - box-sizing: border-box; /* 1 */ - color: inherit; /* 2 */ - display: table; /* 1 */ - max-width: 100%; /* 1 */ - white-space: normal; /* 1 */ -} -/** - * 1. Add the correct display in Edge 18- and IE. - * 2. Add the correct vertical alignment in Chrome, Edge, and Firefox. - */ -progress { - display: inline-block; /* 1 */ - vertical-align: baseline; /* 2 */ +:where(progress) { + vertical-align: baseline; } /** * Remove the inheritance of text transform in Firefox. */ -select { +:where(select) { text-transform: none; } /** - * 1. Remove the margin in Firefox and Safari. - * 2. Remove the default vertical scrollbar in IE. + * Remove the margin in Firefox and Safari. */ -textarea { - margin: 0; /* 1 */ - overflow: auto; /* 2 */ +:where(textarea) { + margin: 0; } /** * 1. Correct the odd appearance in Chrome, Edge, and Safari. * 2. Correct the outline style in Safari. */ -[type="search"] { +:where(input[type="search" i]) { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } @@ -215,40 +154,32 @@ textarea { /** * Remove the inner border and padding of focus outlines in Firefox. */ -::-moz-focus-inner { +:where(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i]))::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus outline styles unset by the previous rule in Firefox. */ -:-moz-focusring { +:where(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i]))::-moz-focusring { outline: 1px dotted ButtonText; } /** * Remove the additional :invalid styles in Firefox. */ -:-moz-ui-invalid { +:where(:-moz-ui-invalid) { box-shadow: none; } /* Interactive * ========================================================================== */ /* - * Add the correct display in Edge 18- and IE. + * Add the correct styles in Safari. */ -details { - display: block; -} -/* - * Add the correct styles in Edge 18-, IE, and Safari. - */ -dialog { +:where(dialog) { background-color: white; border: solid; color: black; - display: block; height: -moz-fit-content; - height: -webkit-fit-content; height: fit-content; left: 0; margin: auto; @@ -256,28 +187,17 @@ dialog { position: absolute; right: 0; width: -moz-fit-content; - width: -webkit-fit-content; width: fit-content; } -dialog:not([open]) { +:where(dialog:not([open])) { display: none; } /* * Add the correct display in all browsers. */ -summary { +:where(summary) { display: list-item; } -/* Scripting - * ========================================================================== */ -/** - * Add the correct display in IE. - */ -template { - display: none; -} -/* User interaction - * ========================================================================== */ @import-normalize; body { diff --git a/test/force-normalize.expect.css b/test/force-normalize.expect.css index 28a2d0a..3792018 100644 --- a/test/force-normalize.expect.css +++ b/test/force-normalize.expect.css @@ -1,159 +1,104 @@ /* Document * ========================================================================== *//** * 1. Correct the line height in all browsers. - * 2. Prevent adjustments of font size after orientation changes in - * IE on Windows Phone and in iOS. + * 2. Prevent adjustments of font size after orientation changes in iOS. */ -html { +:where(html) { line-height: 1.15; /* 1 */ - -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ + text-size-adjust: 100%; /* 2 */ }/* Sections * ========================================================================== *//** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Edge, Firefox, and Safari. */ -h1 { +:where(h1) { font-size: 2em; - margin: 0.67em 0; + margin-block-end: 0.67em; + margin-block-start: 0.67em; }/* Grouping content * ========================================================================== *//** - * Remove the margin on nested lists in Chrome, Edge, IE, and Safari. + * Remove the margin on nested lists in Chrome, Edge, and Safari. */ -dl dl, -dl ol, -dl ul, -ol dl, -ul dl { - margin: 0; -}/** - * Remove the margin on nested lists in Edge 18- and IE. - */ -ol ol, -ol ul, -ul ol, -ul ul { - margin: 0; +:where(dl, ol, ul) :where(dl, ol, ul) { + margin-block-end: 0; + margin-block-start: 0; }/** * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge 18- and IE. + * 2. Correct the inheritance of border color in Firefox. */ -hr { +:where(hr) { box-sizing: content-box; /* 1 */ + color: inherit; /* 2 */ height: 0; /* 1 */ - overflow: visible; /* 2 */ -}/** - * Add the correct display in IE. - */ -main { - display: block; -}/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ -pre { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ }/* Text-level semantics * ========================================================================== *//** - * Add the correct text decoration in Edge 18-, IE, and Safari. + * Add the correct text decoration in Safari. */ -abbr[title] { +:where(abbr[title]) { text-decoration: underline; text-decoration: underline dotted; }/** * Add the correct font weight in Chrome, Edge, and Safari. */ -b, -strong { +:where(b, strong) { font-weight: bolder; }/** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ -code, -kbd, -samp { +:where(code, kbd, pre, samp) { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ }/** * Add the correct font size in all browsers. */ -small { +:where(small) { font-size: 80%; -}/* Embedded content +}/* Tabular data * ========================================================================== *//** - * Hide the overflow in IE. + * 1. Correct table border color in Chrome, Edge, and Safari. + * 2. Remove text indentation from table contents in Chrome, Edge, and Safari. */ -svg:not(:root) { - overflow: hidden; +:where(table) { + border-color: currentColor; /* 1 */ + text-indent: 0; /* 2 */ }/* Forms * ========================================================================== *//** * Remove the margin on controls in Safari. */ -button, -input, -select { +:where(button, input, select) { margin: 0; }/** - * 1. Show the overflow in IE. - * 2. Remove the inheritance of text transform in Edge 18-, Firefox, and IE. + * Remove the inheritance of text transform in Firefox. */ -button { - overflow: visible; /* 1 */ - text-transform: none; /* 2 */ +:where(button) { + text-transform: none; }/** * Correct the inability to style buttons in iOS and Safari. */ -button, -[type="button"], -[type="reset"], -[type="submit"] { +:where(button, input:is([type="button" i], [type="reset" i], [type="submit" i])) { -webkit-appearance: button; }/** - * Correct the padding in Firefox. - */ -fieldset { - padding: 0.35em 0.75em 0.625em; -}/** - * Show the overflow in Edge 18- and IE. - */ -input { - overflow: visible; -}/** - * 1. Correct the text wrapping in Edge 18- and IE. - * 2. Correct the color inheritance from `fieldset` elements in IE. - */ -legend { - box-sizing: border-box; /* 1 */ - color: inherit; /* 2 */ - display: table; /* 1 */ - max-width: 100%; /* 1 */ - white-space: normal; /* 1 */ -}/** - * 1. Add the correct display in Edge 18- and IE. - * 2. Add the correct vertical alignment in Chrome, Edge, and Firefox. + * Add the correct vertical alignment in Chrome, Edge, and Firefox. */ -progress { - display: inline-block; /* 1 */ - vertical-align: baseline; /* 2 */ +:where(progress) { + vertical-align: baseline; }/** * Remove the inheritance of text transform in Firefox. */ -select { +:where(select) { text-transform: none; }/** - * 1. Remove the margin in Firefox and Safari. - * 2. Remove the default vertical scrollbar in IE. + * Remove the margin in Firefox and Safari. */ -textarea { - margin: 0; /* 1 */ - overflow: auto; /* 2 */ +:where(textarea) { + margin: 0; }/** * 1. Correct the odd appearance in Chrome, Edge, and Safari. * 2. Correct the outline style in Safari. */ -[type="search"] { +:where(input[type="search" i]) { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ }/** @@ -183,35 +128,28 @@ textarea { }/** * Remove the inner border and padding of focus outlines in Firefox. */ -::-moz-focus-inner { +:where(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i]))::-moz-focus-inner { border-style: none; padding: 0; }/** * Restore the focus outline styles unset by the previous rule in Firefox. */ -:-moz-focusring { +:where(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i]))::-moz-focusring { outline: 1px dotted ButtonText; }/** * Remove the additional :invalid styles in Firefox. */ -:-moz-ui-invalid { +:where(:-moz-ui-invalid) { box-shadow: none; }/* Interactive * ========================================================================== *//* - * Add the correct display in Edge 18- and IE. - */ -details { - display: block; -}/* - * Add the correct styles in Edge 18-, IE, and Safari. + * Add the correct styles in Safari. */ -dialog { +:where(dialog) { background-color: white; border: solid; color: black; - display: block; height: -moz-fit-content; - height: -webkit-fit-content; height: fit-content; left: 0; margin: auto; @@ -219,21 +157,13 @@ dialog { position: absolute; right: 0; width: -moz-fit-content; - width: -webkit-fit-content; width: fit-content; } -dialog:not([open]) { +:where(dialog:not([open])) { display: none; }/* * Add the correct display in all browsers. */ -summary { +:where(summary) { display: list-item; -}/* Scripting - * ========================================================================== *//** - * Add the correct display in IE. - */ -template { - display: none; -}/* User interaction - * ========================================================================== */ \ No newline at end of file +} \ No newline at end of file diff --git a/test/force-sanitize-all.expect.css b/test/force-sanitize-all.expect.css index 6478cc5..d1d5523 100644 --- a/test/force-sanitize-all.expect.css +++ b/test/force-sanitize-all.expect.css @@ -1,11 +1,12 @@ /* Document * ========================================================================== *//** - * Add border box sizing in all browsers (opinionated). + * 1. Add border box sizing in all browsers (opinionated). + * 2. Backgrounds do not repeat by default (opinionated). */ *, ::before, ::after { - box-sizing: border-box; + box-sizing: border-box; /* 1 */ }/** * 1. Add text decoration inheritance in all browsers (opinionated). * 2. Add vertical alignment inheritance in all browsers (opinionated). @@ -17,207 +18,149 @@ }/** * 1. Use the default cursor in all browsers (opinionated). * 2. Change the line height in all browsers (opinionated). - * 3. Use a 4-space tab width in all browsers (opinionated). - * 4. Remove the grey highlight on links in iOS (opinionated). - * 5. Prevent adjustments of font size after orientation changes in - * IE on Windows Phone and in iOS. - * 6. Breaks words to prevent overflow in all browsers (opinionated). + * 3. Breaks words to prevent overflow in all browsers (opinionated). + * 4. Use a 4-space tab width in all browsers (opinionated). + * 5. Remove the grey highlight on links in iOS (opinionated). + * 6. Prevent adjustments of font size after orientation changes in iOS. */ -html { +:where(:root) { cursor: default; /* 1 */ line-height: 1.5; /* 2 */ - -moz-tab-size: 4; /* 3 */ - tab-size: 4; /* 3 */ - -webkit-tap-highlight-color: transparent /* 4 */; - -ms-text-size-adjust: 100%; /* 5 */ - -webkit-text-size-adjust: 100%; /* 5 */ - word-break: break-word; /* 6 */ + overflow-wrap: break-word; /* 3 */ + -moz-tab-size: 4; /* 4 */ + tab-size: 4; /* 4 */ + -webkit-tap-highlight-color: transparent; /* 5 */ + -webkit-text-size-adjust: 100%; /* 6 */ }/* Sections * ========================================================================== *//** * Remove the margin in all browsers (opinionated). */ -body { +:where(body) { margin: 0; }/** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Edge, Firefox, and Safari. */ -h1 { +:where(h1) { font-size: 2em; margin: 0.67em 0; }/* Grouping content * ========================================================================== *//** - * Remove the margin on nested lists in Chrome, Edge, IE, and Safari. + * Remove the margin on nested lists in Chrome, Edge, and Safari. */ -dl dl, -dl ol, -dl ul, -ol dl, -ul dl { +:where(dl, ol, ul) :where(dl, ol, ul) { margin: 0; }/** - * Remove the margin on nested lists in Edge 18- and IE. + * 1. Correct the inheritance of border color in Firefox. + * 2. Add the correct box sizing in Firefox. */ -ol ol, -ol ul, -ul ol, -ul ul { - margin: 0; -}/** - * 1. Add the correct sizing in Firefox. - * 2. Show the overflow in Edge 18- and IE. - */ -hr { - height: 0; /* 1 */ - overflow: visible; /* 2 */ -}/** - * Add the correct display in IE. - */ -main { - display: block; +:where(hr) { + color: inherit; /* 1 */ + height: 0; /* 2 */ }/** * Remove the list style on navigation lists in all browsers (opinionated). */ -nav ol, -nav ul { - list-style: none; +:where(nav) :where(ol, ul) { + list-style-type: none; padding: 0; +}/** + * Prevent VoiceOver from ignoring list semantics in Safari (opinionated). + */ +:where(nav li)::before { + content: "\200B"; + float: left; }/** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. + * 3. Prevent overflow of the container in all browsers (opinionated). */ -pre { +:where(pre) { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ + overflow: auto; /* 3 */ }/* Text-level semantics * ========================================================================== *//** - * Add the correct text decoration in Edge 18-, IE, and Safari. + * Add the correct text decoration in Safari. */ -abbr[title] { +:where(abbr[title]) { text-decoration: underline; text-decoration: underline dotted; }/** * Add the correct font weight in Chrome, Edge, and Safari. */ -b, -strong { +:where(b, strong) { font-weight: bolder; }/** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ -code, -kbd, -samp { +:where(code, kbd, samp) { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ }/** * Add the correct font size in all browsers. */ -small { +:where(small) { font-size: 80%; }/* Embedded content * ========================================================================== *//* * Change the alignment on media elements in all browsers (opinionated). */ -audio, -canvas, -iframe, -img, -svg, -video { +:where(audio, canvas, iframe, img, svg, video) { vertical-align: middle; }/** * Remove the border on iframes in all browsers (opinionated). */ -iframe { +:where(iframe) { border-style: none; }/** * Change the fill color to match the text color in all browsers (opinionated). */ -svg:not([fill]) { +:where(svg:not([fill])) { fill: currentColor; -}/** - * Hide the overflow in IE. - */ -svg:not(:root) { - overflow: hidden; }/* Tabular data * ========================================================================== *//** - * Collapse border spacing in all browsers (opinionated). - */ -table { - border-collapse: collapse; + * 1. Collapse border spacing in all browsers (opinionated). + * 2. Correct table border color inheritance in all Chrome, Edge, and Safari. + * 3. Remove text indentation from table contents in Chrome, Edge, and Safari. + */ +:where(table) { + border-collapse: collapse; /* 1 */ + border-color: inherit; /* 2 */ + text-indent: 0; /* 3 */ }/* Forms * ========================================================================== *//** * Remove the margin on controls in Safari. */ -button, -input, -select { +:where(button, input, select) { margin: 0; -}/** - * 1. Show the overflow in IE. - * 2. Remove the inheritance of text transform in Edge 18-, Firefox, and IE. - */ -button { - overflow: visible; /* 1 */ - text-transform: none; /* 2 */ }/** * Correct the inability to style buttons in iOS and Safari. */ -button, -[type="button"], -[type="reset"], -[type="submit"] { +:where(button, [type="button" i], [type="reset" i], [type="submit" i]) { -webkit-appearance: button; }/** - * 1. Change the inconsistent appearance in all browsers (opinionated). - * 2. Correct the padding in Firefox. - */ -fieldset { - border: 1px solid #a0a0a0; /* 1 */ - padding: 0.35em 0.75em 0.625em; /* 2 */ -}/** - * Show the overflow in Edge 18- and IE. - */ -input { - overflow: visible; -}/** - * 1. Correct the text wrapping in Edge 18- and IE. - * 2. Correct the color inheritance from `fieldset` elements in IE. - */ -legend { - color: inherit; /* 2 */ - display: table; /* 1 */ - max-width: 100%; /* 1 */ - white-space: normal; /* 1 */ -}/** - * 1. Add the correct display in Edge 18- and IE. - * 2. Add the correct vertical alignment in Chrome, Edge, and Firefox. + * Change the inconsistent appearance in all browsers (opinionated). */ -progress { - display: inline-block; /* 1 */ - vertical-align: baseline; /* 2 */ +:where(fieldset) { + border: 1px solid #a0a0a0; }/** - * Remove the inheritance of text transform in Firefox. + * Add the correct vertical alignment in Chrome, Edge, and Firefox. */ -select { - text-transform: none; +:where(progress) { + vertical-align: baseline; }/** * 1. Remove the margin in Firefox and Safari. - * 2. Remove the default vertical scrollbar in IE. * 3. Change the resize direction in all browsers (opinionated). */ -textarea { +:where(textarea) { margin: 0; /* 1 */ - overflow: auto; /* 2 */ resize: vertical; /* 3 */ }/** * 1. Correct the odd appearance in Chrome, Edge, and Safari. * 2. Correct the outline style in Safari. */ -[type="search"] { +:where([type="search" i]) { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ }/** @@ -244,38 +187,15 @@ textarea { ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ -}/** - * Remove the inner border and padding of focus outlines in Firefox. - */ -::-moz-focus-inner { - border-style: none; - padding: 0; -}/** - * Restore the focus outline styles unset by the previous rule in Firefox. - */ -:-moz-focusring { - outline: 1px dotted ButtonText; -}/** - * Remove the additional :invalid styles in Firefox. - */ -:-moz-ui-invalid { - box-shadow: none; }/* Interactive * ========================================================================== *//* - * Add the correct display in Edge 18- and IE. - */ -details { - display: block; -}/* - * Add the correct styles in Edge 18-, IE, and Safari. + * Add the correct styles in Safari. */ -dialog { +:where(dialog) { background-color: white; border: solid; color: black; - display: block; height: -moz-fit-content; - height: -webkit-fit-content; height: fit-content; left: 0; margin: auto; @@ -283,75 +203,47 @@ dialog { position: absolute; right: 0; width: -moz-fit-content; - width: -webkit-fit-content; width: fit-content; } -dialog:not([open]) { +:where(dialog:not([open])) { display: none; }/* - * Add the correct display in all browsers. + * Add the correct display in Safari. */ -summary { +:where(details > summary:first-of-type) { display: list-item; -}/* Scripting - * ========================================================================== *//** - * Add the correct display in IE. - */ -template { - display: none; -}/* User interaction - * ========================================================================== *//* - * 1. Remove the tapping delay in IE 10. - * 2. Remove the tapping delay on clickable elements - in all browsers (opinionated). - */ -a, -area, -button, -input, -label, -select, -summary, -textarea, -[tabindex] { - -ms-touch-action: manipulation; /* 1 */ - touch-action: manipulation; /* 2 */ }/* Accessibility * ========================================================================== *//** * Change the cursor on busy elements in all browsers (opinionated). */ -[aria-busy="true"] { +:where([aria-busy="true" i]) { cursor: progress; }/* * Change the cursor on control elements in all browsers (opinionated). */ -[aria-controls] { +:where([aria-controls]) { cursor: pointer; }/* * Change the cursor on disabled, not-editable, or otherwise * inoperable elements in all browsers (opinionated). */ -[aria-disabled="true"], -[disabled] { +:where([aria-disabled="true" i], [disabled]) { cursor: not-allowed; }/* * Change the display on visually hidden accessible elements * in all browsers (opinionated). */ -[aria-hidden="false"][hidden] { +:where([aria-hidden="false" i][hidden]) { display: initial; } -[aria-hidden="false"][hidden]:not(:focus) { +:where([aria-hidden="false" i][hidden]:not(:focus)) { clip: rect(0, 0, 0, 0); position: absolute; }/** * 1. Change the inconsistent appearance in all browsers (opinionated). * 2. Add typography inheritance in all browsers (opinionated). */ -button, -input, -select, -textarea { +:where(button, input, select, textarea) { background-color: transparent; /* 1 */ border: 1px solid WindowFrame; /* 1 */ color: inherit; /* 1 */ @@ -361,82 +253,15 @@ textarea { }/** * Change the inconsistent appearance in all browsers (opinionated). */ -select { - -moz-appearance: none; - -webkit-appearance: none; - background: no-repeat right center / 1em; +:where(select) { + appearance: none; + background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E") no-repeat right center / 1em; border-radius: 0; padding-right: 1em; }/** - * Change the inconsistent appearance in all browsers (opinionated). - */ -select:not([multiple]):not([size]) { - background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E"); -}/** - * Change the inconsistent appearance in IE (opinionated). + * Remove the border and padding in all browsers (opinionated). */ -::-ms-expand { - display: none; -}/** - * Correct the inconsistent appearance in IE (opinionated). - */ -:-ms-input-placeholder { - color: rgba(0, 0, 0, 0.54); -}/** - * Use a comfortable measure in all browsers (opinionated). - */ -html { - padding: 1em; -} -@media (min-width: 34em) { - html { - padding: 1em calc(50% - 16em); - } -}/** - * Restrict sizing to the page width in all browsers (opinionated). - */ -iframe, -img, -input, -select, -textarea { - height: auto; - max-width: 100%; -}/** - * Use the default user interface font in all browsers (opinionated). - */ -html { - font-family: - system-ui, - /* macOS 10.11-10.12 */ -apple-system, - /* Windows 6+ */ "Segoe UI", - /* Android 4+ */ "Roboto", - /* Ubuntu 10.10+ */ "Ubuntu", - /* Gnome 3+ */ "Cantarell", - /* KDE Plasma 5+ */ "Noto Sans", - /* fallback */ sans-serif, - /* macOS emoji */ "Apple Color Emoji", - /* Windows emoji */ "Segoe UI Emoji", - /* Windows emoji */ "Segoe UI Symbol", - /* Linux emoji */ "Noto Color Emoji"; -}/** - * Use the default monospace user interface font in all browsers (opinionated). - */ -code, -kbd, -samp, -pre { - font-family: - /* macOS 10.10+ */ "Menlo", - /* Windows 6+ */ "Consolas", - /* Android 4+ */ "Roboto Mono", - /* Ubuntu 10.10+ */ "Ubuntu Monospace", - /* KDE Plasma 5+ */ "Noto Mono", - /* KDE Plasma 4+ */ "Oxygen Mono", - /* Linux/OpenOffice fallback */ "Liberation Mono", - /* fallback */ monospace, - /* macOS emoji */ "Apple Color Emoji", - /* Windows emoji */ "Segoe UI Emoji", - /* Windows emoji */ "Segoe UI Symbol", - /* Linux emoji */ "Noto Color Emoji"; +:where([type="color" i], [type="range" i]) { + border-width: 0; + padding: 0; } \ No newline at end of file diff --git a/test/force-sanitize.expect.css b/test/force-sanitize.expect.css index bd62638..efbe5fa 100644 --- a/test/force-sanitize.expect.css +++ b/test/force-sanitize.expect.css @@ -1,11 +1,12 @@ /* Document * ========================================================================== *//** - * Add border box sizing in all browsers (opinionated). + * 1. Add border box sizing in all browsers (opinionated). + * 2. Backgrounds do not repeat by default (opinionated). */ *, ::before, ::after { - box-sizing: border-box; + box-sizing: border-box; /* 1 */ }/** * 1. Add text decoration inheritance in all browsers (opinionated). * 2. Add vertical alignment inheritance in all browsers (opinionated). @@ -17,207 +18,149 @@ }/** * 1. Use the default cursor in all browsers (opinionated). * 2. Change the line height in all browsers (opinionated). - * 3. Use a 4-space tab width in all browsers (opinionated). - * 4. Remove the grey highlight on links in iOS (opinionated). - * 5. Prevent adjustments of font size after orientation changes in - * IE on Windows Phone and in iOS. - * 6. Breaks words to prevent overflow in all browsers (opinionated). + * 3. Breaks words to prevent overflow in all browsers (opinionated). + * 4. Use a 4-space tab width in all browsers (opinionated). + * 5. Remove the grey highlight on links in iOS (opinionated). + * 6. Prevent adjustments of font size after orientation changes in iOS. */ -html { +:where(:root) { cursor: default; /* 1 */ line-height: 1.5; /* 2 */ - -moz-tab-size: 4; /* 3 */ - tab-size: 4; /* 3 */ - -webkit-tap-highlight-color: transparent /* 4 */; - -ms-text-size-adjust: 100%; /* 5 */ - -webkit-text-size-adjust: 100%; /* 5 */ - word-break: break-word; /* 6 */ + overflow-wrap: break-word; /* 3 */ + -moz-tab-size: 4; /* 4 */ + tab-size: 4; /* 4 */ + -webkit-tap-highlight-color: transparent; /* 5 */ + -webkit-text-size-adjust: 100%; /* 6 */ }/* Sections * ========================================================================== *//** * Remove the margin in all browsers (opinionated). */ -body { +:where(body) { margin: 0; }/** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Edge, Firefox, and Safari. */ -h1 { +:where(h1) { font-size: 2em; margin: 0.67em 0; }/* Grouping content * ========================================================================== *//** - * Remove the margin on nested lists in Chrome, Edge, IE, and Safari. + * Remove the margin on nested lists in Chrome, Edge, and Safari. */ -dl dl, -dl ol, -dl ul, -ol dl, -ul dl { +:where(dl, ol, ul) :where(dl, ol, ul) { margin: 0; }/** - * Remove the margin on nested lists in Edge 18- and IE. + * 1. Correct the inheritance of border color in Firefox. + * 2. Add the correct box sizing in Firefox. */ -ol ol, -ol ul, -ul ol, -ul ul { - margin: 0; -}/** - * 1. Add the correct sizing in Firefox. - * 2. Show the overflow in Edge 18- and IE. - */ -hr { - height: 0; /* 1 */ - overflow: visible; /* 2 */ -}/** - * Add the correct display in IE. - */ -main { - display: block; +:where(hr) { + color: inherit; /* 1 */ + height: 0; /* 2 */ }/** * Remove the list style on navigation lists in all browsers (opinionated). */ -nav ol, -nav ul { - list-style: none; +:where(nav) :where(ol, ul) { + list-style-type: none; padding: 0; +}/** + * Prevent VoiceOver from ignoring list semantics in Safari (opinionated). + */ +:where(nav li)::before { + content: "\200B"; + float: left; }/** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. + * 3. Prevent overflow of the container in all browsers (opinionated). */ -pre { +:where(pre) { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ + overflow: auto; /* 3 */ }/* Text-level semantics * ========================================================================== *//** - * Add the correct text decoration in Edge 18-, IE, and Safari. + * Add the correct text decoration in Safari. */ -abbr[title] { +:where(abbr[title]) { text-decoration: underline; text-decoration: underline dotted; }/** * Add the correct font weight in Chrome, Edge, and Safari. */ -b, -strong { +:where(b, strong) { font-weight: bolder; }/** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ -code, -kbd, -samp { +:where(code, kbd, samp) { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ }/** * Add the correct font size in all browsers. */ -small { +:where(small) { font-size: 80%; }/* Embedded content * ========================================================================== *//* * Change the alignment on media elements in all browsers (opinionated). */ -audio, -canvas, -iframe, -img, -svg, -video { +:where(audio, canvas, iframe, img, svg, video) { vertical-align: middle; }/** * Remove the border on iframes in all browsers (opinionated). */ -iframe { +:where(iframe) { border-style: none; }/** * Change the fill color to match the text color in all browsers (opinionated). */ -svg:not([fill]) { +:where(svg:not([fill])) { fill: currentColor; -}/** - * Hide the overflow in IE. - */ -svg:not(:root) { - overflow: hidden; }/* Tabular data * ========================================================================== *//** - * Collapse border spacing in all browsers (opinionated). - */ -table { - border-collapse: collapse; + * 1. Collapse border spacing in all browsers (opinionated). + * 2. Correct table border color inheritance in all Chrome, Edge, and Safari. + * 3. Remove text indentation from table contents in Chrome, Edge, and Safari. + */ +:where(table) { + border-collapse: collapse; /* 1 */ + border-color: inherit; /* 2 */ + text-indent: 0; /* 3 */ }/* Forms * ========================================================================== *//** * Remove the margin on controls in Safari. */ -button, -input, -select { +:where(button, input, select) { margin: 0; -}/** - * 1. Show the overflow in IE. - * 2. Remove the inheritance of text transform in Edge 18-, Firefox, and IE. - */ -button { - overflow: visible; /* 1 */ - text-transform: none; /* 2 */ }/** * Correct the inability to style buttons in iOS and Safari. */ -button, -[type="button"], -[type="reset"], -[type="submit"] { +:where(button, [type="button" i], [type="reset" i], [type="submit" i]) { -webkit-appearance: button; }/** - * 1. Change the inconsistent appearance in all browsers (opinionated). - * 2. Correct the padding in Firefox. + * Change the inconsistent appearance in all browsers (opinionated). */ -fieldset { - border: 1px solid #a0a0a0; /* 1 */ - padding: 0.35em 0.75em 0.625em; /* 2 */ +:where(fieldset) { + border: 1px solid #a0a0a0; }/** - * Show the overflow in Edge 18- and IE. + * Add the correct vertical alignment in Chrome, Edge, and Firefox. */ -input { - overflow: visible; -}/** - * 1. Correct the text wrapping in Edge 18- and IE. - * 2. Correct the color inheritance from `fieldset` elements in IE. - */ -legend { - color: inherit; /* 2 */ - display: table; /* 1 */ - max-width: 100%; /* 1 */ - white-space: normal; /* 1 */ -}/** - * 1. Add the correct display in Edge 18- and IE. - * 2. Add the correct vertical alignment in Chrome, Edge, and Firefox. - */ -progress { - display: inline-block; /* 1 */ - vertical-align: baseline; /* 2 */ -}/** - * Remove the inheritance of text transform in Firefox. - */ -select { - text-transform: none; +:where(progress) { + vertical-align: baseline; }/** * 1. Remove the margin in Firefox and Safari. - * 2. Remove the default vertical scrollbar in IE. * 3. Change the resize direction in all browsers (opinionated). */ -textarea { +:where(textarea) { margin: 0; /* 1 */ - overflow: auto; /* 2 */ resize: vertical; /* 3 */ }/** * 1. Correct the odd appearance in Chrome, Edge, and Safari. * 2. Correct the outline style in Safari. */ -[type="search"] { +:where([type="search" i]) { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ }/** @@ -244,38 +187,15 @@ textarea { ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ -}/** - * Remove the inner border and padding of focus outlines in Firefox. - */ -::-moz-focus-inner { - border-style: none; - padding: 0; -}/** - * Restore the focus outline styles unset by the previous rule in Firefox. - */ -:-moz-focusring { - outline: 1px dotted ButtonText; -}/** - * Remove the additional :invalid styles in Firefox. - */ -:-moz-ui-invalid { - box-shadow: none; }/* Interactive * ========================================================================== *//* - * Add the correct display in Edge 18- and IE. - */ -details { - display: block; -}/* - * Add the correct styles in Edge 18-, IE, and Safari. + * Add the correct styles in Safari. */ -dialog { +:where(dialog) { background-color: white; border: solid; color: black; - display: block; height: -moz-fit-content; - height: -webkit-fit-content; height: fit-content; left: 0; margin: auto; @@ -283,65 +203,40 @@ dialog { position: absolute; right: 0; width: -moz-fit-content; - width: -webkit-fit-content; width: fit-content; } -dialog:not([open]) { +:where(dialog:not([open])) { display: none; }/* - * Add the correct display in all browsers. + * Add the correct display in Safari. */ -summary { +:where(details > summary:first-of-type) { display: list-item; -}/* Scripting - * ========================================================================== *//** - * Add the correct display in IE. - */ -template { - display: none; -}/* User interaction - * ========================================================================== *//* - * 1. Remove the tapping delay in IE 10. - * 2. Remove the tapping delay on clickable elements - in all browsers (opinionated). - */ -a, -area, -button, -input, -label, -select, -summary, -textarea, -[tabindex] { - -ms-touch-action: manipulation; /* 1 */ - touch-action: manipulation; /* 2 */ }/* Accessibility * ========================================================================== *//** * Change the cursor on busy elements in all browsers (opinionated). */ -[aria-busy="true"] { +:where([aria-busy="true" i]) { cursor: progress; }/* * Change the cursor on control elements in all browsers (opinionated). */ -[aria-controls] { +:where([aria-controls]) { cursor: pointer; }/* * Change the cursor on disabled, not-editable, or otherwise * inoperable elements in all browsers (opinionated). */ -[aria-disabled="true"], -[disabled] { +:where([aria-disabled="true" i], [disabled]) { cursor: not-allowed; }/* * Change the display on visually hidden accessible elements * in all browsers (opinionated). */ -[aria-hidden="false"][hidden] { +:where([aria-hidden="false" i][hidden]) { display: initial; } -[aria-hidden="false"][hidden]:not(:focus) { +:where([aria-hidden="false" i][hidden]:not(:focus)) { clip: rect(0, 0, 0, 0); position: absolute; } \ No newline at end of file diff --git a/test/import-normalize-opinionated.expect.css b/test/import-normalize-opinionated.expect.css index ee27825..051d098 100644 --- a/test/import-normalize-opinionated.expect.css +++ b/test/import-normalize-opinionated.expect.css @@ -3,14 +3,13 @@ /** * 1. Correct the line height in all browsers. - * 2. Prevent adjustments of font size after orientation changes in - * IE on Windows Phone and in iOS. + * 2. Prevent adjustments of font size after orientation changes in iOS. */ -html { +:where(html) { line-height: 1.15; /* 1 */ - -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ + text-size-adjust: 100%; /* 2 */ } /* Sections @@ -20,7 +19,7 @@ html { * Remove the margin in all browsers. (opinionated) */ -body { +:where(body) { margin: 0; } @@ -29,74 +28,43 @@ body { * `article` contexts in Chrome, Edge, Firefox, and Safari. */ -h1 { +:where(h1) { font-size: 2em; - margin: 0.67em 0; + margin-block-end: 0.67em; + margin-block-start: 0.67em; } /* Grouping content * ========================================================================== */ /** - * Remove the margin on nested lists in Chrome, Edge, IE, and Safari. - */ - -dl dl, -dl ol, -dl ul, -ol dl, -ul dl { - margin: 0; -} - -/** - * Remove the margin on nested lists in Edge 18- and IE. + * Remove the margin on nested lists in Chrome, Edge, and Safari. */ -ol ol, -ol ul, -ul ol, -ul ul { - margin: 0; +:where(dl, ol, ul) :where(dl, ol, ul) { + margin-block-end: 0; + margin-block-start: 0; } /** * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge 18- and IE. + * 2. Correct the inheritance of border color in Firefox. */ -hr { +:where(hr) { box-sizing: content-box; /* 1 */ + color: inherit; /* 2 */ height: 0; /* 1 */ - overflow: visible; /* 2 */ -} - -/** - * Add the correct display in IE. - */ - -main { - display: block; -} - -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - -pre { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ } /* Text-level semantics * ========================================================================== */ /** - * Add the correct text decoration in Edge 18-, IE, and Safari. + * Add the correct text decoration in Safari. */ -abbr[title] { +:where(abbr[title]) { text-decoration: underline; text-decoration: underline dotted; } @@ -105,8 +73,7 @@ abbr[title] { * Add the correct font weight in Chrome, Edge, and Safari. */ -b, -strong { +:where(b, strong) { font-weight: bolder; } @@ -115,9 +82,7 @@ strong { * 2. Correct the odd `em` font sizing in all browsers. */ -code, -kbd, -samp { +:where(code, kbd, pre, samp) { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } @@ -126,19 +91,21 @@ samp { * Add the correct font size in all browsers. */ -small { +:where(small) { font-size: 80%; } -/* Embedded content +/* Tabular data * ========================================================================== */ /** - * Hide the overflow in IE. + * 1. Correct table border color in Chrome, Edge, and Safari. + * 2. Remove text indentation from table contents in Chrome, Edge, and Safari. */ -svg:not(:root) { - overflow: hidden; +:where(table) { + border-color: currentColor; /* 1 */ + text-indent: 0; /* 2 */ } /* Forms @@ -148,92 +115,48 @@ svg:not(:root) { * Remove the margin on controls in Safari. */ -button, -input, -select { +:where(button, input, select) { margin: 0; } /** - * 1. Show the overflow in IE. - * 2. Remove the inheritance of text transform in Edge 18-, Firefox, and IE. + * Remove the inheritance of text transform in Firefox. */ -button { - overflow: visible; /* 1 */ - text-transform: none; /* 2 */ +:where(button) { + text-transform: none; } /** * Correct the inability to style buttons in iOS and Safari. */ -button, -[type="button"], -[type="reset"], -[type="submit"] { +:where(button, input:is([type="button" i], [type="reset" i], [type="submit" i])) { -webkit-appearance: button; } /** - * Correct the padding in Firefox. - */ - -fieldset { - padding: 0.35em 0.75em 0.625em; -} - -/** - * Show the overflow in Edge 18- and IE. - */ - -input { - overflow: visible; -} - -/** - * 1. Correct the text wrapping in Edge 18- and IE. - * 2. Correct the color inheritance from `fieldset` elements in IE. + * Add the correct vertical alignment in Chrome, Edge, and Firefox. */ -legend { - box-sizing: border-box; /* 1 */ - color: inherit; /* 2 */ - display: table; /* 1 */ - max-width: 100%; /* 1 */ - white-space: normal; /* 1 */ -} - -/** - * 1. Add the correct display in Edge 18- and IE. - * 2. Add the correct vertical alignment in Chrome, Edge, and Firefox. - */ - -progress { - display: inline-block; /* 1 */ - vertical-align: baseline; /* 2 */ +:where(progress) { + vertical-align: baseline; } /** * Remove the inheritance of text transform in Firefox. */ -select { +:where(select) { text-transform: none; } /** - * 1. Change the font styles in all browsers (opinionated). - * 2. Remove the margin in Firefox and Safari. - * 3. Remove the default vertical scrollbar in IE. + * Remove the margin in Firefox and Safari. */ -textarea { - font-family: inherit; /* 1 */ - font-size: 100%; /* 1 */ - line-height: 1.15; /* 1 */ - margin: 0; /* 2 */ - overflow: auto; /* 3 */ +:where(textarea) { + margin: 0; } /** @@ -241,7 +164,7 @@ textarea { * 2. Correct the outline style in Safari. */ -[type="search"] { +:where(input[type="search" i]) { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } @@ -286,7 +209,7 @@ textarea { * Remove the inner border and padding of focus outlines in Firefox. */ -::-moz-focus-inner { +:where(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i]))::-moz-focus-inner { border-style: none; padding: 0; } @@ -295,7 +218,7 @@ textarea { * Restore the focus outline styles unset by the previous rule in Firefox. */ -:-moz-focusring { +:where(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i]))::-moz-focusring { outline: 1px dotted ButtonText; } @@ -303,7 +226,7 @@ textarea { * Remove the additional :invalid styles in Firefox. */ -:-moz-ui-invalid { +:where(:-moz-ui-invalid) { box-shadow: none; } @@ -311,24 +234,14 @@ textarea { * ========================================================================== */ /* - * Add the correct display in Edge 18- and IE. + * Add the correct styles in Safari. */ -details { - display: block; -} - -/* - * Add the correct styles in Edge 18-, IE, and Safari. - */ - -dialog { +:where(dialog) { background-color: white; border: solid; color: black; - display: block; height: -moz-fit-content; - height: -webkit-fit-content; height: fit-content; left: 0; margin: auto; @@ -336,11 +249,10 @@ dialog { position: absolute; right: 0; width: -moz-fit-content; - width: -webkit-fit-content; width: fit-content; } -dialog:not([open]) { +:where(dialog:not([open])) { display: none; } @@ -348,24 +260,10 @@ dialog:not([open]) { * Add the correct display in all browsers. */ -summary { +:where(summary) { display: list-item; } -/* Scripting - * ========================================================================== */ - -/** - * Add the correct display in IE. - */ - -template { - display: none; -} - -/* User interaction - * ========================================================================== */ - body { font-family: sans-serif; } diff --git a/test/import-normalize.expect.css b/test/import-normalize.expect.css index 6a44ed4..a7d4961 100644 --- a/test/import-normalize.expect.css +++ b/test/import-normalize.expect.css @@ -3,14 +3,13 @@ /** * 1. Correct the line height in all browsers. - * 2. Prevent adjustments of font size after orientation changes in - * IE on Windows Phone and in iOS. + * 2. Prevent adjustments of font size after orientation changes in iOS. */ -html { +:where(html) { line-height: 1.15; /* 1 */ - -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ + text-size-adjust: 100%; /* 2 */ } /* Sections @@ -21,74 +20,43 @@ html { * `article` contexts in Chrome, Edge, Firefox, and Safari. */ -h1 { +:where(h1) { font-size: 2em; - margin: 0.67em 0; + margin-block-end: 0.67em; + margin-block-start: 0.67em; } /* Grouping content * ========================================================================== */ /** - * Remove the margin on nested lists in Chrome, Edge, IE, and Safari. + * Remove the margin on nested lists in Chrome, Edge, and Safari. */ -dl dl, -dl ol, -dl ul, -ol dl, -ul dl { - margin: 0; -} - -/** - * Remove the margin on nested lists in Edge 18- and IE. - */ - -ol ol, -ol ul, -ul ol, -ul ul { - margin: 0; +:where(dl, ol, ul) :where(dl, ol, ul) { + margin-block-end: 0; + margin-block-start: 0; } /** * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge 18- and IE. + * 2. Correct the inheritance of border color in Firefox. */ -hr { +:where(hr) { box-sizing: content-box; /* 1 */ + color: inherit; /* 2 */ height: 0; /* 1 */ - overflow: visible; /* 2 */ -} - -/** - * Add the correct display in IE. - */ - -main { - display: block; -} - -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - -pre { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ } /* Text-level semantics * ========================================================================== */ /** - * Add the correct text decoration in Edge 18-, IE, and Safari. + * Add the correct text decoration in Safari. */ -abbr[title] { +:where(abbr[title]) { text-decoration: underline; text-decoration: underline dotted; } @@ -97,8 +65,7 @@ abbr[title] { * Add the correct font weight in Chrome, Edge, and Safari. */ -b, -strong { +:where(b, strong) { font-weight: bolder; } @@ -107,9 +74,7 @@ strong { * 2. Correct the odd `em` font sizing in all browsers. */ -code, -kbd, -samp { +:where(code, kbd, pre, samp) { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } @@ -118,19 +83,21 @@ samp { * Add the correct font size in all browsers. */ -small { +:where(small) { font-size: 80%; } -/* Embedded content +/* Tabular data * ========================================================================== */ /** - * Hide the overflow in IE. + * 1. Correct table border color in Chrome, Edge, and Safari. + * 2. Remove text indentation from table contents in Chrome, Edge, and Safari. */ -svg:not(:root) { - overflow: hidden; +:where(table) { + border-color: currentColor; /* 1 */ + text-indent: 0; /* 2 */ } /* Forms @@ -140,88 +107,48 @@ svg:not(:root) { * Remove the margin on controls in Safari. */ -button, -input, -select { +:where(button, input, select) { margin: 0; } /** - * 1. Show the overflow in IE. - * 2. Remove the inheritance of text transform in Edge 18-, Firefox, and IE. + * Remove the inheritance of text transform in Firefox. */ -button { - overflow: visible; /* 1 */ - text-transform: none; /* 2 */ +:where(button) { + text-transform: none; } /** * Correct the inability to style buttons in iOS and Safari. */ -button, -[type="button"], -[type="reset"], -[type="submit"] { +:where(button, input:is([type="button" i], [type="reset" i], [type="submit" i])) { -webkit-appearance: button; } /** - * Correct the padding in Firefox. - */ - -fieldset { - padding: 0.35em 0.75em 0.625em; -} - -/** - * Show the overflow in Edge 18- and IE. + * Add the correct vertical alignment in Chrome, Edge, and Firefox. */ -input { - overflow: visible; -} - -/** - * 1. Correct the text wrapping in Edge 18- and IE. - * 2. Correct the color inheritance from `fieldset` elements in IE. - */ - -legend { - box-sizing: border-box; /* 1 */ - color: inherit; /* 2 */ - display: table; /* 1 */ - max-width: 100%; /* 1 */ - white-space: normal; /* 1 */ -} - -/** - * 1. Add the correct display in Edge 18- and IE. - * 2. Add the correct vertical alignment in Chrome, Edge, and Firefox. - */ - -progress { - display: inline-block; /* 1 */ - vertical-align: baseline; /* 2 */ +:where(progress) { + vertical-align: baseline; } /** * Remove the inheritance of text transform in Firefox. */ -select { +:where(select) { text-transform: none; } /** - * 1. Remove the margin in Firefox and Safari. - * 2. Remove the default vertical scrollbar in IE. + * Remove the margin in Firefox and Safari. */ -textarea { - margin: 0; /* 1 */ - overflow: auto; /* 2 */ +:where(textarea) { + margin: 0; } /** @@ -229,7 +156,7 @@ textarea { * 2. Correct the outline style in Safari. */ -[type="search"] { +:where(input[type="search" i]) { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } @@ -274,7 +201,7 @@ textarea { * Remove the inner border and padding of focus outlines in Firefox. */ -::-moz-focus-inner { +:where(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i]))::-moz-focus-inner { border-style: none; padding: 0; } @@ -283,7 +210,7 @@ textarea { * Restore the focus outline styles unset by the previous rule in Firefox. */ -:-moz-focusring { +:where(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i]))::-moz-focusring { outline: 1px dotted ButtonText; } @@ -291,7 +218,7 @@ textarea { * Remove the additional :invalid styles in Firefox. */ -:-moz-ui-invalid { +:where(:-moz-ui-invalid) { box-shadow: none; } @@ -299,24 +226,14 @@ textarea { * ========================================================================== */ /* - * Add the correct display in Edge 18- and IE. - */ - -details { - display: block; -} - -/* - * Add the correct styles in Edge 18-, IE, and Safari. + * Add the correct styles in Safari. */ -dialog { +:where(dialog) { background-color: white; border: solid; color: black; - display: block; height: -moz-fit-content; - height: -webkit-fit-content; height: fit-content; left: 0; margin: auto; @@ -324,11 +241,10 @@ dialog { position: absolute; right: 0; width: -moz-fit-content; - width: -webkit-fit-content; width: fit-content; } -dialog:not([open]) { +:where(dialog:not([open])) { display: none; } @@ -336,26 +252,10 @@ dialog:not([open]) { * Add the correct display in all browsers. */ -summary { +:where(summary) { display: list-item; } -/* Scripting - * ========================================================================== */ - -/** - * Add the correct display in IE. - */ - -template { - display: none; -} - -/* User interaction - * ========================================================================== */ - body { font-family: sans-serif; } - -/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL25vZGVfbW9kdWxlcy9AY3NzdG9vbHMvbm9ybWFsaXplLmNzcy9ub3JtYWxpemUuY3NzIiwiaW1wb3J0LW5vcm1hbGl6ZS5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7K0VBQytFOztBQUUvRTs7OztFQUlFOztBQUVGO0VBQ0UsaUJBQWlCLEVBQUUsTUFBTTtFQUN6QiwwQkFBMEIsRUFBRSxNQUFNO0VBQ2xDLDhCQUE4QixFQUFFLE1BQU07QUFDeEM7O0FBRUE7K0VBQytFOztBQUUvRTs7O0VBR0U7O0FBRUY7RUFDRSxjQUFjO0VBQ2QsZ0JBQWdCO0FBQ2xCOztBQUVBOytFQUMrRTs7QUFFL0U7O0VBRUU7O0FBRUY7Ozs7O0VBS0UsU0FBUztBQUNYOztBQUVBOztFQUVFOztBQUVGOzs7O0VBSUUsU0FBUztBQUNYOztBQUVBOzs7RUFHRTs7QUFFRjtFQUNFLHVCQUF1QixFQUFFLE1BQU07RUFDL0IsU0FBUyxFQUFFLE1BQU07RUFDakIsaUJBQWlCLEVBQUUsTUFBTTtBQUMzQjs7QUFFQTs7RUFFRTs7QUFFRjtFQUNFLGNBQWM7QUFDaEI7O0FBRUE7OztFQUdFOztBQUVGO0VBQ0UsaUNBQWlDLEVBQUUsTUFBTTtFQUN6QyxjQUFjLEVBQUUsTUFBTTtBQUN4Qjs7QUFFQTsrRUFDK0U7O0FBVS9FOztFQUVFOztBQUVGO0VBQ0UsMEJBQTBCO0VBQzFCLGlDQUFpQztBQUNuQzs7QUFFQTs7RUFFRTs7QUFFRjs7RUFFRSxtQkFBbUI7QUFDckI7O0FBRUE7OztFQUdFOztBQUVGOzs7RUFHRSxpQ0FBaUMsRUFBRSxNQUFNO0VBQ3pDLGNBQWMsRUFBRSxNQUFNO0FBQ3hCOztBQUVBOztFQUVFOztBQUVGO0VBQ0UsY0FBYztBQUNoQjs7QUFFQTsrRUFDK0U7O0FBNEIvRTs7RUFFRTs7QUFFRjtFQUNFLGdCQUFnQjtBQUNsQjs7QUFFQTsrRUFDK0U7O0FBRS9FOztFQUVFOztBQUVGOzs7RUFHRSxTQUFTO0FBQ1g7O0FBRUE7OztFQUdFOztBQUVGO0VBQ0UsaUJBQWlCLEVBQUUsTUFBTTtFQUN6QixvQkFBb0IsRUFBRSxNQUFNO0FBQzlCOztBQUVBOztFQUVFOztBQUVGOzs7O0VBSUUsMEJBQTBCO0FBQzVCOztBQUVBOztFQUVFOztBQUVGO0VBQ0UsOEJBQThCO0FBQ2hDOztBQUVBOztFQUVFOztBQUVGO0VBQ0UsaUJBQWlCO0FBQ25COztBQUVBOzs7RUFHRTs7QUFFRjtFQUNFLHNCQUFzQixFQUFFLE1BQU07RUFDOUIsY0FBYyxFQUFFLE1BQU07RUFDdEIsY0FBYyxFQUFFLE1BQU07RUFDdEIsZUFBZSxFQUFFLE1BQU07RUFDdkIsbUJBQW1CLEVBQUUsTUFBTTtBQUM3Qjs7QUFFQTs7O0VBR0U7O0FBRUY7RUFDRSxxQkFBcUIsRUFBRSxNQUFNO0VBQzdCLHdCQUF3QixFQUFFLE1BQU07QUFDbEM7O0FBRUE7O0VBRUU7O0FBRUY7RUFDRSxvQkFBb0I7QUFDdEI7O0FBRUE7OztFQUdFOztBQUVGO0VBQ0UsU0FBUyxFQUFFLE1BQU07RUFDakIsY0FBYyxFQUFFLE1BQU07QUFDeEI7O0FBYUE7OztFQUdFOztBQUVGO0VBQ0UsNkJBQTZCLEVBQUUsTUFBTTtFQUNyQyxvQkFBb0IsRUFBRSxNQUFNO0FBQzlCOztBQUVBOztFQUVFOztBQUVGOztFQUVFLFlBQVk7QUFDZDs7QUFFQTs7RUFFRTs7QUFFRjtFQUNFLGNBQWM7RUFDZCxhQUFhO0FBQ2Y7O0FBRUE7O0VBRUU7O0FBRUY7RUFDRSx3QkFBd0I7QUFDMUI7O0FBRUE7OztFQUdFOztBQUVGO0VBQ0UsMEJBQTBCLEVBQUUsTUFBTTtFQUNsQyxhQUFhLEVBQUUsTUFBTTtBQUN2Qjs7QUFFQTs7RUFFRTs7QUFFRjtFQUNFLGtCQUFrQjtFQUNsQixVQUFVO0FBQ1o7O0FBRUE7O0VBRUU7O0FBRUY7RUFDRSw4QkFBOEI7QUFDaEM7O0FBRUE7O0VBRUU7O0FBRUY7RUFDRSxnQkFBZ0I7QUFDbEI7O0FBRUE7K0VBQytFOztBQUUvRTs7RUFFRTs7QUFFRjtFQUNFLGNBQWM7QUFDaEI7O0FBRUE7O0VBRUU7O0FBRUY7RUFDRSx1QkFBdUI7RUFDdkIsYUFBYTtFQUNiLFlBQVk7RUFDWixjQUFjO0VBQ2Qsd0JBQXdCO0VBQ3hCLDJCQUEyQjtFQUMzQixtQkFBbUI7RUFDbkIsT0FBTztFQUNQLFlBQVk7RUFDWixZQUFZO0VBQ1osa0JBQWtCO0VBQ2xCLFFBQVE7RUFDUix1QkFBdUI7RUFDdkIsMEJBQTBCO0VBQzFCLGtCQUFrQjtBQUNwQjs7QUFFQTtFQUNFLGFBQWE7QUFDZjs7QUFFQTs7RUFFRTs7QUFFRjtFQUNFLGtCQUFrQjtBQUNwQjs7QUFFQTsrRUFDK0U7O0FBVS9FOztFQUVFOztBQUVGO0VBQ0UsYUFBYTtBQUNmOztBQUVBOytFQUMrRTs7QUNyWi9FO0NBQ0MsdUJBQXVCO0FBQ3hCIiwiZmlsZSI6InBvc3Rjc3MtaW1wb3J0LnJlc3VsdC5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIvKiBEb2N1bWVudFxuICogPT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0gKi9cblxuLyoqXG4gKiAxLiBDb3JyZWN0IHRoZSBsaW5lIGhlaWdodCBpbiBhbGwgYnJvd3NlcnMuXG4gKiAyLiBQcmV2ZW50IGFkanVzdG1lbnRzIG9mIGZvbnQgc2l6ZSBhZnRlciBvcmllbnRhdGlvbiBjaGFuZ2VzIGluXG4gKiAgICBJRSBvbiBXaW5kb3dzIFBob25lIGFuZCBpbiBpT1MuXG4gKi9cblxuaHRtbCB7XG4gIGxpbmUtaGVpZ2h0OiAxLjE1OyAvKiAxICovXG4gIC1tcy10ZXh0LXNpemUtYWRqdXN0OiAxMDAlOyAvKiAyICovXG4gIC13ZWJraXQtdGV4dC1zaXplLWFkanVzdDogMTAwJTsgLyogMiAqL1xufVxuXG4vKiBTZWN0aW9uc1xuICogPT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0gKi9cblxuLyoqXG4gKiBDb3JyZWN0IHRoZSBmb250IHNpemUgYW5kIG1hcmdpbiBvbiBgaDFgIGVsZW1lbnRzIHdpdGhpbiBgc2VjdGlvbmAgYW5kXG4gKiBgYXJ0aWNsZWAgY29udGV4dHMgaW4gQ2hyb21lLCBFZGdlLCBGaXJlZm94LCBhbmQgU2FmYXJpLlxuICovXG5cbmgxIHtcbiAgZm9udC1zaXplOiAyZW07XG4gIG1hcmdpbjogMC42N2VtIDA7XG59XG5cbi8qIEdyb3VwaW5nIGNvbnRlbnRcbiAqID09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09ICovXG5cbi8qKlxuICogUmVtb3ZlIHRoZSBtYXJnaW4gb24gbmVzdGVkIGxpc3RzIGluIENocm9tZSwgRWRnZSwgSUUsIGFuZCBTYWZhcmkuXG4gKi9cblxuZGwgZGwsXG5kbCBvbCxcbmRsIHVsLFxub2wgZGwsXG51bCBkbCB7XG4gIG1hcmdpbjogMDtcbn1cblxuLyoqXG4gKiBSZW1vdmUgdGhlIG1hcmdpbiBvbiBuZXN0ZWQgbGlzdHMgaW4gRWRnZSAxOC0gYW5kIElFLlxuICovXG5cbm9sIG9sLFxub2wgdWwsXG51bCBvbCxcbnVsIHVsIHtcbiAgbWFyZ2luOiAwO1xufVxuXG4vKipcbiAqIDEuIEFkZCB0aGUgY29ycmVjdCBib3ggc2l6aW5nIGluIEZpcmVmb3guXG4gKiAyLiBTaG93IHRoZSBvdmVyZmxvdyBpbiBFZGdlIDE4LSBhbmQgSUUuXG4gKi9cblxuaHIge1xuICBib3gtc2l6aW5nOiBjb250ZW50LWJveDsgLyogMSAqL1xuICBoZWlnaHQ6IDA7IC8qIDEgKi9cbiAgb3ZlcmZsb3c6IHZpc2libGU7IC8qIDIgKi9cbn1cblxuLyoqXG4gKiBBZGQgdGhlIGNvcnJlY3QgZGlzcGxheSBpbiBJRS5cbiAqL1xuXG5tYWluIHtcbiAgZGlzcGxheTogYmxvY2s7XG59XG5cbi8qKlxuICogMS4gQ29ycmVjdCB0aGUgaW5oZXJpdGFuY2UgYW5kIHNjYWxpbmcgb2YgZm9udCBzaXplIGluIGFsbCBicm93c2Vycy5cbiAqIDIuIENvcnJlY3QgdGhlIG9kZCBgZW1gIGZvbnQgc2l6aW5nIGluIGFsbCBicm93c2Vycy5cbiAqL1xuXG5wcmUge1xuICBmb250LWZhbWlseTogbW9ub3NwYWNlLCBtb25vc3BhY2U7IC8qIDEgKi9cbiAgZm9udC1zaXplOiAxZW07IC8qIDIgKi9cbn1cblxuLyogVGV4dC1sZXZlbCBzZW1hbnRpY3NcbiAqID09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09ICovXG5cbi8qKlxuICogUmVtb3ZlIHRoZSBncmF5IGJhY2tncm91bmQgb24gYWN0aXZlIGxpbmtzIGluIElFIDEwLlxuICovXG5cbmEge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcbn1cblxuLyoqXG4gKiBBZGQgdGhlIGNvcnJlY3QgdGV4dCBkZWNvcmF0aW9uIGluIEVkZ2UgMTgtLCBJRSwgYW5kIFNhZmFyaS5cbiAqL1xuXG5hYmJyW3RpdGxlXSB7XG4gIHRleHQtZGVjb3JhdGlvbjogdW5kZXJsaW5lO1xuICB0ZXh0LWRlY29yYXRpb246IHVuZGVybGluZSBkb3R0ZWQ7XG59XG5cbi8qKlxuICogQWRkIHRoZSBjb3JyZWN0IGZvbnQgd2VpZ2h0IGluIENocm9tZSwgRWRnZSwgYW5kIFNhZmFyaS5cbiAqL1xuXG5iLFxuc3Ryb25nIHtcbiAgZm9udC13ZWlnaHQ6IGJvbGRlcjtcbn1cblxuLyoqXG4gKiAxLiBDb3JyZWN0IHRoZSBpbmhlcml0YW5jZSBhbmQgc2NhbGluZyBvZiBmb250IHNpemUgaW4gYWxsIGJyb3dzZXJzLlxuICogMi4gQ29ycmVjdCB0aGUgb2RkIGBlbWAgZm9udCBzaXppbmcgaW4gYWxsIGJyb3dzZXJzLlxuICovXG5cbmNvZGUsXG5rYmQsXG5zYW1wIHtcbiAgZm9udC1mYW1pbHk6IG1vbm9zcGFjZSwgbW9ub3NwYWNlOyAvKiAxICovXG4gIGZvbnQtc2l6ZTogMWVtOyAvKiAyICovXG59XG5cbi8qKlxuICogQWRkIHRoZSBjb3JyZWN0IGZvbnQgc2l6ZSBpbiBhbGwgYnJvd3NlcnMuXG4gKi9cblxuc21hbGwge1xuICBmb250LXNpemU6IDgwJTtcbn1cblxuLyogRW1iZWRkZWQgY29udGVudFxuICogPT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0gKi9cblxuLyoqXG4gKiBBZGQgdGhlIGNvcnJlY3QgZGlzcGxheSBpbiBJRSA5LS5cbiAqL1xuXG5hdWRpbyxcbnZpZGVvIHtcbiAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xufVxuXG4vKipcbiAqIEFkZCB0aGUgY29ycmVjdCBkaXNwbGF5IGluIGlPUyA0LTcuXG4gKi9cblxuYXVkaW86bm90KFtjb250cm9sc10pIHtcbiAgZGlzcGxheTogbm9uZTtcbiAgaGVpZ2h0OiAwO1xufVxuXG4vKipcbiAqIFJlbW92ZSB0aGUgYm9yZGVyIG9uIGltYWdlcyB3aXRoaW4gbGlua3MgaW4gSUUgMTAtLlxuICovXG5cbmltZyB7XG4gIGJvcmRlci1zdHlsZTogbm9uZTtcbn1cblxuLyoqXG4gKiBIaWRlIHRoZSBvdmVyZmxvdyBpbiBJRS5cbiAqL1xuXG5zdmc6bm90KDpyb290KSB7XG4gIG92ZXJmbG93OiBoaWRkZW47XG59XG5cbi8qIEZvcm1zXG4gKiA9PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PSAqL1xuXG4vKipcbiAqIFJlbW92ZSB0aGUgbWFyZ2luIG9uIGNvbnRyb2xzIGluIFNhZmFyaS5cbiAqL1xuXG5idXR0b24sXG5pbnB1dCxcbnNlbGVjdCB7XG4gIG1hcmdpbjogMDtcbn1cblxuLyoqXG4gKiAxLiBTaG93IHRoZSBvdmVyZmxvdyBpbiBJRS5cbiAqIDIuIFJlbW92ZSB0aGUgaW5oZXJpdGFuY2Ugb2YgdGV4dCB0cmFuc2Zvcm0gaW4gRWRnZSAxOC0sIEZpcmVmb3gsIGFuZCBJRS5cbiAqL1xuXG5idXR0b24ge1xuICBvdmVyZmxvdzogdmlzaWJsZTsgLyogMSAqL1xuICB0ZXh0LXRyYW5zZm9ybTogbm9uZTsgLyogMiAqL1xufVxuXG4vKipcbiAqIENvcnJlY3QgdGhlIGluYWJpbGl0eSB0byBzdHlsZSBidXR0b25zIGluIGlPUyBhbmQgU2FmYXJpLlxuICovXG5cbmJ1dHRvbixcblt0eXBlPVwiYnV0dG9uXCJdLFxuW3R5cGU9XCJyZXNldFwiXSxcblt0eXBlPVwic3VibWl0XCJdIHtcbiAgLXdlYmtpdC1hcHBlYXJhbmNlOiBidXR0b247XG59XG5cbi8qKlxuICogQ29ycmVjdCB0aGUgcGFkZGluZyBpbiBGaXJlZm94LlxuICovXG5cbmZpZWxkc2V0IHtcbiAgcGFkZGluZzogMC4zNWVtIDAuNzVlbSAwLjYyNWVtO1xufVxuXG4vKipcbiAqIFNob3cgdGhlIG92ZXJmbG93IGluIEVkZ2UgMTgtIGFuZCBJRS5cbiAqL1xuXG5pbnB1dCB7XG4gIG92ZXJmbG93OiB2aXNpYmxlO1xufVxuXG4vKipcbiAqIDEuIENvcnJlY3QgdGhlIHRleHQgd3JhcHBpbmcgaW4gRWRnZSAxOC0gYW5kIElFLlxuICogMi4gQ29ycmVjdCB0aGUgY29sb3IgaW5oZXJpdGFuY2UgZnJvbSBgZmllbGRzZXRgIGVsZW1lbnRzIGluIElFLlxuICovXG5cbmxlZ2VuZCB7XG4gIGJveC1zaXppbmc6IGJvcmRlci1ib3g7IC8qIDEgKi9cbiAgY29sb3I6IGluaGVyaXQ7IC8qIDIgKi9cbiAgZGlzcGxheTogdGFibGU7IC8qIDEgKi9cbiAgbWF4LXdpZHRoOiAxMDAlOyAvKiAxICovXG4gIHdoaXRlLXNwYWNlOiBub3JtYWw7IC8qIDEgKi9cbn1cblxuLyoqXG4gKiAxLiBBZGQgdGhlIGNvcnJlY3QgZGlzcGxheSBpbiBFZGdlIDE4LSBhbmQgSUUuXG4gKiAyLiBBZGQgdGhlIGNvcnJlY3QgdmVydGljYWwgYWxpZ25tZW50IGluIENocm9tZSwgRWRnZSwgYW5kIEZpcmVmb3guXG4gKi9cblxucHJvZ3Jlc3Mge1xuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7IC8qIDEgKi9cbiAgdmVydGljYWwtYWxpZ246IGJhc2VsaW5lOyAvKiAyICovXG59XG5cbi8qKlxuICogUmVtb3ZlIHRoZSBpbmhlcml0YW5jZSBvZiB0ZXh0IHRyYW5zZm9ybSBpbiBGaXJlZm94LlxuICovXG5cbnNlbGVjdCB7XG4gIHRleHQtdHJhbnNmb3JtOiBub25lO1xufVxuXG4vKipcbiAqIDEuIFJlbW92ZSB0aGUgbWFyZ2luIGluIEZpcmVmb3ggYW5kIFNhZmFyaS5cbiAqIDIuIFJlbW92ZSB0aGUgZGVmYXVsdCB2ZXJ0aWNhbCBzY3JvbGxiYXIgaW4gSUUuXG4gKi9cblxudGV4dGFyZWEge1xuICBtYXJnaW46IDA7IC8qIDEgKi9cbiAgb3ZlcmZsb3c6IGF1dG87IC8qIDIgKi9cbn1cblxuLyoqXG4gKiAxLiBBZGQgdGhlIGNvcnJlY3QgYm94IHNpemluZyBpbiBJRSAxMC0uXG4gKiAyLiBSZW1vdmUgdGhlIHBhZGRpbmcgaW4gSUUgMTAtLlxuICovXG5cblt0eXBlPVwiY2hlY2tib3hcIl0sXG5bdHlwZT1cInJhZGlvXCJdIHtcbiAgYm94LXNpemluZzogYm9yZGVyLWJveDsgLyogMSAqL1xuICBwYWRkaW5nOiAwOyAvKiAyICovXG59XG5cbi8qKlxuICogMS4gQ29ycmVjdCB0aGUgb2RkIGFwcGVhcmFuY2UgaW4gQ2hyb21lLCBFZGdlLCBhbmQgU2FmYXJpLlxuICogMi4gQ29ycmVjdCB0aGUgb3V0bGluZSBzdHlsZSBpbiBTYWZhcmkuXG4gKi9cblxuW3R5cGU9XCJzZWFyY2hcIl0ge1xuICAtd2Via2l0LWFwcGVhcmFuY2U6IHRleHRmaWVsZDsgLyogMSAqL1xuICBvdXRsaW5lLW9mZnNldDogLTJweDsgLyogMiAqL1xufVxuXG4vKipcbiAqIENvcnJlY3QgdGhlIGN1cnNvciBzdHlsZSBvZiBpbmNyZW1lbnQgYW5kIGRlY3JlbWVudCBidXR0b25zIGluIFNhZmFyaS5cbiAqL1xuXG46Oi13ZWJraXQtaW5uZXItc3Bpbi1idXR0b24sXG46Oi13ZWJraXQtb3V0ZXItc3Bpbi1idXR0b24ge1xuICBoZWlnaHQ6IGF1dG87XG59XG5cbi8qKlxuICogQ29ycmVjdCB0aGUgdGV4dCBzdHlsZSBvZiBwbGFjZWhvbGRlcnMgaW4gQ2hyb21lLCBFZGdlLCBhbmQgU2FmYXJpLlxuICovXG5cbjo6LXdlYmtpdC1pbnB1dC1wbGFjZWhvbGRlciB7XG4gIGNvbG9yOiBpbmhlcml0O1xuICBvcGFjaXR5OiAwLjU0O1xufVxuXG4vKipcbiAqIFJlbW92ZSB0aGUgaW5uZXIgcGFkZGluZyBpbiBDaHJvbWUsIEVkZ2UsIGFuZCBTYWZhcmkgb24gbWFjT1MuXG4gKi9cblxuOjotd2Via2l0LXNlYXJjaC1kZWNvcmF0aW9uIHtcbiAgLXdlYmtpdC1hcHBlYXJhbmNlOiBub25lO1xufVxuXG4vKipcbiAqIDEuIENvcnJlY3QgdGhlIGluYWJpbGl0eSB0byBzdHlsZSB1cGxvYWQgYnV0dG9ucyBpbiBpT1MgYW5kIFNhZmFyaS5cbiAqIDIuIENoYW5nZSBmb250IHByb3BlcnRpZXMgdG8gYGluaGVyaXRgIGluIFNhZmFyaS5cbiAqL1xuXG46Oi13ZWJraXQtZmlsZS11cGxvYWQtYnV0dG9uIHtcbiAgLXdlYmtpdC1hcHBlYXJhbmNlOiBidXR0b247IC8qIDEgKi9cbiAgZm9udDogaW5oZXJpdDsgLyogMiAqL1xufVxuXG4vKipcbiAqIFJlbW92ZSB0aGUgaW5uZXIgYm9yZGVyIGFuZCBwYWRkaW5nIG9mIGZvY3VzIG91dGxpbmVzIGluIEZpcmVmb3guXG4gKi9cblxuOjotbW96LWZvY3VzLWlubmVyIHtcbiAgYm9yZGVyLXN0eWxlOiBub25lO1xuICBwYWRkaW5nOiAwO1xufVxuXG4vKipcbiAqIFJlc3RvcmUgdGhlIGZvY3VzIG91dGxpbmUgc3R5bGVzIHVuc2V0IGJ5IHRoZSBwcmV2aW91cyBydWxlIGluIEZpcmVmb3guXG4gKi9cblxuOi1tb3otZm9jdXNyaW5nIHtcbiAgb3V0bGluZTogMXB4IGRvdHRlZCBCdXR0b25UZXh0O1xufVxuXG4vKipcbiAqIFJlbW92ZSB0aGUgYWRkaXRpb25hbCA6aW52YWxpZCBzdHlsZXMgaW4gRmlyZWZveC5cbiAqL1xuXG46LW1vei11aS1pbnZhbGlkIHtcbiAgYm94LXNoYWRvdzogbm9uZTtcbn1cblxuLyogSW50ZXJhY3RpdmVcbiAqID09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09ICovXG5cbi8qXG4gKiBBZGQgdGhlIGNvcnJlY3QgZGlzcGxheSBpbiBFZGdlIDE4LSBhbmQgSUUuXG4gKi9cblxuZGV0YWlscyB7XG4gIGRpc3BsYXk6IGJsb2NrO1xufVxuXG4vKlxuICogQWRkIHRoZSBjb3JyZWN0IHN0eWxlcyBpbiBFZGdlIDE4LSwgSUUsIGFuZCBTYWZhcmkuXG4gKi9cblxuZGlhbG9nIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogd2hpdGU7XG4gIGJvcmRlcjogc29saWQ7XG4gIGNvbG9yOiBibGFjaztcbiAgZGlzcGxheTogYmxvY2s7XG4gIGhlaWdodDogLW1vei1maXQtY29udGVudDtcbiAgaGVpZ2h0OiAtd2Via2l0LWZpdC1jb250ZW50O1xuICBoZWlnaHQ6IGZpdC1jb250ZW50O1xuICBsZWZ0OiAwO1xuICBtYXJnaW46IGF1dG87XG4gIHBhZGRpbmc6IDFlbTtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICByaWdodDogMDtcbiAgd2lkdGg6IC1tb3otZml0LWNvbnRlbnQ7XG4gIHdpZHRoOiAtd2Via2l0LWZpdC1jb250ZW50O1xuICB3aWR0aDogZml0LWNvbnRlbnQ7XG59XG5cbmRpYWxvZzpub3QoW29wZW5dKSB7XG4gIGRpc3BsYXk6IG5vbmU7XG59XG5cbi8qXG4gKiBBZGQgdGhlIGNvcnJlY3QgZGlzcGxheSBpbiBhbGwgYnJvd3NlcnMuXG4gKi9cblxuc3VtbWFyeSB7XG4gIGRpc3BsYXk6IGxpc3QtaXRlbTtcbn1cblxuLyogU2NyaXB0aW5nXG4gKiA9PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PSAqL1xuXG4vKipcbiAqIEFkZCB0aGUgY29ycmVjdCBkaXNwbGF5IGluIElFIDktLlxuICovXG5cbmNhbnZhcyB7XG4gIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbn1cblxuLyoqXG4gKiBBZGQgdGhlIGNvcnJlY3QgZGlzcGxheSBpbiBJRS5cbiAqL1xuXG50ZW1wbGF0ZSB7XG4gIGRpc3BsYXk6IG5vbmU7XG59XG5cbi8qIFVzZXIgaW50ZXJhY3Rpb25cbiAqID09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09ICovXG5cbi8qKlxuICogQWRkIHRoZSBjb3JyZWN0IGRpc3BsYXkgaW4gSUUgMTAtLlxuICovXG5cbltoaWRkZW5dIHtcbiAgZGlzcGxheTogbm9uZTtcbn1cbiIsIkBpbXBvcnQgXCJub3JtYWxpemVcIjtcblxuYm9keSB7XG5cdGZvbnQtZmFtaWx5OiBzYW5zLXNlcmlmO1xufVxuIl19 */ \ No newline at end of file diff --git a/test/import-sanitize-all.expect.css b/test/import-sanitize-all.expect.css index 280503f..34c25e9 100644 --- a/test/import-sanitize-all.expect.css +++ b/test/import-sanitize-all.expect.css @@ -1,11 +1,12 @@ /* Document * ========================================================================== *//** - * Add border box sizing in all browsers (opinionated). + * 1. Add border box sizing in all browsers (opinionated). + * 2. Backgrounds do not repeat by default (opinionated). */ *, ::before, ::after { - box-sizing: border-box; + box-sizing: border-box; /* 1 */ }/** * 1. Add text decoration inheritance in all browsers (opinionated). * 2. Add vertical alignment inheritance in all browsers (opinionated). @@ -17,207 +18,149 @@ }/** * 1. Use the default cursor in all browsers (opinionated). * 2. Change the line height in all browsers (opinionated). - * 3. Use a 4-space tab width in all browsers (opinionated). - * 4. Remove the grey highlight on links in iOS (opinionated). - * 5. Prevent adjustments of font size after orientation changes in - * IE on Windows Phone and in iOS. - * 6. Breaks words to prevent overflow in all browsers (opinionated). + * 3. Breaks words to prevent overflow in all browsers (opinionated). + * 4. Use a 4-space tab width in all browsers (opinionated). + * 5. Remove the grey highlight on links in iOS (opinionated). + * 6. Prevent adjustments of font size after orientation changes in iOS. */ -html { +:where(:root) { cursor: default; /* 1 */ line-height: 1.5; /* 2 */ - -moz-tab-size: 4; /* 3 */ - tab-size: 4; /* 3 */ - -webkit-tap-highlight-color: transparent /* 4 */; - -ms-text-size-adjust: 100%; /* 5 */ - -webkit-text-size-adjust: 100%; /* 5 */ - word-break: break-word; /* 6 */ + overflow-wrap: break-word; /* 3 */ + -moz-tab-size: 4; /* 4 */ + tab-size: 4; /* 4 */ + -webkit-tap-highlight-color: transparent; /* 5 */ + -webkit-text-size-adjust: 100%; /* 6 */ }/* Sections * ========================================================================== *//** * Remove the margin in all browsers (opinionated). */ -body { +:where(body) { margin: 0; }/** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Edge, Firefox, and Safari. */ -h1 { +:where(h1) { font-size: 2em; margin: 0.67em 0; }/* Grouping content * ========================================================================== *//** - * Remove the margin on nested lists in Chrome, Edge, IE, and Safari. + * Remove the margin on nested lists in Chrome, Edge, and Safari. */ -dl dl, -dl ol, -dl ul, -ol dl, -ul dl { +:where(dl, ol, ul) :where(dl, ol, ul) { margin: 0; }/** - * Remove the margin on nested lists in Edge 18- and IE. + * 1. Correct the inheritance of border color in Firefox. + * 2. Add the correct box sizing in Firefox. */ -ol ol, -ol ul, -ul ol, -ul ul { - margin: 0; -}/** - * 1. Add the correct sizing in Firefox. - * 2. Show the overflow in Edge 18- and IE. - */ -hr { - height: 0; /* 1 */ - overflow: visible; /* 2 */ -}/** - * Add the correct display in IE. - */ -main { - display: block; +:where(hr) { + color: inherit; /* 1 */ + height: 0; /* 2 */ }/** * Remove the list style on navigation lists in all browsers (opinionated). */ -nav ol, -nav ul { - list-style: none; +:where(nav) :where(ol, ul) { + list-style-type: none; padding: 0; +}/** + * Prevent VoiceOver from ignoring list semantics in Safari (opinionated). + */ +:where(nav li)::before { + content: "\200B"; + float: left; }/** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. + * 3. Prevent overflow of the container in all browsers (opinionated). */ -pre { +:where(pre) { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ + overflow: auto; /* 3 */ }/* Text-level semantics * ========================================================================== *//** - * Add the correct text decoration in Edge 18-, IE, and Safari. + * Add the correct text decoration in Safari. */ -abbr[title] { +:where(abbr[title]) { text-decoration: underline; text-decoration: underline dotted; }/** * Add the correct font weight in Chrome, Edge, and Safari. */ -b, -strong { +:where(b, strong) { font-weight: bolder; }/** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ -code, -kbd, -samp { +:where(code, kbd, samp) { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ }/** * Add the correct font size in all browsers. */ -small { +:where(small) { font-size: 80%; }/* Embedded content * ========================================================================== *//* * Change the alignment on media elements in all browsers (opinionated). */ -audio, -canvas, -iframe, -img, -svg, -video { +:where(audio, canvas, iframe, img, svg, video) { vertical-align: middle; }/** * Remove the border on iframes in all browsers (opinionated). */ -iframe { +:where(iframe) { border-style: none; }/** * Change the fill color to match the text color in all browsers (opinionated). */ -svg:not([fill]) { +:where(svg:not([fill])) { fill: currentColor; -}/** - * Hide the overflow in IE. - */ -svg:not(:root) { - overflow: hidden; }/* Tabular data * ========================================================================== *//** - * Collapse border spacing in all browsers (opinionated). - */ -table { - border-collapse: collapse; + * 1. Collapse border spacing in all browsers (opinionated). + * 2. Correct table border color inheritance in all Chrome, Edge, and Safari. + * 3. Remove text indentation from table contents in Chrome, Edge, and Safari. + */ +:where(table) { + border-collapse: collapse; /* 1 */ + border-color: inherit; /* 2 */ + text-indent: 0; /* 3 */ }/* Forms * ========================================================================== *//** * Remove the margin on controls in Safari. */ -button, -input, -select { +:where(button, input, select) { margin: 0; -}/** - * 1. Show the overflow in IE. - * 2. Remove the inheritance of text transform in Edge 18-, Firefox, and IE. - */ -button { - overflow: visible; /* 1 */ - text-transform: none; /* 2 */ }/** * Correct the inability to style buttons in iOS and Safari. */ -button, -[type="button"], -[type="reset"], -[type="submit"] { +:where(button, [type="button" i], [type="reset" i], [type="submit" i]) { -webkit-appearance: button; }/** - * 1. Change the inconsistent appearance in all browsers (opinionated). - * 2. Correct the padding in Firefox. - */ -fieldset { - border: 1px solid #a0a0a0; /* 1 */ - padding: 0.35em 0.75em 0.625em; /* 2 */ -}/** - * Show the overflow in Edge 18- and IE. - */ -input { - overflow: visible; -}/** - * 1. Correct the text wrapping in Edge 18- and IE. - * 2. Correct the color inheritance from `fieldset` elements in IE. - */ -legend { - color: inherit; /* 2 */ - display: table; /* 1 */ - max-width: 100%; /* 1 */ - white-space: normal; /* 1 */ -}/** - * 1. Add the correct display in Edge 18- and IE. - * 2. Add the correct vertical alignment in Chrome, Edge, and Firefox. + * Change the inconsistent appearance in all browsers (opinionated). */ -progress { - display: inline-block; /* 1 */ - vertical-align: baseline; /* 2 */ +:where(fieldset) { + border: 1px solid #a0a0a0; }/** - * Remove the inheritance of text transform in Firefox. + * Add the correct vertical alignment in Chrome, Edge, and Firefox. */ -select { - text-transform: none; +:where(progress) { + vertical-align: baseline; }/** * 1. Remove the margin in Firefox and Safari. - * 2. Remove the default vertical scrollbar in IE. * 3. Change the resize direction in all browsers (opinionated). */ -textarea { +:where(textarea) { margin: 0; /* 1 */ - overflow: auto; /* 2 */ resize: vertical; /* 3 */ }/** * 1. Correct the odd appearance in Chrome, Edge, and Safari. * 2. Correct the outline style in Safari. */ -[type="search"] { +:where([type="search" i]) { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ }/** @@ -244,38 +187,15 @@ textarea { ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ -}/** - * Remove the inner border and padding of focus outlines in Firefox. - */ -::-moz-focus-inner { - border-style: none; - padding: 0; -}/** - * Restore the focus outline styles unset by the previous rule in Firefox. - */ -:-moz-focusring { - outline: 1px dotted ButtonText; -}/** - * Remove the additional :invalid styles in Firefox. - */ -:-moz-ui-invalid { - box-shadow: none; }/* Interactive * ========================================================================== *//* - * Add the correct display in Edge 18- and IE. - */ -details { - display: block; -}/* - * Add the correct styles in Edge 18-, IE, and Safari. + * Add the correct styles in Safari. */ -dialog { +:where(dialog) { background-color: white; border: solid; color: black; - display: block; height: -moz-fit-content; - height: -webkit-fit-content; height: fit-content; left: 0; margin: auto; @@ -283,75 +203,47 @@ dialog { position: absolute; right: 0; width: -moz-fit-content; - width: -webkit-fit-content; width: fit-content; } -dialog:not([open]) { +:where(dialog:not([open])) { display: none; }/* - * Add the correct display in all browsers. + * Add the correct display in Safari. */ -summary { +:where(details > summary:first-of-type) { display: list-item; -}/* Scripting - * ========================================================================== *//** - * Add the correct display in IE. - */ -template { - display: none; -}/* User interaction - * ========================================================================== *//* - * 1. Remove the tapping delay in IE 10. - * 2. Remove the tapping delay on clickable elements - in all browsers (opinionated). - */ -a, -area, -button, -input, -label, -select, -summary, -textarea, -[tabindex] { - -ms-touch-action: manipulation; /* 1 */ - touch-action: manipulation; /* 2 */ }/* Accessibility * ========================================================================== *//** * Change the cursor on busy elements in all browsers (opinionated). */ -[aria-busy="true"] { +:where([aria-busy="true" i]) { cursor: progress; }/* * Change the cursor on control elements in all browsers (opinionated). */ -[aria-controls] { +:where([aria-controls]) { cursor: pointer; }/* * Change the cursor on disabled, not-editable, or otherwise * inoperable elements in all browsers (opinionated). */ -[aria-disabled="true"], -[disabled] { +:where([aria-disabled="true" i], [disabled]) { cursor: not-allowed; }/* * Change the display on visually hidden accessible elements * in all browsers (opinionated). */ -[aria-hidden="false"][hidden] { +:where([aria-hidden="false" i][hidden]) { display: initial; } -[aria-hidden="false"][hidden]:not(:focus) { +:where([aria-hidden="false" i][hidden]:not(:focus)) { clip: rect(0, 0, 0, 0); position: absolute; }/** * 1. Change the inconsistent appearance in all browsers (opinionated). * 2. Add typography inheritance in all browsers (opinionated). */ -button, -input, -select, -textarea { +:where(button, input, select, textarea) { background-color: transparent; /* 1 */ border: 1px solid WindowFrame; /* 1 */ color: inherit; /* 1 */ @@ -361,82 +253,15 @@ textarea { }/** * Change the inconsistent appearance in all browsers (opinionated). */ -select { - -moz-appearance: none; - -webkit-appearance: none; - background: no-repeat right center / 1em; +:where(select) { + appearance: none; + background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E") no-repeat right center / 1em; border-radius: 0; padding-right: 1em; }/** - * Change the inconsistent appearance in all browsers (opinionated). - */ -select:not([multiple]):not([size]) { - background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E"); -}/** - * Change the inconsistent appearance in IE (opinionated). + * Remove the border and padding in all browsers (opinionated). */ -::-ms-expand { - display: none; -}/** - * Correct the inconsistent appearance in IE (opinionated). - */ -:-ms-input-placeholder { - color: rgba(0, 0, 0, 0.54); -}/** - * Use a comfortable measure in all browsers (opinionated). - */ -html { - padding: 1em; -} -@media (min-width: 34em) { - html { - padding: 1em calc(50% - 16em); - } -}/** - * Restrict sizing to the page width in all browsers (opinionated). - */ -iframe, -img, -input, -select, -textarea { - height: auto; - max-width: 100%; -}/** - * Use the default user interface font in all browsers (opinionated). - */ -html { - font-family: - system-ui, - /* macOS 10.11-10.12 */ -apple-system, - /* Windows 6+ */ "Segoe UI", - /* Android 4+ */ "Roboto", - /* Ubuntu 10.10+ */ "Ubuntu", - /* Gnome 3+ */ "Cantarell", - /* KDE Plasma 5+ */ "Noto Sans", - /* fallback */ sans-serif, - /* macOS emoji */ "Apple Color Emoji", - /* Windows emoji */ "Segoe UI Emoji", - /* Windows emoji */ "Segoe UI Symbol", - /* Linux emoji */ "Noto Color Emoji"; -}/** - * Use the default monospace user interface font in all browsers (opinionated). - */ -code, -kbd, -samp, -pre { - font-family: - /* macOS 10.10+ */ "Menlo", - /* Windows 6+ */ "Consolas", - /* Android 4+ */ "Roboto Mono", - /* Ubuntu 10.10+ */ "Ubuntu Monospace", - /* KDE Plasma 5+ */ "Noto Mono", - /* KDE Plasma 4+ */ "Oxygen Mono", - /* Linux/OpenOffice fallback */ "Liberation Mono", - /* fallback */ monospace, - /* macOS emoji */ "Apple Color Emoji", - /* Windows emoji */ "Segoe UI Emoji", - /* Windows emoji */ "Segoe UI Symbol", - /* Linux emoji */ "Noto Color Emoji"; +:where([type="color" i], [type="range" i]) { + border-width: 0; + padding: 0; } diff --git a/test/import-sanitize-forms.expect.css b/test/import-sanitize-forms.expect.css index 18da611..34c25e9 100644 --- a/test/import-sanitize-forms.expect.css +++ b/test/import-sanitize-forms.expect.css @@ -1,11 +1,12 @@ /* Document * ========================================================================== *//** - * Add border box sizing in all browsers (opinionated). + * 1. Add border box sizing in all browsers (opinionated). + * 2. Backgrounds do not repeat by default (opinionated). */ *, ::before, ::after { - box-sizing: border-box; + box-sizing: border-box; /* 1 */ }/** * 1. Add text decoration inheritance in all browsers (opinionated). * 2. Add vertical alignment inheritance in all browsers (opinionated). @@ -17,207 +18,149 @@ }/** * 1. Use the default cursor in all browsers (opinionated). * 2. Change the line height in all browsers (opinionated). - * 3. Use a 4-space tab width in all browsers (opinionated). - * 4. Remove the grey highlight on links in iOS (opinionated). - * 5. Prevent adjustments of font size after orientation changes in - * IE on Windows Phone and in iOS. - * 6. Breaks words to prevent overflow in all browsers (opinionated). + * 3. Breaks words to prevent overflow in all browsers (opinionated). + * 4. Use a 4-space tab width in all browsers (opinionated). + * 5. Remove the grey highlight on links in iOS (opinionated). + * 6. Prevent adjustments of font size after orientation changes in iOS. */ -html { +:where(:root) { cursor: default; /* 1 */ line-height: 1.5; /* 2 */ - -moz-tab-size: 4; /* 3 */ - tab-size: 4; /* 3 */ - -webkit-tap-highlight-color: transparent /* 4 */; - -ms-text-size-adjust: 100%; /* 5 */ - -webkit-text-size-adjust: 100%; /* 5 */ - word-break: break-word; /* 6 */ + overflow-wrap: break-word; /* 3 */ + -moz-tab-size: 4; /* 4 */ + tab-size: 4; /* 4 */ + -webkit-tap-highlight-color: transparent; /* 5 */ + -webkit-text-size-adjust: 100%; /* 6 */ }/* Sections * ========================================================================== *//** * Remove the margin in all browsers (opinionated). */ -body { +:where(body) { margin: 0; }/** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Edge, Firefox, and Safari. */ -h1 { +:where(h1) { font-size: 2em; margin: 0.67em 0; }/* Grouping content * ========================================================================== *//** - * Remove the margin on nested lists in Chrome, Edge, IE, and Safari. + * Remove the margin on nested lists in Chrome, Edge, and Safari. */ -dl dl, -dl ol, -dl ul, -ol dl, -ul dl { +:where(dl, ol, ul) :where(dl, ol, ul) { margin: 0; }/** - * Remove the margin on nested lists in Edge 18- and IE. + * 1. Correct the inheritance of border color in Firefox. + * 2. Add the correct box sizing in Firefox. */ -ol ol, -ol ul, -ul ol, -ul ul { - margin: 0; -}/** - * 1. Add the correct sizing in Firefox. - * 2. Show the overflow in Edge 18- and IE. - */ -hr { - height: 0; /* 1 */ - overflow: visible; /* 2 */ -}/** - * Add the correct display in IE. - */ -main { - display: block; +:where(hr) { + color: inherit; /* 1 */ + height: 0; /* 2 */ }/** * Remove the list style on navigation lists in all browsers (opinionated). */ -nav ol, -nav ul { - list-style: none; +:where(nav) :where(ol, ul) { + list-style-type: none; padding: 0; +}/** + * Prevent VoiceOver from ignoring list semantics in Safari (opinionated). + */ +:where(nav li)::before { + content: "\200B"; + float: left; }/** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. + * 3. Prevent overflow of the container in all browsers (opinionated). */ -pre { +:where(pre) { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ + overflow: auto; /* 3 */ }/* Text-level semantics * ========================================================================== *//** - * Add the correct text decoration in Edge 18-, IE, and Safari. + * Add the correct text decoration in Safari. */ -abbr[title] { +:where(abbr[title]) { text-decoration: underline; text-decoration: underline dotted; }/** * Add the correct font weight in Chrome, Edge, and Safari. */ -b, -strong { +:where(b, strong) { font-weight: bolder; }/** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ -code, -kbd, -samp { +:where(code, kbd, samp) { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ }/** * Add the correct font size in all browsers. */ -small { +:where(small) { font-size: 80%; }/* Embedded content * ========================================================================== *//* * Change the alignment on media elements in all browsers (opinionated). */ -audio, -canvas, -iframe, -img, -svg, -video { +:where(audio, canvas, iframe, img, svg, video) { vertical-align: middle; }/** * Remove the border on iframes in all browsers (opinionated). */ -iframe { +:where(iframe) { border-style: none; }/** * Change the fill color to match the text color in all browsers (opinionated). */ -svg:not([fill]) { +:where(svg:not([fill])) { fill: currentColor; -}/** - * Hide the overflow in IE. - */ -svg:not(:root) { - overflow: hidden; }/* Tabular data * ========================================================================== *//** - * Collapse border spacing in all browsers (opinionated). - */ -table { - border-collapse: collapse; + * 1. Collapse border spacing in all browsers (opinionated). + * 2. Correct table border color inheritance in all Chrome, Edge, and Safari. + * 3. Remove text indentation from table contents in Chrome, Edge, and Safari. + */ +:where(table) { + border-collapse: collapse; /* 1 */ + border-color: inherit; /* 2 */ + text-indent: 0; /* 3 */ }/* Forms * ========================================================================== *//** * Remove the margin on controls in Safari. */ -button, -input, -select { +:where(button, input, select) { margin: 0; -}/** - * 1. Show the overflow in IE. - * 2. Remove the inheritance of text transform in Edge 18-, Firefox, and IE. - */ -button { - overflow: visible; /* 1 */ - text-transform: none; /* 2 */ }/** * Correct the inability to style buttons in iOS and Safari. */ -button, -[type="button"], -[type="reset"], -[type="submit"] { +:where(button, [type="button" i], [type="reset" i], [type="submit" i]) { -webkit-appearance: button; }/** - * 1. Change the inconsistent appearance in all browsers (opinionated). - * 2. Correct the padding in Firefox. - */ -fieldset { - border: 1px solid #a0a0a0; /* 1 */ - padding: 0.35em 0.75em 0.625em; /* 2 */ -}/** - * Show the overflow in Edge 18- and IE. - */ -input { - overflow: visible; -}/** - * 1. Correct the text wrapping in Edge 18- and IE. - * 2. Correct the color inheritance from `fieldset` elements in IE. - */ -legend { - color: inherit; /* 2 */ - display: table; /* 1 */ - max-width: 100%; /* 1 */ - white-space: normal; /* 1 */ -}/** - * 1. Add the correct display in Edge 18- and IE. - * 2. Add the correct vertical alignment in Chrome, Edge, and Firefox. + * Change the inconsistent appearance in all browsers (opinionated). */ -progress { - display: inline-block; /* 1 */ - vertical-align: baseline; /* 2 */ +:where(fieldset) { + border: 1px solid #a0a0a0; }/** - * Remove the inheritance of text transform in Firefox. + * Add the correct vertical alignment in Chrome, Edge, and Firefox. */ -select { - text-transform: none; +:where(progress) { + vertical-align: baseline; }/** * 1. Remove the margin in Firefox and Safari. - * 2. Remove the default vertical scrollbar in IE. * 3. Change the resize direction in all browsers (opinionated). */ -textarea { +:where(textarea) { margin: 0; /* 1 */ - overflow: auto; /* 2 */ resize: vertical; /* 3 */ }/** * 1. Correct the odd appearance in Chrome, Edge, and Safari. * 2. Correct the outline style in Safari. */ -[type="search"] { +:where([type="search" i]) { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ }/** @@ -244,38 +187,15 @@ textarea { ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ -}/** - * Remove the inner border and padding of focus outlines in Firefox. - */ -::-moz-focus-inner { - border-style: none; - padding: 0; -}/** - * Restore the focus outline styles unset by the previous rule in Firefox. - */ -:-moz-focusring { - outline: 1px dotted ButtonText; -}/** - * Remove the additional :invalid styles in Firefox. - */ -:-moz-ui-invalid { - box-shadow: none; }/* Interactive * ========================================================================== *//* - * Add the correct display in Edge 18- and IE. - */ -details { - display: block; -}/* - * Add the correct styles in Edge 18-, IE, and Safari. + * Add the correct styles in Safari. */ -dialog { +:where(dialog) { background-color: white; border: solid; color: black; - display: block; height: -moz-fit-content; - height: -webkit-fit-content; height: fit-content; left: 0; margin: auto; @@ -283,75 +203,47 @@ dialog { position: absolute; right: 0; width: -moz-fit-content; - width: -webkit-fit-content; width: fit-content; } -dialog:not([open]) { +:where(dialog:not([open])) { display: none; }/* - * Add the correct display in all browsers. + * Add the correct display in Safari. */ -summary { +:where(details > summary:first-of-type) { display: list-item; -}/* Scripting - * ========================================================================== *//** - * Add the correct display in IE. - */ -template { - display: none; -}/* User interaction - * ========================================================================== *//* - * 1. Remove the tapping delay in IE 10. - * 2. Remove the tapping delay on clickable elements - in all browsers (opinionated). - */ -a, -area, -button, -input, -label, -select, -summary, -textarea, -[tabindex] { - -ms-touch-action: manipulation; /* 1 */ - touch-action: manipulation; /* 2 */ }/* Accessibility * ========================================================================== *//** * Change the cursor on busy elements in all browsers (opinionated). */ -[aria-busy="true"] { +:where([aria-busy="true" i]) { cursor: progress; }/* * Change the cursor on control elements in all browsers (opinionated). */ -[aria-controls] { +:where([aria-controls]) { cursor: pointer; }/* * Change the cursor on disabled, not-editable, or otherwise * inoperable elements in all browsers (opinionated). */ -[aria-disabled="true"], -[disabled] { +:where([aria-disabled="true" i], [disabled]) { cursor: not-allowed; }/* * Change the display on visually hidden accessible elements * in all browsers (opinionated). */ -[aria-hidden="false"][hidden] { +:where([aria-hidden="false" i][hidden]) { display: initial; } -[aria-hidden="false"][hidden]:not(:focus) { +:where([aria-hidden="false" i][hidden]:not(:focus)) { clip: rect(0, 0, 0, 0); position: absolute; }/** * 1. Change the inconsistent appearance in all browsers (opinionated). * 2. Add typography inheritance in all browsers (opinionated). */ -button, -input, -select, -textarea { +:where(button, input, select, textarea) { background-color: transparent; /* 1 */ border: 1px solid WindowFrame; /* 1 */ color: inherit; /* 1 */ @@ -361,25 +253,15 @@ textarea { }/** * Change the inconsistent appearance in all browsers (opinionated). */ -select { - -moz-appearance: none; - -webkit-appearance: none; - background: no-repeat right center / 1em; +:where(select) { + appearance: none; + background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E") no-repeat right center / 1em; border-radius: 0; padding-right: 1em; }/** - * Change the inconsistent appearance in all browsers (opinionated). - */ -select:not([multiple]):not([size]) { - background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E"); -}/** - * Change the inconsistent appearance in IE (opinionated). + * Remove the border and padding in all browsers (opinionated). */ -::-ms-expand { - display: none; -}/** - * Correct the inconsistent appearance in IE (opinionated). - */ -:-ms-input-placeholder { - color: rgba(0, 0, 0, 0.54); +:where([type="color" i], [type="range" i]) { + border-width: 0; + padding: 0; } diff --git a/test/normalize.expect.css b/test/normalize.expect.css index 8356120..a7d4961 100644 --- a/test/normalize.expect.css +++ b/test/normalize.expect.css @@ -3,14 +3,13 @@ /** * 1. Correct the line height in all browsers. - * 2. Prevent adjustments of font size after orientation changes in - * IE on Windows Phone and in iOS. + * 2. Prevent adjustments of font size after orientation changes in iOS. */ -html { +:where(html) { line-height: 1.15; /* 1 */ - -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ + text-size-adjust: 100%; /* 2 */ } /* Sections @@ -21,74 +20,43 @@ html { * `article` contexts in Chrome, Edge, Firefox, and Safari. */ -h1 { +:where(h1) { font-size: 2em; - margin: 0.67em 0; + margin-block-end: 0.67em; + margin-block-start: 0.67em; } /* Grouping content * ========================================================================== */ /** - * Remove the margin on nested lists in Chrome, Edge, IE, and Safari. + * Remove the margin on nested lists in Chrome, Edge, and Safari. */ -dl dl, -dl ol, -dl ul, -ol dl, -ul dl { - margin: 0; -} - -/** - * Remove the margin on nested lists in Edge 18- and IE. - */ - -ol ol, -ol ul, -ul ol, -ul ul { - margin: 0; +:where(dl, ol, ul) :where(dl, ol, ul) { + margin-block-end: 0; + margin-block-start: 0; } /** * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge 18- and IE. + * 2. Correct the inheritance of border color in Firefox. */ -hr { +:where(hr) { box-sizing: content-box; /* 1 */ + color: inherit; /* 2 */ height: 0; /* 1 */ - overflow: visible; /* 2 */ -} - -/** - * Add the correct display in IE. - */ - -main { - display: block; -} - -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - -pre { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ } /* Text-level semantics * ========================================================================== */ /** - * Add the correct text decoration in Edge 18-, IE, and Safari. + * Add the correct text decoration in Safari. */ -abbr[title] { +:where(abbr[title]) { text-decoration: underline; text-decoration: underline dotted; } @@ -97,8 +65,7 @@ abbr[title] { * Add the correct font weight in Chrome, Edge, and Safari. */ -b, -strong { +:where(b, strong) { font-weight: bolder; } @@ -107,9 +74,7 @@ strong { * 2. Correct the odd `em` font sizing in all browsers. */ -code, -kbd, -samp { +:where(code, kbd, pre, samp) { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } @@ -118,19 +83,21 @@ samp { * Add the correct font size in all browsers. */ -small { +:where(small) { font-size: 80%; } -/* Embedded content +/* Tabular data * ========================================================================== */ /** - * Hide the overflow in IE. + * 1. Correct table border color in Chrome, Edge, and Safari. + * 2. Remove text indentation from table contents in Chrome, Edge, and Safari. */ -svg:not(:root) { - overflow: hidden; +:where(table) { + border-color: currentColor; /* 1 */ + text-indent: 0; /* 2 */ } /* Forms @@ -140,88 +107,48 @@ svg:not(:root) { * Remove the margin on controls in Safari. */ -button, -input, -select { +:where(button, input, select) { margin: 0; } /** - * 1. Show the overflow in IE. - * 2. Remove the inheritance of text transform in Edge 18-, Firefox, and IE. + * Remove the inheritance of text transform in Firefox. */ -button { - overflow: visible; /* 1 */ - text-transform: none; /* 2 */ +:where(button) { + text-transform: none; } /** * Correct the inability to style buttons in iOS and Safari. */ -button, -[type="button"], -[type="reset"], -[type="submit"] { +:where(button, input:is([type="button" i], [type="reset" i], [type="submit" i])) { -webkit-appearance: button; } /** - * Correct the padding in Firefox. - */ - -fieldset { - padding: 0.35em 0.75em 0.625em; -} - -/** - * Show the overflow in Edge 18- and IE. - */ - -input { - overflow: visible; -} - -/** - * 1. Correct the text wrapping in Edge 18- and IE. - * 2. Correct the color inheritance from `fieldset` elements in IE. - */ - -legend { - box-sizing: border-box; /* 1 */ - color: inherit; /* 2 */ - display: table; /* 1 */ - max-width: 100%; /* 1 */ - white-space: normal; /* 1 */ -} - -/** - * 1. Add the correct display in Edge 18- and IE. - * 2. Add the correct vertical alignment in Chrome, Edge, and Firefox. + * Add the correct vertical alignment in Chrome, Edge, and Firefox. */ -progress { - display: inline-block; /* 1 */ - vertical-align: baseline; /* 2 */ +:where(progress) { + vertical-align: baseline; } /** * Remove the inheritance of text transform in Firefox. */ -select { +:where(select) { text-transform: none; } /** - * 1. Remove the margin in Firefox and Safari. - * 2. Remove the default vertical scrollbar in IE. + * Remove the margin in Firefox and Safari. */ -textarea { - margin: 0; /* 1 */ - overflow: auto; /* 2 */ +:where(textarea) { + margin: 0; } /** @@ -229,7 +156,7 @@ textarea { * 2. Correct the outline style in Safari. */ -[type="search"] { +:where(input[type="search" i]) { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } @@ -274,7 +201,7 @@ textarea { * Remove the inner border and padding of focus outlines in Firefox. */ -::-moz-focus-inner { +:where(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i]))::-moz-focus-inner { border-style: none; padding: 0; } @@ -283,7 +210,7 @@ textarea { * Restore the focus outline styles unset by the previous rule in Firefox. */ -:-moz-focusring { +:where(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i]))::-moz-focusring { outline: 1px dotted ButtonText; } @@ -291,7 +218,7 @@ textarea { * Remove the additional :invalid styles in Firefox. */ -:-moz-ui-invalid { +:where(:-moz-ui-invalid) { box-shadow: none; } @@ -299,24 +226,14 @@ textarea { * ========================================================================== */ /* - * Add the correct display in Edge 18- and IE. - */ - -details { - display: block; -} - -/* - * Add the correct styles in Edge 18-, IE, and Safari. + * Add the correct styles in Safari. */ -dialog { +:where(dialog) { background-color: white; border: solid; color: black; - display: block; height: -moz-fit-content; - height: -webkit-fit-content; height: fit-content; left: 0; margin: auto; @@ -324,11 +241,10 @@ dialog { position: absolute; right: 0; width: -moz-fit-content; - width: -webkit-fit-content; width: fit-content; } -dialog:not([open]) { +:where(dialog:not([open])) { display: none; } @@ -336,24 +252,10 @@ dialog:not([open]) { * Add the correct display in all browsers. */ -summary { +:where(summary) { display: list-item; } -/* Scripting - * ========================================================================== */ - -/** - * Add the correct display in IE. - */ - -template { - display: none; -} - -/* User interaction - * ========================================================================== */ - body { font-family: sans-serif; } diff --git a/test/postcss-import.expect.css b/test/postcss-import.expect.css new file mode 100644 index 0000000..e4347ea --- /dev/null +++ b/test/postcss-import.expect.css @@ -0,0 +1,263 @@ +/* Document + * ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +:where(html) { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + text-size-adjust: 100%; /* 2 */ +} + +/* Sections + * ========================================================================== */ + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Edge, Firefox, and Safari. + */ + +:where(h1) { + font-size: 2em; + margin-block-end: 0.67em; + margin-block-start: 0.67em; +} + +/* Grouping content + * ========================================================================== */ + +/** + * Remove the margin on nested lists in Chrome, Edge, and Safari. + */ + +:where(dl, ol, ul) :where(dl, ol, ul) { + margin-block-end: 0; + margin-block-start: 0; +} + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Correct the inheritance of border color in Firefox. + */ + +:where(hr) { + box-sizing: content-box; /* 1 */ + color: inherit; /* 2 */ + height: 0; /* 1 */ +} + +/* Text-level semantics + * ========================================================================== */ + +/** + * Add the correct text decoration in Safari. + */ + +:where(abbr[title]) { + text-decoration: underline; + text-decoration: underline dotted; +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +:where(b, strong) { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +:where(code, kbd, pre, samp) { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +:where(small) { + font-size: 80%; +} + +/* Tabular data + * ========================================================================== */ + +/** + * 1. Correct table border color in Chrome, Edge, and Safari. + * 2. Remove text indentation from table contents in Chrome, Edge, and Safari. + */ + +:where(table) { + border-color: currentColor; /* 1 */ + text-indent: 0; /* 2 */ +} + +/* Forms + * ========================================================================== */ + +/** + * Remove the margin on controls in Safari. + */ + +:where(button, input, select) { + margin: 0; +} + +/** + * Remove the inheritance of text transform in Firefox. + */ + +:where(button) { + text-transform: none; +} + +/** + * Correct the inability to style buttons in iOS and Safari. + */ + +:where(button, input:is([type="button" i], [type="reset" i], [type="submit" i])) { + -webkit-appearance: button; +} + +/** + * Add the correct vertical alignment in Chrome, Edge, and Firefox. + */ + +:where(progress) { + vertical-align: baseline; +} + +/** + * Remove the inheritance of text transform in Firefox. + */ + +:where(select) { + text-transform: none; +} + +/** + * Remove the margin in Firefox and Safari. + */ + +:where(textarea) { + margin: 0; +} + +/** + * 1. Correct the odd appearance in Chrome, Edge, and Safari. + * 2. Correct the outline style in Safari. + */ + +:where(input[type="search" i]) { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Safari. + */ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/** + * Correct the text style of placeholders in Chrome, Edge, and Safari. + */ + +::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; +} + +/** + * Remove the inner padding in Chrome, Edge, and Safari on macOS. + */ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style upload buttons in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/** + * Remove the inner border and padding of focus outlines in Firefox. + */ + +:where(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i]))::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus outline styles unset by the previous rule in Firefox. + */ + +:where(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i]))::-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Remove the additional :invalid styles in Firefox. + */ + +:where(:-moz-ui-invalid) { + box-shadow: none; +} + +/* Interactive + * ========================================================================== */ + +/* + * Add the correct styles in Safari. + */ + +:where(dialog) { + background-color: white; + border: solid; + color: black; + height: -moz-fit-content; + height: fit-content; + left: 0; + margin: auto; + padding: 1em; + position: absolute; + right: 0; + width: -moz-fit-content; + width: fit-content; +} + +:where(dialog:not([open])) { + display: none; +} + +/* + * Add the correct display in all browsers. + */ + +:where(summary) { + display: list-item; +} + +/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm5vcm1hbGl6ZS5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7K0VBQytFOztBQUUvRTs7O0VBR0U7O0FBRUY7RUFDRSxpQkFBaUIsRUFBRSxNQUFNO0VBQ3pCLDhCQUE4QixFQUFFLE1BQU07RUFDdEMsc0JBQXNCLEVBQUUsTUFBTTtBQUNoQzs7QUFFQTsrRUFDK0U7O0FBRS9FOzs7RUFHRTs7QUFFRjtFQUNFLGNBQWM7RUFDZCx3QkFBd0I7RUFDeEIsMEJBQTBCO0FBQzVCOztBQUVBOytFQUMrRTs7QUFFL0U7O0VBRUU7O0FBRUY7RUFDRSxtQkFBbUI7RUFDbkIscUJBQXFCO0FBQ3ZCOztBQUVBOzs7RUFHRTs7QUFFRjtFQUNFLHVCQUF1QixFQUFFLE1BQU07RUFDL0IsY0FBYyxFQUFFLE1BQU07RUFDdEIsU0FBUyxFQUFFLE1BQU07QUFDbkI7O0FBRUE7K0VBQytFOztBQUUvRTs7RUFFRTs7QUFFRjtFQUNFLDBCQUEwQjtFQUMxQixpQ0FBaUM7QUFDbkM7O0FBRUE7O0VBRUU7O0FBRUY7RUFDRSxtQkFBbUI7QUFDckI7O0FBRUE7OztFQUdFOztBQUVGO0VBQ0UsaUNBQWlDLEVBQUUsTUFBTTtFQUN6QyxjQUFjLEVBQUUsTUFBTTtBQUN4Qjs7QUFFQTs7RUFFRTs7QUFFRjtFQUNFLGNBQWM7QUFDaEI7O0FBRUE7K0VBQytFOztBQUUvRTs7O0VBR0U7O0FBRUY7RUFDRSwwQkFBMEIsRUFBRSxNQUFNO0VBQ2xDLGNBQWMsRUFBRSxNQUFNO0FBQ3hCOztBQUVBOytFQUMrRTs7QUFFL0U7O0VBRUU7O0FBRUY7RUFDRSxTQUFTO0FBQ1g7O0FBRUE7O0VBRUU7O0FBRUY7RUFDRSxvQkFBb0I7QUFDdEI7O0FBRUE7O0VBRUU7O0FBRUY7RUFDRSwwQkFBMEI7QUFDNUI7O0FBRUE7O0VBRUU7O0FBRUY7RUFDRSx3QkFBd0I7QUFDMUI7O0FBRUE7O0VBRUU7O0FBRUY7RUFDRSxvQkFBb0I7QUFDdEI7O0FBRUE7O0VBRUU7O0FBRUY7RUFDRSxTQUFTO0FBQ1g7O0FBRUE7OztFQUdFOztBQUVGO0VBQ0UsNkJBQTZCLEVBQUUsTUFBTTtFQUNyQyxvQkFBb0IsRUFBRSxNQUFNO0FBQzlCOztBQUVBOztFQUVFOztBQUVGOztFQUVFLFlBQVk7QUFDZDs7QUFFQTs7RUFFRTs7QUFFRjtFQUNFLGNBQWM7RUFDZCxhQUFhO0FBQ2Y7O0FBRUE7O0VBRUU7O0FBRUY7RUFDRSx3QkFBd0I7QUFDMUI7O0FBRUE7OztFQUdFOztBQUVGO0VBQ0UsMEJBQTBCLEVBQUUsTUFBTTtFQUNsQyxhQUFhLEVBQUUsTUFBTTtBQUN2Qjs7QUFFQTs7RUFFRTs7QUFFRjtFQUNFLGtCQUFrQjtFQUNsQixVQUFVO0FBQ1o7O0FBRUE7O0VBRUU7O0FBRUY7RUFDRSw4QkFBOEI7QUFDaEM7O0FBRUE7O0VBRUU7O0FBRUY7RUFDRSxnQkFBZ0I7QUFDbEI7O0FBRUE7K0VBQytFOztBQUUvRTs7RUFFRTs7QUFFRjtFQUNFLHVCQUF1QjtFQUN2QixhQUFhO0VBQ2IsWUFBWTtFQUNaLHdCQUF3QjtFQUN4QixtQkFBbUI7RUFDbkIsT0FBTztFQUNQLFlBQVk7RUFDWixZQUFZO0VBQ1osa0JBQWtCO0VBQ2xCLFFBQVE7RUFDUix1QkFBdUI7RUFDdkIsa0JBQWtCO0FBQ3BCOztBQUVBO0VBQ0UsYUFBYTtBQUNmOztBQUVBOztFQUVFOztBQUVGO0VBQ0Usa0JBQWtCO0FBQ3BCIiwiZmlsZSI6Im5vcm1hbGl6ZS5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIvKiBEb2N1bWVudFxuICogPT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0gKi9cblxuLyoqXG4gKiAxLiBDb3JyZWN0IHRoZSBsaW5lIGhlaWdodCBpbiBhbGwgYnJvd3NlcnMuXG4gKiAyLiBQcmV2ZW50IGFkanVzdG1lbnRzIG9mIGZvbnQgc2l6ZSBhZnRlciBvcmllbnRhdGlvbiBjaGFuZ2VzIGluIGlPUy5cbiAqL1xuXG46d2hlcmUoaHRtbCkge1xuICBsaW5lLWhlaWdodDogMS4xNTsgLyogMSAqL1xuICAtd2Via2l0LXRleHQtc2l6ZS1hZGp1c3Q6IDEwMCU7IC8qIDIgKi9cbiAgdGV4dC1zaXplLWFkanVzdDogMTAwJTsgLyogMiAqL1xufVxuXG4vKiBTZWN0aW9uc1xuICogPT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0gKi9cblxuLyoqXG4gKiBDb3JyZWN0IHRoZSBmb250IHNpemUgYW5kIG1hcmdpbiBvbiBgaDFgIGVsZW1lbnRzIHdpdGhpbiBgc2VjdGlvbmAgYW5kXG4gKiBgYXJ0aWNsZWAgY29udGV4dHMgaW4gQ2hyb21lLCBFZGdlLCBGaXJlZm94LCBhbmQgU2FmYXJpLlxuICovXG5cbjp3aGVyZShoMSkge1xuICBmb250LXNpemU6IDJlbTtcbiAgbWFyZ2luLWJsb2NrLWVuZDogMC42N2VtO1xuICBtYXJnaW4tYmxvY2stc3RhcnQ6IDAuNjdlbTtcbn1cblxuLyogR3JvdXBpbmcgY29udGVudFxuICogPT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0gKi9cblxuLyoqXG4gKiBSZW1vdmUgdGhlIG1hcmdpbiBvbiBuZXN0ZWQgbGlzdHMgaW4gQ2hyb21lLCBFZGdlLCBhbmQgU2FmYXJpLlxuICovXG5cbjp3aGVyZShkbCwgb2wsIHVsKSA6d2hlcmUoZGwsIG9sLCB1bCkge1xuICBtYXJnaW4tYmxvY2stZW5kOiAwO1xuICBtYXJnaW4tYmxvY2stc3RhcnQ6IDA7XG59XG5cbi8qKlxuICogMS4gQWRkIHRoZSBjb3JyZWN0IGJveCBzaXppbmcgaW4gRmlyZWZveC5cbiAqIDIuIENvcnJlY3QgdGhlIGluaGVyaXRhbmNlIG9mIGJvcmRlciBjb2xvciBpbiBGaXJlZm94LlxuICovXG5cbjp3aGVyZShocikge1xuICBib3gtc2l6aW5nOiBjb250ZW50LWJveDsgLyogMSAqL1xuICBjb2xvcjogaW5oZXJpdDsgLyogMiAqL1xuICBoZWlnaHQ6IDA7IC8qIDEgKi9cbn1cblxuLyogVGV4dC1sZXZlbCBzZW1hbnRpY3NcbiAqID09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09ICovXG5cbi8qKlxuICogQWRkIHRoZSBjb3JyZWN0IHRleHQgZGVjb3JhdGlvbiBpbiBTYWZhcmkuXG4gKi9cblxuOndoZXJlKGFiYnJbdGl0bGVdKSB7XG4gIHRleHQtZGVjb3JhdGlvbjogdW5kZXJsaW5lO1xuICB0ZXh0LWRlY29yYXRpb246IHVuZGVybGluZSBkb3R0ZWQ7XG59XG5cbi8qKlxuICogQWRkIHRoZSBjb3JyZWN0IGZvbnQgd2VpZ2h0IGluIENocm9tZSwgRWRnZSwgYW5kIFNhZmFyaS5cbiAqL1xuXG46d2hlcmUoYiwgc3Ryb25nKSB7XG4gIGZvbnQtd2VpZ2h0OiBib2xkZXI7XG59XG5cbi8qKlxuICogMS4gQ29ycmVjdCB0aGUgaW5oZXJpdGFuY2UgYW5kIHNjYWxpbmcgb2YgZm9udCBzaXplIGluIGFsbCBicm93c2Vycy5cbiAqIDIuIENvcnJlY3QgdGhlIG9kZCBgZW1gIGZvbnQgc2l6aW5nIGluIGFsbCBicm93c2Vycy5cbiAqL1xuXG46d2hlcmUoY29kZSwga2JkLCBwcmUsIHNhbXApIHtcbiAgZm9udC1mYW1pbHk6IG1vbm9zcGFjZSwgbW9ub3NwYWNlOyAvKiAxICovXG4gIGZvbnQtc2l6ZTogMWVtOyAvKiAyICovXG59XG5cbi8qKlxuICogQWRkIHRoZSBjb3JyZWN0IGZvbnQgc2l6ZSBpbiBhbGwgYnJvd3NlcnMuXG4gKi9cblxuOndoZXJlKHNtYWxsKSB7XG4gIGZvbnQtc2l6ZTogODAlO1xufVxuXG4vKiBUYWJ1bGFyIGRhdGFcbiAqID09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09ICovXG5cbi8qKlxuICogMS4gQ29ycmVjdCB0YWJsZSBib3JkZXIgY29sb3IgaW4gQ2hyb21lLCBFZGdlLCBhbmQgU2FmYXJpLlxuICogMi4gUmVtb3ZlIHRleHQgaW5kZW50YXRpb24gZnJvbSB0YWJsZSBjb250ZW50cyBpbiBDaHJvbWUsIEVkZ2UsIGFuZCBTYWZhcmkuXG4gKi9cblxuOndoZXJlKHRhYmxlKSB7XG4gIGJvcmRlci1jb2xvcjogY3VycmVudENvbG9yOyAvKiAxICovXG4gIHRleHQtaW5kZW50OiAwOyAvKiAyICovXG59XG5cbi8qIEZvcm1zXG4gKiA9PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PSAqL1xuXG4vKipcbiAqIFJlbW92ZSB0aGUgbWFyZ2luIG9uIGNvbnRyb2xzIGluIFNhZmFyaS5cbiAqL1xuXG46d2hlcmUoYnV0dG9uLCBpbnB1dCwgc2VsZWN0KSB7XG4gIG1hcmdpbjogMDtcbn1cblxuLyoqXG4gKiBSZW1vdmUgdGhlIGluaGVyaXRhbmNlIG9mIHRleHQgdHJhbnNmb3JtIGluIEZpcmVmb3guXG4gKi9cblxuOndoZXJlKGJ1dHRvbikge1xuICB0ZXh0LXRyYW5zZm9ybTogbm9uZTtcbn1cblxuLyoqXG4gKiBDb3JyZWN0IHRoZSBpbmFiaWxpdHkgdG8gc3R5bGUgYnV0dG9ucyBpbiBpT1MgYW5kIFNhZmFyaS5cbiAqL1xuXG46d2hlcmUoYnV0dG9uLCBpbnB1dDppcyhbdHlwZT1cImJ1dHRvblwiIGldLCBbdHlwZT1cInJlc2V0XCIgaV0sIFt0eXBlPVwic3VibWl0XCIgaV0pKSB7XG4gIC13ZWJraXQtYXBwZWFyYW5jZTogYnV0dG9uO1xufVxuXG4vKipcbiAqIEFkZCB0aGUgY29ycmVjdCB2ZXJ0aWNhbCBhbGlnbm1lbnQgaW4gQ2hyb21lLCBFZGdlLCBhbmQgRmlyZWZveC5cbiAqL1xuXG46d2hlcmUocHJvZ3Jlc3MpIHtcbiAgdmVydGljYWwtYWxpZ246IGJhc2VsaW5lO1xufVxuXG4vKipcbiAqIFJlbW92ZSB0aGUgaW5oZXJpdGFuY2Ugb2YgdGV4dCB0cmFuc2Zvcm0gaW4gRmlyZWZveC5cbiAqL1xuXG46d2hlcmUoc2VsZWN0KSB7XG4gIHRleHQtdHJhbnNmb3JtOiBub25lO1xufVxuXG4vKipcbiAqIFJlbW92ZSB0aGUgbWFyZ2luIGluIEZpcmVmb3ggYW5kIFNhZmFyaS5cbiAqL1xuXG46d2hlcmUodGV4dGFyZWEpIHtcbiAgbWFyZ2luOiAwO1xufVxuXG4vKipcbiAqIDEuIENvcnJlY3QgdGhlIG9kZCBhcHBlYXJhbmNlIGluIENocm9tZSwgRWRnZSwgYW5kIFNhZmFyaS5cbiAqIDIuIENvcnJlY3QgdGhlIG91dGxpbmUgc3R5bGUgaW4gU2FmYXJpLlxuICovXG5cbjp3aGVyZShpbnB1dFt0eXBlPVwic2VhcmNoXCIgaV0pIHtcbiAgLXdlYmtpdC1hcHBlYXJhbmNlOiB0ZXh0ZmllbGQ7IC8qIDEgKi9cbiAgb3V0bGluZS1vZmZzZXQ6IC0ycHg7IC8qIDIgKi9cbn1cblxuLyoqXG4gKiBDb3JyZWN0IHRoZSBjdXJzb3Igc3R5bGUgb2YgaW5jcmVtZW50IGFuZCBkZWNyZW1lbnQgYnV0dG9ucyBpbiBTYWZhcmkuXG4gKi9cblxuOjotd2Via2l0LWlubmVyLXNwaW4tYnV0dG9uLFxuOjotd2Via2l0LW91dGVyLXNwaW4tYnV0dG9uIHtcbiAgaGVpZ2h0OiBhdXRvO1xufVxuXG4vKipcbiAqIENvcnJlY3QgdGhlIHRleHQgc3R5bGUgb2YgcGxhY2Vob2xkZXJzIGluIENocm9tZSwgRWRnZSwgYW5kIFNhZmFyaS5cbiAqL1xuXG46Oi13ZWJraXQtaW5wdXQtcGxhY2Vob2xkZXIge1xuICBjb2xvcjogaW5oZXJpdDtcbiAgb3BhY2l0eTogMC41NDtcbn1cblxuLyoqXG4gKiBSZW1vdmUgdGhlIGlubmVyIHBhZGRpbmcgaW4gQ2hyb21lLCBFZGdlLCBhbmQgU2FmYXJpIG9uIG1hY09TLlxuICovXG5cbjo6LXdlYmtpdC1zZWFyY2gtZGVjb3JhdGlvbiB7XG4gIC13ZWJraXQtYXBwZWFyYW5jZTogbm9uZTtcbn1cblxuLyoqXG4gKiAxLiBDb3JyZWN0IHRoZSBpbmFiaWxpdHkgdG8gc3R5bGUgdXBsb2FkIGJ1dHRvbnMgaW4gaU9TIGFuZCBTYWZhcmkuXG4gKiAyLiBDaGFuZ2UgZm9udCBwcm9wZXJ0aWVzIHRvIGBpbmhlcml0YCBpbiBTYWZhcmkuXG4gKi9cblxuOjotd2Via2l0LWZpbGUtdXBsb2FkLWJ1dHRvbiB7XG4gIC13ZWJraXQtYXBwZWFyYW5jZTogYnV0dG9uOyAvKiAxICovXG4gIGZvbnQ6IGluaGVyaXQ7IC8qIDIgKi9cbn1cblxuLyoqXG4gKiBSZW1vdmUgdGhlIGlubmVyIGJvcmRlciBhbmQgcGFkZGluZyBvZiBmb2N1cyBvdXRsaW5lcyBpbiBGaXJlZm94LlxuICovXG5cbjp3aGVyZShidXR0b24sIGlucHV0OmlzKFt0eXBlPVwiYnV0dG9uXCIgaV0sIFt0eXBlPVwiY29sb3JcIiBpXSwgW3R5cGU9XCJyZXNldFwiIGldLCBbdHlwZT1cInN1Ym1pdFwiIGldKSk6Oi1tb3otZm9jdXMtaW5uZXIge1xuICBib3JkZXItc3R5bGU6IG5vbmU7XG4gIHBhZGRpbmc6IDA7XG59XG5cbi8qKlxuICogUmVzdG9yZSB0aGUgZm9jdXMgb3V0bGluZSBzdHlsZXMgdW5zZXQgYnkgdGhlIHByZXZpb3VzIHJ1bGUgaW4gRmlyZWZveC5cbiAqL1xuXG46d2hlcmUoYnV0dG9uLCBpbnB1dDppcyhbdHlwZT1cImJ1dHRvblwiIGldLCBbdHlwZT1cImNvbG9yXCIgaV0sIFt0eXBlPVwicmVzZXRcIiBpXSwgW3R5cGU9XCJzdWJtaXRcIiBpXSkpOjotbW96LWZvY3VzcmluZyB7XG4gIG91dGxpbmU6IDFweCBkb3R0ZWQgQnV0dG9uVGV4dDtcbn1cblxuLyoqXG4gKiBSZW1vdmUgdGhlIGFkZGl0aW9uYWwgOmludmFsaWQgc3R5bGVzIGluIEZpcmVmb3guXG4gKi9cblxuOndoZXJlKDotbW96LXVpLWludmFsaWQpIHtcbiAgYm94LXNoYWRvdzogbm9uZTtcbn1cblxuLyogSW50ZXJhY3RpdmVcbiAqID09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09ICovXG5cbi8qXG4gKiBBZGQgdGhlIGNvcnJlY3Qgc3R5bGVzIGluIFNhZmFyaS5cbiAqL1xuXG46d2hlcmUoZGlhbG9nKSB7XG4gIGJhY2tncm91bmQtY29sb3I6IHdoaXRlO1xuICBib3JkZXI6IHNvbGlkO1xuICBjb2xvcjogYmxhY2s7XG4gIGhlaWdodDogLW1vei1maXQtY29udGVudDtcbiAgaGVpZ2h0OiBmaXQtY29udGVudDtcbiAgbGVmdDogMDtcbiAgbWFyZ2luOiBhdXRvO1xuICBwYWRkaW5nOiAxZW07XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgcmlnaHQ6IDA7XG4gIHdpZHRoOiAtbW96LWZpdC1jb250ZW50O1xuICB3aWR0aDogZml0LWNvbnRlbnQ7XG59XG5cbjp3aGVyZShkaWFsb2c6bm90KFtvcGVuXSkpIHtcbiAgZGlzcGxheTogbm9uZTtcbn1cblxuLypcbiAqIEFkZCB0aGUgY29ycmVjdCBkaXNwbGF5IGluIGFsbCBicm93c2Vycy5cbiAqL1xuXG46d2hlcmUoc3VtbWFyeSkge1xuICBkaXNwbGF5OiBsaXN0LWl0ZW07XG59XG4iXX0= */ + +body { + font-family: sans-serif; +} diff --git a/test/sanitize.expect.css b/test/sanitize.expect.css index 95b84d0..a0deeb3 100644 --- a/test/sanitize.expect.css +++ b/test/sanitize.expect.css @@ -2,13 +2,14 @@ * ========================================================================== */ /** - * Add border box sizing in all browsers (opinionated). + * 1. Add border box sizing in all browsers (opinionated). + * 2. Backgrounds do not repeat by default (opinionated). */ *, ::before, ::after { - box-sizing: border-box; + box-sizing: border-box; /* 1 */ } /** @@ -25,22 +26,20 @@ /** * 1. Use the default cursor in all browsers (opinionated). * 2. Change the line height in all browsers (opinionated). - * 3. Use a 4-space tab width in all browsers (opinionated). - * 4. Remove the grey highlight on links in iOS (opinionated). - * 5. Prevent adjustments of font size after orientation changes in - * IE on Windows Phone and in iOS. - * 6. Breaks words to prevent overflow in all browsers (opinionated). + * 3. Breaks words to prevent overflow in all browsers (opinionated). + * 4. Use a 4-space tab width in all browsers (opinionated). + * 5. Remove the grey highlight on links in iOS (opinionated). + * 6. Prevent adjustments of font size after orientation changes in iOS. */ -html { +:where(:root) { cursor: default; /* 1 */ line-height: 1.5; /* 2 */ - -moz-tab-size: 4; /* 3 */ - tab-size: 4; /* 3 */ - -webkit-tap-highlight-color: transparent /* 4 */; - -ms-text-size-adjust: 100%; /* 5 */ - -webkit-text-size-adjust: 100%; /* 5 */ - word-break: break-word; /* 6 */ + overflow-wrap: break-word; /* 3 */ + -moz-tab-size: 4; /* 4 */ + tab-size: 4; /* 4 */ + -webkit-tap-highlight-color: transparent; /* 5 */ + -webkit-text-size-adjust: 100%; /* 6 */ } /* Sections @@ -50,7 +49,7 @@ html { * Remove the margin in all browsers (opinionated). */ -body { +:where(body) { margin: 0; } @@ -59,7 +58,7 @@ body { * `article` contexts in Chrome, Edge, Firefox, and Safari. */ -h1 { +:where(h1) { font-size: 2em; margin: 0.67em 0; } @@ -68,74 +67,61 @@ h1 { * ========================================================================== */ /** - * Remove the margin on nested lists in Chrome, Edge, IE, and Safari. + * Remove the margin on nested lists in Chrome, Edge, and Safari. */ -dl dl, -dl ol, -dl ul, -ol dl, -ul dl { +:where(dl, ol, ul) :where(dl, ol, ul) { margin: 0; } /** - * Remove the margin on nested lists in Edge 18- and IE. + * 1. Correct the inheritance of border color in Firefox. + * 2. Add the correct box sizing in Firefox. */ -ol ol, -ol ul, -ul ol, -ul ul { - margin: 0; +:where(hr) { + color: inherit; /* 1 */ + height: 0; /* 2 */ } /** - * 1. Add the correct sizing in Firefox. - * 2. Show the overflow in Edge 18- and IE. + * Remove the list style on navigation lists in all browsers (opinionated). */ -hr { - height: 0; /* 1 */ - overflow: visible; /* 2 */ +:where(nav) :where(ol, ul) { + list-style-type: none; + padding: 0; } /** - * Add the correct display in IE. + * Prevent VoiceOver from ignoring list semantics in Safari (opinionated). */ -main { - display: block; -} - -/** - * Remove the list style on navigation lists in all browsers (opinionated). - */ - -nav ol, -nav ul { - list-style: none; - padding: 0; +:where(nav li)::before { + content: "\200B"; + float: left; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. + * 3. Prevent overflow of the container in all browsers (opinionated). */ -pre { +:where(pre) { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ + overflow: auto; /* 3 */ } /* Text-level semantics * ========================================================================== */ /** - * Add the correct text decoration in Edge 18-, IE, and Safari. + * Add the correct text decoration in Safari. */ -abbr[title] { +:where(abbr[title]) { text-decoration: underline; text-decoration: underline dotted; } @@ -144,8 +130,7 @@ abbr[title] { * Add the correct font weight in Chrome, Edge, and Safari. */ -b, -strong { +:where(b, strong) { font-weight: bolder; } @@ -154,9 +139,7 @@ strong { * 2. Correct the odd `em` font sizing in all browsers. */ -code, -kbd, -samp { +:where(code, kbd, samp) { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } @@ -165,7 +148,7 @@ samp { * Add the correct font size in all browsers. */ -small { +:where(small) { font-size: 80%; } @@ -176,12 +159,7 @@ small { * Change the alignment on media elements in all browsers (opinionated). */ -audio, -canvas, -iframe, -img, -svg, -video { +:where(audio, canvas, iframe, img, svg, video) { vertical-align: middle; } @@ -189,7 +167,7 @@ video { * Remove the border on iframes in all browsers (opinionated). */ -iframe { +:where(iframe) { border-style: none; } @@ -197,27 +175,23 @@ iframe { * Change the fill color to match the text color in all browsers (opinionated). */ -svg:not([fill]) { +:where(svg:not([fill])) { fill: currentColor; } -/** - * Hide the overflow in IE. - */ - -svg:not(:root) { - overflow: hidden; -} - /* Tabular data * ========================================================================== */ /** - * Collapse border spacing in all browsers (opinionated). + * 1. Collapse border spacing in all browsers (opinionated). + * 2. Correct table border color inheritance in all Chrome, Edge, and Safari. + * 3. Remove text indentation from table contents in Chrome, Edge, and Safari. */ -table { - border-collapse: collapse; +:where(table) { + border-collapse: collapse; /* 1 */ + border-color: inherit; /* 2 */ + text-indent: 0; /* 3 */ } /* Forms @@ -227,90 +201,41 @@ table { * Remove the margin on controls in Safari. */ -button, -input, -select { +:where(button, input, select) { margin: 0; } -/** - * 1. Show the overflow in IE. - * 2. Remove the inheritance of text transform in Edge 18-, Firefox, and IE. - */ - -button { - overflow: visible; /* 1 */ - text-transform: none; /* 2 */ -} - /** * Correct the inability to style buttons in iOS and Safari. */ -button, -[type="button"], -[type="reset"], -[type="submit"] { +:where(button, [type="button" i], [type="reset" i], [type="submit" i]) { -webkit-appearance: button; } /** - * 1. Change the inconsistent appearance in all browsers (opinionated). - * 2. Correct the padding in Firefox. - */ - -fieldset { - border: 1px solid #a0a0a0; /* 1 */ - padding: 0.35em 0.75em 0.625em; /* 2 */ -} - -/** - * Show the overflow in Edge 18- and IE. - */ - -input { - overflow: visible; -} - -/** - * 1. Correct the text wrapping in Edge 18- and IE. - * 2. Correct the color inheritance from `fieldset` elements in IE. + * Change the inconsistent appearance in all browsers (opinionated). */ -legend { - color: inherit; /* 2 */ - display: table; /* 1 */ - max-width: 100%; /* 1 */ - white-space: normal; /* 1 */ +:where(fieldset) { + border: 1px solid #a0a0a0; } /** - * 1. Add the correct display in Edge 18- and IE. - * 2. Add the correct vertical alignment in Chrome, Edge, and Firefox. + * Add the correct vertical alignment in Chrome, Edge, and Firefox. */ -progress { - display: inline-block; /* 1 */ - vertical-align: baseline; /* 2 */ -} - -/** - * Remove the inheritance of text transform in Firefox. - */ - -select { - text-transform: none; +:where(progress) { + vertical-align: baseline; } /** * 1. Remove the margin in Firefox and Safari. - * 2. Remove the default vertical scrollbar in IE. * 3. Change the resize direction in all browsers (opinionated). */ -textarea { +:where(textarea) { margin: 0; /* 1 */ - overflow: auto; /* 2 */ resize: vertical; /* 3 */ } @@ -319,7 +244,7 @@ textarea { * 2. Correct the outline style in Safari. */ -[type="search"] { +:where([type="search" i]) { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } @@ -360,53 +285,18 @@ textarea { font: inherit; /* 2 */ } -/** - * Remove the inner border and padding of focus outlines in Firefox. - */ - -::-moz-focus-inner { - border-style: none; - padding: 0; -} - -/** - * Restore the focus outline styles unset by the previous rule in Firefox. - */ - -:-moz-focusring { - outline: 1px dotted ButtonText; -} - -/** - * Remove the additional :invalid styles in Firefox. - */ - -:-moz-ui-invalid { - box-shadow: none; -} - /* Interactive * ========================================================================== */ /* - * Add the correct display in Edge 18- and IE. - */ - -details { - display: block; -} - -/* - * Add the correct styles in Edge 18-, IE, and Safari. + * Add the correct styles in Safari. */ -dialog { +:where(dialog) { background-color: white; border: solid; color: black; - display: block; height: -moz-fit-content; - height: -webkit-fit-content; height: fit-content; left: 0; margin: auto; @@ -414,55 +304,21 @@ dialog { position: absolute; right: 0; width: -moz-fit-content; - width: -webkit-fit-content; width: fit-content; } -dialog:not([open]) { +:where(dialog:not([open])) { display: none; } /* - * Add the correct display in all browsers. + * Add the correct display in Safari. */ -summary { +:where(details > summary:first-of-type) { display: list-item; } -/* Scripting - * ========================================================================== */ - -/** - * Add the correct display in IE. - */ - -template { - display: none; -} - -/* User interaction - * ========================================================================== */ - -/* - * 1. Remove the tapping delay in IE 10. - * 2. Remove the tapping delay on clickable elements - in all browsers (opinionated). - */ - -a, -area, -button, -input, -label, -select, -summary, -textarea, -[tabindex] { - -ms-touch-action: manipulation; /* 1 */ - touch-action: manipulation; /* 2 */ -} - /* Accessibility * ========================================================================== */ @@ -470,7 +326,7 @@ textarea, * Change the cursor on busy elements in all browsers (opinionated). */ -[aria-busy="true"] { +:where([aria-busy="true" i]) { cursor: progress; } @@ -478,7 +334,7 @@ textarea, * Change the cursor on control elements in all browsers (opinionated). */ -[aria-controls] { +:where([aria-controls]) { cursor: pointer; } @@ -487,8 +343,7 @@ textarea, * inoperable elements in all browsers (opinionated). */ -[aria-disabled="true"], -[disabled] { +:where([aria-disabled="true" i], [disabled]) { cursor: not-allowed; } @@ -497,11 +352,11 @@ textarea, * in all browsers (opinionated). */ -[aria-hidden="false"][hidden] { +:where([aria-hidden="false" i][hidden]) { display: initial; } -[aria-hidden="false"][hidden]:not(:focus) { +:where([aria-hidden="false" i][hidden]:not(:focus)) { clip: rect(0, 0, 0, 0); position: absolute; }