diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..6313b56 --- /dev/null +++ b/.gitattributes @@ -0,0 +1 @@ +* text=auto eol=lf diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml new file mode 100644 index 0000000..4a287db --- /dev/null +++ b/.github/workflows/test.yml @@ -0,0 +1,18 @@ +name: test +on: + push: + +jobs: + test: + runs-on: ubuntu-latest + strategy: + matrix: + node: [12, 16] + steps: + - uses: actions/checkout@v2 + - uses: actions/setup-node@v2 + with: + node-version: ${{ matrix.node }} + + - run: yarn install --ignore-scripts + - run: yarn run test diff --git a/.gitignore b/.gitignore index 056c19f..1ee23c3 100644 --- a/.gitignore +++ b/.gitignore @@ -1,12 +1,13 @@ +dist node_modules package-lock.json +yarn.lock *.log* *.result.css .* !.editorconfig +!.gitattributes +!.github !.gitignore !.rollup.js !.tape.js -!.travis.yml -/index.js* -/index.mjs* diff --git a/.rollup.js b/.rollup.js index 7df09c9..1fb0d87 100644 --- a/.rollup.js +++ b/.rollup.js @@ -1,16 +1,9 @@ -import babel from 'rollup-plugin-babel'; +import pkg from './package.json' export default { - input: 'src/postcss.js', - output: [ - { file: 'index.js', format: 'cjs', sourcemap: true }, - { file: 'index.mjs', format: 'esm', sourcemap: true } - ], - plugins: [ - babel({ - presets: [ - ['@babel/env', { targets: { node: 6 } }] - ] - }) - ] -}; + ...pkg.rollup, + plugins: pkg.rollup.plugins.map(plugin => require(plugin)()), + onwarn(warning, warn) { + if (warning.code !== 'UNRESOLVED_IMPORT') warn(warning) + } +} diff --git a/.tape.js b/.tape.js index fa748df..40df4f4 100644 --- a/.tape.js +++ b/.tape.js @@ -89,29 +89,18 @@ module.exports = { } }, 'insert:after': { - message: 'supports { stage: 1, features: { "color-mod-function": { unresolved: "warn" } }, insertAfter: { "color-mod-function": [ require("postcss-simple-vars")() ] } } usage', + message: 'supports { stage: 1, insertAfter: { "color-mod-function": [ require("postcss-simple-vars")() ] } } usage', options: { stage: 1, - features: { - 'color-mod-function': { - unresolved: 'warn' - } - }, insertAfter: { 'color-mod-function': require('postcss-simple-vars') } }, - warnings: 2 }, 'insert:after:exec': { message: 'supports { stage: 2, features: { "color-mod-function": { unresolved: "ignore" } }, insertAfter: { "color-mod-function": require("postcss-simple-vars")() } } usage', options: { stage: 2, - features: { - 'color-mod-function': { - unresolved: 'ignore' - } - }, insertAfter: { 'color-mod-function': require('postcss-simple-vars')() } diff --git a/.travis.yml b/.travis.yml deleted file mode 100644 index 08a68cc..0000000 --- a/.travis.yml +++ /dev/null @@ -1,18 +0,0 @@ -# https://docs.travis-ci.com/user/travis-lint - -language: node_js - -os: - - windows - - linux - - osx - -node_js: - - 10 - - 8 - - 6 - -install: - - git config --global core.autocrlf false - - git checkout -qf ${TRAVIS_COMMIT} - - npm install --ignore-scripts diff --git a/CHANGELOG.md b/CHANGELOG.md index 05a6190..1b77f17 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,44 @@ # Changes to PostCSS Preset Env +### 7.0.0 (September 22, 2021) + +- Updated `autoprefixer` to 10.3.5 (major) +- Updated `browserslist` to 4.12.0 (minor) +- Updated `caniuse-lite` to 1.0.30001048 (patch) +- Updated `css-blank-pseudo` to 2.0.0 (major) +- Updated `css-has-pseudo` to 2.0.0 (major) +- Updated `css-prefers-color-scheme` to 5.0.0 (major) +- Updated `cssdb` to 5.0.0 (major) +- Updated `postcss` to 7.0.27 (major) +- Updated `postcss-attribute-case-insensitive` to 5.0.0 (major) +- Updated `postcss-color-functional-notation` to 4.0.0 (major) +- Updated `postcss-color-hex-alpha` to 7.0.0 (major) +- Updated `postcss-color-rebeccapurple` to 7.0.0 (major) +- Updated `postcss-custom-media` to 8.0.0 (major) +- Updated `postcss-custom-properties` to 12.0.0 (major) +- Updated `postcss-custom-selectors` to 6.0.0 (major) +- Updated `postcss-dir-pseudo-class` to 6.0.0 (major) +- Updated `postcss-double-position-gradients` to 3.0.0 (major) +- Updated `postcss-env-function` to 4.0.0 (major) +- Updated `postcss-focus-visible` to 6.0.1 (major) +- Updated `postcss-focus-within` to 5.0.1 (major) +- Updated `postcss-font-variant` to 5.0.0 (major) +- Updated `postcss-gap-properties` to 3.0.0 (major) +- Updated `postcss-image-set-function` to 4.0.0 (major) +- Updated `postcss-initial` to 3.0.2 (patch) +- Updated `postcss-lab-function` to 4.0.0 (major) +- Updated `postcss-logical` to 5.0.0 (major) +- Updated `postcss-media-minmax` to 5.0.0 (major) +- Updated `postcss-nesting` to 8.0.1 (major) +- Updated `postcss-overflow-shorthand` to 3.0.0 (major) +- Updated `postcss-page-break` to 3.0.4 (major) +- Updated `postcss-place` to 7.0.0 (major) +- Updated `postcss-pseudo-class-any-link` to 7.0.0 (major) +- Updated `postcss-replace-overflow-wrap` to 4.0.0 (major) +- Updated `postcss-selector-matches` to 4.0.0 (major) +- Removed `postcss-color-gray` +- Updated support for Node 12+ (major) + ### 6.7.0 (July 8, 2019) - Fixed the issue of autoprefixer alerting an upcoming change to the API diff --git a/README.md b/README.md index fa93371..9c847bd 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,8 @@ # PostCSS Preset Env [PostCSS][postcss] -[![NPM Version][npm-img]][npm-url] -[![Build Status][cli-img]][cli-url] -[![Support Chat][git-img]][git-url] +[npm version][npm-url] +[build status][cli-url] +[support chat][git-url] [PostCSS Preset Env] lets you convert modern CSS into something most browsers can understand, determining the polyfills you need based on your targeted @@ -362,8 +362,8 @@ postcssPresetEnv({ }); ``` -[cli-img]: https://img.shields.io/travis/csstools/postcss-preset-env/master.svg -[cli-url]: https://travis-ci.org/csstools/postcss-preset-env +[cli-img]: https://github.com/postcss/postcss-preset-env/workflows/test/badge.svg +[cli-url]: https://github.com/postcss/postcss-preset-env/actions/workflows/test.yml?query=workflow/test [git-img]: https://img.shields.io/badge/support-chat-blue.svg [git-url]: https://gitter.im/postcss/postcss [npm-img]: https://img.shields.io/npm/v/postcss-preset-env.svg diff --git a/package.json b/package.json index ba6f30e..120e8c6 100644 --- a/package.json +++ b/package.json @@ -1,85 +1,118 @@ { "name": "postcss-preset-env", - "version": "6.7.0", + "version": "7.0.0", "description": "Convert modern CSS into something browsers understand", "author": "Jonathan Neal ", "license": "CC0-1.0", "repository": "csstools/postcss-preset-env", "homepage": "https://github.com/csstools/postcss-preset-env#readme", "bugs": "https://github.com/csstools/postcss-preset-env/issues", - "main": "index.js", - "module": "index.mjs", + "main": "dist/index.js", + "module": "dist/index.mjs", "files": [ - "index.js", - "index.js.map", - "index.mjs", - "index.mjs.map" + "dist" ], "scripts": { - "build": "rollup -c .rollup.js --silent", - "prepublishOnly": "npm test", - "pretest:tape": "npm run build", - "test": "npm run test:js && npm run test:tape", - "test:js": "eslint src/*.js src/lib/*.js src/patch/*.js --cache --ignore-path .gitignore --quiet", - "test:tape": "postcss-tape" + "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" }, "engines": { - "node": ">=6.0.0" + "node": ">=12" + }, + "peerDependencies": { + "postcss": "^8.3" }, "dependencies": { - "autoprefixer": "^9.6.1", - "browserslist": "^4.6.4", - "caniuse-lite": "^1.0.30001040", - "css-blank-pseudo": "^0.1.4", - "css-has-pseudo": "^0.10.0", - "css-prefers-color-scheme": "^3.1.1", - "cssdb": "^4.4.0", - "postcss": "^8.3.4", - "postcss-attribute-case-insensitive": "^4.0.1", - "postcss-color-functional-notation": "^2.0.1", - "postcss-color-gray": "^5.0.0", - "postcss-color-hex-alpha": "^5.0.3", - "postcss-color-mod-function": "^3.0.3", - "postcss-color-rebeccapurple": "^4.0.1", - "postcss-custom-media": "^7.0.8", - "postcss-custom-properties": "^8.0.11", - "postcss-custom-selectors": "^5.1.2", - "postcss-dir-pseudo-class": "^5.0.0", - "postcss-double-position-gradients": "^1.0.0", - "postcss-env-function": "^2.0.2", - "postcss-focus-visible": "^4.0.0", - "postcss-focus-within": "^4.0.0", - "postcss-font-variant": "^4.0.0", - "postcss-gap-properties": "^2.0.0", - "postcss-image-set-function": "^3.0.1", - "postcss-initial": "^3.0.1", - "postcss-lab-function": "^2.0.1", - "postcss-logical": "^3.0.0", - "postcss-media-minmax": "^4.0.0", - "postcss-nesting": "^7.0.0", - "postcss-overflow-shorthand": "^2.0.0", - "postcss-page-break": "^2.0.0", - "postcss-place": "^4.0.1", - "postcss-pseudo-class-any-link": "^6.0.0", - "postcss-replace-overflow-wrap": "^3.0.0", - "postcss-selector-matches": "^4.0.0", - "postcss-selector-not": "^4.0.0" + "autoprefixer": "^10.4.0", + "browserslist": "^4.17.5", + "caniuse-lite": "^1.0.30001272", + "css-blank-pseudo": "^2.0.0", + "css-has-pseudo": "^2.0.0", + "css-prefers-color-scheme": "^5.0.0", + "cssdb": "^5.0.0", + "postcss": "^8.3", + "postcss-attribute-case-insensitive": "^5.0.0", + "postcss-color-functional-notation": "^4.0.0", + "postcss-color-hex-alpha": "^8.0.0", + "postcss-color-rebeccapurple": "^7.0.0", + "postcss-custom-media": "^8.0.0", + "postcss-custom-properties": "^12.0.0", + "postcss-custom-selectors": "^6.0.0", + "postcss-dir-pseudo-class": "^6.0.0", + "postcss-double-position-gradients": "^3.0.0", + "postcss-env-function": "^4.0.1", + "postcss-focus-visible": "^6.0.1", + "postcss-focus-within": "^5.0.1", + "postcss-font-variant": "^5.0.0", + "postcss-gap-properties": "^3.0.0", + "postcss-image-set-function": "^4.0.0", + "postcss-initial": "^3.0.4", + "postcss-lab-function": "^4.0.0", + "postcss-logical": "^5.0.0", + "postcss-media-minmax": "^5.0.0", + "postcss-nesting": "^10.0.0", + "postcss-overflow-shorthand": "^3.0.0", + "postcss-page-break": "^3.0.4", + "postcss-place": "^7.0.0", + "postcss-pseudo-class-any-link": "^7.0.0", + "postcss-replace-overflow-wrap": "^4.0.0", + "postcss-selector-not": "^5.0.0" }, "devDependencies": { - "@babel/core": "^7.5.0", - "@babel/preset-env": "^7.5.2", - "babel-eslint": "^10.0.2", - "eslint": "^5.16.0", - "eslint-config-dev": "^2.0.0", - "postcss-simple-vars": "^5.0.2", - "postcss-tape": "^4.0.0", + "@babel/core": "^7.15.8", + "@babel/preset-env": "^7.15.8", + "eslint": "^8.1.0", + "postcss-simple-vars": "^6.0.3", + "postcss-tape": "^6.0.1", "pre-commit": "^1.2.2", - "rollup": "^1.16.6", - "rollup-plugin-babel": "^4.3.3" + "rollup": "^2.58.3", + "rollup-plugin-babel": "^4.4.0" + }, + "babel": { + "presets": [ + [ + "@babel/env", + { + "targets": "maintained node versions" + } + ] + ] }, "eslintConfig": { - "extends": "dev", - "parser": "babel-eslint" + "env": { + "browser": true, + "es6": true, + "node": true + }, + "extends": "eslint:recommended", + "parserOptions": { + "ecmaVersion": 2020, + "sourceType": "module" + }, + "root": true + }, + "rollup": { + "input": "src/postcss.js", + "plugins": [ + "rollup-plugin-babel" + ], + "output": [ + { + "exports": "default", + "file": "dist/index.js", + "format": "cjs" + }, + { + "file": "dist/index.mjs", + "format": "esm" + } + ] }, "keywords": [ "postcss", diff --git a/src/cli.js b/src/cli.js index a46b30f..199ce8e 100644 --- a/src/cli.js +++ b/src/cli.js @@ -14,7 +14,7 @@ if (process.argv.length < 3) { } // get process and plugin options from the command line -const fileRegExp = /^[\w\/.]+$/; +const fileRegExp = /^[\w/.]+$/; const argRegExp = /^--(\w+)=("|')?(.+)\2$/; const relaxedJsonPropRegExp = /(['"])?([a-z0-9A-Z_]+)(['"])?:/g; const relaxedJsonValueRegExp = /("[a-z0-9A-Z_]+":\s*)(?!true|false|null|\d+)'?([A-z0-9]+)'?([,}])/g; @@ -106,6 +106,7 @@ function getStdin() { process.stdin.on('readable', () => { let chunk; + // eslint-disable-next-line no-cond-assign while (chunk = process.stdin.read()) { data += chunk; } diff --git a/src/lib/ids-by-execution-order.js b/src/lib/ids-by-execution-order.js index 5fadc89..986e911 100644 --- a/src/lib/ids-by-execution-order.js +++ b/src/lib/ids-by-execution-order.js @@ -19,7 +19,6 @@ export default [ 'all-property', // run all-property before other property polyfills 'color-functional-notation', 'double-position-gradients', - 'gray-function', 'hexadecimal-alpha-notation', 'lab-function', 'rebeccapurple-color', diff --git a/src/lib/plugins-by-id.js b/src/lib/plugins-by-id.js index 2508514..5c4090e 100644 --- a/src/lib/plugins-by-id.js +++ b/src/lib/plugins-by-id.js @@ -1,9 +1,7 @@ import postcssAttributeCaseInsensitive from 'postcss-attribute-case-insensitive'; import postcssBlankPseudo from 'css-blank-pseudo/postcss'; import postcssColorFunctionalNotation from 'postcss-color-functional-notation'; -import postcssColorGray from 'postcss-color-gray'; import postcssColorHexAlpha from 'postcss-color-hex-alpha'; -import postcssColorModFunction from 'postcss-color-mod-function'; import postcssColorRebeccapurple from 'postcss-color-rebeccapurple'; import postcssCustomMedia from 'postcss-custom-media'; import postcssCustomProperties from 'postcss-custom-properties'; @@ -29,7 +27,6 @@ import postcssPlace from 'postcss-place'; import postcssPrefersColorScheme from 'css-prefers-color-scheme/postcss'; import postcssPseudoClassAnyLink from 'postcss-pseudo-class-any-link'; import postcssReplaceOverflowWrap from 'postcss-replace-overflow-wrap'; -import postcssSelectorMatches from 'postcss-selector-matches'; import postcssSelectorNot from 'postcss-selector-not'; // postcss plugins ordered by id @@ -40,7 +37,6 @@ export default { 'break-properties': postcssPageBreak, 'case-insensitive-attributes': postcssAttributeCaseInsensitive, 'color-functional-notation': postcssColorFunctionalNotation, - 'color-mod-function': postcssColorModFunction, 'custom-media-queries': postcssCustomMedia, 'custom-properties': postcssCustomProperties, 'custom-selectors': postcssCustomSelectors, @@ -51,13 +47,11 @@ export default { 'focus-within-pseudo-class': postcssFocusWithin, 'font-variant-property': postcssFontVariant, 'gap-properties': postcssGapProperties, - 'gray-function': postcssColorGray, 'has-pseudo-class': postcssHasPseudo, 'hexadecimal-alpha-notation': postcssColorHexAlpha, 'image-set-function': postcssImageSetPolyfill, 'lab-function': postcssLabFunction, 'logical-properties-and-values': postcssLogical, - 'matches-pseudo-class': postcssSelectorMatches, 'media-query-ranges': postcssMediaMinmax, 'nesting-rules': postcssNesting, 'not-pseudo-class': postcssSelectorNot, diff --git a/src/patch/postcss-system-ui-font-family.js b/src/patch/postcss-system-ui-font-family.js index 02d983e..d50cb56 100644 --- a/src/patch/postcss-system-ui-font-family.js +++ b/src/patch/postcss-system-ui-font-family.js @@ -1,10 +1,17 @@ -import postcss from 'postcss'; +export default function postcssSystemUiFont() { + return { + postcssPlugin: 'postcss-system-ui-font', + Declaration(/** @type {import('postcss').Declaration} */ node) { + if (propertyRegExp.test(node.prop)) { + if (!node.value.includes(systemUiFamily.join(', '))) { + node.value = node.value.replace(systemUiMatch, systemUiReplace); + } + } + } + } +} -export default postcss.plugin('postcss-system-ui-font', () => root => { - root.walkDecls(propertyRegExp, decl => { - decl.value = decl.value.replace(systemUiMatch, systemUiReplace); - }); -}); +postcssSystemUiFont.postcss = true; const propertyRegExp = /(?:^(?:-|\\002d){2})|(?:^font(?:-family)?$)/i; const whitespace = '[\\f\\n\\r\\x09\\x20]'; diff --git a/src/postcss.js b/src/postcss.js index 4ac5888..55ff2fe 100644 --- a/src/postcss.js +++ b/src/postcss.js @@ -1,14 +1,13 @@ -import autoprefixer from 'autoprefixer' +import autoprefixer from 'autoprefixer'; import browserslist from 'browserslist'; import cssdb from 'cssdb'; -import postcss from 'postcss'; import plugins from './lib/plugins-by-id'; import getTransformedInsertions from './lib/get-transformed-insertions'; import getUnsupportedBrowsersByFeature from './lib/get-unsupported-browsers-by-feature'; import idsByExecutionOrder from './lib/ids-by-execution-order'; import writeToExports from './lib/write-to-exports'; -export default postcss.plugin('postcss-preset-env', opts => { +const plugin = opts => { // initialize options const features = Object(Object(opts).features); const insertBefore = Object(Object(opts).insertBefore); @@ -17,13 +16,13 @@ export default postcss.plugin('postcss-preset-env', opts => { const stage = 'stage' in Object(opts) ? opts.stage === false ? 5 - : parseInt(opts.stage) || 0 - : 2; + : parseInt(opts.stage) || 0 + : 2; const autoprefixerOptions = Object(opts).autoprefixer; const sharedOpts = initializeSharedOpts(Object(opts)); const stagedAutoprefixer = autoprefixerOptions === false ? () => {} - : autoprefixer(Object.assign({ overrideBrowserslist: browsers }, autoprefixerOptions)); + : autoprefixer(Object.assign({ overrideBrowserslist: browsers }, autoprefixerOptions)); // polyfillable features (those with an available postcss plugin) const polyfillableFeatures = cssdb.concat( @@ -61,26 +60,35 @@ export default postcss.plugin('postcss-preset-env', opts => { const stagedFeatures = polyfillableFeatures.filter( feature => feature.id in features ? features[feature.id] - : feature.stage >= stage + : feature.stage >= stage ).map( - feature => ({ - browsers: feature.browsers, - plugin: typeof feature.plugin.process === 'function' - ? features[feature.id] === true - ? sharedOpts - // if the plugin is enabled and has shared options - ? feature.plugin(Object.assign({}, sharedOpts)) - // otherwise, if the plugin is enabled - : feature.plugin() - : sharedOpts + feature => { + let options; + let plugin; + + if (features[feature.id] === true) { + // if the plugin is enabled + options = sharedOpts ? Object.assign({}, sharedOpts) : undefined; + } else { + options = sharedOpts // if the plugin has shared options and individual options - ? feature.plugin(Object.assign({}, sharedOpts, features[feature.id])) - // if the plugin has individual options - : feature.plugin(Object.assign({}, features[feature.id])) - // if the plugin is already initialized - : feature.plugin, - id: feature.id - }) + ? Object.assign({}, sharedOpts, features[feature.id]) + // if the plugin has individual options + : Object.assign({}, features[feature.id]); + } + + if (feature.plugin.postcss) { + plugin = feature.plugin(options); + } else { + plugin = feature.plugin; + } + + return { + browsers: feature.browsers, + plugin, + id: feature.id + }; + } ); // browsers supported by the configuration @@ -90,35 +98,28 @@ export default postcss.plugin('postcss-preset-env', opts => { const supportedFeatures = stagedFeatures.filter( feature => feature.id in features ? features[feature.id] - : supportedBrowsers.some( - supportedBrowser => browserslist(feature.browsers, { - ignoreUnknownVersions: true - }).some( - polyfillBrowser => polyfillBrowser === supportedBrowser + : supportedBrowsers.some( + supportedBrowser => browserslist(feature.browsers, { + ignoreUnknownVersions: true + }).some( + polyfillBrowser => polyfillBrowser === supportedBrowser + ) ) - ) ); - return (root, result) => { - // polyfills run in execution order - const polyfills = supportedFeatures.reduce( - (promise, feature) => promise.then( - () => feature.plugin(result.root, result) - ), - Promise.resolve() - ).then( - () => stagedAutoprefixer(result.root, result) - ).then( - () => { - if (Object(opts).exportTo) { - writeToExports(sharedOpts.exportTo, opts.exportTo); - } - } - ) + const usedPlugins = supportedFeatures.map(feature => feature.plugin); + usedPlugins.push(stagedAutoprefixer); - return polyfills; + return { + postcssPlugin: 'postcss-preset-env', + plugins: usedPlugins, + OnceExit: function() { + if ( Object( opts ).exportTo ) { + writeToExports( sharedOpts.exportTo, opts.exportTo ); + } + } }; -}); +} const initializeSharedOpts = opts => { if ('importFrom' in opts || 'exportTo' in opts || 'preserve' in opts) { @@ -145,3 +146,7 @@ const initializeSharedOpts = opts => { return false; }; + +plugin.postcss = true; + +export default plugin; diff --git a/test/basic.autoprefixer.expect.css b/test/basic.autoprefixer.expect.css index b42bccc..98fc6c0 100644 --- a/test/basic.autoprefixer.expect.css +++ b/test/basic.autoprefixer.expect.css @@ -80,11 +80,6 @@ order: 10; } -.test-gray-function { - color: rgb(119,119,119); - color: rgba(119,119,119,0.5); -} - .test-rebeccapurple-color { color: #639; order: 11; @@ -113,7 +108,7 @@ } .test-font-variant-property { - font-feature-settings: "c2sc"; + font-feature-settings: "smcp"; font-variant-caps: small-caps; order: 16; } @@ -137,7 +132,6 @@ columns: auto; column-count: auto; column-fill: balance; - grid-column-gap: normal; column-gap: normal; column-rule: medium none currentColor; column-span: 1; @@ -207,7 +201,7 @@ order: 17; } -.test-matches-pseudo-class:first-child, .test-matches-pseudo-class.special { +.test-matches-pseudo-class:matches(:first-child, .special) { order: 18; } diff --git a/test/basic.autoprefixer.false.expect.css b/test/basic.autoprefixer.false.expect.css index b42bccc..98fc6c0 100644 --- a/test/basic.autoprefixer.false.expect.css +++ b/test/basic.autoprefixer.false.expect.css @@ -80,11 +80,6 @@ order: 10; } -.test-gray-function { - color: rgb(119,119,119); - color: rgba(119,119,119,0.5); -} - .test-rebeccapurple-color { color: #639; order: 11; @@ -113,7 +108,7 @@ } .test-font-variant-property { - font-feature-settings: "c2sc"; + font-feature-settings: "smcp"; font-variant-caps: small-caps; order: 16; } @@ -137,7 +132,6 @@ columns: auto; column-count: auto; column-fill: balance; - grid-column-gap: normal; column-gap: normal; column-rule: medium none currentColor; column-span: 1; @@ -207,7 +201,7 @@ order: 17; } -.test-matches-pseudo-class:first-child, .test-matches-pseudo-class.special { +.test-matches-pseudo-class:matches(:first-child, .special) { order: 18; } diff --git a/test/basic.ch38.expect.css b/test/basic.ch38.expect.css index b055649..286e861 100644 --- a/test/basic.ch38.expect.css +++ b/test/basic.ch38.expect.css @@ -7,6 +7,17 @@ order: var(--order); } +.test-image-set-function { + background-image: url(img/test.png); +} + +@media (min-resolution: 192dpi) { + +.test-image-set-function { + background-image: url(img/test-2x.png); +} +} + .test-image-set-function { background-image: -webkit-image-set(url(img/test.png) 1x, url(img/test-2x.png) 2x); background-image: image-set(url(img/test.png) 1x, url(img/test-2x.png) 2x); @@ -70,11 +81,6 @@ order: 10; } -.test-gray-function { - color: rgb(119,119,119); - color: rgba(119,119,119,0.5); -} - .test-rebeccapurple-color { color: rebeccapurple; order: 11; @@ -103,8 +109,8 @@ } .test-font-variant-property { - -webkit-font-feature-settings: "c2sc"; - font-feature-settings: "c2sc"; + -webkit-font-feature-settings: "smcp"; + font-feature-settings: "smcp"; font-variant-caps: small-caps; order: 16; } @@ -114,7 +120,7 @@ order: 17; } -.test-matches-pseudo-class:first-child, .test-matches-pseudo-class.special { +.test-matches-pseudo-class:matches(:first-child, .special) { order: 18; } diff --git a/test/basic.css b/test/basic.css index b39e184..1a332fe 100644 --- a/test/basic.css +++ b/test/basic.css @@ -60,11 +60,6 @@ order: 10; } -.test-gray-function { - color: gray(50); - color: gray(50 / 50%); -} - .test-rebeccapurple-color { color: rebeccapurple; order: 11; @@ -82,8 +77,8 @@ } .test-lab-function { - background-color: lab(40 56.6 39); - color: lch(40 68.8 34.5 / 50%); + background-color: lab(40% 56.6 39); + color: lch(40% 68.8 34.5 / 50%); order: 14; } diff --git a/test/basic.expect.css b/test/basic.expect.css index c81871e..d2147fe 100644 --- a/test/basic.expect.css +++ b/test/basic.expect.css @@ -3,10 +3,8 @@ } .test-custom-properties { - -webkit-box-ordinal-group: 2; - order: 1; - -webkit-box-ordinal-group: var(--order); - order: var(--order); + order: 1; + order: var(--order); } .test-image-set-function { @@ -23,8 +21,7 @@ .test-image-set-function { background-image: -webkit-image-set(url(img/test.png) 1x, url(img/test-2x.png) 2x); background-image: image-set(url(img/test.png) 1x, url(img/test-2x.png) 2x); - -webkit-box-ordinal-group: 3; - order: 2; + order: 2; } [dir="ltr"] .test-logical-properties-and-values { @@ -36,39 +33,32 @@ } .test-logical-properties-and-values { - -webkit-box-ordinal-group: 4; - order: 3; + order: 3; padding-top: 5px; padding-bottom: 5px; } .test-nesting-rules { - -webkit-box-ordinal-group: 5; - order: 4; + order: 4; & p { - -webkit-box-ordinal-group: 6; - order: 5; + order: 5; } - -webkit-box-ordinal-group: 7; - - order: 6; + order: 6; } @custom-media --narrow-window (max-width: 30em); @media (--narrow-window) { .test-custom-media-queries { - -webkit-box-ordinal-group: 8; - order: 7; + order: 7; } } @media (min-width: 480px) and (max-width: 767px) { .test-media-query-ranges { - -webkit-box-ordinal-group: 9; - order: 8; + order: 8; } } @@ -84,57 +74,44 @@ @custom-selector :--heading h1, h2, h3, h4, h5, h6; .test-custom-selectors:--heading { - -webkit-box-ordinal-group: 10; - order: 9; + order: 9; } .test-case-insensitive-attributes[frame=hsides],.test-case-insensitive-attributes[frame=Hsides],.test-case-insensitive-attributes[frame=hSides],.test-case-insensitive-attributes[frame=HSides],.test-case-insensitive-attributes[frame=hsIdes],.test-case-insensitive-attributes[frame=HsIdes],.test-case-insensitive-attributes[frame=hSIdes],.test-case-insensitive-attributes[frame=HSIdes],.test-case-insensitive-attributes[frame=hsiDes],.test-case-insensitive-attributes[frame=HsiDes],.test-case-insensitive-attributes[frame=hSiDes],.test-case-insensitive-attributes[frame=HSiDes],.test-case-insensitive-attributes[frame=hsIDes],.test-case-insensitive-attributes[frame=HsIDes],.test-case-insensitive-attributes[frame=hSIDes],.test-case-insensitive-attributes[frame=HSIDes],.test-case-insensitive-attributes[frame=hsidEs],.test-case-insensitive-attributes[frame=HsidEs],.test-case-insensitive-attributes[frame=hSidEs],.test-case-insensitive-attributes[frame=HSidEs],.test-case-insensitive-attributes[frame=hsIdEs],.test-case-insensitive-attributes[frame=HsIdEs],.test-case-insensitive-attributes[frame=hSIdEs],.test-case-insensitive-attributes[frame=HSIdEs],.test-case-insensitive-attributes[frame=hsiDEs],.test-case-insensitive-attributes[frame=HsiDEs],.test-case-insensitive-attributes[frame=hSiDEs],.test-case-insensitive-attributes[frame=HSiDEs],.test-case-insensitive-attributes[frame=hsIDEs],.test-case-insensitive-attributes[frame=HsIDEs],.test-case-insensitive-attributes[frame=hSIDEs],.test-case-insensitive-attributes[frame=HSIDEs],.test-case-insensitive-attributes[frame=hsideS],.test-case-insensitive-attributes[frame=HsideS],.test-case-insensitive-attributes[frame=hSideS],.test-case-insensitive-attributes[frame=HSideS],.test-case-insensitive-attributes[frame=hsIdeS],.test-case-insensitive-attributes[frame=HsIdeS],.test-case-insensitive-attributes[frame=hSIdeS],.test-case-insensitive-attributes[frame=HSIdeS],.test-case-insensitive-attributes[frame=hsiDeS],.test-case-insensitive-attributes[frame=HsiDeS],.test-case-insensitive-attributes[frame=hSiDeS],.test-case-insensitive-attributes[frame=HSiDeS],.test-case-insensitive-attributes[frame=hsIDeS],.test-case-insensitive-attributes[frame=HsIDeS],.test-case-insensitive-attributes[frame=hSIDeS],.test-case-insensitive-attributes[frame=HSIDeS],.test-case-insensitive-attributes[frame=hsidES],.test-case-insensitive-attributes[frame=HsidES],.test-case-insensitive-attributes[frame=hSidES],.test-case-insensitive-attributes[frame=HSidES],.test-case-insensitive-attributes[frame=hsIdES],.test-case-insensitive-attributes[frame=HsIdES],.test-case-insensitive-attributes[frame=hSIdES],.test-case-insensitive-attributes[frame=HSIdES],.test-case-insensitive-attributes[frame=hsiDES],.test-case-insensitive-attributes[frame=HsiDES],.test-case-insensitive-attributes[frame=hSiDES],.test-case-insensitive-attributes[frame=HSiDES],.test-case-insensitive-attributes[frame=hsIDES],.test-case-insensitive-attributes[frame=HsIDES],.test-case-insensitive-attributes[frame=hSIDES],.test-case-insensitive-attributes[frame=HSIDES] { - -webkit-box-ordinal-group: 11; - order: 10; -} - -.test-gray-function { - color: rgb(119,119,119); - color: rgba(119,119,119,0.5); + order: 10; } .test-rebeccapurple-color { color: #639; - -webkit-box-ordinal-group: 12; - order: 11; + order: 11; } .test-hexadecimal-alpha-notation { background-color: rgba(243,243,243,0.95294); color: rgba(0,0,0,0.2); - -webkit-box-ordinal-group: 13; - order: 12; + order: 12; } .test-color-functional-notation { color: rgb(70% 13.5% 13.5% / 50%); - -webkit-box-ordinal-group: 14; - order: 13; + order: 13; } .test-lab-function { background-color: rgb(178, 34, 34); color: rgba(178, 34, 34, 0.5); - -webkit-box-ordinal-group: 15; - order: 14; + order: 14; } .test-system-ui-font-family { font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; - -webkit-box-ordinal-group: 16; - order: 15; + order: 15; } .test-font-variant-property { - font-feature-settings: "c2sc"; + font-feature-settings: "smcp"; font-variant-caps: small-caps; - -webkit-box-ordinal-group: 17; - order: 16; + order: 16; } .test-all-property { @@ -145,9 +122,8 @@ background: transparent none repeat 0 0 / auto auto padding-box border-box scroll; border: medium none currentColor; border-collapse: separate; - -webkit-border-image: none; - -o-border-image: none; - border-image: none; + -o-border-image: none; + border-image: none; border-radius: 0; border-spacing: 0; bottom: auto; @@ -157,28 +133,20 @@ clear: none; clip: auto; color: #000; - -webkit-columns: auto; - -moz-columns: auto; - columns: auto; - -webkit-column-count: auto; - -moz-column-count: auto; - column-count: auto; - -webkit-column-fill: balance; - -moz-column-fill: balance; - column-fill: balance; - grid-column-gap: normal; - -webkit-column-gap: normal; - -moz-column-gap: normal; - column-gap: normal; - -webkit-column-rule: medium none currentColor; - -moz-column-rule: medium none currentColor; - column-rule: medium none currentColor; - -webkit-column-span: 1; - -moz-column-span: 1; - column-span: 1; - -webkit-column-width: auto; - -moz-column-width: auto; - column-width: auto; + -moz-columns: auto; + columns: auto; + -moz-column-count: auto; + column-count: auto; + -moz-column-fill: balance; + column-fill: balance; + -moz-column-gap: normal; + column-gap: normal; + -moz-column-rule: medium none currentColor; + column-rule: medium none currentColor; + -moz-column-span: 1; + column-span: 1; + -moz-column-width: auto; + column-width: auto; content: normal; counter-increment: none; counter-reset: none; @@ -217,10 +185,8 @@ page-break-after: auto; page-break-before: auto; page-break-inside: auto; - -webkit-perspective: none; - perspective: none; - -webkit-perspective-origin: 50% 50%; - perspective-origin: 50% 50%; + perspective: none; + perspective-origin: 50% 50%; position: static; right: auto; -moz-tab-size: 8; @@ -235,13 +201,9 @@ text-shadow: none; text-transform: none; top: auto; - -webkit-transform: none; - transform: none; - -webkit-transform-origin: 50% 50% 0; - transform-origin: 50% 50% 0; - -webkit-transform-style: flat; - transform-style: flat; - -webkit-transition: none 0s ease 0s; + transform: none; + transform-origin: 50% 50% 0; + transform-style: flat; transition: none 0s ease 0s; unicode-bidi: normal; vertical-align: baseline; @@ -252,28 +214,23 @@ word-spacing: normal; z-index: auto; all: initial; - -webkit-box-ordinal-group: 18; - order: 17; + order: 17; } -.test-matches-pseudo-class:first-child, .test-matches-pseudo-class.special { - -webkit-box-ordinal-group: 19; - order: 18; +.test-matches-pseudo-class:matches(:first-child, .special) { + order: 18; } .test-not-pseudo-class:not(:first-child):not(.special) { - -webkit-box-ordinal-group: 20; - order: 19; + order: 19; } .test-any-link-pseudo-class:link,.test-any-link-pseudo-class:visited { - -webkit-box-ordinal-group: 21; - order: 20; + order: 20; } .test-any-link-pseudo-class:-webkit-any-link { - -webkit-box-ordinal-group: 21; - order: 20; + order: 20; } .test-any-link-pseudo-class:-moz-any-link { @@ -281,29 +238,24 @@ } .test-any-link-pseudo-class:any-link { - -webkit-box-ordinal-group: 21; - order: 20; + order: 20; } [dir="rtl"] .test-dir-pseudo-class { - -webkit-box-ordinal-group: 22; - order: 21; + order: 21; } .test-overflow-wrap-property { - -webkit-box-ordinal-group: 23; - order: 22; + order: 22; word-wrap: break-word; } .test-focus-visible-pseudo-class.focus-visible { - -webkit-box-ordinal-group: 24; - order: 23; + order: 23; } .test-focus-visible-pseudo-class:focus-visible { - -webkit-box-ordinal-group: 24; - order: 23; + order: 23; } .test-double-position-gradients { diff --git a/test/basic.ff49.expect.css b/test/basic.ff49.expect.css index 5b86631..416b52c 100644 --- a/test/basic.ff49.expect.css +++ b/test/basic.ff49.expect.css @@ -71,11 +71,6 @@ order: 10; } -.test-gray-function { - color: rgb(119,119,119); - color: rgba(119,119,119,0.5); -} - .test-rebeccapurple-color { color: rebeccapurple; order: 11; @@ -113,7 +108,7 @@ order: 17; } -.test-matches-pseudo-class:first-child, .test-matches-pseudo-class.special { +.test-matches-pseudo-class:matches(:first-child, .special) { order: 18; } diff --git a/test/basic.nesting.expect.css b/test/basic.nesting.expect.css index 33de91e..e330ef5 100644 --- a/test/basic.nesting.expect.css +++ b/test/basic.nesting.expect.css @@ -3,54 +3,40 @@ } .test-custom-properties { - -webkit-box-ordinal-group: var(--order); - order: var(--order); + order: var(--order); } .test-image-set-function { background-image: -webkit-image-set(url(img/test.png) 1x, url(img/test-2x.png) 2x); background-image: image-set(url(img/test.png) 1x, url(img/test-2x.png) 2x); - -webkit-box-ordinal-group: 3; - order: 2; + order: 2; } .test-logical-properties-and-values { margin: logical 1px 2px 3px 4px; - -webkit-box-ordinal-group: 4; - order: 3; + order: 3; padding-block: 5px; } .test-nesting-rules { - -webkit-box-ordinal-group: 5; - order: 4; + order: 4; } .test-nesting-rules p { - -webkit-box-ordinal-group: 6; - order: 5; + order: 5; } -.test-nesting-rules { - - -webkit-box-ordinal-group: 7; - - order: 6; -} - @custom-media --narrow-window (max-width: 30em); @media (--narrow-window) { .test-custom-media-queries { - -webkit-box-ordinal-group: 8; - order: 7; + order: 7; } } @media (480px <= width < 768px) { .test-media-query-ranges { - -webkit-box-ordinal-group: 9; - order: 8; + order: 8; } } @@ -66,77 +52,60 @@ @custom-selector :--heading h1, h2, h3, h4, h5, h6; .test-custom-selectors:--heading { - -webkit-box-ordinal-group: 10; - order: 9; + order: 9; } .test-case-insensitive-attributes[frame=hsides i] { - -webkit-box-ordinal-group: 11; - order: 10; -} - -.test-gray-function { - color: gray(50); - color: gray(50 / 50%); + order: 10; } .test-rebeccapurple-color { color: rebeccapurple; - -webkit-box-ordinal-group: 12; - order: 11; + order: 11; } .test-hexadecimal-alpha-notation { background-color: #f3f3f3f3; color: #0003; - -webkit-box-ordinal-group: 13; - order: 12; + order: 12; } .test-color-functional-notation { color: rgb(70% 13.5% 13.5% / 50%); - -webkit-box-ordinal-group: 14; - order: 13; + order: 13; } .test-lab-function { - background-color: lab(40 56.6 39); - color: lch(40 68.8 34.5 / 50%); - -webkit-box-ordinal-group: 15; - order: 14; + background-color: lab(40% 56.6 39); + color: lch(40% 68.8 34.5 / 50%); + order: 14; } .test-system-ui-font-family { font-family: system-ui; - -webkit-box-ordinal-group: 16; - order: 15; + order: 15; } .test-font-variant-property { font-variant-caps: small-caps; - -webkit-box-ordinal-group: 17; - order: 16; + order: 16; } .test-all-property { all: initial; - -webkit-box-ordinal-group: 18; - order: 17; + order: 17; } .test-matches-pseudo-class:matches(:first-child, .special) { - -webkit-box-ordinal-group: 19; - order: 18; + order: 18; } .test-not-pseudo-class:not(:first-child, .special) { - -webkit-box-ordinal-group: 20; - order: 19; + order: 19; } .test-any-link-pseudo-class:-webkit-any-link { - -webkit-box-ordinal-group: 21; - order: 20; + order: 20; } .test-any-link-pseudo-class:-moz-any-link { @@ -144,24 +113,20 @@ } .test-any-link-pseudo-class:any-link { - -webkit-box-ordinal-group: 21; - order: 20; + order: 20; } .test-dir-pseudo-class:dir(rtl) { - -webkit-box-ordinal-group: 22; - order: 21; + order: 21; } .test-overflow-wrap-property { - -webkit-box-ordinal-group: 23; - order: 22; + order: 22; overflow-wrap: break-word; } .test-focus-visible-pseudo-class:focus-visible { - -webkit-box-ordinal-group: 24; - order: 23; + order: 23; } .test-double-position-gradients { diff --git a/test/basic.stage0-ff49.expect.css b/test/basic.stage0-ff49.expect.css index 53699b6..b68fe33 100644 --- a/test/basic.stage0-ff49.expect.css +++ b/test/basic.stage0-ff49.expect.css @@ -36,11 +36,6 @@ order: 5; } -.test-nesting-rules { - - order: 6; -} - @media (max-width: 30em) { .test-custom-media-queries { order: 7; @@ -75,11 +70,6 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te order: 10; } -.test-gray-function { - color: rgb(119,119,119); - color: rgba(119,119,119,0.5); -} - .test-rebeccapurple-color { color: rebeccapurple; order: 11; @@ -117,7 +107,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te order: 17; } -.test-matches-pseudo-class:first-child, .test-matches-pseudo-class.special { +.test-matches-pseudo-class:matches(:first-child, .special) { order: 18; } diff --git a/test/basic.stage0.expect.css b/test/basic.stage0.expect.css index 1ed5881..adac4a6 100644 --- a/test/basic.stage0.expect.css +++ b/test/basic.stage0.expect.css @@ -3,10 +3,8 @@ } .test-custom-properties { - -webkit-box-ordinal-group: 2; - order: 1; - -webkit-box-ordinal-group: var(--order); - order: var(--order); + order: 1; + order: var(--order); } .test-image-set-function { @@ -23,8 +21,7 @@ .test-image-set-function { background-image: -webkit-image-set(url(img/test.png) 1x, url(img/test-2x.png) 2x); background-image: image-set(url(img/test.png) 1x, url(img/test-2x.png) 2x); - -webkit-box-ordinal-group: 3; - order: 2; + order: 2; } [dir="ltr"] .test-logical-properties-and-values { @@ -36,40 +33,28 @@ } .test-logical-properties-and-values { - -webkit-box-ordinal-group: 4; - order: 3; + order: 3; padding-top: 5px; padding-bottom: 5px; } .test-nesting-rules { - -webkit-box-ordinal-group: 5; - order: 4; + order: 4; } .test-nesting-rules p { - -webkit-box-ordinal-group: 6; - order: 5; + order: 5; } -.test-nesting-rules { - - -webkit-box-ordinal-group: 7; - - order: 6; -} - @media (max-width: 30em) { .test-custom-media-queries { - -webkit-box-ordinal-group: 8; - order: 7; + order: 7; } } @media (min-width: 480px) and (max-width: 767px) { .test-media-query-ranges { - -webkit-box-ordinal-group: 9; - order: 8; + order: 8; } } @@ -88,57 +73,44 @@ } h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.test-custom-selectors,h5.test-custom-selectors,h6.test-custom-selectors { - -webkit-box-ordinal-group: 10; - order: 9; + order: 9; } .test-case-insensitive-attributes[frame=hsides],.test-case-insensitive-attributes[frame=Hsides],.test-case-insensitive-attributes[frame=hSides],.test-case-insensitive-attributes[frame=HSides],.test-case-insensitive-attributes[frame=hsIdes],.test-case-insensitive-attributes[frame=HsIdes],.test-case-insensitive-attributes[frame=hSIdes],.test-case-insensitive-attributes[frame=HSIdes],.test-case-insensitive-attributes[frame=hsiDes],.test-case-insensitive-attributes[frame=HsiDes],.test-case-insensitive-attributes[frame=hSiDes],.test-case-insensitive-attributes[frame=HSiDes],.test-case-insensitive-attributes[frame=hsIDes],.test-case-insensitive-attributes[frame=HsIDes],.test-case-insensitive-attributes[frame=hSIDes],.test-case-insensitive-attributes[frame=HSIDes],.test-case-insensitive-attributes[frame=hsidEs],.test-case-insensitive-attributes[frame=HsidEs],.test-case-insensitive-attributes[frame=hSidEs],.test-case-insensitive-attributes[frame=HSidEs],.test-case-insensitive-attributes[frame=hsIdEs],.test-case-insensitive-attributes[frame=HsIdEs],.test-case-insensitive-attributes[frame=hSIdEs],.test-case-insensitive-attributes[frame=HSIdEs],.test-case-insensitive-attributes[frame=hsiDEs],.test-case-insensitive-attributes[frame=HsiDEs],.test-case-insensitive-attributes[frame=hSiDEs],.test-case-insensitive-attributes[frame=HSiDEs],.test-case-insensitive-attributes[frame=hsIDEs],.test-case-insensitive-attributes[frame=HsIDEs],.test-case-insensitive-attributes[frame=hSIDEs],.test-case-insensitive-attributes[frame=HSIDEs],.test-case-insensitive-attributes[frame=hsideS],.test-case-insensitive-attributes[frame=HsideS],.test-case-insensitive-attributes[frame=hSideS],.test-case-insensitive-attributes[frame=HSideS],.test-case-insensitive-attributes[frame=hsIdeS],.test-case-insensitive-attributes[frame=HsIdeS],.test-case-insensitive-attributes[frame=hSIdeS],.test-case-insensitive-attributes[frame=HSIdeS],.test-case-insensitive-attributes[frame=hsiDeS],.test-case-insensitive-attributes[frame=HsiDeS],.test-case-insensitive-attributes[frame=hSiDeS],.test-case-insensitive-attributes[frame=HSiDeS],.test-case-insensitive-attributes[frame=hsIDeS],.test-case-insensitive-attributes[frame=HsIDeS],.test-case-insensitive-attributes[frame=hSIDeS],.test-case-insensitive-attributes[frame=HSIDeS],.test-case-insensitive-attributes[frame=hsidES],.test-case-insensitive-attributes[frame=HsidES],.test-case-insensitive-attributes[frame=hSidES],.test-case-insensitive-attributes[frame=HSidES],.test-case-insensitive-attributes[frame=hsIdES],.test-case-insensitive-attributes[frame=HsIdES],.test-case-insensitive-attributes[frame=hSIdES],.test-case-insensitive-attributes[frame=HSIdES],.test-case-insensitive-attributes[frame=hsiDES],.test-case-insensitive-attributes[frame=HsiDES],.test-case-insensitive-attributes[frame=hSiDES],.test-case-insensitive-attributes[frame=HSiDES],.test-case-insensitive-attributes[frame=hsIDES],.test-case-insensitive-attributes[frame=HsIDES],.test-case-insensitive-attributes[frame=hSIDES],.test-case-insensitive-attributes[frame=HSIDES] { - -webkit-box-ordinal-group: 11; - order: 10; -} - -.test-gray-function { - color: rgb(119,119,119); - color: rgba(119,119,119,0.5); + order: 10; } .test-rebeccapurple-color { color: #639; - -webkit-box-ordinal-group: 12; - order: 11; + order: 11; } .test-hexadecimal-alpha-notation { background-color: rgba(243,243,243,0.95294); color: rgba(0,0,0,0.2); - -webkit-box-ordinal-group: 13; - order: 12; + order: 12; } .test-color-functional-notation { color: rgba(178, 34, 34, 0.5); - -webkit-box-ordinal-group: 14; - order: 13; + order: 13; } .test-lab-function { background-color: rgb(178, 34, 34); color: rgba(178, 34, 34, 0.5); - -webkit-box-ordinal-group: 15; - order: 14; + order: 14; } .test-system-ui-font-family { font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; - -webkit-box-ordinal-group: 16; - order: 15; + order: 15; } .test-font-variant-property { - font-feature-settings: "c2sc"; + font-feature-settings: "smcp"; font-variant-caps: small-caps; - -webkit-box-ordinal-group: 17; - order: 16; + order: 16; } .test-all-property { @@ -149,9 +121,8 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te background: transparent none repeat 0 0 / auto auto padding-box border-box scroll; border: medium none currentColor; border-collapse: separate; - -webkit-border-image: none; - -o-border-image: none; - border-image: none; + -o-border-image: none; + border-image: none; border-radius: 0; border-spacing: 0; bottom: auto; @@ -161,28 +132,20 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te clear: none; clip: auto; color: #000; - -webkit-columns: auto; - -moz-columns: auto; - columns: auto; - -webkit-column-count: auto; - -moz-column-count: auto; - column-count: auto; - -webkit-column-fill: balance; - -moz-column-fill: balance; - column-fill: balance; - grid-column-gap: normal; - -webkit-column-gap: normal; - -moz-column-gap: normal; - column-gap: normal; - -webkit-column-rule: medium none currentColor; - -moz-column-rule: medium none currentColor; - column-rule: medium none currentColor; - -webkit-column-span: 1; - -moz-column-span: 1; - column-span: 1; - -webkit-column-width: auto; - -moz-column-width: auto; - column-width: auto; + -moz-columns: auto; + columns: auto; + -moz-column-count: auto; + column-count: auto; + -moz-column-fill: balance; + column-fill: balance; + -moz-column-gap: normal; + column-gap: normal; + -moz-column-rule: medium none currentColor; + column-rule: medium none currentColor; + -moz-column-span: 1; + column-span: 1; + -moz-column-width: auto; + column-width: auto; content: normal; counter-increment: none; counter-reset: none; @@ -221,10 +184,8 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te page-break-after: auto; page-break-before: auto; page-break-inside: auto; - -webkit-perspective: none; - perspective: none; - -webkit-perspective-origin: 50% 50%; - perspective-origin: 50% 50%; + perspective: none; + perspective-origin: 50% 50%; position: static; right: auto; -moz-tab-size: 8; @@ -239,13 +200,9 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te text-shadow: none; text-transform: none; top: auto; - -webkit-transform: none; - transform: none; - -webkit-transform-origin: 50% 50% 0; - transform-origin: 50% 50% 0; - -webkit-transform-style: flat; - transform-style: flat; - -webkit-transition: none 0s ease 0s; + transform: none; + transform-origin: 50% 50% 0; + transform-style: flat; transition: none 0s ease 0s; unicode-bidi: normal; vertical-align: baseline; @@ -256,28 +213,23 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te word-spacing: normal; z-index: auto; all: initial; - -webkit-box-ordinal-group: 18; - order: 17; + order: 17; } -.test-matches-pseudo-class:first-child, .test-matches-pseudo-class.special { - -webkit-box-ordinal-group: 19; - order: 18; +.test-matches-pseudo-class:matches(:first-child, .special) { + order: 18; } .test-not-pseudo-class:not(:first-child):not(.special) { - -webkit-box-ordinal-group: 20; - order: 19; + order: 19; } .test-any-link-pseudo-class:link,.test-any-link-pseudo-class:visited { - -webkit-box-ordinal-group: 21; - order: 20; + order: 20; } .test-any-link-pseudo-class:-webkit-any-link { - -webkit-box-ordinal-group: 21; - order: 20; + order: 20; } .test-any-link-pseudo-class:-moz-any-link { @@ -285,29 +237,24 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te } .test-any-link-pseudo-class:any-link { - -webkit-box-ordinal-group: 21; - order: 20; + order: 20; } [dir="rtl"] .test-dir-pseudo-class { - -webkit-box-ordinal-group: 22; - order: 21; + order: 21; } .test-overflow-wrap-property { - -webkit-box-ordinal-group: 23; - order: 22; + order: 22; word-wrap: break-word; } .test-focus-visible-pseudo-class.focus-visible { - -webkit-box-ordinal-group: 24; - order: 23; + order: 23; } .test-focus-visible-pseudo-class:focus-visible { - -webkit-box-ordinal-group: 24; - order: 23; + order: 23; } .test-double-position-gradients { diff --git a/test/import.expect.css b/test/import.expect.css index baff19d..458b065 100644 --- a/test/import.expect.css +++ b/test/import.expect.css @@ -1,19 +1,15 @@ .test-custom-properties { - -webkit-box-ordinal-group: 2; - order: 1; - -webkit-box-ordinal-group: var(--order); - order: var(--order); + order: 1; + order: var(--order); } @media (max-width: 40rem) { .test-custom-media-queries { - -webkit-box-ordinal-group: 3; - order: 2; + order: 2; } } -h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.test-custom-selectors,h5.test-custom-selectors,h6.test-custom-selectors { - -webkit-box-ordinal-group: 4; - order: 3; +.test-custom-selectors:is(h1),.test-custom-selectors:is(h2),.test-custom-selectors:is(h3),.test-custom-selectors:is(h4),.test-custom-selectors:is(h5),.test-custom-selectors:is(h6) { + order: 3; } diff --git a/test/insert.after.expect.css b/test/insert.after.expect.css index 611769c..f58436e 100644 --- a/test/insert.after.expect.css +++ b/test/insert.after.expect.css @@ -1,3 +1,5 @@ -test-css-color-modifying-colors { - color: color-mod(#639 alpha(80%)); +$font: system-ui; + +.test-variable { + font-family: $font; } diff --git a/test/insert.before.expect.css b/test/insert.before.expect.css index a31f12d..4952078 100644 --- a/test/insert.before.expect.css +++ b/test/insert.before.expect.css @@ -1,3 +1,3 @@ -test-css-color-modifying-colors { - color: rgba(102, 51, 153, 0.8); +.test-variable { + font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; } diff --git a/test/insert.css b/test/insert.css index 12d2d1a..f58436e 100644 --- a/test/insert.css +++ b/test/insert.css @@ -1,5 +1,5 @@ -$color: rebeccapurple; +$font: system-ui; -test-css-color-modifying-colors { - color: color-mod($color alpha(80%)); +.test-variable { + font-family: $font; }