diff --git a/package-lock.json b/package-lock.json index 46495fcf46..132c4cd66f 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 2d4a75cd5a..02b429ea7f 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 58b7270615..59ccf7235d 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 57cd3aa96b..211128ec18 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 9614b38b1b..68358b9507 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 c87dd76ca8..4f9ef159ee 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 6264492f1f..63adce8cfa 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 c68ecd325d..80700b0b60 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 c5db8f724e..37b2febb16 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 44bcd91117..fa46a98a55 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 008d92fc26..2151edccd4 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 fab8019631..f0fc9a759f 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 e788390dc8..0000000000 --- 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 40af0165cc..0000000000 --- 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 53d2ddca15..f8fd799d75 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 53d2ddca15..f8fd799d75 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 b42d01e7b9..f019302cd9 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 be8bb20a29..7b748514f0 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 27cecf4c12..4f5bce9610 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 27cecf4c12..4f5bce9610 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 260b431cec..7012894ad9 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 bf38fe3e28..1dbe6a053c 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 50da8804e0..9abe2ee2ea 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 1ea635f67a..5af186590b 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 32b9e9c643..ca64a16506 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 f032592704..15cb5fc494 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 51505321b4..bc3752d528 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 e29a569b44..1a5bb8fc3e 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 c62c804f1a..ac8f97d254 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 5e6f981511..85a6584d7c 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 018a44eb98..647dadedb1 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 02700ec42d..06f59ae6aa 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 c30829a09b..2d6c84d9d1 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 c154a8c66d..6941f6d994 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 70bd470305..7f47b80cf0 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 223d5fead2..85681e28d5 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 126ccd8a75..0000000000 --- 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 6237413bf5..0000000000 --- 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 500c8bff68..0000000000 --- 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 54030e2487..0000000000 --- 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 ded9c5eb87..0000000000 --- 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 ded9c5eb87..0000000000 --- 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 855fbe258f..0000000000 --- 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 e562695476..0000000000 --- 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 ded9c5eb87..0000000000 --- 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 8542107473..d7e512a928 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 328bf28730..1f666f9286 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 2bbdb88d89..c683b43cc8 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 3c717ab096..0000000000 --- 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 43fa4ae487..47acf12d85 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 9aee657cdb..f773cfdb9c 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 ab48d6d96d..be903271b0 100644 --- a/plugins/postcss-custom-properties/README.md +++ b/plugins/postcss-custom-properties/README.md @@ -1,9 +1,6 @@ -# PostCSS Custom Properties [PostCSS][postcss] +# PostCSS Custom Properties [PostCSS Logo][postcss] -[![NPM Version][npm-img]][npm-url] -[![CSS Standard Status][css-img]][css-url] -[![Build Status][cli-img]][cli-url] -[Discord][discord] +[npm version][npm-url] [CSS Standard Status][css-url] [Build Status][cli-url] [Discord][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 0000000000..b41f93ac1a --- /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. + +[!['Can I use' table](https://caniuse.bitsofco.de/image/css-variables.png)](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 b01398067b..20d39c9fd5 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 0000000000..a87bda3b07 --- /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 22b2f1187c..8085bdfdf2 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 1296201a07..0000000000 --- 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> { - const object = await readJSON(from); - - return getCustomPropertiesFromObject(object); -} - -/* Get Custom Properties from JS file -/* ========================================================================== */ - -async function getCustomPropertiesFromJSFile(from): Promise> { - let object; - - try { - object = await import(from); - } catch (_) { - // windows support - object = await import(pathToFileURL(from).href); - } - - if ('default' in object) { - return getCustomPropertiesFromObject(object.default); - } - - return getCustomPropertiesFromObject(object); -} - -/* Get Custom Properties from Imports -/* ========================================================================== */ - -export default async function getCustomPropertiesFromImports(sources: Array): Promise> { - const sourceData = (await Promise.all(sources.map(async (source) => { - if (source instanceof Promise) { - source = await source; - } else if (source instanceof Function) { - source = await source(); - } - - if (typeof source === 'string') { - const fromPath = path.resolve(source); - const type = path.extname(fromPath).slice(1).toLowerCase(); - - return { - type: type, - from: fromPath, - }; - } - - if ('customProperties' in source && Object(source.customProperties) === source.customProperties) { - return source; - } - - if ('custom-properties' in source && Object(source['custom-properties']) === source['custom-properties']) { - return source; - } - - if ('from' in source) { - const fromPath = path.resolve(source.from); - let type = source.type; - if (!type) { - type = path.extname(fromPath).slice(1).toLowerCase(); - } - return { - type: type, - from: fromPath, - }; - } - - if (Object.keys(source).length === 0) { - // Empty `importFrom` object. - return null; - } - - return null; - }))).filter((x) => { - return !!x; - }); - - const data: Array> = await Promise.all(sourceData.map(async (partialData) => { - if (('type' in partialData) && ('from' in partialData)) { - if (partialData.type === 'css' || partialData.type === 'pcss') { - return await getCustomPropertiesFromCSSFile(partialData.from); - } - - if (partialData.type === 'js' || partialData.type === 'cjs') { - return await getCustomPropertiesFromJSFile(partialData.from); - } - - if (partialData.type === 'mjs') { - // Only works when running as a module. - return await getCustomPropertiesFromJSFile(partialData.from); - } - - if (partialData.type === 'json') { - return await getCustomPropertiesFromJSONFile(partialData.from); - } - - throw new Error('Invalid source type: ' + partialData.type); - } - - return getCustomPropertiesFromObject(partialData); - })); - - const out: Map = new Map(); - data.forEach((partialData) => { - for (const [name, value] of partialData.entries()) { - out.set(name, value); - } - }); - - return out; -} - -/* Helper utilities -/* ========================================================================== */ - -const readJSON = async from => JSON.parse((await fsp.readFile(from)).toString()); diff --git a/plugins/postcss-custom-properties/src/lib/get-custom-properties-from-root.ts b/plugins/postcss-custom-properties/src/lib/get-custom-properties-from-root.ts deleted file mode 100644 index e177478fa1..0000000000 --- a/plugins/postcss-custom-properties/src/lib/get-custom-properties-from-root.ts +++ /dev/null @@ -1,63 +0,0 @@ -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, opts): 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.nodes.slice().forEach(rule => { - const customPropertiesObject = isHtmlRule(rule) - ? customPropertiesFromHtmlElement - : isRootRule(rule) - ? customPropertiesFromRootPseudo - : null; - - // for each custom property - if (customPropertiesObject) { - rule.nodes.slice().forEach(decl => { - if (decl.variable && !isBlockIgnored(decl)) { - const { prop } = decl; - - // write the parsed value to the custom property - customPropertiesObject.set(prop, valuesParser(decl.value)); - - // conditionally remove the custom property declaration - if (!opts.preserve) { - decl.remove(); - } - } - }); - - // conditionally remove the empty html or :root rule - if (!opts.preserve && isEmptyParent(rule) && !isBlockIgnored(rule)) { - rule.remove(); - } - } - }); - - 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; - -// whether the node is an html or :root rule -const isHtmlRule = node => node.type === 'rule' && node.selector.split(',').some(item => htmlSelectorRegExp.test(item)) && Object(node.nodes).length; -const isRootRule = node => node.type === 'rule' && node.selector.split(',').some(item => rootSelectorRegExp.test(item)) && Object(node.nodes).length; - -// whether the node is a parent without children -const isEmptyParent = node => Object(node.nodes).length === 0; diff --git a/plugins/postcss-custom-properties/src/lib/options.ts b/plugins/postcss-custom-properties/src/lib/options.ts deleted file mode 100644 index 6db403f7ff..0000000000 --- a/plugins/postcss-custom-properties/src/lib/options.ts +++ /dev/null @@ -1,14 +0,0 @@ - -export type ImportFromSource = { from: string, type?: string } | string; -export type ImportCustomProperties = { customProperties?: Record, 'custom-properties'?: Record }; -export type ImportAsFunction = () => ImportFromSource | ImportCustomProperties -export type ImportAsPromise = Promise -export type ImportAsFunctionPromise = () => Promise -export type ImportOptions = ImportFromSource | ImportCustomProperties | ImportAsFunction | ImportAsPromise | ImportAsFunctionPromise; - -export type ExportJSONFunction = (customProperties?: Record) => Record; -export type ExportToSource = { to: string, type?: string, toJSON: ExportJSONFunction } | string; -export type ExportCustomProperties = { customProperties?: Record, 'custom-properties'?: Record, toJSON: ExportJSONFunction }; -export type ExportAsFunction = (ExportCustomProperties) => void -export type ExportAsFunctionPromise = (ExportCustomProperties) => Promise -export type ExportOptions = ExportToSource | ExportCustomProperties | ExportAsFunction | ExportAsFunctionPromise; diff --git a/plugins/postcss-custom-properties/src/lib/write-custom-properties-to-exports.ts b/plugins/postcss-custom-properties/src/lib/write-custom-properties-to-exports.ts deleted file mode 100644 index bbd0b1cb65..0000000000 --- a/plugins/postcss-custom-properties/src/lib/write-custom-properties-to-exports.ts +++ /dev/null @@ -1,159 +0,0 @@ -import type valuesParser from 'postcss-value-parser'; - -import { promises as fsp } from 'fs'; -import path from 'path'; -import type { ExportOptions } from './options'; - -/* Write Custom Properties to CSS File -/* ========================================================================== */ - -async function writeCustomPropertiesToCssFile(to, 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`; - - await fsp.writeFile(to, css); -} - -/* Write Custom Properties to SCSS File -/* ========================================================================== */ - -async function writeCustomPropertiesToScssFile(to, customProperties) { - const scssContent = Object.keys(customProperties).reduce((scssLines, name) => { - const scssName = name.replace('--', '$'); - scssLines.push(`${scssName}: ${customProperties[name]};`); - - return scssLines; - }, []).join('\n'); - const scss = `${scssContent}\n`; - - await fsp.writeFile(to, scss); -} - -/* Write Custom Properties to JSON file -/* ========================================================================== */ - -async function writeCustomPropertiesToJsonFile(to, customProperties) { - const jsonContent = JSON.stringify({ - 'custom-properties': customProperties, - }, null, ' '); - const json = `${jsonContent}\n`; - - await fsp.writeFile(to, json); -} - -/* Write Custom Properties to Common JS file -/* ========================================================================== */ - -async function writeCustomPropertiesToCjsFile(to, customProperties) { - const jsContents = Object.keys(customProperties).reduce((jsLines, name) => { - jsLines.push(`\t\t'${escapeForJS(name)}': '${escapeForJS(customProperties[name])}'`); - - return jsLines; - }, []).join(',\n'); - const js = `module.exports = {\n\tcustomProperties: {\n${jsContents}\n\t}\n};\n`; - - await fsp.writeFile(to, js); -} - -/* Write Custom Properties to Module JS file -/* ========================================================================== */ - -async function writeCustomPropertiesToMjsFile(to, customProperties) { - const mjsContents = Object.keys(customProperties).reduce((mjsLines, name) => { - mjsLines.push(`\t'${escapeForJS(name)}': '${escapeForJS(customProperties[name])}'`); - - return mjsLines; - }, []).join(',\n'); - const mjs = `export const customProperties = {\n${mjsContents}\n};\n`; - - await fsp.writeFile(to, mjs); -} - -/* Write Custom Properties to Exports -/* ========================================================================== */ - -export default function writeCustomPropertiesToExports(customProperties, destinations: Array) { - return Promise.all(destinations.map(async destination => { - if (destination instanceof Function) { - await destination(defaultCustomPropertiesToJSONObject(customProperties)); - return; - } - - if (typeof destination === 'string') { - const toPath = path.resolve(destination); - const type = path.extname(toPath).slice(1).toLowerCase(); - - await writePropertiesToFile(toPath, type, defaultCustomPropertiesToJSONObject(customProperties)); - return; - } - - // transformer for Custom Properties into a JSON-compatible object - let customPropertiesAsJSONObject = {}; - if ('toJSON' in destination) { - customPropertiesAsJSONObject = destination.toJSON(defaultCustomPropertiesToJSONObject(customProperties)); - } else { - customPropertiesAsJSONObject = defaultCustomPropertiesToJSONObject(customProperties); - } - - if ('to' in destination) { - const toPath = path.resolve(destination.to); - let type = destination.type; - if (!type) { - type = path.extname(toPath).slice(1).toLowerCase(); - } - - await writePropertiesToFile(toPath, type, customPropertiesAsJSONObject); - return; - } - - if ('customProperties' in destination) { - // write directly to an object as customProperties - destination.customProperties = customPropertiesAsJSONObject; - } else if ('custom-properties' in destination) { - // write directly to an object as custom-properties - destination['custom-properties'] = customPropertiesAsJSONObject; - } - })); -} - -async function writePropertiesToFile(to: string, type: string, customProperties: Record) { - if (type === 'css') { - await writeCustomPropertiesToCssFile(to, customProperties); - } - - if (type === 'scss') { - await writeCustomPropertiesToScssFile(to, customProperties); - } - - if (type === 'js') { - await writeCustomPropertiesToCjsFile(to, customProperties); - } - - if (type === 'json') { - await writeCustomPropertiesToJsonFile(to, customProperties); - } - - if (type === 'mjs') { - await writeCustomPropertiesToMjsFile(to, customProperties); - } -} - -/* Helper utilities -/* ========================================================================== */ - -function defaultCustomPropertiesToJSONObject(customProperties: Map): Record { - const out = {}; - for (const [name, value] of customProperties.entries()) { - out[name] = value.toString(); - } - - return out; -} - -const escapeForJS = (string) => { - return string.replace(/\\([\s\S])|(')/g, '\\$1$2').replace(/\n/g, '\\n').replace(/\r/g, '\\r'); -}; diff --git a/plugins/postcss-custom-properties/src/lib/transform-properties.ts b/plugins/postcss-custom-properties/src/transform-properties.ts similarity index 91% rename from plugins/postcss-custom-properties/src/lib/transform-properties.ts rename to plugins/postcss-custom-properties/src/transform-properties.ts index fe09c4e360..03a0e8db70 100644 --- a/plugins/postcss-custom-properties/src/lib/transform-properties.ts +++ b/plugins/postcss-custom-properties/src/transform-properties.ts @@ -12,7 +12,7 @@ export default (decl, customProperties, opts) => { // protect against circular references const valueSet = new Set(); - while (value.includes('--') && value.includes('var(') && !valueSet.has(value)) { + while (value.includes('--') && value.toLowerCase().includes('var(') && !valueSet.has(value)) { valueSet.add(value); const parsedValueAST = valuesParser(value); value = transformValueAST(parsedValueAST, customProperties); @@ -42,7 +42,7 @@ export default (decl, customProperties, opts) => { // match custom properties // whether the declaration should be potentially transformed -const isTransformableDecl = decl => !decl.variable && decl.value.includes('--') && decl.value.includes('var('); +const isTransformableDecl = decl => !decl.variable && decl.value.includes('--') && decl.value.toLowerCase().includes('var('); // whether the declaration has a trailing comment const hasTrailingComment = decl => 'value' in Object(Object(decl.raws).value) && 'raw' in decl.raws.value && trailingCommentRegExp.test(decl.raws.value.raw); diff --git a/plugins/postcss-custom-properties/src/lib/transform-value-ast.ts b/plugins/postcss-custom-properties/src/transform-value-ast.ts similarity index 100% rename from plugins/postcss-custom-properties/src/lib/transform-value-ast.ts rename to plugins/postcss-custom-properties/src/transform-value-ast.ts diff --git a/plugins/postcss-custom-properties/test/_import.mjs b/plugins/postcss-custom-properties/test/_import.mjs index 98f8767664..1992cbec17 100644 --- a/plugins/postcss-custom-properties/test/_import.mjs +++ b/plugins/postcss-custom-properties/test/_import.mjs @@ -1,17 +1,7 @@ import assert from 'assert'; import plugin from 'postcss-custom-properties'; -import postcss from 'postcss'; -import fs from 'fs'; plugin(); assert.ok(plugin.postcss, 'should have "postcss flag"'); assert.equal(typeof plugin, 'function', 'should return a function'); - -postcss([plugin({ importFrom: 'test/import-properties.cjs' })]). - process(fs.readFileSync('test/basic.css', 'utf8'), {from: 'test/basic.css'}). - then(); - -postcss([plugin({ importFrom: 'test/import-properties.mjs' })]). - process(fs.readFileSync('test/basic.css', 'utf8'), {from: 'test/basic.css'}). - then(); diff --git a/plugins/postcss-custom-properties/test/_require.cjs b/plugins/postcss-custom-properties/test/_require.cjs index a9a3a08975..270bdc3e89 100644 --- a/plugins/postcss-custom-properties/test/_require.cjs +++ b/plugins/postcss-custom-properties/test/_require.cjs @@ -1,13 +1,7 @@ const assert = require('assert'); const plugin = require('postcss-custom-properties'); -const postcss = require('postcss'); -const fs = require('fs'); plugin(); assert.ok(plugin.postcss, 'should have "postcss flag"'); assert.equal(typeof plugin, 'function', 'should return a function'); - -postcss([plugin({ importFrom: 'test/import-properties.cjs' })]). - process(fs.readFileSync('test/basic.css', 'utf8'), {from: 'test/basic.css'}). - then(); diff --git a/plugins/postcss-custom-properties/test/basic.css b/plugins/postcss-custom-properties/test/basic.css index 92d7a27be4..5f1823dc29 100644 --- a/plugins/postcss-custom-properties/test/basic.css +++ b/plugins/postcss-custom-properties/test/basic.css @@ -7,6 +7,7 @@ html { --color-h: 0; --color-s: 100%; --color-l: 50%; + --color-components: var(--color-h), var(--color-s), var(--color-l); --color-hsl: hsl(var(--color-h), var(--color-s), var(--color-l)); --ref-color: var(--color); --circular: var(--circular-2); @@ -74,6 +75,11 @@ html { color: var(--color-hsl); } +.test--color_components { + color: hsl(var(--color-components)); + background-color: hsl(var(--does-not-exist, 0 , 1%, 2%)); +} + .test--circular_var { color: var(--circular); } @@ -138,3 +144,43 @@ html { .test { font-family: var(--font, "Helvetica Neue", Arial, sans-serif); } + +.fallbacks-with-main-values-that-dont-exist { + color: var(--does-not-exist, var(--color)) +} + +:root { + --ignored-values-1: initial; +} + +.ignored-values { + color: var(--ignored-values-1); + color: var(--ignored-values-1, green); +} + +:root { + --space-1:; + --space-2: ; + --space-3: ; +} + +.space-values { + a: list("a",var(--space-1),"c"); + b: list("a",var(--space-2),"c"); + c: list("a",var(--space-3),"c"); +} + +@media (prefers-color-scheme: dark) { + :root { + --color: rgb(255, 167, 167); + } +} + +.conditionals { + color: var(--color); +} + +.local-variable { + --local: 1; + order: var(--local); +} diff --git a/plugins/postcss-custom-properties/test/basic.expect.css b/plugins/postcss-custom-properties/test/basic.expect.css index adbdb21f59..3b8fbb452e 100644 --- a/plugins/postcss-custom-properties/test/basic.expect.css +++ b/plugins/postcss-custom-properties/test/basic.expect.css @@ -7,6 +7,7 @@ html { --color-h: 0; --color-s: 100%; --color-l: 50%; + --color-components: var(--color-h), var(--color-s), var(--color-l); --color-hsl: hsl(var(--color-h), var(--color-s), var(--color-l)); --ref-color: var(--color); --circular: var(--circular-2); @@ -84,6 +85,13 @@ html { color: var(--color-hsl); } +.test--color_components { + color: hsl(0, 100%, 50%); + color: hsl(var(--color-components)); + background-color: hsl(0 , 1%, 2%); + background-color: hsl(var(--does-not-exist, 0 , 1%, 2%)); +} + .test--circular_var { color: var(--circular); } @@ -159,3 +167,50 @@ html { font-family: "Helvetica Neue", Arial, sans-serif; font-family: var(--font, "Helvetica Neue", Arial, sans-serif); } + +.fallbacks-with-main-values-that-dont-exist { + color: rgb(255, 0, 0); + color: var(--does-not-exist, var(--color)) +} + +:root { + --ignored-values-1: initial; +} + +.ignored-values { + color: var(--ignored-values-1); + color: green; + color: var(--ignored-values-1, green); +} + +:root { + --space-1:; + --space-2: ; + --space-3: ; +} + +.space-values { + a: list("a",,"c"); + a: list("a",var(--space-1),"c"); + b: list("a", ,"c"); + b: list("a",var(--space-2),"c"); + c: list("a", ,"c"); + c: list("a",var(--space-3),"c"); +} + +@media (prefers-color-scheme: dark) { + :root { + --color: rgb(255, 167, 167); + } +} + +.conditionals { + color: rgb(255, 0, 0); + color: var(--color); +} + +.local-variable { + --local: 1; + order: 1; + order: var(--local); +} diff --git a/plugins/postcss-custom-properties/test/basic.preserve.expect.css b/plugins/postcss-custom-properties/test/basic.preserve.expect.css index 01b766559d..270d6e387d 100644 --- a/plugins/postcss-custom-properties/test/basic.preserve.expect.css +++ b/plugins/postcss-custom-properties/test/basic.preserve.expect.css @@ -1,7 +1,34 @@ +html { + --ref-color: skip; +} + :root { + --color: rgb(255, 0, 0); + --color-h: 0; + --color-s: 100%; + --color-l: 50%; + --color-components: var(--color-h), var(--color-s), var(--color-l); + --color-hsl: hsl(var(--color-h), var(--color-s), var(--color-l)); + --ref-color: var(--color); + --circular: var(--circular-2); + --circular-2: var(--circular); + --margin: 0 10px 20px 30px; + --shadow-color: rgb(255,0,0); + --shadow: 0 6px 14px 0 color(var(--shadow-color) a(.15)); + --font-family: "Open Sans", sans-serif; + --url-1: url("/my/path"); + --url-2: url('/my/path'); + --url-3: url(/my/path); + --url-4: url(data:image/png;bm90LWFuZC1pbWFnZQ==); + --✅-size: 2em; color: rgb(255, 0, 0); } +:root, +[data-theme=light] { + --theme-color: #053; +} + .ignore-line { /* postcss-custom-properties: ignore next */ color: var(--color); @@ -48,6 +75,11 @@ color: hsl(0, 100%, 50%); } +.test--color_components { + color: hsl(0, 100%, 50%); + background-color: hsl(0 , 1%, 2%); +} + .test--circular_var { color: var(--circular); } @@ -109,3 +141,43 @@ .test { font-family: "Helvetica Neue", Arial, sans-serif; } + +.fallbacks-with-main-values-that-dont-exist { + color: rgb(255, 0, 0) +} + +:root { + --ignored-values-1: initial; +} + +.ignored-values { + color: var(--ignored-values-1); + color: green; +} + +:root { + --space-1:; + --space-2: ; + --space-3: ; +} + +.space-values { + a: list("a",,"c"); + b: list("a", ,"c"); + c: list("a", ,"c"); +} + +@media (prefers-color-scheme: dark) { + :root { + --color: rgb(255, 167, 167); + } +} + +.conditionals { + color: rgb(255, 0, 0); +} + +.local-variable { + --local: 1; + order: var(--local); +} diff --git a/plugins/postcss-custom-properties/test/examples/example.css b/plugins/postcss-custom-properties/test/examples/example.css new file mode 100644 index 0000000000..837daa8c6d --- /dev/null +++ b/plugins/postcss-custom-properties/test/examples/example.css @@ -0,0 +1,19 @@ +: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); +} + +.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); +} diff --git a/plugins/postcss-custom-properties/test/examples/example.expect.css b/plugins/postcss-custom-properties/test/examples/example.expect.css new file mode 100644 index 0000000000..1a8bce1bc2 --- /dev/null +++ b/plugins/postcss-custom-properties/test/examples/example.expect.css @@ -0,0 +1,21 @@ +: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); +} + +.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); +} + +.element--dark { + --border-color: var(--color-blue-dark); +} diff --git a/plugins/postcss-custom-properties/test/examples/example.preserve-false.expect.css b/plugins/postcss-custom-properties/test/examples/example.preserve-false.expect.css new file mode 100644 index 0000000000..a5620ab459 --- /dev/null +++ b/plugins/postcss-custom-properties/test/examples/example.preserve-false.expect.css @@ -0,0 +1,19 @@ +: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); +} + +.element { + /* custom props */ + --border-color: var(--color-blue-light); + + /* props */ + border: 1px solid var(--border-color); + color: rgb(255, 192, 211); +} + +.element--dark { + --border-color: var(--color-blue-dark); +} diff --git a/plugins/postcss-custom-properties/test/export-properties.css b/plugins/postcss-custom-properties/test/export-properties.css deleted file mode 100644 index 6c5bc15ff7..0000000000 --- a/plugins/postcss-custom-properties/test/export-properties.css +++ /dev/null @@ -1,20 +0,0 @@ -:root { - --ref-color: var(--color); - --color: rgb(255, 0, 0); - --color-h: 0; - --color-s: 100%; - --color-l: 50%; - --color-hsl: hsl(var(--color-h), var(--color-s), var(--color-l)); - --circular: var(--circular-2); - --circular-2: var(--circular); - --margin: 0 10px 20px 30px; - --shadow-color: rgb(255,0,0); - --shadow: 0 6px 14px 0 color(var(--shadow-color) a(.15)); - --font-family: "Open Sans", sans-serif; - --url-1: url("/my/path"); - --url-2: url('/my/path'); - --url-3: url(/my/path); - --url-4: url(data:image/png;bm90LWFuZC1pbWFnZQ==); - --✅-size: 2em; - --theme-color: #053; -} diff --git a/plugins/postcss-custom-properties/test/export-properties.js b/plugins/postcss-custom-properties/test/export-properties.js deleted file mode 100644 index 4a881c6cd8..0000000000 --- a/plugins/postcss-custom-properties/test/export-properties.js +++ /dev/null @@ -1,22 +0,0 @@ -module.exports = { - customProperties: { - '--ref-color': 'var(--color)', - '--color': 'rgb(255, 0, 0)', - '--color-h': '0', - '--color-s': '100%', - '--color-l': '50%', - '--color-hsl': 'hsl(var(--color-h), var(--color-s), var(--color-l))', - '--circular': 'var(--circular-2)', - '--circular-2': 'var(--circular)', - '--margin': '0 10px 20px 30px', - '--shadow-color': 'rgb(255,0,0)', - '--shadow': '0 6px 14px 0 color(var(--shadow-color) a(.15))', - '--font-family': '"Open Sans", sans-serif', - '--url-1': 'url("/my/path")', - '--url-2': 'url(\'/my/path\')', - '--url-3': 'url(/my/path)', - '--url-4': 'url(data:image/png;bm90LWFuZC1pbWFnZQ==)', - '--✅-size': '2em', - '--theme-color': '#053' - } -}; diff --git a/plugins/postcss-custom-properties/test/export-properties.json b/plugins/postcss-custom-properties/test/export-properties.json deleted file mode 100644 index 723f042baf..0000000000 --- a/plugins/postcss-custom-properties/test/export-properties.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "custom-properties": { - "--ref-color": "var(--color)", - "--color": "rgb(255, 0, 0)", - "--color-h": "0", - "--color-s": "100%", - "--color-l": "50%", - "--color-hsl": "hsl(var(--color-h), var(--color-s), var(--color-l))", - "--circular": "var(--circular-2)", - "--circular-2": "var(--circular)", - "--margin": "0 10px 20px 30px", - "--shadow-color": "rgb(255,0,0)", - "--shadow": "0 6px 14px 0 color(var(--shadow-color) a(.15))", - "--font-family": "\"Open Sans\", sans-serif", - "--url-1": "url(\"/my/path\")", - "--url-2": "url('/my/path')", - "--url-3": "url(/my/path)", - "--url-4": "url(data:image/png;bm90LWFuZC1pbWFnZQ==)", - "--✅-size": "2em", - "--theme-color": "#053" - } -} diff --git a/plugins/postcss-custom-properties/test/export-properties.mjs b/plugins/postcss-custom-properties/test/export-properties.mjs deleted file mode 100644 index 30e030b941..0000000000 --- a/plugins/postcss-custom-properties/test/export-properties.mjs +++ /dev/null @@ -1,20 +0,0 @@ -export const customProperties = { - '--ref-color': 'var(--color)', - '--color': 'rgb(255, 0, 0)', - '--color-h': '0', - '--color-s': '100%', - '--color-l': '50%', - '--color-hsl': 'hsl(var(--color-h), var(--color-s), var(--color-l))', - '--circular': 'var(--circular-2)', - '--circular-2': 'var(--circular)', - '--margin': '0 10px 20px 30px', - '--shadow-color': 'rgb(255,0,0)', - '--shadow': '0 6px 14px 0 color(var(--shadow-color) a(.15))', - '--font-family': '"Open Sans", sans-serif', - '--url-1': 'url("/my/path")', - '--url-2': 'url(\'/my/path\')', - '--url-3': 'url(/my/path)', - '--url-4': 'url(data:image/png;bm90LWFuZC1pbWFnZQ==)', - '--✅-size': '2em', - '--theme-color': '#053' -}; diff --git a/plugins/postcss-custom-properties/test/export-properties.scss b/plugins/postcss-custom-properties/test/export-properties.scss deleted file mode 100644 index a920224bb1..0000000000 --- a/plugins/postcss-custom-properties/test/export-properties.scss +++ /dev/null @@ -1,18 +0,0 @@ -$ref-color: var(--color); -$color: rgb(255, 0, 0); -$color-h: 0; -$color-s: 100%; -$color-l: 50%; -$color-hsl: hsl(var(--color-h), var(--color-s), var(--color-l)); -$circular: var(--circular-2); -$circular-2: var(--circular); -$margin: 0 10px 20px 30px; -$shadow-color: rgb(255,0,0); -$shadow: 0 6px 14px 0 color(var(--shadow-color) a(.15)); -$font-family: "Open Sans", sans-serif; -$url-1: url("/my/path"); -$url-2: url('/my/path'); -$url-3: url(/my/path); -$url-4: url(data:image/png;bm90LWFuZC1pbWFnZQ==); -$✅-size: 2em; -$theme-color: #053; diff --git a/plugins/postcss-custom-properties/test/import-properties-2.cjs b/plugins/postcss-custom-properties/test/import-properties-2.cjs deleted file mode 100644 index a9ac867613..0000000000 --- a/plugins/postcss-custom-properties/test/import-properties-2.cjs +++ /dev/null @@ -1,6 +0,0 @@ -module.exports = { - customProperties: { - '--color': 'rgb(255, 0, 0)', - '--color-2': 'yellow', - }, -}; diff --git a/plugins/postcss-custom-properties/test/import-properties-2.css b/plugins/postcss-custom-properties/test/import-properties-2.css deleted file mode 100644 index 3f814966ad..0000000000 --- a/plugins/postcss-custom-properties/test/import-properties-2.css +++ /dev/null @@ -1,4 +0,0 @@ -:root { - --color: rgb(255, 0, 0); - --color-2: yellow; -} diff --git a/plugins/postcss-custom-properties/test/import-properties-2.js b/plugins/postcss-custom-properties/test/import-properties-2.js deleted file mode 100644 index a9ac867613..0000000000 --- a/plugins/postcss-custom-properties/test/import-properties-2.js +++ /dev/null @@ -1,6 +0,0 @@ -module.exports = { - customProperties: { - '--color': 'rgb(255, 0, 0)', - '--color-2': 'yellow', - }, -}; diff --git a/plugins/postcss-custom-properties/test/import-properties-2.mjs b/plugins/postcss-custom-properties/test/import-properties-2.mjs deleted file mode 100644 index 22617d2ef8..0000000000 --- a/plugins/postcss-custom-properties/test/import-properties-2.mjs +++ /dev/null @@ -1,6 +0,0 @@ -export default { - customProperties: { - '--color': 'rgb(255, 0, 0)', - '--color-2': 'yellow', - }, -}; diff --git a/plugins/postcss-custom-properties/test/import-properties.cjs b/plugins/postcss-custom-properties/test/import-properties.cjs deleted file mode 100644 index 4b2551bb6b..0000000000 --- a/plugins/postcss-custom-properties/test/import-properties.cjs +++ /dev/null @@ -1,6 +0,0 @@ -module.exports = { - customProperties: { - '--ref-color': 'var(--color)', - '--z-index': 10, - }, -}; diff --git a/plugins/postcss-custom-properties/test/import-properties.css b/plugins/postcss-custom-properties/test/import-properties.css deleted file mode 100644 index a01ea3e89b..0000000000 --- a/plugins/postcss-custom-properties/test/import-properties.css +++ /dev/null @@ -1,4 +0,0 @@ -:root { - --ref-color: var(--color); - --z-index: 10; -} diff --git a/plugins/postcss-custom-properties/test/import-properties.js b/plugins/postcss-custom-properties/test/import-properties.js deleted file mode 100644 index 4b2551bb6b..0000000000 --- a/plugins/postcss-custom-properties/test/import-properties.js +++ /dev/null @@ -1,6 +0,0 @@ -module.exports = { - customProperties: { - '--ref-color': 'var(--color)', - '--z-index': 10, - }, -}; diff --git a/plugins/postcss-custom-properties/test/import-properties.json b/plugins/postcss-custom-properties/test/import-properties.json deleted file mode 100644 index d4125fc5d5..0000000000 --- a/plugins/postcss-custom-properties/test/import-properties.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "custom-properties": { - "--color": "rgb(255, 0, 0)", - "--color-2": "yellow", - "--ref-color": "var(--color)", - "--z-index": 10 - } -} diff --git a/plugins/postcss-custom-properties/test/import-properties.mjs b/plugins/postcss-custom-properties/test/import-properties.mjs deleted file mode 100644 index 78c3b75a2e..0000000000 --- a/plugins/postcss-custom-properties/test/import-properties.mjs +++ /dev/null @@ -1,6 +0,0 @@ -export default { - customProperties: { - '--ref-color': 'var(--color)', - '--z-index': 10, - }, -}; diff --git a/plugins/postcss-custom-properties/test/import-properties.pcss b/plugins/postcss-custom-properties/test/import-properties.pcss deleted file mode 100644 index a01ea3e89b..0000000000 --- a/plugins/postcss-custom-properties/test/import-properties.pcss +++ /dev/null @@ -1,4 +0,0 @@ -:root { - --ref-color: var(--color); - --z-index: 10; -}