diff --git a/package-lock.json b/package-lock.json index 46495fcf4..132c4cd66 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6932,7 +6932,6 @@ "postcss-custom-selectors": "^6.0.3", "postcss-dir-pseudo-class": "^6.0.5", "postcss-double-position-gradients": "^3.1.2", - "postcss-env-function": "^4.0.6", "postcss-focus-visible": "^7.0.0", "postcss-focus-within": "^6.0.0", "postcss-font-variant": "^5.0.0", @@ -11758,7 +11757,6 @@ "postcss-custom-selectors": "^6.0.3", "postcss-dir-pseudo-class": "^6.0.5", "postcss-double-position-gradients": "^3.1.2", - "postcss-env-function": "^4.0.6", "postcss-focus-visible": "^7.0.0", "postcss-focus-within": "^6.0.0", "postcss-font-variant": "^5.0.0", diff --git a/plugin-packs/postcss-preset-env/.tape.mjs b/plugin-packs/postcss-preset-env/.tape.mjs index 2d4a75cd5..02b429ea7 100644 --- a/plugin-packs/postcss-preset-env/.tape.mjs +++ b/plugin-packs/postcss-preset-env/.tape.mjs @@ -1,6 +1,5 @@ import postcssTape from '../../packages/postcss-tape/dist/index.mjs'; import plugin from 'postcss-preset-env'; -import fs from 'fs'; const orderDetectionPlugin = (prop, changeWhenMatches) => { return { @@ -383,128 +382,6 @@ postcssTape(plugin)({ } } }, - 'import': { - message: 'supports { importFrom: { customMedia, customProperties, customSelectors, environmentVariables } } usage', - warnings: 2, - options: { - importFrom: { - customMedia: { - '--narrow-window': '(max-width: env(--sm))' - }, - customProperties: { - '--order': '1' - }, - customSelectors: { - ':--heading': 'h1, h2, h3, h4, h5, h6' - }, - environmentVariables: { - '--sm': '40rem' - } - }, - stage: 0 - } - }, - 'import:ch87': { - message: 'supports { browsers: "chrome >= 87", importFrom: { customMedia, customProperties, customSelectors, environmentVariables } } usage', - warnings: 2, - options: { - browsers: 'chrome >= 87', - importFrom: { - customMedia: { - '--narrow-window': '(max-width: env(--sm))' - }, - customProperties: { - '--order': '1' - }, - customSelectors: { - ':--heading': 'h1, h2, h3, h4, h5, h6' - }, - environmentVariables: { - '--sm': '40rem' - } - }, - stage: 0 - } - }, - 'import:ch87:array': { - message: 'supports { browsers: "chrome >= 87", importFrom: [{ customMedia, customProperties, customSelectors, environmentVariables }] } usage', - warnings: 2, - options: { - browsers: 'chrome >= 87', - importFrom: [{ - customMedia: { - '--narrow-window': '(max-width: env(--sm))' - }, - customProperties: { - '--order': '1' - }, - customSelectors: { - ':--heading': 'h1, h2, h3, h4, h5, h6' - }, - environmentVariables: { - '--sm': '40rem' - } - }], - stage: 0 - } - }, - 'import:ch87:incorrect-options': { - message: 'supports { browsers: "chrome >= 87", importFrom: false } usage', - options: { - browsers: 'chrome >= 87', - importFrom: false, - stage: 0 - } - }, - 'basic:export': { - message: 'supports { stage: 0 } usage', - warnings: 1, - options: { - stage: 0, - exportTo: [ - 'test/generated-custom-exports.css', - 'test/generated-custom-exports.js', - 'test/generated-custom-exports.json', - 'test/generated-custom-exports.mjs' - ] - }, - expect: 'basic.stage0.expect.css', - result: 'basic.stage0.result.css', - before() { - try { - global.__exportTo = { - css: fs.readFileSync('test/generated-custom-exports.css', 'utf8'), - js: fs.readFileSync('test/generated-custom-exports.js', 'utf8'), - json: fs.readFileSync('test/generated-custom-exports.json', 'utf8'), - mjs: fs.readFileSync('test/generated-custom-exports.mjs', 'utf8') - }; - - fs.rmSync('test/generated-custom-exports.css'); - fs.rmSync('test/generated-custom-exports.js'); - fs.rmSync('test/generated-custom-exports.json'); - fs.rmSync('test/generated-custom-exports.mjs'); - } catch (_) { - // ignore errors here. - // If the files are removed manually test run will regenerate these. - // The after step will still fail. - // The real test is in the after step. - } - }, - after() { - global.__exportAs = { - css: fs.readFileSync('test/generated-custom-exports.css', 'utf8'), - js: fs.readFileSync('test/generated-custom-exports.js', 'utf8'), - json: fs.readFileSync('test/generated-custom-exports.json', 'utf8'), - mjs: fs.readFileSync('test/generated-custom-exports.mjs', 'utf8') - }; - - Object.keys(global.__exportTo).forEach(key => { - if (global.__exportTo[key] !== global.__exportAs[key]) { - throw new Error(`The original ${key} file did not match the freshly exported copy`); - } - }); - } - }, 'progressive-custom-properties': { message: 'supports progressive custom properties plugin', options: { diff --git a/plugin-packs/postcss-preset-env/CHANGELOG.md b/plugin-packs/postcss-preset-env/CHANGELOG.md index 58b727061..59ccf7235 100644 --- a/plugin-packs/postcss-preset-env/CHANGELOG.md +++ b/plugin-packs/postcss-preset-env/CHANGELOG.md @@ -3,6 +3,7 @@ ### Unreleased (8.0.0-alpha.1) - Updated: Support for Node v14+ (major). +- Remove `postcss-env-function` (breaking). ### 8.0.0-alpha.0 (July 8, 2022) diff --git a/plugin-packs/postcss-preset-env/FEATURES.md b/plugin-packs/postcss-preset-env/FEATURES.md index 57cd3aa96..211128ec1 100644 --- a/plugin-packs/postcss-preset-env/FEATURES.md +++ b/plugin-packs/postcss-preset-env/FEATURES.md @@ -19,7 +19,6 @@ The `ID` listed is the key for PostCSS Preset Env configuration in your project. | `dir-pseudo-class` | `:dir` Directionality Pseudo-Class | [example](https://preset-env.cssdb.org/features/#dir-pseudo-class) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-dir-pseudo-class#readme) | | `display-two-values` | Two values syntax for `display` | [example](https://preset-env.cssdb.org/features/#display-two-values) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-normalize-display-values#readme) | | `double-position-gradients` | Double Position Gradients | [example](https://preset-env.cssdb.org/features/#double-position-gradients) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-double-position-gradients#readme) | -| `environment-variables` | Custom Environment Variables | [example](https://preset-env.cssdb.org/features/#environment-variables) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-env-function#readme) | | `focus-visible-pseudo-class` | `:focus-visible` Focus-Indicated Pseudo-Class | [example](https://preset-env.cssdb.org/features/#focus-visible-pseudo-class) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-focus-visible#readme) | | `focus-within-pseudo-class` | `:focus-within` Focus Container Pseudo-Class | [example](https://preset-env.cssdb.org/features/#focus-within-pseudo-class) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-focus-within#readme) | | `font-format-keywords` | Font `format()` Keywords | [example](https://preset-env.cssdb.org/features/#font-format-keywords) | [docs](https://github.com/valtlai/postcss-font-format-keywords#readme) | diff --git a/plugin-packs/postcss-preset-env/README.md b/plugin-packs/postcss-preset-env/README.md index 9614b38b1..68358b950 100644 --- a/plugin-packs/postcss-preset-env/README.md +++ b/plugin-packs/postcss-preset-env/README.md @@ -326,134 +326,6 @@ postcssPresetEnv({ }); ``` -### importFrom - -The `importFrom` option specifies sources where variables like Custom Media, -Custom Properties, Custom Selectors, and Environment Variables can be imported -from, which might be CSS, JS, and JSON files, functions, and directly passed -objects. - -```js -postcssPresetEnv({ - /* - @custom-media --small-viewport (max-width: 30em); - @custom-selector :--heading h1, h2, h3; - :root { --color: red; } - */ - importFrom: 'path/to/file.css' -}); -``` - -Multiple sources can be passed into this option, and they will be parsed in the -order they are received. JavaScript files, JSON files, functions, and objects -will use different namespaces to import different kinds of variables. - -```js -postcssPresetEnv({ - importFrom: [ - /* - @custom-media --small-viewport (max-width: 30em); - @custom-selector :--heading h1, h2, h3; - :root { --color: red; } - */ - 'path/to/file.css', - - /* module.exports = { - customMedia: { '--small-viewport': '(max-width: 30em)' }, - customProperties: { '--color': 'red' }, - customSelectors: { ':--heading': 'h1, h2, h3' }, - environmentVariables: { '--branding-padding': '20px' } - } */ - 'and/then/this.js', - - /* { - "custom-media": { "--small-viewport": "(max-width: 30em)" } - "custom-properties": { "--color": "red" }, - "custom-selectors": { ":--heading": "h1, h2, h3" }, - "environment-variables": { "--branding-padding": "20px" } - } */ - 'and/then/that.json', - - { - customMedia: { '--small-viewport': '(max-width: 30em)' }, - customProperties: { '--color': 'red' }, - customSelectors: { ':--heading': 'h1, h2, h3' }, - environmentVariables: { '--branding-padding': '20px' } - }, - () => { - const customMedia = { '--small-viewport': '(max-width: 30em)' }; - const customProperties = { '--color': 'red' }; - const customSelectors = { ':--heading': 'h1, h2, h3' }; - const environmentVariables = { '--branding-padding': '20px' }; - - return { customMedia, customProperties, customSelectors, environmentVariables }; - } - ] -}); -``` - -### exportTo - -The `exportTo` option specifies destinations where variables like Custom Media, -Custom Properties, Custom Selectors, and Environment Variables can be exported -to, which might be CSS, JS, and JSON files, functions, and directly passed -objects. - -```js -postcssPresetEnv({ - /* - @custom-media --small-viewport (max-width: 30em); - @custom-selector :--heading h1, h2, h3; - :root { --color: red; } - */ - exportTo: 'path/to/file.css' -}); -``` - -Multiple destinations can be passed into this option as well, and they will be -parsed in the order they are received. JavaScript files, JSON files, and -objects will use different namespaces to import different kinds of variables. - -```js -const cachedObject = {}; - -postcssPresetEnv({ - exportTo: [ - /* - @custom-media --small-viewport (max-width: 30em); - @custom-selector :--heading h1, h2, h3; - :root { --color: red; } - */ - 'path/to/file.css', - - /* module.exports = { - customMedia: { '--small-viewport': '(max-width: 30em)' }, - customProperties: { '--color': 'red' }, - customSelectors: { ':--heading': 'h1, h2, h3' }, - environmentVariables: { '--branding-padding': '20px' } - } */ - 'and/then/this.js', - - /* { - "custom-media": { "--small-viewport": "(max-width: 30em)" } - "custom-properties": { "--color": "red" }, - "custom-selectors": { ":--heading": "h1, h2, h3" }, - "environment-variables": { "--branding-padding": "20px" } - } */ - 'and/then/that.json', - - cachedObject, - variables => { - if ('customProperties' in variables) { - // do something special with customProperties - } - - Object.assign(cachedObject, variables); - } - ] -}); -``` - ### debug The `debug` option enables debugging messages to stdout which should be useful to help you debug which features have been enabled/disabled and why. diff --git a/plugin-packs/postcss-preset-env/package.json b/plugin-packs/postcss-preset-env/package.json index c87dd76ca..4f9ef159e 100644 --- a/plugin-packs/postcss-preset-env/package.json +++ b/plugin-packs/postcss-preset-env/package.json @@ -57,7 +57,6 @@ "postcss-custom-selectors": "^6.0.3", "postcss-dir-pseudo-class": "^6.0.5", "postcss-double-position-gradients": "^3.1.2", - "postcss-env-function": "^4.0.6", "postcss-focus-visible": "^7.0.0", "postcss-focus-within": "^6.0.0", "postcss-font-variant": "^5.0.0", diff --git a/plugin-packs/postcss-preset-env/scripts/plugins-data.json b/plugin-packs/postcss-preset-env/scripts/plugins-data.json index 6264492f1..63adce8cf 100644 --- a/plugin-packs/postcss-preset-env/scripts/plugins-data.json +++ b/plugin-packs/postcss-preset-env/scripts/plugins-data.json @@ -69,11 +69,6 @@ "id": "double-position-gradients", "importName": "postcssDoublePositionGradients" }, - { - "packageName": "postcss-env-function", - "id": "environment-variables", - "importName": "postcssEnvFunction" - }, { "packageName": "postcss-focus-visible", "id": "focus-visible-pseudo-class", diff --git a/plugin-packs/postcss-preset-env/src/index.js b/plugin-packs/postcss-preset-env/src/index.js index c68ecd325..80700b0b6 100644 --- a/plugin-packs/postcss-preset-env/src/index.js +++ b/plugin-packs/postcss-preset-env/src/index.js @@ -2,7 +2,6 @@ import autoprefixer from 'autoprefixer'; import cssdb from 'cssdb'; import logFeaturesList from './log/features-list.mjs'; import postcssProgressiveCustomProperties from '@csstools/postcss-progressive-custom-properties'; -import writeToExports from './side-effects/write-to-exports.mjs'; import { initializeSharedOptions } from './lib/shared-options.mjs'; import { listFeatures } from './lib/list-features.mjs'; import { newLogger } from './log/helper.mjs'; @@ -47,10 +46,6 @@ const plugin = (opts) => { // Always reset the logger, if when debug is false logger.resetLogger(); - - if (options.exportTo) { - writeToExports(sharedOptions.exportTo, opts.exportTo); - } }, }; }; diff --git a/plugin-packs/postcss-preset-env/src/lib/list-features.mjs b/plugin-packs/postcss-preset-env/src/lib/list-features.mjs index c5db8f724..37b2febb1 100644 --- a/plugin-packs/postcss-preset-env/src/lib/list-features.mjs +++ b/plugin-packs/postcss-preset-env/src/lib/list-features.mjs @@ -1,5 +1,4 @@ import browserslist from 'browserslist'; -import { pluginHasSideEffects } from '../side-effects/plugins.mjs'; import { featuresWithClientSide } from '../client-side-polyfills/plugins.mjs'; import { stageFromOptions } from './stage.mjs'; import { prepareFeaturesList } from './prepare-features-list.mjs'; @@ -109,10 +108,6 @@ export function listFeatures(cssdbList, options, sharedOptions, logger) { return features[feature.id]; } - if (pluginHasSideEffects(feature)) { - return true; - } - const unsupportedBrowsers = browserslist(feature.browsers, { ignoreUnknownVersions: true, }); diff --git a/plugin-packs/postcss-preset-env/src/lib/shared-options.mjs b/plugin-packs/postcss-preset-env/src/lib/shared-options.mjs index 44bcd9111..fa46a98a5 100644 --- a/plugin-packs/postcss-preset-env/src/lib/shared-options.mjs +++ b/plugin-packs/postcss-preset-env/src/lib/shared-options.mjs @@ -1,20 +1,7 @@ - export function initializeSharedOptions(opts) { - if ('importFrom' in opts || 'exportTo' in opts || 'preserve' in opts) { + if ('preserve' in opts) { const sharedOptions = {}; - if ('importFrom' in opts) { - sharedOptions.importFrom = opts.importFrom; - } - - if ('exportTo' in opts) { - sharedOptions.exportTo = { - customMedia: {}, - customProperties: {}, - customSelectors: {}, - }; - } - if ('preserve' in opts) { sharedOptions.preserve = opts.preserve; } diff --git a/plugin-packs/postcss-preset-env/src/plugins/plugins-by-id.mjs b/plugin-packs/postcss-preset-env/src/plugins/plugins-by-id.mjs index 008d92fc2..2151edccd 100644 --- a/plugin-packs/postcss-preset-env/src/plugins/plugins-by-id.mjs +++ b/plugin-packs/postcss-preset-env/src/plugins/plugins-by-id.mjs @@ -13,7 +13,6 @@ import postcssCustomSelectors from 'postcss-custom-selectors'; import postcssDirPseudoClass from 'postcss-dir-pseudo-class'; import postcssNormalizeDisplayValues from '@csstools/postcss-normalize-display-values'; import postcssDoublePositionGradients from 'postcss-double-position-gradients'; -import postcssEnvFunction from 'postcss-env-function'; import postcssFocusVisible from 'postcss-focus-visible'; import postcssFocusWithin from 'postcss-focus-within'; import postcssFontFormatKeywords from '@csstools/postcss-font-format-keywords'; @@ -62,7 +61,6 @@ export const pluginsById = new Map( ['dir-pseudo-class', postcssDirPseudoClass], ['display-two-values', postcssNormalizeDisplayValues], ['double-position-gradients', postcssDoublePositionGradients], - ['environment-variables', postcssEnvFunction], ['focus-visible-pseudo-class', postcssFocusVisible], ['focus-within-pseudo-class', postcssFocusWithin], ['font-format-keywords', postcssFontFormatKeywords], diff --git a/plugin-packs/postcss-preset-env/src/plugins/plugins-data.mjs b/plugin-packs/postcss-preset-env/src/plugins/plugins-data.mjs index fab801963..f0fc9a759 100644 --- a/plugin-packs/postcss-preset-env/src/plugins/plugins-data.mjs +++ b/plugin-packs/postcss-preset-env/src/plugins/plugins-data.mjs @@ -69,11 +69,6 @@ export default [ 'id': 'double-position-gradients', 'importName': 'postcssDoublePositionGradients', }, - { - 'packageName': 'postcss-env-function', - 'id': 'environment-variables', - 'importName': 'postcssEnvFunction', - }, { 'packageName': 'postcss-focus-visible', 'id': 'focus-visible-pseudo-class', diff --git a/plugin-packs/postcss-preset-env/src/side-effects/plugins.mjs b/plugin-packs/postcss-preset-env/src/side-effects/plugins.mjs deleted file mode 100644 index e788390dc..000000000 --- a/plugin-packs/postcss-preset-env/src/side-effects/plugins.mjs +++ /dev/null @@ -1,92 +0,0 @@ -// Some plugins have side effects that go beyond the scope of preset-env. -// These plugins always need to run. -// IMPORTANT: this should be removed and cleaned up in a next major version. -export function pluginHasSideEffects(feature) { - if ('importFrom' in Object(feature.pluginOptions)) { - switch (feature.id) { - case 'custom-media-queries': - if (anyOptionFor(feature.pluginOptions.importFrom, 'customMedia')) { - return true; - } - break; - case 'custom-properties': - if (anyOptionFor(feature.pluginOptions.importFrom, 'customProperties')) { - return true; - } - break; - case 'environment-variables': - if (anyOptionFor(feature.pluginOptions.importFrom, 'environmentVariables')) { - return true; - } - break; - case 'custom-selectors': - if (anyOptionFor(feature.pluginOptions.importFrom, 'customSelectors')) { - return true; - } - break; - - default: - break; - } - } - - if ('exportTo' in Object(feature.pluginOptions)) { - switch (feature.id) { - case 'custom-media-queries': - if (anyOptionFor(feature.pluginOptions.exportTo, 'customMedia')) { - return true; - } - break; - case 'custom-properties': - if (anyOptionFor(feature.pluginOptions.exportTo, 'customProperties')) { - return true; - } - break; - case 'environment-variables': - if (anyOptionFor(feature.pluginOptions.exportTo, 'environmentVariables')) { - return true; - } - break; - case 'custom-selectors': - if (anyOptionFor(feature.pluginOptions.exportTo, 'customSelectors')) { - return true; - } - break; - - default: - break; - } - } - - return false; -} - -function anyOptionFor(opts, feature) { - if (!opts) { - return false; - } - - if (typeof opts === 'string') { - return true; - } - - if (Array.isArray(opts)) { - for (let i = 0; i < opts.length; i++) { - if (typeof opts[i] === 'string') { - return true; - } - - if (opts[i] && (feature in Object(opts[i]))) { - return true; - } - } - - return false; - } - - if (feature in Object(opts)) { - return true; - } - - return false; -} diff --git a/plugin-packs/postcss-preset-env/src/side-effects/write-to-exports.mjs b/plugin-packs/postcss-preset-env/src/side-effects/write-to-exports.mjs deleted file mode 100644 index 40af0165c..000000000 --- a/plugin-packs/postcss-preset-env/src/side-effects/write-to-exports.mjs +++ /dev/null @@ -1,196 +0,0 @@ -/* eslint max-params: ["error", 4] */ - -import fs from 'fs'; -import path from 'path'; - -/* Write Exports to CSS File -/* ========================================================================== */ - -function getCustomMediaAsCss(customMedia) { - const cssContent = Object.keys(customMedia).reduce((cssLines, name) => { - cssLines.push(`@custom-media ${name} ${customMedia[name]};`); - - return cssLines; - }, []).join('\n'); - const css = `${cssContent}\n`; - - return css; -} - -function getCustomPropertiesAsCss(customProperties) { - const cssContent = Object.keys(customProperties).reduce((cssLines, name) => { - cssLines.push(`\t${name}: ${customProperties[name]};`); - - return cssLines; - }, []).join('\n'); - const css = `:root {\n${cssContent}\n}\n`; - - return css; -} - -function getCustomSelectorsAsCss(customSelectors) { - const cssContent = Object.keys(customSelectors).reduce((cssLines, name) => { - cssLines.push(`@custom-selector ${name} ${customSelectors[name]};`); - - return cssLines; - }, []).join('\n'); - const css = `${cssContent}\n`; - - return css; -} - -async function writeExportsToCssFile(to, customMedia, customProperties, customSelectors) { - const customPropertiesAsCss = getCustomPropertiesAsCss(customProperties); - const customMediaAsCss = getCustomMediaAsCss(customMedia); - const customSelectorsAsCss = getCustomSelectorsAsCss(customSelectors); - const css = `${customMediaAsCss}\n${customSelectorsAsCss}\n${customPropertiesAsCss}`; - - await writeFile(to, css); -} - -/* Write Exports to JSON file -/* ========================================================================== */ - -async function writeExportsToJsonFile(to, customMedia, customProperties, customSelectors) { - const jsonContent = JSON.stringify({ - 'custom-media': customMedia, - 'custom-properties': customProperties, - 'custom-selectors': customSelectors, - }, null, ' '); - const json = `${jsonContent}\n`; - - await writeFile(to, json); -} - -/* Write Exports to Common JS file -/* ========================================================================== */ - -function getObjectWithKeyAsCjs(key, object) { - const jsContents = Object.keys(object).reduce((jsLines, name) => { - jsLines.push(`\t\t'${escapeForJS(name)}': '${escapeForJS(object[name])}'`); - - return jsLines; - }, []).join(',\n'); - const cjs = `\n\t${key}: {\n${jsContents}\n\t}`; - - return cjs; -} - -async function writeExportsToCjsFile(to, customMedia, customProperties, customSelectors) { - const customMediaAsCjs = getObjectWithKeyAsCjs('customMedia', customMedia); - const customPropertiesAsCjs = getObjectWithKeyAsCjs('customProperties', customProperties); - const customSelectorsAsCjs = getObjectWithKeyAsCjs('customSelectors', customSelectors); - const cjs = `module.exports = {${customMediaAsCjs},${customPropertiesAsCjs},${customSelectorsAsCjs}\n};\n`; - - await writeFile(to, cjs); -} - -/* Write Exports to Module JS file -/* ========================================================================== */ - -function getObjectWithKeyAsMjs(key, object) { - const mjsContents = Object.keys(object).reduce((mjsLines, name) => { - mjsLines.push(`\t'${escapeForJS(name)}': '${escapeForJS(object[name])}'`); - - return mjsLines; - }, []).join(',\n'); - const mjs = `export const ${key} = {\n${mjsContents}\n};\n`; - - return mjs; -} - -async function writeExportsToMjsFile(to, customMedia, customProperties, customSelectors) { - const customMediaAsMjs = getObjectWithKeyAsMjs('customMedia', customMedia); - const customPropertiesAsMjs = getObjectWithKeyAsMjs('customProperties', customProperties); - const customSelectorsAsMjs = getObjectWithKeyAsMjs('customSelectors', customSelectors); - const mjs = `${customMediaAsMjs}\n${customPropertiesAsMjs}\n${customSelectorsAsMjs}`; - - await writeFile(to, mjs); -} - -/* Write Exports to Exports -/* ========================================================================== */ - -export default function writeToExports(customExports, destinations) { - return Promise.all([].concat(destinations).map(async destination => { - if (destination instanceof Function) { - await destination({ - customMedia: getObjectWithStringifiedKeys(customExports.customMedia), - customProperties: getObjectWithStringifiedKeys(customExports.customProperties), - customSelectors: getObjectWithStringifiedKeys(customExports.customSelectors), - }); - } else { - // read the destination as an object - const opts = destination === Object(destination) ? destination : { to: String(destination) }; - - // transformer for Exports into a JSON-compatible object - const toJSON = opts.toJSON || getObjectWithStringifiedKeys; - - if ('customMedia' in opts || 'customProperties' in opts || 'customSelectors' in opts) { - // write directly to an object as customProperties - opts.customMedia = toJSON(customExports.customMedia); - opts.customProperties = toJSON(customExports.customProperties); - opts.customSelectors = toJSON(customExports.customSelectors); - } else if ('custom-media' in opts || 'custom-properties' in opts || 'custom-selectors' in opts) { - // write directly to an object as custom-properties - opts['custom-media'] = toJSON(customExports.customMedia); - opts['custom-properties'] = toJSON(customExports.customProperties); - opts['custom-selectors'] = toJSON(customExports.customSelectors); - } else { - // destination pathname - const to = String(opts.to || ''); - - // type of file being written to - const type = (opts.type || path.extname(opts.to).slice(1)).toLowerCase(); - - // transformed Exports - const customMediaJSON = toJSON(customExports.customMedia); - const customPropertiesJSON = toJSON(customExports.customProperties); - const customSelectorsJSON = toJSON(customExports.customSelectors); - - if (type === 'css') { - await writeExportsToCssFile(to, customMediaJSON, customPropertiesJSON, customSelectorsJSON); - } - - if (type === 'js') { - await writeExportsToCjsFile(to, customMediaJSON, customPropertiesJSON, customSelectorsJSON); - } - - if (type === 'json') { - await writeExportsToJsonFile(to, customMediaJSON, customPropertiesJSON, customSelectorsJSON); - } - - if (type === 'mjs') { - await writeExportsToMjsFile(to, customMediaJSON, customPropertiesJSON, customSelectorsJSON); - } - } - } - })); -} - -/* Helper utilities -/* ========================================================================== */ - -function getObjectWithStringifiedKeys(object) { - return Object.keys(object).reduce((objectJSON, key) => { - objectJSON[key] = String(object[key]); - - return objectJSON; - }, {}); -} - -function writeFile(to, text) { - return new Promise((resolve, reject) => { - fs.writeFile(to, text, error => { - if (error) { - reject(error); - } else { - resolve(); - } - }); - }); -} - -function escapeForJS(string) { - return string.replace(/\\([\s\S])|(')/g, '\\$1$2').replace(/\n/g, '\\n').replace(/\r/g, '\\r'); -} diff --git a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css index 53d2ddca1..f8fd799d7 100644 --- a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css @@ -496,7 +496,7 @@ } .ic-unit { - --value-2ic: 'something'; + --value-2ic: initial; text-indent: 2em; content: var(--value-2ic); left: 2em; diff --git a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.false.expect.css b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.false.expect.css index 53d2ddca1..f8fd799d7 100644 --- a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.false.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.false.expect.css @@ -496,7 +496,7 @@ } .ic-unit { - --value-2ic: 'something'; + --value-2ic: initial; text-indent: 2em; content: var(--value-2ic); left: 2em; diff --git a/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css b/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css index b42d01e7b..f019302cd 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css @@ -408,7 +408,7 @@ } .ic-unit { - --value-2ic: 'something'; + --value-2ic: initial; text-indent: 2em; content: var(--value-2ic); left: 2em; diff --git a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78-saf10.expect.css b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78-saf10.expect.css index be8bb20a2..7b748514f 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78-saf10.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78-saf10.expect.css @@ -415,7 +415,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te } .ic-unit { - --value-2ic: 'something'; + --value-2ic: initial; text-indent: 2em; content: var(--value-2ic); left: var(--non-existing, 2em); diff --git a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.expect.css b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.expect.css index 27cecf4c1..4f5bce961 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.expect.css @@ -415,7 +415,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te } .ic-unit { - --value-2ic: 'something'; + --value-2ic: initial; text-indent: 2em; content: var(--value-2ic); left: var(--non-existing, 2em); diff --git a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.no-is-pseudo.expect.css b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.no-is-pseudo.expect.css index 27cecf4c1..4f5bce961 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.no-is-pseudo.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.no-is-pseudo.expect.css @@ -415,7 +415,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te } .ic-unit { - --value-2ic: 'something'; + --value-2ic: initial; text-indent: 2em; content: var(--value-2ic); left: var(--non-existing, 2em); diff --git a/plugin-packs/postcss-preset-env/test/basic.css b/plugin-packs/postcss-preset-env/test/basic.css index 260b431ce..7012894ad 100644 --- a/plugin-packs/postcss-preset-env/test/basic.css +++ b/plugin-packs/postcss-preset-env/test/basic.css @@ -324,7 +324,7 @@ } .ic-unit { - --value-2ic: 'something'; + --value-2ic: initial; text-indent: 2ic; content: var(--value-2ic); left: var(--non-existing, 2ic); diff --git a/plugin-packs/postcss-preset-env/test/basic.expect.css b/plugin-packs/postcss-preset-env/test/basic.expect.css index bf38fe3e2..1dbe6a053 100644 --- a/plugin-packs/postcss-preset-env/test/basic.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.expect.css @@ -519,7 +519,7 @@ } .ic-unit { - --value-2ic: 'something'; + --value-2ic: initial; text-indent: 2em; content: var(--value-2ic); left: 2em; diff --git a/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css b/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css index 50da8804e..9abe2ee2e 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css @@ -412,7 +412,7 @@ } .ic-unit { - --value-2ic: 'something'; + --value-2ic: initial; text-indent: 2em; content: var(--value-2ic); left: var(--non-existing, 2em); diff --git a/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css b/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css index 1ea635f67..5af186590 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css @@ -396,7 +396,7 @@ } .ic-unit { - --value-2ic: 'something'; + --value-2ic: initial; text-indent: 2em; content: var(--value-2ic); left: var(--non-existing, 2em); diff --git a/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css b/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css index 32b9e9c64..ca64a1650 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css @@ -534,7 +534,7 @@ } .ic-unit { - --value-2ic: 'something'; + --value-2ic: initial; text-indent: 2em; content: var(--value-2ic); left: 2em; diff --git a/plugin-packs/postcss-preset-env/test/basic.nesting.false.expect.css b/plugin-packs/postcss-preset-env/test/basic.nesting.false.expect.css index f03259270..15cb5fc49 100644 --- a/plugin-packs/postcss-preset-env/test/basic.nesting.false.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.nesting.false.expect.css @@ -517,7 +517,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te } .ic-unit { - --value-2ic: 'something'; + --value-2ic: initial; text-indent: 2em; content: var(--value-2ic); left: 2em; diff --git a/plugin-packs/postcss-preset-env/test/basic.nesting.true.expect.css b/plugin-packs/postcss-preset-env/test/basic.nesting.true.expect.css index 51505321b..bc3752d52 100644 --- a/plugin-packs/postcss-preset-env/test/basic.nesting.true.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.nesting.true.expect.css @@ -340,7 +340,7 @@ } .ic-unit { - --value-2ic: 'something'; + --value-2ic: initial; text-indent: 2ic; content: var(--value-2ic); left: var(--non-existing, 2ic); diff --git a/plugin-packs/postcss-preset-env/test/basic.op_mini.expect.css b/plugin-packs/postcss-preset-env/test/basic.op_mini.expect.css index e29a569b4..1a5bb8fc3 100644 --- a/plugin-packs/postcss-preset-env/test/basic.op_mini.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.op_mini.expect.css @@ -503,7 +503,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te } .ic-unit { - --value-2ic: 'something'; + --value-2ic: initial; text-indent: 2em; content: var(--value-2ic); left: 2em; diff --git a/plugin-packs/postcss-preset-env/test/basic.preserve.true.expect.css b/plugin-packs/postcss-preset-env/test/basic.preserve.true.expect.css index c62c804f1..ac8f97d25 100644 --- a/plugin-packs/postcss-preset-env/test/basic.preserve.true.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.preserve.true.expect.css @@ -874,7 +874,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te } .ic-unit { - --value-2ic: 'something'; + --value-2ic: initial; text-indent: 2em; text-indent: 2ic; content: var(--value-2ic); diff --git a/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css b/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css index 5e6f98151..85a6584d7 100644 --- a/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css @@ -357,7 +357,7 @@ } .ic-unit { - --value-2ic: 'something'; + --value-2ic: initial; text-indent: 2em; content: var(--value-2ic); left: var(--non-existing, 2em); diff --git a/plugin-packs/postcss-preset-env/test/basic.stage0-ff49.expect.css b/plugin-packs/postcss-preset-env/test/basic.stage0-ff49.expect.css index 018a44eb9..647dadedb 100644 --- a/plugin-packs/postcss-preset-env/test/basic.stage0-ff49.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.stage0-ff49.expect.css @@ -417,7 +417,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te } .ic-unit { - --value-2ic: 'something'; + --value-2ic: initial; text-indent: 2em; content: var(--value-2ic); left: var(--non-existing, 2em); diff --git a/plugin-packs/postcss-preset-env/test/basic.stage0-ff66.expect.css b/plugin-packs/postcss-preset-env/test/basic.stage0-ff66.expect.css index 02700ec42..06f59ae6a 100644 --- a/plugin-packs/postcss-preset-env/test/basic.stage0-ff66.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.stage0-ff66.expect.css @@ -401,7 +401,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te } .ic-unit { - --value-2ic: 'something'; + --value-2ic: initial; text-indent: 2em; content: var(--value-2ic); left: var(--non-existing, 2em); diff --git a/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css b/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css index c30829a09..2d6c84d9d 100644 --- a/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css @@ -524,7 +524,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te } .ic-unit { - --value-2ic: 'something'; + --value-2ic: initial; text-indent: 2em; content: var(--value-2ic); left: 2em; diff --git a/plugin-packs/postcss-preset-env/test/basic.vendors-1.expect.css b/plugin-packs/postcss-preset-env/test/basic.vendors-1.expect.css index c154a8c66..6941f6d99 100644 --- a/plugin-packs/postcss-preset-env/test/basic.vendors-1.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.vendors-1.expect.css @@ -523,7 +523,7 @@ } .ic-unit { - --value-2ic: 'something'; + --value-2ic: initial; text-indent: 2em; content: var(--value-2ic); left: 2em; diff --git a/plugin-packs/postcss-preset-env/test/basic.vendors-2.expect.css b/plugin-packs/postcss-preset-env/test/basic.vendors-2.expect.css index 70bd47030..7f47b80cf 100644 --- a/plugin-packs/postcss-preset-env/test/basic.vendors-2.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.vendors-2.expect.css @@ -486,7 +486,7 @@ } .ic-unit { - --value-2ic: 'something'; + --value-2ic: initial; text-indent: 2em; content: var(--value-2ic); left: 2em; diff --git a/plugin-packs/postcss-preset-env/test/basic.vendors-3.expect.css b/plugin-packs/postcss-preset-env/test/basic.vendors-3.expect.css index 223d5fead..85681e28d 100644 --- a/plugin-packs/postcss-preset-env/test/basic.vendors-3.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.vendors-3.expect.css @@ -459,7 +459,7 @@ } .ic-unit { - --value-2ic: 'something'; + --value-2ic: initial; text-indent: 2ic; content: var(--value-2ic); left: 2ic; diff --git a/plugin-packs/postcss-preset-env/test/generated-custom-exports.css b/plugin-packs/postcss-preset-env/test/generated-custom-exports.css deleted file mode 100644 index 126ccd8a7..000000000 --- a/plugin-packs/postcss-preset-env/test/generated-custom-exports.css +++ /dev/null @@ -1,9 +0,0 @@ -@custom-media --narrow-window (max-width: 30em); -@custom-media --dark-mode (prefers-color-scheme: dark); - -@custom-selector :--heading h1, h2, h3, h4, h5, h6; -@custom-selector :--view-m [data-view-size=m]; - -:root { - --order: 1; -} diff --git a/plugin-packs/postcss-preset-env/test/generated-custom-exports.js b/plugin-packs/postcss-preset-env/test/generated-custom-exports.js deleted file mode 100644 index 6237413bf..000000000 --- a/plugin-packs/postcss-preset-env/test/generated-custom-exports.js +++ /dev/null @@ -1,13 +0,0 @@ -module.exports = { - customMedia: { - '--narrow-window': '(max-width: 30em)', - '--dark-mode': '(prefers-color-scheme: dark)' - }, - customProperties: { - '--order': '1' - }, - customSelectors: { - ':--heading': 'h1, h2, h3, h4, h5, h6', - ':--view-m': '[data-view-size=m]' - } -}; diff --git a/plugin-packs/postcss-preset-env/test/generated-custom-exports.json b/plugin-packs/postcss-preset-env/test/generated-custom-exports.json deleted file mode 100644 index 500c8bff6..000000000 --- a/plugin-packs/postcss-preset-env/test/generated-custom-exports.json +++ /dev/null @@ -1,13 +0,0 @@ -{ - "custom-media": { - "--narrow-window": "(max-width: 30em)", - "--dark-mode": "(prefers-color-scheme: dark)" - }, - "custom-properties": { - "--order": "1" - }, - "custom-selectors": { - ":--heading": "h1, h2, h3, h4, h5, h6", - ":--view-m": "[data-view-size=m]" - } -} diff --git a/plugin-packs/postcss-preset-env/test/generated-custom-exports.mjs b/plugin-packs/postcss-preset-env/test/generated-custom-exports.mjs deleted file mode 100644 index 54030e248..000000000 --- a/plugin-packs/postcss-preset-env/test/generated-custom-exports.mjs +++ /dev/null @@ -1,13 +0,0 @@ -export const customMedia = { - '--narrow-window': '(max-width: 30em)', - '--dark-mode': '(prefers-color-scheme: dark)' -}; - -export const customProperties = { - '--order': '1' -}; - -export const customSelectors = { - ':--heading': 'h1, h2, h3, h4, h5, h6', - ':--view-m': '[data-view-size=m]' -}; diff --git a/plugin-packs/postcss-preset-env/test/import.ch87.array.expect.css b/plugin-packs/postcss-preset-env/test/import.ch87.array.expect.css deleted file mode 100644 index ded9c5eb8..000000000 --- a/plugin-packs/postcss-preset-env/test/import.ch87.array.expect.css +++ /dev/null @@ -1,15 +0,0 @@ -.test-custom-properties { - order: 1; - order: var(--order); -} - -@media (max-width: 40rem) { - .test-custom-media-queries { - 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 { - order: 3; - } - diff --git a/plugin-packs/postcss-preset-env/test/import.ch87.expect.css b/plugin-packs/postcss-preset-env/test/import.ch87.expect.css deleted file mode 100644 index ded9c5eb8..000000000 --- a/plugin-packs/postcss-preset-env/test/import.ch87.expect.css +++ /dev/null @@ -1,15 +0,0 @@ -.test-custom-properties { - order: 1; - order: var(--order); -} - -@media (max-width: 40rem) { - .test-custom-media-queries { - 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 { - order: 3; - } - diff --git a/plugin-packs/postcss-preset-env/test/import.ch87.incorrect-options.expect.css b/plugin-packs/postcss-preset-env/test/import.ch87.incorrect-options.expect.css deleted file mode 100644 index 855fbe258..000000000 --- a/plugin-packs/postcss-preset-env/test/import.ch87.incorrect-options.expect.css +++ /dev/null @@ -1,14 +0,0 @@ -.test-custom-properties { - order: var(--order); -} - -@media (--narrow-window) { - .test-custom-media-queries { - order: 2; - } -} - -.test-custom-selectors:--heading { - order: 3; - } - diff --git a/plugin-packs/postcss-preset-env/test/import.css b/plugin-packs/postcss-preset-env/test/import.css deleted file mode 100644 index e56269547..000000000 --- a/plugin-packs/postcss-preset-env/test/import.css +++ /dev/null @@ -1,16 +0,0 @@ -.test-custom-properties { - order: var(--order); -} - -@media (--narrow-window) { - .test-custom-media-queries { - order: 2; - } -} - -.test-custom-selectors { - &:--heading { - order: 3; - } -} - diff --git a/plugin-packs/postcss-preset-env/test/import.expect.css b/plugin-packs/postcss-preset-env/test/import.expect.css deleted file mode 100644 index ded9c5eb8..000000000 --- a/plugin-packs/postcss-preset-env/test/import.expect.css +++ /dev/null @@ -1,15 +0,0 @@ -.test-custom-properties { - order: 1; - order: var(--order); -} - -@media (max-width: 40rem) { - .test-custom-media-queries { - 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 { - order: 3; - } - diff --git a/plugin-packs/postcss-preset-env/test/layers-basic.css b/plugin-packs/postcss-preset-env/test/layers-basic.css index 854210747..d7e512a92 100644 --- a/plugin-packs/postcss-preset-env/test/layers-basic.css +++ b/plugin-packs/postcss-preset-env/test/layers-basic.css @@ -59,7 +59,13 @@ order: 9; } -@custom-media --narrow-window (max-width: 30em); +@custom-media --narrow-window (max-width: 500px); + +@layer extensions { + @custom-media --narrow-window (max-width: 30em); + + @custom-selector :--heading h1, h2, h3, h4, h5, h6; +} @media (--narrow-window) { .test-custom-media-queries { @@ -85,8 +91,6 @@ } } -@custom-selector :--heading h1, h2, h3, h4, h5, h6; - .test-custom-selectors:--heading { order:12; } diff --git a/plugin-packs/postcss-preset-env/test/layers-basic.expect.css b/plugin-packs/postcss-preset-env/test/layers-basic.expect.css index 328bf2873..1f666f928 100644 --- a/plugin-packs/postcss-preset-env/test/layers-basic.expect.css +++ b/plugin-packs/postcss-preset-env/test/layers-basic.expect.css @@ -1,6 +1,9 @@ + @custom-media --narrow-window (max-width: 30em); - .test-nesting-rules:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) p { + @custom-selector :--heading h1, h2, h3, h4, h5, h6; + + .test-nesting-rules:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) p { is-layer: C_D; -webkit-box-ordinal-group: 6; -webkit-order: 5.1; @@ -100,8 +103,8 @@ order: 6; } -.test-nesting-rules:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#), -#test-is-pseudo:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-nesting-rules:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#), +#test-is-pseudo:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-box-ordinal-group: 8; -webkit-order: 7; -moz-box-ordinal-group: 8; @@ -109,7 +112,7 @@ order: 7; } -.test-nesting-rules:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) + p, #test-is-pseudo:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) + p { +.test-nesting-rules:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) + p, #test-is-pseudo:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) + p { -webkit-box-ordinal-group: 9; -webkit-order: 8; -moz-box-ordinal-group: 9; @@ -117,8 +120,8 @@ order: 8; } -.test-nesting-rules:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#), -#test-is-pseudo:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-nesting-rules:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#), +#test-is-pseudo:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-box-ordinal-group: 10; @@ -131,8 +134,8 @@ order: 9; } -@media (max-width: 30em) { - .test-custom-media-queries:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +@media (max-width: 500px) { + .test-custom-media-queries:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-box-ordinal-group: 11; -webkit-order: 10; -moz-box-ordinal-group: 11; @@ -153,13 +156,13 @@ } @media (prefers-color-scheme: dark) { - body:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + body:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { background-color: black; color: white; } } -h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),h2.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),h3.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),h4.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),h5.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),h6.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-custom-selectors:--heading:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-box-ordinal-group:13; -webkit-order:12; -moz-box-ordinal-group:13; @@ -167,7 +170,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order:12; } -.test-case-insensitive-attributes[frame=hsides]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=Hsides]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSides]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSides]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIdes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIdes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIdes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIdes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsiDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsiDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSiDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSiDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsidEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsidEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSidEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSidEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIdEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIdEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIdEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIdEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsiDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsiDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSiDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSiDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsideS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsideS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSideS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSideS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIdeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIdeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIdeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIdeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsiDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsiDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSiDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSiDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsidES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsidES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSidES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSidES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIdES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIdES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIdES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIdES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsiDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsiDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSiDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSiDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-case-insensitive-attributes[frame=hsides]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=Hsides]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSides]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSides]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIdes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIdes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIdes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIdes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsiDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsiDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSiDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSiDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsidEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsidEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSidEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSidEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIdEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIdEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIdEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIdEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsiDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsiDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSiDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSiDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsideS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsideS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSideS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSideS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIdeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIdeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIdeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIdeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsiDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsiDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSiDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSiDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsidES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsidES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSidES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSidES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIdES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIdES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIdES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIdES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsiDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsiDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSiDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSiDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-box-ordinal-group: 14; -webkit-order: 13; -moz-box-ordinal-group: 14; @@ -175,7 +178,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order: 13; } -.test-rebeccapurple-color:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-rebeccapurple-color:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { color: #639; -webkit-box-ordinal-group: 15; -webkit-order: 14; @@ -184,7 +187,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order: 14; } -.test-hexadecimal-alpha-notation:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-hexadecimal-alpha-notation:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { background-color: rgba(243,243,243,0.95294); color: rgba(0,0,0,0.2); -webkit-box-ordinal-group: 16; @@ -194,7 +197,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order: 15; } -.test-color-functional-notation:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-color-functional-notation:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { color: rgba(178, 34, 34, 0.5); -webkit-box-ordinal-group: 17; -webkit-order: 16; @@ -203,7 +206,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order: 16; } -.test-lab-function:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-lab-function:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { background-color: rgb(179, 35, 35); background-color: color(display-p3 0.64331 0.19245 0.16771); color: rgba(179, 34, 35, 0.5); @@ -215,7 +218,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order: 17; } -.test-system-ui-font-family:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-system-ui-font-family:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; -webkit-box-ordinal-group: 19; -webkit-order: 18; @@ -224,7 +227,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order: 18; } -.test-font-variant-property:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-font-variant-property:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-font-feature-settings: "smcp"; -moz-font-feature-settings: "smcp"; font-feature-settings: "smcp"; @@ -236,7 +239,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order: 19; } -.test-all-property:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-all-property:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-animation: none 0s ease 0s 1 normal none running; -moz-animation: none 0s ease 0s 1 normal none running; -o-animation: none 0s ease 0s 1 normal none running; @@ -378,7 +381,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order: 20; } -.test-matches-pseudo-class:matches(:first-child, .special):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-matches-pseudo-class:matches(:first-child, .special):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-box-ordinal-group: 22; -webkit-order: 21; -moz-box-ordinal-group: 22; @@ -386,7 +389,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order: 21; } -.test-not-pseudo-class:not(:first-child):not(.special):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-not-pseudo-class:not(:first-child):not(.special):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-box-ordinal-group: 23; -webkit-order: 22; -moz-box-ordinal-group: 23; @@ -394,7 +397,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order: 22; } -.test-any-link-pseudo-class:link:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#), .test-any-link-pseudo-class:visited:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#), area[href].test-any-link-pseudo-class:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-any-link-pseudo-class:link:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#), .test-any-link-pseudo-class:visited:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#), area[href].test-any-link-pseudo-class:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-box-ordinal-group: 24; -webkit-order: 23; -moz-box-ordinal-group: 24; @@ -402,18 +405,18 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order: 23; } -.test-any-link-pseudo-class:-webkit-any-link:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-any-link-pseudo-class:-webkit-any-link:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-box-ordinal-group: 24; -webkit-order: 23; order: 23; } -.test-any-link-pseudo-class:-moz-any-link:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-any-link-pseudo-class:-moz-any-link:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -moz-box-ordinal-group: 24; order: 23; } -.test-any-link-pseudo-class:any-link:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-any-link-pseudo-class:any-link:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-box-ordinal-group: 24; -webkit-order: 23; -moz-box-ordinal-group: 24; @@ -421,7 +424,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order: 23; } -[dir="rtl"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .test-dir-pseudo-class { +[dir="rtl"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .test-dir-pseudo-class { -webkit-box-ordinal-group: 25; -webkit-order: 24; -moz-box-ordinal-group: 25; @@ -429,7 +432,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order: 24; } -.test-overflow-wrap-property:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-overflow-wrap-property:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-box-ordinal-group: 26; -webkit-order: 25; -moz-box-ordinal-group: 26; @@ -438,7 +441,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n word-wrap: break-word; } -.test-focus-visible-pseudo-class:focus-visible:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-focus-visible-pseudo-class:focus-visible:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-box-ordinal-group: 27; -webkit-order: 26; -moz-box-ordinal-group: 27; @@ -446,16 +449,16 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order: 26; } -.test-double-position-gradients:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-double-position-gradients:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { background-image: conic-gradient(yellowgreen 40%, gold 0deg,gold 75%, #f06 0deg); background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg); } -.test-blank-pseudo-class:blank:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-blank-pseudo-class:blank:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { background-color: yellow; } -.test-has-pseudo-class:has(.inner-class):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-has-pseudo-class:has(.inner-class):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { background-color: yellow; } @@ -499,46 +502,46 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order: 28; } -.test-hwb-function:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-hwb-function:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { background-color: rgba(0, 195, 255, .5); } -.test-opacity-percent:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-opacity-percent:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { opacity: 0.42; } -.clamp-same-unit:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.clamp-same-unit:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { width: max(10px, min(64px, 80px)); } -.complex-clamp:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.complex-clamp:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { width: max(-webkit-calc(100% - 10px), min(min(10px, 100%), max(40px, 4em))); width: max(-moz-calc(100% - 10px), min(min(10px, 100%), max(40px, 4em))); width: max(calc(100% - 10px), min(min(10px, 100%), max(40px, 4em))); } -.clamp-different-units:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.clamp-different-units:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { width: max(10%, min(2px, 4rem)); } -.mixed-clamp:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.mixed-clamp:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { grid-template-columns: max(22rem, min(40%, 32rem)) minmax(0, 1fr); margin: max(1rem, min(2%, 3rem)) 4vh; } -.calc-clamp:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.calc-clamp:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { margin: 0 40px 0 -webkit-calc(-1 * max(32px, min(16vw, 64px))); margin: 0 40px 0 -moz-calc(-1 * max(32px, min(16vw, 64px))); margin: 0 40px 0 calc(-1 * max(32px, min(16vw, 64px))); } -.multiple-calc-clamp:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.multiple-calc-clamp:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { margin: -webkit-calc(-1 * max(1px, min(2vw, 3px))) -webkit-calc(-1 * max(4px, min(5vw, 6px))); margin: -moz-calc(-1 * max(1px, min(2vw, 3px))) -moz-calc(-1 * max(4px, min(5vw, 6px))); margin: calc(-1 * max(1px, min(2vw, 3px))) calc(-1 * max(4px, min(5vw, 6px))); } -.nested-clamp:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.nested-clamp:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { font-size: max(max(1rem, min(2vw, 3rem)), min(4vw, 5rem)); } @@ -550,42 +553,42 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n src: url(a) format("woff2"); } -.block-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.block-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: block; display: block flow; } -.block-flow-root:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.block-flow-root:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: flow-root; display: block flow-root; } -.inline-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.inline-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: inline; display: inline flow; } -.inline-flow-root:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.inline-flow-root:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: inline-block; display: inline flow-root; } -.run-in-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.run-in-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: run-in; display: run-in flow; } -.list-item-block-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.list-item-block-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: list-item; display: list-item block flow; } -.inline-flow-list-item:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.inline-flow-list-item:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: inline list-item; display: inline flow list-item; } -.block-flex:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.block-flex:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: -webkit-box; display: -webkit-flex; display: -moz-box; @@ -594,7 +597,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n display: block flex; } -.inline-flex:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.inline-flex:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: -webkit-inline-box; display: -webkit-inline-flex; display: -moz-inline-box; @@ -603,52 +606,52 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n display: inline flex; } -.block-grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.block-grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: grid; display: block grid; } -.inline-grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.inline-grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: inline-grid; display: inline grid; } -.inline-ruby:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.inline-ruby:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: ruby; display: inline ruby; } -.block-table:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.block-table:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: table; display: block table; } -.inline-table:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.inline-table:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: inline-table; display: inline table; } -.table-cell-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.table-cell-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: table-cell; display: table-cell flow; } -.table-caption-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.table-caption-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: table-caption; display: table-caption flow; } -.ruby-base-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.ruby-base-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: ruby-base; display: ruby-base flow; } -.ruby-text-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.ruby-text-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: ruby-text; display: ruby-text flow; } -.color-function:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.color-function:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { prop-1: rgb(0,132,94); prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)'; prop-3: rgba(7,3,1,1); @@ -658,7 +661,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n prop-5: rgb(255,255,255); } -.oklab:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.oklab:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { color-1: rgb(73, 71, 69); color-1: color(display-p3 0.28515 0.27983 0.27246); color-2: rgba(121, 34, 67, 1); @@ -684,7 +687,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n color-12: color(display-p3 0.45207 0.66555 0.91656); } -.oklch:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.oklch:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { color-1: rgb(126, 37, 15); color-1: color(display-p3 0.45368 0.16978 0.09411); color-2: rgba(126, 37, 15, 1); @@ -724,9 +727,10 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n color-17: oklch(60% 0.1250 0.785398unknown); } -.ic-unit:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.ic-unit:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { --value-2ic: 'something'; text-indent: 2em; + content: 'something'; content: var(--value-2ic); left: 2em; left: var(--non-existing, 2em); @@ -738,12 +742,12 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n padding: 2 ic; } -.unset:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.unset:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { clip: auto; clip: initial; } -.mod:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.mod:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { padding: 8px 3px 1px -webkit-calc(3px + 50%); padding: 8px 3px 1px -moz-calc(3px + 50%); padding: 8px 3px 1px calc(3px + 50%); @@ -755,7 +759,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n width: 2px; } -.rem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.rem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { padding: 8px 3px 1px -webkit-calc(3px + 50%); padding: 8px 3px 1px -moz-calc(3px + 50%); padding: 8px 3px 1px calc(3px + 50%); @@ -766,7 +770,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n transform: rotate(-50deg); } -.round:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.round:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { top: 3px; right: 3px; bottom: 3px; diff --git a/plugin-packs/postcss-preset-env/test/layers-basic.preserve.true.expect.css b/plugin-packs/postcss-preset-env/test/layers-basic.preserve.true.expect.css index 2bbdb88d8..c683b43cc 100644 --- a/plugin-packs/postcss-preset-env/test/layers-basic.preserve.true.expect.css +++ b/plugin-packs/postcss-preset-env/test/layers-basic.preserve.true.expect.css @@ -1,6 +1,9 @@ + @custom-media --narrow-window (max-width: 30em); - .test-nesting-rules:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) p { + @custom-selector :--heading h1, h2, h3, h4, h5, h6; + + .test-nesting-rules:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) p { is-layer: C_D; -webkit-box-ordinal-group: 6; -webkit-order: 5.1; @@ -116,8 +119,8 @@ order: 6; } -.test-nesting-rules:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#), -#test-is-pseudo:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-nesting-rules:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#), +#test-is-pseudo:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-box-ordinal-group: 8; -webkit-order: 7; -moz-box-ordinal-group: 8; @@ -125,7 +128,7 @@ order: 7; } -.test-nesting-rules:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) + p, #test-is-pseudo:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) + p { +.test-nesting-rules:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) + p, #test-is-pseudo:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) + p { -webkit-box-ordinal-group: 9; -webkit-order: 8; -moz-box-ordinal-group: 9; @@ -133,8 +136,8 @@ order: 8; } -.test-nesting-rules:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#), -#test-is-pseudo:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-nesting-rules:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#), +#test-is-pseudo:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-box-ordinal-group: 10; @@ -147,10 +150,10 @@ order: 9; } -@custom-media --narrow-window (max-width: 30em); +@custom-media --narrow-window (max-width: 500px); -@media (max-width: 30em) { - .test-custom-media-queries:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +@media (max-width: 500px) { + .test-custom-media-queries:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-box-ordinal-group: 11; -webkit-order: 10; -moz-box-ordinal-group: 11; @@ -160,7 +163,7 @@ } @media (--narrow-window) { - .test-custom-media-queries:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + .test-custom-media-queries:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-box-ordinal-group: 11; -webkit-order: 10; -moz-box-ordinal-group: 11; @@ -183,30 +186,20 @@ @custom-media --dark-mode (prefers-color-scheme: dark); @media (prefers-color-scheme: dark) { - body:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + body:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { background-color: black; color: white; } } @media (--dark-mode) { - body:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + body:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { background-color: black; color: white; } } -@custom-selector :--heading h1, h2, h3, h4, h5, h6; - -h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),h2.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),h3.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),h4.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),h5.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),h6.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { - -webkit-box-ordinal-group:13; - -webkit-order:12; - -moz-box-ordinal-group:13; - -ms-flex-order:12; - order:12; -} - -.test-custom-selectors:--heading:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-custom-selectors:--heading:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-box-ordinal-group:13; -webkit-order:12; -moz-box-ordinal-group:13; @@ -214,7 +207,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order:12; } -.test-case-insensitive-attributes[frame=hsides]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=Hsides]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSides]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSides]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIdes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIdes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIdes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIdes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsiDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsiDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSiDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSiDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsidEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsidEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSidEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSidEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIdEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIdEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIdEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIdEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsiDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsiDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSiDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSiDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsideS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsideS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSideS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSideS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIdeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIdeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIdeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIdeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsiDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsiDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSiDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSiDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsidES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsidES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSidES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSidES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIdES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIdES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIdES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIdES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsiDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsiDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSiDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSiDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-case-insensitive-attributes[frame=hsides]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=Hsides]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSides]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSides]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIdes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIdes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIdes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIdes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsiDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsiDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSiDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSiDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsidEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsidEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSidEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSidEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIdEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIdEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIdEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIdEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsiDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsiDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSiDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSiDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsideS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsideS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSideS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSideS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIdeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIdeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIdeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIdeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsiDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsiDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSiDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSiDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsidES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsidES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSidES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSidES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIdES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIdES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIdES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIdES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsiDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsiDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSiDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSiDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-box-ordinal-group: 14; -webkit-order: 13; -moz-box-ordinal-group: 14; @@ -222,7 +215,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order: 13; } -.test-rebeccapurple-color:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-rebeccapurple-color:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { color: #639; color: rebeccapurple; -webkit-box-ordinal-group: 15; @@ -232,7 +225,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order: 14; } -.test-hexadecimal-alpha-notation:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-hexadecimal-alpha-notation:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { background-color: rgba(243,243,243,0.95294); background-color: #f3f3f3f3; color: rgba(0,0,0,0.2); @@ -244,7 +237,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order: 15; } -.test-color-functional-notation:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-color-functional-notation:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { color: rgba(178, 34, 34, 0.5); color: rgb(70% 13.5% 13.5% / 50%); -webkit-box-ordinal-group: 17; @@ -254,7 +247,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order: 16; } -.test-lab-function:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-lab-function:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { background-color: rgb(179, 35, 35); background-color: color(display-p3 0.64331 0.19245 0.16771); background-color: lab(40% 56.6 39); @@ -268,7 +261,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order: 17; } -.test-system-ui-font-family:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-system-ui-font-family:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; -webkit-box-ordinal-group: 19; -webkit-order: 18; @@ -277,7 +270,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order: 18; } -.test-font-variant-property:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-font-variant-property:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-font-feature-settings: "smcp"; -moz-font-feature-settings: "smcp"; font-feature-settings: "smcp"; @@ -289,7 +282,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order: 19; } -.test-all-property:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-all-property:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-animation: none 0s ease 0s 1 normal none running; -moz-animation: none 0s ease 0s 1 normal none running; -o-animation: none 0s ease 0s 1 normal none running; @@ -431,7 +424,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order: 20; } -.test-matches-pseudo-class:matches(:first-child, .special):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-matches-pseudo-class:matches(:first-child, .special):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-box-ordinal-group: 22; -webkit-order: 21; -moz-box-ordinal-group: 22; @@ -439,7 +432,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order: 21; } -.test-not-pseudo-class:not(:first-child):not(.special):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-not-pseudo-class:not(:first-child):not(.special):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-box-ordinal-group: 23; -webkit-order: 22; -moz-box-ordinal-group: 23; @@ -447,7 +440,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order: 22; } -.test-any-link-pseudo-class:link:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#), .test-any-link-pseudo-class:visited:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#), area[href].test-any-link-pseudo-class:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-any-link-pseudo-class:link:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#), .test-any-link-pseudo-class:visited:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#), area[href].test-any-link-pseudo-class:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-box-ordinal-group: 24; -webkit-order: 23; -moz-box-ordinal-group: 24; @@ -455,18 +448,18 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order: 23; } -.test-any-link-pseudo-class:-webkit-any-link:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-any-link-pseudo-class:-webkit-any-link:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-box-ordinal-group: 24; -webkit-order: 23; order: 23; } -.test-any-link-pseudo-class:-moz-any-link:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-any-link-pseudo-class:-moz-any-link:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -moz-box-ordinal-group: 24; order: 23; } -.test-any-link-pseudo-class:any-link:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-any-link-pseudo-class:any-link:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-box-ordinal-group: 24; -webkit-order: 23; -moz-box-ordinal-group: 24; @@ -474,7 +467,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order: 23; } -[dir="rtl"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .test-dir-pseudo-class { +[dir="rtl"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .test-dir-pseudo-class { -webkit-box-ordinal-group: 25; -webkit-order: 24; -moz-box-ordinal-group: 25; @@ -482,7 +475,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order: 24; } -.test-dir-pseudo-class:dir(rtl):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-dir-pseudo-class:dir(rtl):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-box-ordinal-group: 25; -webkit-order: 24; -moz-box-ordinal-group: 25; @@ -490,7 +483,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order: 24; } -.test-overflow-wrap-property:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-overflow-wrap-property:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-box-ordinal-group: 26; -webkit-order: 25; -moz-box-ordinal-group: 26; @@ -499,7 +492,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n word-wrap: break-word; } -.test-focus-visible-pseudo-class:focus-visible:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-focus-visible-pseudo-class:focus-visible:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-box-ordinal-group: 27; -webkit-order: 26; -moz-box-ordinal-group: 27; @@ -507,16 +500,16 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order: 26; } -.test-double-position-gradients:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-double-position-gradients:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { background-image: conic-gradient(yellowgreen 40%, gold 0deg,gold 75%, #f06 0deg); background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg); } -.test-blank-pseudo-class:blank:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-blank-pseudo-class:blank:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { background-color: yellow; } -.test-has-pseudo-class:has(.inner-class):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-has-pseudo-class:has(.inner-class):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { background-color: yellow; } @@ -576,22 +569,22 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order: 28; } -.test-hwb-function:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-hwb-function:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { background-color: rgba(0, 195, 255, .5); background-color: hwb(194 0% 0% / .5); } -.test-opacity-percent:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-opacity-percent:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { opacity: 0.42; opacity: 42%; } -.clamp-same-unit:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.clamp-same-unit:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { width: max(10px, min(64px, 80px)); width: clamp(10px, 64px, 80px); } -.complex-clamp:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.complex-clamp:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { width: max(-webkit-calc(100% - 10px), min(min(10px, 100%), max(40px, 4em))); width: max(-moz-calc(100% - 10px), min(min(10px, 100%), max(40px, 4em))); width: max(calc(100% - 10px), min(min(10px, 100%), max(40px, 4em))); @@ -600,19 +593,19 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n width: clamp(calc(100% - 10px), min(10px, 100%), max(40px, 4em)); } -.clamp-different-units:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.clamp-different-units:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { width: max(10%, min(2px, 4rem)); width: clamp(10%, 2px, 4rem); } -.mixed-clamp:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.mixed-clamp:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { grid-template-columns: max(22rem, min(40%, 32rem)) minmax(0, 1fr); grid-template-columns: clamp(22rem, 40%, 32rem) minmax(0, 1fr); margin: max(1rem, min(2%, 3rem)) 4vh; margin: clamp(1rem, 2%, 3rem) 4vh; } -.calc-clamp:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.calc-clamp:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { margin: 0 40px 0 -webkit-calc(-1 * max(32px, min(16vw, 64px))); margin: 0 40px 0 -moz-calc(-1 * max(32px, min(16vw, 64px))); margin: 0 40px 0 calc(-1 * max(32px, min(16vw, 64px))); @@ -621,7 +614,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n margin: 0 40px 0 calc(-1 * clamp(32px, 16vw, 64px)); } -.multiple-calc-clamp:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.multiple-calc-clamp:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { margin: -webkit-calc(-1 * max(1px, min(2vw, 3px))) -webkit-calc(-1 * max(4px, min(5vw, 6px))); margin: -moz-calc(-1 * max(1px, min(2vw, 3px))) -moz-calc(-1 * max(4px, min(5vw, 6px))); margin: calc(-1 * max(1px, min(2vw, 3px))) calc(-1 * max(4px, min(5vw, 6px))); @@ -639,7 +632,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n margin: calc(-1 * clamp(1px, 2vw, 3px)) calc(-1 * clamp(4px, 5vw, 6px)); } -.nested-clamp:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.nested-clamp:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { font-size: max(max(1rem, min(2vw, 3rem)), min(4vw, 5rem)); font-size: max(clamp(1rem, 2vw, 3rem), min(4vw, 5rem)); font-size: max(1rem, min(2vw, 3rem)); @@ -655,42 +648,42 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n src: url(a) format(woff2); } -.block-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.block-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: block; display: block flow; } -.block-flow-root:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.block-flow-root:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: flow-root; display: block flow-root; } -.inline-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.inline-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: inline; display: inline flow; } -.inline-flow-root:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.inline-flow-root:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: inline-block; display: inline flow-root; } -.run-in-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.run-in-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: run-in; display: run-in flow; } -.list-item-block-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.list-item-block-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: list-item; display: list-item block flow; } -.inline-flow-list-item:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.inline-flow-list-item:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: inline list-item; display: inline flow list-item; } -.block-flex:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.block-flex:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: -webkit-box; display: -webkit-flex; display: -moz-box; @@ -699,7 +692,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n display: block flex; } -.inline-flex:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.inline-flex:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: -webkit-inline-box; display: -webkit-inline-flex; display: -moz-inline-box; @@ -708,52 +701,52 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n display: inline flex; } -.block-grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.block-grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: grid; display: block grid; } -.inline-grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.inline-grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: inline-grid; display: inline grid; } -.inline-ruby:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.inline-ruby:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: ruby; display: inline ruby; } -.block-table:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.block-table:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: table; display: block table; } -.inline-table:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.inline-table:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: inline-table; display: inline table; } -.table-cell-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.table-cell-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: table-cell; display: table-cell flow; } -.table-caption-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.table-caption-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: table-caption; display: table-caption flow; } -.ruby-base-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.ruby-base-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: ruby-base; display: ruby-base flow; } -.ruby-text-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.ruby-text-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: ruby-text; display: ruby-text flow; } -.color-function:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.color-function:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { prop-1: rgb(0,132,94); prop-1: color(display-p3 0.00000 0.51872 0.36985); prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)'; @@ -769,7 +762,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n prop-5: color(display-p3 1 1 1 1); } -.oklab:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.oklab:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { color-1: rgb(73, 71, 69); color-1: color(display-p3 0.28515 0.27983 0.27246); color-1: oklab(40% 0.001236 0.0039); @@ -806,7 +799,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n color-12: oklab(72.322% -0.0465 -0.1150); } -.oklch:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.oklch:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { color-1: rgb(126, 37, 15); color-1: color(display-p3 0.45368 0.16978 0.09411); color-1: oklch(40% 0.1268735435 34.568626); @@ -864,10 +857,11 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n color-17: oklch(60% 0.1250 0.785398unknown); } -.ic-unit:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.ic-unit:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { --value-2ic: 'something'; text-indent: 2em; text-indent: 2ic; + content: 'something'; content: var(--value-2ic); left: 2em; left: var(--non-existing, 2em); @@ -886,12 +880,12 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n padding: 2 ic; } -.unset:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.unset:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { clip: initial; clip: unset; } -.mod:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.mod:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { padding: 8px 3px 1px -webkit-calc(3px + 50%); padding: 8px 3px 1px -moz-calc(3px + 50%); padding: 8px 3px 1px calc(3px + 50%); @@ -912,7 +906,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n width: mod(mod(-18px, 5px), 5px); } -.rem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.rem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { padding: 8px 3px 1px -webkit-calc(3px + 50%); padding: 8px 3px 1px -moz-calc(3px + 50%); padding: 8px 3px 1px calc(3px + 50%); @@ -931,7 +925,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n transform: rotate(rem(-140deg, -90deg)); } -.round:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.round:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { top: 3px; top: round(2.5px, 1px); right: 3px; diff --git a/plugins/postcss-custom-properties/.tape.cjs b/plugins/postcss-custom-properties/.tape.cjs deleted file mode 100644 index 3c717ab09..000000000 --- a/plugins/postcss-custom-properties/.tape.cjs +++ /dev/null @@ -1,29 +0,0 @@ -const postcssTape = require('../../packages/postcss-tape/dist/index.cjs'); -const plugin = require('postcss-custom-properties'); - -postcssTape(plugin)({ - 'basic:import-cjs': { - message: 'supports { importFrom: "test/import-properties{-2}?.cjs" } usage', - warnings: 1, - options: { - importFrom: [ - 'test/import-properties.cjs', - 'test/import-properties-2.cjs' - ] - }, - expect: 'basic.import.expect.css', - result: 'basic.import.result.css' - }, - 'basic:import-css-js': { - message: 'supports { importFrom: "test/import-properties{-2}?.{css|js}" } usage', - warnings: 1, - options: { - importFrom: [ - 'test/import-properties.js', - 'test/import-properties-2.css' - ] - }, - expect: 'basic.import.expect.css', - result: 'basic.import.result.css' - } -}); diff --git a/plugins/postcss-custom-properties/.tape.mjs b/plugins/postcss-custom-properties/.tape.mjs index 43fa4ae48..47acf12d8 100644 --- a/plugins/postcss-custom-properties/.tape.mjs +++ b/plugins/postcss-custom-properties/.tape.mjs @@ -1,8 +1,6 @@ import postcssTape from '../../packages/postcss-tape/dist/index.mjs'; import plugin from 'postcss-custom-properties'; -import { strict as assert } from 'assert'; import postcssImport from 'postcss-import'; -import fs from 'fs'; postcssTape(plugin)({ 'basic': { @@ -14,383 +12,13 @@ postcssTape(plugin)({ preserve: false } }, - 'basic:import': { - message: 'supports { importFrom: { customProperties: { ... } } } usage', - warnings: 1, - options: { - importFrom: { - customProperties: { - '--color': 'rgb(255, 0, 0)', - '--color-2': 'yellow', - '--ref-color': 'var(--color)', - '--margin': '0 10px 20px 30px', - '--z-index': 10 - } - } - } - }, - 'basic:import-fn': { - message: 'supports { importFrom() } usage', - warnings: 1, - options: { - importFrom() { - return { - customProperties: { - '--color': 'rgb(255, 0, 0)', - '--color-2': 'yellow', - '--ref-color': 'var(--color)', - '--margin': '0 10px 20px 30px', - '--z-index': 10 - } - }; - } - }, - expect: 'basic.import.expect.css', - result: 'basic.import.result.css' - }, - 'basic:import-fn-promise': { - message: 'supports { async importFrom() } usage', - warnings: 1, - options: { - importFrom() { - return new Promise(resolve => { - resolve({ - customProperties: { - '--color': 'rgb(255, 0, 0)', - '--color-2': 'yellow', - '--ref-color': 'var(--color)', - '--z-index': 10 - } - }) - }); - } - }, - expect: 'basic.import.expect.css', - result: 'basic.import.result.css' - }, - 'basic:import-json': { - message: 'supports { importFrom: "test/import-properties.json" } usage', - warnings: 1, - options: { - importFrom: 'test/import-properties.json' - }, - expect: 'basic.import.expect.css', - result: 'basic.import.result.css' - }, - 'basic:import-cjs': { - message: 'supports { importFrom: "test/import-properties{-2}?.cjs" } usage', - warnings: 1, - options: { - importFrom: [ - 'test/import-properties.cjs', - 'test/import-properties-2.cjs' - ] - }, - expect: 'basic.import.expect.css', - result: 'basic.import.result.css' - }, - 'basic:import-mjs': { - message: 'supports { importFrom: "test/import-properties{-2}?.mjs" } usage', - warnings: 1, - options: { - importFrom: [ - 'test/import-properties.mjs', - 'test/import-properties-2.mjs' - ] - }, - expect: 'basic.import.expect.css', - result: 'basic.import.result.css' - }, - 'basic:import-css': { - message: 'supports { importFrom: "test/import-properties{-2}?.css" } usage', - warnings: 1, - options: { - importFrom: [ - 'test/import-properties.css', - 'test/import-properties-2.css' - ] - }, - expect: 'basic.import.expect.css', - result: 'basic.import.result.css' + 'examples/example': { + message: 'minimal example', }, - 'basic:import-css-js': { - message: 'supports { importFrom: "test/import-properties{-2}?.{css|js}" } usage', - warnings: 1, + 'examples/example:preserve-false': { + message: 'minimal example with { preserve: false }', options: { - importFrom: [ - 'test/import-properties.js', - 'test/import-properties-2.css' - ] - }, - expect: 'basic.import.expect.css', - result: 'basic.import.result.css' - }, - 'basic:import-css-pcss': { - message: 'supports { importFrom: "test/import-properties.{p}?css" } usage', - warnings: 1, - options: { - importFrom: [ - 'test/import-properties.pcss', - 'test/import-properties-2.css' - ] - }, - expect: 'basic.import.expect.css', - result: 'basic.import.result.css' - }, - 'basic:import-css-from': { - message: 'supports { importFrom: { from: "test/import-properties.css" } } usage', - warnings: 1, - options: { - importFrom: [ - { from: 'test/import-properties.css' }, - { from: 'test/import-properties-2.css' } - ] - }, - expect: 'basic.import.expect.css', - result: 'basic.import.result.css' - }, - 'basic:import-css-from-type': { - message: 'supports { importFrom: [ { from: "test/import-properties.css", type: "css" } ] } usage', - warnings: 1, - options: { - importFrom: [ - { from: 'test/import-properties.css', type: 'css' }, - { from: 'test/import-properties-2.css', type: 'css' } - ] - }, - expect: 'basic.import.expect.css', - result: 'basic.import.result.css' - }, - 'basic:import-override': { - message: 'importFrom with { preserve: false } should override root properties', - warnings: 1, - options: { - preserve: false, - importFrom: { - customProperties: { - '--color': 'rgb(0, 0, 0)', - '--color-2': 'yellow', - '--ref-color': 'var(--color)', - '--margin': '0 10px 20px 30px', - '--shadow-color': 'rgb(0,0,0)', - '--z-index': 10 - } - } - }, - expect: 'basic.import-override.expect.css', - result: 'basic.import-override.result.css' - }, - 'basic:import-override:inverse': { - message: 'importFrom with { preserve: false, overrideImportFromWithRoot: true } should override importFrom properties', - warnings: 1, - options: { - preserve: false, - overrideImportFromWithRoot: true, - importFrom: { - customProperties: { - '--color': 'rgb(0, 0, 0)', - '--color-2': 'yellow', - '--ref-color': 'var(--color)', - '--margin': '0 10px 20px 30px', - '--shadow-color': 'rgb(0,0,0)', - '--z-index': 10 - } - } - }, - expect: 'basic.import-override.inverse.expect.css', - result: 'basic.import-override.inverse.result.css' - }, - 'basic:export': { - message: 'supports { exportTo: { customProperties: { ... } } } usage', - warnings: 1, - options: { - exportTo: (global.__exportPropertiesObject = global.__exportPropertiesObject || { - customProperties: null - }) - }, - expect: 'basic.expect.css', - result: 'basic.result.css', - after() { - if (__exportPropertiesObject.customProperties['--color'] !== 'rgb(255, 0, 0)') { - throw new Error('The exportTo function failed'); - } - } - }, - 'basic:export-fn': { - message: 'supports { exportTo() } usage', - warnings: 1, - options: { - exportTo(customProperties) { - if (customProperties['--color'] !== 'rgb(255, 0, 0)') { - throw new Error('The exportTo function failed'); - } - } - }, - expect: 'basic.expect.css', - result: 'basic.result.css' - }, - 'basic:export-fn-promise': { - message: 'supports { async exportTo() } usage', - warnings: 1, - options: { - exportTo(customProperties) { - return new Promise((resolve, reject) => { - if (customProperties['--color'] !== 'rgb(255, 0, 0)') { - reject('The exportTo function failed'); - } else { - resolve(); - } - }); - } - }, - expect: 'basic.expect.css', - result: 'basic.result.css' - }, - 'basic:export-scss': { - message: 'supports { exportTo: "test/export-properties.scss" } usage', - warnings: 1, - options: { - exportTo: 'test/export-properties.scss' - }, - expect: 'basic.expect.css', - result: 'basic.result.css', - before() { - try { - global.__exportPropertiesString = fs.readFileSync('test/export-properties.scss', 'utf8'); - fs.rmSync('test/export-properties.scss'); - } catch (_) { - // ignore - } - }, - after() { - assert.strictEqual(global.__exportPropertiesString, fs.readFileSync('test/export-properties.scss', 'utf8')); - } - }, - 'basic:export-json': { - message: 'supports { exportTo: "test/export-properties.json" } usage', - warnings: 1, - options: { - exportTo: 'test/export-properties.json' - }, - expect: 'basic.expect.css', - result: 'basic.result.css', - before() { - try { - global.__exportPropertiesString = fs.readFileSync('test/export-properties.json', 'utf8'); - fs.rmSync('test/export-properties.json'); - } catch (_) { - // ignore - } - }, - after() { - assert.strictEqual(global.__exportPropertiesString, fs.readFileSync('test/export-properties.json', 'utf8')); - } - }, - 'basic:export-js': { - message: 'supports { exportTo: "test/export-properties.js" } usage', - warnings: 1, - options: { - exportTo: 'test/export-properties.js' - }, - expect: 'basic.expect.css', - result: 'basic.result.css', - before() { - try { - global.__exportPropertiesString = fs.readFileSync('test/export-properties.js', 'utf8'); - fs.rmSync('test/export-properties.js'); - } catch (_) { - // ignore - } - }, - after() { - assert.strictEqual(global.__exportPropertiesString, fs.readFileSync('test/export-properties.js', 'utf8')); - } - }, - 'basic:export-mjs': { - message: 'supports { exportTo: "test/export-properties.mjs" } usage', - warnings: 1, - options: { - exportTo: 'test/export-properties.mjs' - }, - expect: 'basic.expect.css', - result: 'basic.result.css', - before() { - try { - global.__exportPropertiesString = fs.readFileSync('test/export-properties.mjs', 'utf8'); - fs.rmSync('test/export-properties.mjs'); - } catch (_) { - // ignore - } - }, - after() { - assert.strictEqual(global.__exportPropertiesString, fs.readFileSync('test/export-properties.mjs', 'utf8')); - } - }, - 'basic:export-css': { - message: 'supports { exportTo: "test/export-properties.css" } usage', - warnings: 1, - options: { - exportTo: 'test/export-properties.css' - }, - expect: 'basic.expect.css', - result: 'basic.result.css', - before() { - try { - global.__exportPropertiesString = fs.readFileSync('test/export-properties.css', 'utf8'); - fs.rmSync('test/export-properties.css'); - } catch (_) { - // ignore - } - }, - after() { - assert.strictEqual(global.__exportPropertiesString, fs.readFileSync('test/export-properties.css', 'utf8')); - } - }, - 'basic:export-css-to': { - message: 'supports { exportTo: { to: "test/export-properties.css" } } usage', - warnings: 1, - options: { - exportTo: { to: 'test/export-properties.css' } - }, - expect: 'basic.expect.css', - result: 'basic.result.css', - before() { - try { - global.__exportPropertiesString = fs.readFileSync('test/export-properties.css', 'utf8'); - fs.rmSync('test/export-properties.css'); - } catch (_) { - // ignore - } - }, - after() { - assert.strictEqual(global.__exportPropertiesString, fs.readFileSync('test/export-properties.css', 'utf8')); - } - }, - 'basic:export-css-to-type': { - message: 'supports { exportTo: { to: "test/export-properties.css", type: "css" } } usage', - warnings: 1, - options: { - exportTo: { to: 'test/export-properties.css', type: 'css' } - }, - expect: 'basic.expect.css', - result: 'basic.result.css', - before() { - try { - global.__exportPropertiesString = fs.readFileSync('test/export-properties.css', 'utf8'); - fs.rmSync('test/export-properties.css'); - } catch (_) { - // ignore - } - }, - after() { - assert.strictEqual(global.__exportPropertiesString, fs.readFileSync('test/export-properties.css', 'utf8')); - } - }, - 'basic:import-is-empty': { - message: 'supports { importFrom: {} } usage', - options: { - importFrom: {}, - disableDeprecationNotice: true + preserve: false } }, 'import': { diff --git a/plugins/postcss-custom-properties/CHANGELOG.md b/plugins/postcss-custom-properties/CHANGELOG.md index 9aee657cd..f773cfdb9 100644 --- a/plugins/postcss-custom-properties/CHANGELOG.md +++ b/plugins/postcss-custom-properties/CHANGELOG.md @@ -3,6 +3,24 @@ ### Unreleased (major) - Updated: Support for Node v14+ (major). +- Removed : `importFrom` feature (breaking). +- Removed : `exportTo` feature (breaking). +- Added support for local custom property declarations. + +```css +.example { + --a-value: 20px; + margin: var(--a-value); +} + +/* becomes */ + +.example { + --a-value: 20px; + margin: 20px; + margin: var(--a-value); +} +``` ### 12.1.8 (June 10, 2022) diff --git a/plugins/postcss-custom-properties/README.md b/plugins/postcss-custom-properties/README.md index ab48d6d96..be903271b 100644 --- a/plugins/postcss-custom-properties/README.md +++ b/plugins/postcss-custom-properties/README.md @@ -1,9 +1,6 @@ -# PostCSS Custom Properties [][postcss] +# PostCSS Custom Properties [][postcss] -[![NPM Version][npm-img]][npm-url] -[![CSS Standard Status][css-img]][css-url] -[![Build Status][cli-img]][cli-url] -[][discord] +[][npm-url] [][css-url] [][cli-url] [][discord] [PostCSS Custom Properties] lets you use Custom Properties in CSS, following the [CSS Custom Properties] specification. @@ -12,47 +9,75 @@ the [CSS Custom Properties] specification. ```pcss :root { - --color: red; + --color-blue-dark: rgb(0, 61, 184); + --color-blue-light: rgb(0, 217, 255); + --color-pink: rgb(255, 192, 211); + --text-color: var(--color-pink); } -h1 { - color: var(--color); +.element { + /* custom props */ + --border-color: var(--color-blue-light); + + /* props */ + border: 1px solid var(--border-color); + color: var(--text-color); +} + +.element--dark { + --border-color: var(--color-blue-dark); } /* becomes */ :root { - --color: red; + --color-blue-dark: rgb(0, 61, 184); + --color-blue-light: rgb(0, 217, 255); + --color-pink: rgb(255, 192, 211); + --text-color: var(--color-pink); +} + +.element { + /* custom props */ + --border-color: var(--color-blue-light); + + /* props */ + border: 1px solid rgb(0, 217, 255); + border: 1px solid var(--border-color); + color: rgb(255, 192, 211); + color: var(--text-color); } -h1 { - color: red; - color: var(--color); +.element--dark { + --border-color: var(--color-blue-dark); } ``` -**Note:** This plugin only processes variables that are defined in the `:root` selector. +**Note:** This plugin only processes variables that are defined in the `:root` or `html` selector. + +Locally defined custom properties will be used as fallbacks only within the same rule, but not elsewhere. ## Usage Add [PostCSS Custom Properties] to your project: ```bash -npm install postcss-custom-properties --save-dev +npm install postcss postcss-custom-properties --save-dev ``` -Use [PostCSS Custom Properties] as a [PostCSS] plugin: +Use it as a [PostCSS] plugin: ```js const postcss = require('postcss'); const postcssCustomProperties = require('postcss-custom-properties'); postcss([ - postcssCustomProperties(/* pluginOptions */) + postcssCustomProperties(/* pluginOptions */) ]).process(YOUR_CSS /*, processOptions */); ``` -[PostCSS Custom Properties] runs in all Node environments, with special instructions for: +[PostCSS Custom Properties] runs in all Node environments, with special +instructions for: | [Node](INSTALL.md#node) | [PostCSS CLI](INSTALL.md#postcss-cli) | [Webpack](INSTALL.md#webpack) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) | | --- | --- | --- | --- | --- | --- | @@ -61,147 +86,67 @@ postcss([ ### preserve -The `preserve` option determines whether Custom Properties and properties using -custom properties should be preserved in their original form. By default, both -of these are preserved. +The `preserve` option determines whether properties using +custom properties should be preserved in their original form. By default these are preserved. + +Custom property declarations are always preserved only `var()` functions can be omitted. ```js -postcssCustomProperties({ - preserve: false -}); +postcssCustomProperties({ preserve: false }) ``` ```pcss :root { - --color: red; + --color-blue-dark: rgb(0, 61, 184); + --color-blue-light: rgb(0, 217, 255); + --color-pink: rgb(255, 192, 211); + --text-color: var(--color-pink); } -h1 { - color: var(--color); -} - -/* becomes */ +.element { + /* custom props */ + --border-color: var(--color-blue-light); -h1 { - color: red; + /* props */ + border: 1px solid var(--border-color); + color: var(--text-color); } -``` - -### importFrom - -The `importFrom` option specifies sources where Custom Properties can be imported -from, which might be CSS, JS, and JSON files, functions, and directly passed -objects. - -```js -postcssCustomProperties({ - importFrom: 'path/to/file.css' // => :root { --color: red } -}); -``` -```pcss -h1 { - color: var(--color); +.element--dark { + --border-color: var(--color-blue-dark); } /* becomes */ -h1 { - color: red; +:root { + --color-blue-dark: rgb(0, 61, 184); + --color-blue-light: rgb(0, 217, 255); + --color-pink: rgb(255, 192, 211); + --text-color: var(--color-pink); } -``` -Multiple sources can be passed into this option, and they will be parsed in the -order they are received. JavaScript files, JSON files, functions, and objects -will need to namespace Custom Properties using the `customProperties` or -`custom-properties` key. +.element { + /* custom props */ + --border-color: var(--color-blue-light); -```js -postcssCustomProperties({ - importFrom: [ - 'path/to/file.css', // :root { --color: red; } - 'and/then/this.js', // module.exports = { customProperties: { '--color': 'red' } } - 'and/then/that.json', // { "custom-properties": { "--color": "red" } } - { - customProperties: { '--color': 'red' } - }, - () => { - const customProperties = { '--color': 'red' }; - - return { customProperties }; - } - ] -}); -``` - -See example imports written in [CSS](test/import-properties.css), -[JS](test/import-properties.js), and [JSON](test/import-properties.json). - -### overrideImportFromWithRoot - -The `overrideImportFromWithRoot` option determines if properties added via `importFrom` are overridden by properties that exist in `:root`. -Defaults to `false`. - -```js -postcssCustomProperties({ - overrideImportFromWithRoot: true -}); -``` - -### exportTo - -The `exportTo` option specifies destinations where Custom Properties can be exported -to, which might be CSS, JS, and JSON files, functions, and directly passed -objects. - -```js -postcssCustomProperties({ - exportTo: 'path/to/file.css' // :root { --color: red; } -}); -``` - -Multiple destinations can be passed into this option, and they will be parsed -in the order they are received. JavaScript files, JSON files, and objects will -need to namespace Custom Properties using the `customProperties` or -`custom-properties` key. + /* props */ + border: 1px solid var(--border-color); + color: rgb(255, 192, 211); +} -```js -const cachedObject = { customProperties: {} }; - -postcssCustomProperties({ - exportTo: [ - 'path/to/file.css', // :root { --color: red; } - 'and/then/this.js', // module.exports = { customProperties: { '--color': 'red' } } - 'and/then/this.mjs', // export const customProperties = { '--color': 'red' } } - 'and/then/that.json', // { "custom-properties": { "--color": "red" } } - 'and/then/that.scss', // $color: red; - cachedObject, - customProperties => { - customProperties // { '--color': 'red' } - } - ] -}); +.element--dark { + --border-color: var(--color-blue-dark); +} ``` -See example exports written to [CSS](test/export-properties.css), -[JS](test/export-properties.js), [MJS](test/export-properties.mjs), -[JSON](test/export-properties.json) and [SCSS](test/export-properties.scss). - -### disableDeprecationNotice - -Silence the deprecation notice that is printed to the console when using `importFrom` or `exportTo`. - -> "importFrom" and "exportTo" will be removed in a future version of postcss-custom-properties. -> Check the discussion on github for more details. https://github.com/csstools/postcss-plugins/discussions/192 - -[cli-img]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml/badge.svg [cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test -[css-img]: https://cssdb.org/images/badges/custom-properties.svg [css-url]: https://cssdb.org/#custom-properties [discord]: https://discord.gg/bUadyRwkJS -[npm-img]: https://img.shields.io/npm/v/postcss-custom-properties.svg [npm-url]: https://www.npmjs.com/package/postcss-custom-properties -[CSS Custom Properties]: https://www.w3.org/TR/css-variables-1/ +[Gulp PostCSS]: https://github.com/postcss/gulp-postcss +[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss [PostCSS]: https://github.com/postcss/postcss +[PostCSS Loader]: https://github.com/postcss/postcss-loader [PostCSS Custom Properties]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-properties +[CSS Custom Properties]: https://www.w3.org/TR/css-variables-1/ diff --git a/plugins/postcss-custom-properties/docs/README.md b/plugins/postcss-custom-properties/docs/README.md new file mode 100644 index 000000000..b41f93ac1 --- /dev/null +++ b/plugins/postcss-custom-properties/docs/README.md @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + +

+ +[] lets you use Custom Properties in CSS, following +the [CSS Custom Properties] specification. + +[](https://caniuse.com/#feat=css-variables) + +```pcss + + +/* becomes */ + + +``` + +**Note:** This plugin only processes variables that are defined in the `:root` or `html` selector. + +Locally defined custom properties will be used as fallbacks only within the same rule, but not elsewhere. + + + + + +## Options + +### preserve + +The `preserve` option determines whether properties using +custom properties should be preserved in their original form. By default these are preserved. + +Custom property declarations are always preserved only `var()` functions can be omitted. + +```js +({ preserve: false }) +``` + +```pcss + + +/* becomes */ + + +``` + + +[CSS Custom Properties]: diff --git a/plugins/postcss-custom-properties/package.json b/plugins/postcss-custom-properties/package.json index b01398067..20d39c9fd 100644 --- a/plugins/postcss-custom-properties/package.json +++ b/plugins/postcss-custom-properties/package.json @@ -43,12 +43,12 @@ "scripts": { "build": "rollup -c ../../rollup/default.js", "clean": "node -e \"fs.rmSync('./dist', { recursive: true, force: true });\"", - "docs": "node ../../.github/bin/generate-docs/install.mjs", + "docs": "node ../../.github/bin/generate-docs/install.mjs && node ../../.github/bin/generate-docs/readme.mjs", "lint": "npm run lint:eslint && npm run lint:package-json", "lint:eslint": "eslint ./src --ext .js --ext .ts --ext .mjs --no-error-on-unmatched-pattern", "lint:package-json": "node ../../.github/bin/format-package-json.mjs", "prepublishOnly": "npm run clean && npm run build && npm run test", - "test": "node .tape.mjs && node .tape.cjs && npm run test:exports", + "test": "node .tape.mjs && npm run test:exports", "test:exports": "node ./test/_import.mjs && node ./test/_require.cjs", "test:rewrite-expects": "REWRITE_EXPECTS=true node .tape.mjs" }, @@ -73,8 +73,10 @@ "w3c" ], "csstools": { + "cssdbId": "custom-properties", "exportName": "postcssCustomProperties", - "humanReadableName": "PostCSS Custom Properties" + "humanReadableName": "PostCSS Custom Properties", + "specUrl": "https://www.w3.org/TR/css-variables-1/" }, "volta": { "extends": "../../package.json" diff --git a/plugins/postcss-custom-properties/src/get-custom-properties-from-root.ts b/plugins/postcss-custom-properties/src/get-custom-properties-from-root.ts new file mode 100644 index 000000000..a87bda3b0 --- /dev/null +++ b/plugins/postcss-custom-properties/src/get-custom-properties-from-root.ts @@ -0,0 +1,75 @@ +import { Root, Rule } from 'postcss'; +import valuesParser from 'postcss-value-parser'; +import { isBlockIgnored } from './is-ignored'; + +// return custom selectors from the css root, conditionally removing them +export default function getCustomPropertiesFromRoot(root: Root): Map { + // initialize custom selectors + const customPropertiesFromHtmlElement: Map = new Map(); + const customPropertiesFromRootPseudo: Map = new Map(); + const out: Map = new Map(); + + // for each html or :root rule + root.each((rule) => { + if (rule.type !== 'rule') { + return; + } + + if (isHtmlRule(rule)) { + rule.each((decl) => { + if (decl.type !== 'decl') { + return; + } + + if (!decl.variable || isBlockIgnored(decl)) { + return; + } + + if (decl.value.toLowerCase().trim() === 'initial') { + return; + } + + customPropertiesFromHtmlElement.set(decl.prop, valuesParser(decl.value)); + }); + } else if (isRootRule(rule)) { + rule.each((decl) => { + if (decl.type !== 'decl') { + return; + } + + if (!decl.variable || isBlockIgnored(decl)) { + return; + } + + if (decl.value.toLowerCase().trim() === 'initial') { + return; + } + + customPropertiesFromRootPseudo.set(decl.prop, valuesParser(decl.value)); + }); + } + }); + + for (const [name, value] of customPropertiesFromHtmlElement.entries()) { + out.set(name, value); + } + + for (const [name, value] of customPropertiesFromRootPseudo.entries()) { + out.set(name, value); + } + + // return all custom properties, preferring :root properties over html properties + return out; +} + +// match html and :root rules +const htmlSelectorRegExp = /^html$/i; +const rootSelectorRegExp = /^:root$/i; + +function isHtmlRule(rule: Rule) { + return rule.selector.split(',').some(item => htmlSelectorRegExp.test(item)) && rule.nodes && rule.nodes.length; +} + +function isRootRule(rule: Rule) { + return rule.selector.split(',').some(item => rootSelectorRegExp.test(item)) && rule.nodes && rule.nodes.length; +} diff --git a/plugins/postcss-custom-properties/src/index.ts b/plugins/postcss-custom-properties/src/index.ts index 22b2f1187..8085bdfdf 100644 --- a/plugins/postcss-custom-properties/src/index.ts +++ b/plugins/postcss-custom-properties/src/index.ts @@ -1,103 +1,70 @@ import type { PluginCreator } from 'postcss'; -import type valuesParser from 'postcss-value-parser'; +import valuesParser from 'postcss-value-parser'; -import getCustomPropertiesFromRoot from './lib/get-custom-properties-from-root'; -import getCustomPropertiesFromImports from './lib/get-custom-properties-from-imports'; -import transformProperties from './lib/transform-properties'; -import writeCustomPropertiesToExports from './lib/write-custom-properties-to-exports'; -import type { ImportOptions, ExportOptions } from './lib/options'; +import getCustomPropertiesFromRoot from './get-custom-properties-from-root'; +import { isBlockIgnored } from './is-ignored'; +import transformProperties from './transform-properties'; export interface PluginOptions { - /** Do not emit warnings about "importFrom" and "exportTo" deprecations */ - disableDeprecationNotice?: boolean; - /** Determines whether Custom Properties and properties using custom properties should be preserved in their original form. */ + /** Determines whether properties using custom properties should be preserved in their original form. */ preserve?: boolean - - /** Specifies sources where Custom Properties can be imported from, which might be CSS, JS, and JSON files, functions, and directly passed objects. */ - importFrom?: ImportOptions | Array - - /** Specifies destinations where Custom Properties can be exported to, which might be CSS, JS, and JSON files, functions, and directly passed objects. */ - exportTo?: ExportOptions | Array - - /** Specifies if `importFrom` properties or `:root` properties have priority. */ - overrideImportFromWithRoot?: boolean } const creator: PluginCreator = (opts?: PluginOptions) => { - // whether to preserve custom selectors and rules using them const preserve = 'preserve' in Object(opts) ? Boolean(opts.preserve) : true; - const overrideImportFromWithRoot = 'overrideImportFromWithRoot' in Object(opts) ? Boolean(opts.overrideImportFromWithRoot) : false; - const disableDeprecationNotice = 'disableDeprecationNotice' in Object(opts) ? Boolean(opts.disableDeprecationNotice) : false; - - // sources to import custom selectors from - let importFrom: Array = []; - if (Array.isArray(opts?.importFrom)) { - importFrom = opts.importFrom; - } else if (opts?.importFrom) { - importFrom = [opts.importFrom]; - } - // destinations to export custom selectors to - let exportTo: Array = []; - if (Array.isArray(opts?.exportTo)) { - exportTo = opts.exportTo; - } else if (opts?.exportTo) { - exportTo = [opts.exportTo]; + if ('importFrom' in Object(opts)) { + throw new Error('[postcss-custom-properties] "importFrom" is no longer supported'); } - // promise any custom selectors are imported - const customPropertiesPromise = getCustomPropertiesFromImports(importFrom); - - // whether to return synchronous function if no asynchronous operations are requested - const canReturnSyncFunction = importFrom.length === 0 && exportTo.length === 0; + if ('exportTo' in Object(opts)) { + throw new Error('[postcss-custom-properties] "exportTo" is no longer supported'); + } return { postcssPlugin: 'postcss-custom-properties', - prepare () { + prepare: () => { let customProperties: Map = new Map(); - if (canReturnSyncFunction) { - return { - Once: (root) => { - customProperties = getCustomPropertiesFromRoot(root, { preserve }); - }, - Declaration: (decl) => { - transformProperties(decl, customProperties, { preserve }); - }, - OnceExit: () => { - customProperties.clear(); - }, - }; - } else { - return { - Once: async root => { - const importedCustomerProperties = (await customPropertiesPromise).entries(); - const rootCustomProperties = getCustomPropertiesFromRoot(root, { preserve: preserve }).entries(); - - if (overrideImportFromWithRoot) { - for (const [name, value] of [...importedCustomerProperties, ...rootCustomProperties]) { - customProperties.set(name, value); + return { + Once: (root) => { + customProperties = getCustomPropertiesFromRoot(root); + }, + Declaration: (decl) => { + let localCustomProperties = customProperties; + if (preserve && decl.parent) { + let didCopy = false; + + decl.parent.each((siblingDecl) => { + if (decl === siblingDecl) { + return; } - } else { - for (const [name, value] of [...rootCustomProperties, ...importedCustomerProperties]) { - customProperties.set(name, value); + + if (siblingDecl.type !== 'decl') { + return; } - } - - await writeCustomPropertiesToExports(customProperties, exportTo); - }, - Declaration: (decl) => { - transformProperties(decl, customProperties, { preserve }); - }, - OnceExit: (root, { result }) => { - if (!disableDeprecationNotice && (importFrom.length > 0 || exportTo.length > 0)) { - root.warn(result, '"importFrom" and "exportTo" will be removed in a future version of postcss-custom-properties.\nWe are looking for insights and anecdotes on how these features are used so that we can design the best alternative.\nPlease let us know if our proposal will work for you.\nVisit the discussion on github for more details. https://github.com/csstools/postcss-plugins/discussions/192'); - } - - customProperties.clear(); - }, - }; - } + + if (!siblingDecl.variable || isBlockIgnored(siblingDecl)) { + return; + } + + if (!didCopy) { + localCustomProperties = new Map(customProperties); + didCopy = true; + } + + if (siblingDecl.value.toLowerCase().trim() === 'initial') { + localCustomProperties.delete(siblingDecl.prop); + return; + } + + localCustomProperties.set(siblingDecl.prop, valuesParser(siblingDecl.value)); + }); + } + + transformProperties(decl, localCustomProperties, { preserve: preserve }); + }, + }; }, }; }; diff --git a/plugins/postcss-custom-properties/src/lib/is-ignored.ts b/plugins/postcss-custom-properties/src/is-ignored.ts similarity index 100% rename from plugins/postcss-custom-properties/src/lib/is-ignored.ts rename to plugins/postcss-custom-properties/src/is-ignored.ts diff --git a/plugins/postcss-custom-properties/src/lib/get-custom-properties-from-imports.ts b/plugins/postcss-custom-properties/src/lib/get-custom-properties-from-imports.ts deleted file mode 100644 index 1296201a0..000000000 --- a/plugins/postcss-custom-properties/src/lib/get-custom-properties-from-imports.ts +++ /dev/null @@ -1,158 +0,0 @@ -import getCustomPropertiesFromRoot from './get-custom-properties-from-root'; -import path from 'path'; -import { pathToFileURL } from 'url'; -import type { ImportCustomProperties, ImportOptions } from './options'; -import valuesParser from 'postcss-value-parser'; -import { parse } from 'postcss'; -import { promises as fsp } from 'fs'; - -/* Get Custom Properties from CSS File -/* ========================================================================== */ - -async function getCustomPropertiesFromCSSFile(from) { - const css = await fsp.readFile(from); - const root = parse(css, { from : from.toString() }); - - return getCustomPropertiesFromRoot(root, { preserve: true }); -} - -/* Get Custom Properties from Object -/* ========================================================================== */ - -function getCustomPropertiesFromObject(object: ImportCustomProperties): Map { - const out: Map = new Map(); - - if ('customProperties' in object) { - for (const [name, value] of Object.entries(object.customProperties)) { - out.set(name, valuesParser(value.toString())); - } - } - - if ('custom-properties' in object) { - for (const [name, value] of Object.entries(object['custom-properties'])) { - out.set(name, valuesParser(value.toString())); - } - } - - return out; -} - -/* Get Custom Properties from JSON file -/* ========================================================================== */ - -async function getCustomPropertiesFromJSONFile(from): Promise