From b82f96beaad99e223a7b07ae51e71cc1ffb0a84b Mon Sep 17 00:00:00 2001 From: romainmenke Date: Sat, 3 Sep 2022 22:13:38 +0200 Subject: [PATCH 1/9] postcss-custom-properties --- package-lock.json | 2 - plugin-packs/postcss-preset-env/.tape.mjs | 125 +----- plugin-packs/postcss-preset-env/FEATURES.md | 1 - plugin-packs/postcss-preset-env/package.json | 1 - .../scripts/plugins-data.json | 5 - plugin-packs/postcss-preset-env/src/index.js | 5 - .../src/lib/list-features.mjs | 5 - .../src/lib/shared-options.mjs | 15 +- .../src/plugins/plugins-by-id.mjs | 2 - .../src/plugins/plugins-data.mjs | 5 - .../test/basic.autoprefixer.expect.css | 2 +- .../test/basic.autoprefixer.false.expect.css | 2 +- .../test/basic.ch38.expect.css | 2 +- .../test/basic.ch88-ff78-saf10.expect.css | 2 +- .../test/basic.ch88-ff78.expect.css | 2 +- .../basic.ch88-ff78.no-is-pseudo.expect.css | 2 +- .../postcss-preset-env/test/basic.css | 2 +- .../postcss-preset-env/test/basic.expect.css | 2 +- .../test/basic.ff49.expect.css | 2 +- .../test/basic.ff66.expect.css | 2 +- .../test/basic.ie10.expect.css | 2 +- .../test/basic.nesting.false.expect.css | 2 +- .../test/basic.nesting.true.expect.css | 2 +- .../test/basic.op_mini.expect.css | 2 +- .../test/basic.preserve.true.expect.css | 2 +- .../test/basic.safari15.expect.css | 2 +- .../test/basic.stage0-ff49.expect.css | 2 +- .../test/basic.stage0-ff66.expect.css | 2 +- .../test/basic.stage0.expect.css | 2 +- .../test/basic.vendors-1.expect.css | 2 +- .../test/basic.vendors-2.expect.css | 2 +- .../test/basic.vendors-3.expect.css | 2 +- .../test/generated-custom-exports.css | 9 - .../test/generated-custom-exports.js | 13 - .../test/generated-custom-exports.json | 13 - .../test/generated-custom-exports.mjs | 13 - .../postcss-preset-env/test/layers-basic.css | 10 +- .../test/layers-basic.expect.css | 134 +++--- .../layers-basic.preserve.true.expect.css | 152 ++++--- plugins/postcss-custom-properties/.tape.mjs | 382 +----------------- .../postcss-custom-properties/CHANGELOG.md | 18 + plugins/postcss-custom-properties/README.md | 213 ++++------ .../postcss-custom-properties/docs/README.md | 62 +++ .../postcss-custom-properties/package.json | 8 +- .../src/get-custom-properties-from-root.ts | 75 ++++ .../postcss-custom-properties/src/index.ts | 129 +++--- .../src/is-ignored.ts | 20 + .../src/transform-properties.ts | 49 +++ .../src/transform-value-ast.ts | 50 +++ .../test/_import.mjs | 10 - .../test/_require.cjs | 6 - .../postcss-custom-properties/test/basic.css | 46 +++ .../test/basic.expect.css | 55 +++ .../test/basic.preserve.expect.css | 72 ++++ .../test/examples/example.css | 19 + .../test/examples/example.expect.css | 21 + .../example.preserve-false.expect.css | 19 + 57 files changed, 817 insertions(+), 991 deletions(-) delete mode 100644 plugin-packs/postcss-preset-env/test/generated-custom-exports.css delete mode 100644 plugin-packs/postcss-preset-env/test/generated-custom-exports.js delete mode 100644 plugin-packs/postcss-preset-env/test/generated-custom-exports.json delete mode 100644 plugin-packs/postcss-preset-env/test/generated-custom-exports.mjs create mode 100644 plugins/postcss-custom-properties/docs/README.md create mode 100644 plugins/postcss-custom-properties/src/get-custom-properties-from-root.ts create mode 100644 plugins/postcss-custom-properties/src/is-ignored.ts create mode 100644 plugins/postcss-custom-properties/src/transform-properties.ts create mode 100644 plugins/postcss-custom-properties/src/transform-value-ast.ts create mode 100644 plugins/postcss-custom-properties/test/examples/example.css create mode 100644 plugins/postcss-custom-properties/test/examples/example.expect.css create mode 100644 plugins/postcss-custom-properties/test/examples/example.preserve-false.expect.css diff --git a/package-lock.json b/package-lock.json index abe2011bc..53556ed70 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6817,7 +6817,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", @@ -11587,7 +11586,6 @@ "postcss-custom-selectors": "^6.0.3", "postcss-dir-pseudo-class": "^6.0.5", "postcss-double-position-gradients": "^3.1.2", - "postcss-env-function": "^4.0.6", "postcss-focus-visible": "^7.0.0", "postcss-focus-within": "^6.0.0", "postcss-font-variant": "^5.0.0", diff --git a/plugin-packs/postcss-preset-env/.tape.mjs b/plugin-packs/postcss-preset-env/.tape.mjs index 2d4a75cd5..58cdc5575 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 { @@ -173,6 +172,7 @@ postcssTape(plugin)({ stage: 0, browsers: '> 0%' }, + warnings: 0, }, 'layers-basic:preserve:true': { message: 'supports layers usage with { preserve: true }', @@ -181,6 +181,7 @@ postcssTape(plugin)({ stage: 0, browsers: '> 0%' }, + warnings: 0, }, 'client-side-polyfills:stage-1': { message: 'stable client side polyfill behavior', @@ -383,128 +384,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/FEATURES.md b/plugin-packs/postcss-preset-env/FEATURES.md index 57cd3aa96..211128ec1 100644 --- a/plugin-packs/postcss-preset-env/FEATURES.md +++ b/plugin-packs/postcss-preset-env/FEATURES.md @@ -19,7 +19,6 @@ The `ID` listed is the key for PostCSS Preset Env configuration in your project. | `dir-pseudo-class` | `:dir` Directionality Pseudo-Class | [example](https://preset-env.cssdb.org/features/#dir-pseudo-class) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-dir-pseudo-class#readme) | | `display-two-values` | Two values syntax for `display` | [example](https://preset-env.cssdb.org/features/#display-two-values) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-normalize-display-values#readme) | | `double-position-gradients` | Double Position Gradients | [example](https://preset-env.cssdb.org/features/#double-position-gradients) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-double-position-gradients#readme) | -| `environment-variables` | Custom Environment Variables | [example](https://preset-env.cssdb.org/features/#environment-variables) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-env-function#readme) | | `focus-visible-pseudo-class` | `:focus-visible` Focus-Indicated Pseudo-Class | [example](https://preset-env.cssdb.org/features/#focus-visible-pseudo-class) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-focus-visible#readme) | | `focus-within-pseudo-class` | `:focus-within` Focus Container Pseudo-Class | [example](https://preset-env.cssdb.org/features/#focus-within-pseudo-class) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-focus-within#readme) | | `font-format-keywords` | Font `format()` Keywords | [example](https://preset-env.cssdb.org/features/#font-format-keywords) | [docs](https://github.com/valtlai/postcss-font-format-keywords#readme) | diff --git a/plugin-packs/postcss-preset-env/package.json b/plugin-packs/postcss-preset-env/package.json index 2881323a3..1f0a0229c 100644 --- a/plugin-packs/postcss-preset-env/package.json +++ b/plugin-packs/postcss-preset-env/package.json @@ -57,7 +57,6 @@ "postcss-custom-selectors": "^6.0.3", "postcss-dir-pseudo-class": "^6.0.5", "postcss-double-position-gradients": "^3.1.2", - "postcss-env-function": "^4.0.6", "postcss-focus-visible": "^7.0.0", "postcss-focus-within": "^6.0.0", "postcss-font-variant": "^5.0.0", diff --git a/plugin-packs/postcss-preset-env/scripts/plugins-data.json b/plugin-packs/postcss-preset-env/scripts/plugins-data.json index 6264492f1..63adce8cf 100644 --- a/plugin-packs/postcss-preset-env/scripts/plugins-data.json +++ b/plugin-packs/postcss-preset-env/scripts/plugins-data.json @@ -69,11 +69,6 @@ "id": "double-position-gradients", "importName": "postcssDoublePositionGradients" }, - { - "packageName": "postcss-env-function", - "id": "environment-variables", - "importName": "postcssEnvFunction" - }, { "packageName": "postcss-focus-visible", "id": "focus-visible-pseudo-class", diff --git a/plugin-packs/postcss-preset-env/src/index.js b/plugin-packs/postcss-preset-env/src/index.js index c68ecd325..80700b0b6 100644 --- a/plugin-packs/postcss-preset-env/src/index.js +++ b/plugin-packs/postcss-preset-env/src/index.js @@ -2,7 +2,6 @@ import autoprefixer from 'autoprefixer'; import cssdb from 'cssdb'; import logFeaturesList from './log/features-list.mjs'; import postcssProgressiveCustomProperties from '@csstools/postcss-progressive-custom-properties'; -import writeToExports from './side-effects/write-to-exports.mjs'; import { initializeSharedOptions } from './lib/shared-options.mjs'; import { listFeatures } from './lib/list-features.mjs'; import { newLogger } from './log/helper.mjs'; @@ -47,10 +46,6 @@ const plugin = (opts) => { // Always reset the logger, if when debug is false logger.resetLogger(); - - if (options.exportTo) { - writeToExports(sharedOptions.exportTo, opts.exportTo); - } }, }; }; diff --git a/plugin-packs/postcss-preset-env/src/lib/list-features.mjs b/plugin-packs/postcss-preset-env/src/lib/list-features.mjs index c5db8f724..37b2febb1 100644 --- a/plugin-packs/postcss-preset-env/src/lib/list-features.mjs +++ b/plugin-packs/postcss-preset-env/src/lib/list-features.mjs @@ -1,5 +1,4 @@ import browserslist from 'browserslist'; -import { pluginHasSideEffects } from '../side-effects/plugins.mjs'; import { featuresWithClientSide } from '../client-side-polyfills/plugins.mjs'; import { stageFromOptions } from './stage.mjs'; import { prepareFeaturesList } from './prepare-features-list.mjs'; @@ -109,10 +108,6 @@ export function listFeatures(cssdbList, options, sharedOptions, logger) { return features[feature.id]; } - if (pluginHasSideEffects(feature)) { - return true; - } - const unsupportedBrowsers = browserslist(feature.browsers, { ignoreUnknownVersions: true, }); diff --git a/plugin-packs/postcss-preset-env/src/lib/shared-options.mjs b/plugin-packs/postcss-preset-env/src/lib/shared-options.mjs index 44bcd9111..fa46a98a5 100644 --- a/plugin-packs/postcss-preset-env/src/lib/shared-options.mjs +++ b/plugin-packs/postcss-preset-env/src/lib/shared-options.mjs @@ -1,20 +1,7 @@ - export function initializeSharedOptions(opts) { - if ('importFrom' in opts || 'exportTo' in opts || 'preserve' in opts) { + if ('preserve' in opts) { const sharedOptions = {}; - if ('importFrom' in opts) { - sharedOptions.importFrom = opts.importFrom; - } - - if ('exportTo' in opts) { - sharedOptions.exportTo = { - customMedia: {}, - customProperties: {}, - customSelectors: {}, - }; - } - if ('preserve' in opts) { sharedOptions.preserve = opts.preserve; } diff --git a/plugin-packs/postcss-preset-env/src/plugins/plugins-by-id.mjs b/plugin-packs/postcss-preset-env/src/plugins/plugins-by-id.mjs index 008d92fc2..2151edccd 100644 --- a/plugin-packs/postcss-preset-env/src/plugins/plugins-by-id.mjs +++ b/plugin-packs/postcss-preset-env/src/plugins/plugins-by-id.mjs @@ -13,7 +13,6 @@ import postcssCustomSelectors from 'postcss-custom-selectors'; import postcssDirPseudoClass from 'postcss-dir-pseudo-class'; import postcssNormalizeDisplayValues from '@csstools/postcss-normalize-display-values'; import postcssDoublePositionGradients from 'postcss-double-position-gradients'; -import postcssEnvFunction from 'postcss-env-function'; import postcssFocusVisible from 'postcss-focus-visible'; import postcssFocusWithin from 'postcss-focus-within'; import postcssFontFormatKeywords from '@csstools/postcss-font-format-keywords'; @@ -62,7 +61,6 @@ export const pluginsById = new Map( ['dir-pseudo-class', postcssDirPseudoClass], ['display-two-values', postcssNormalizeDisplayValues], ['double-position-gradients', postcssDoublePositionGradients], - ['environment-variables', postcssEnvFunction], ['focus-visible-pseudo-class', postcssFocusVisible], ['focus-within-pseudo-class', postcssFocusWithin], ['font-format-keywords', postcssFontFormatKeywords], diff --git a/plugin-packs/postcss-preset-env/src/plugins/plugins-data.mjs b/plugin-packs/postcss-preset-env/src/plugins/plugins-data.mjs index fab801963..f0fc9a759 100644 --- a/plugin-packs/postcss-preset-env/src/plugins/plugins-data.mjs +++ b/plugin-packs/postcss-preset-env/src/plugins/plugins-data.mjs @@ -69,11 +69,6 @@ export default [ 'id': 'double-position-gradients', 'importName': 'postcssDoublePositionGradients', }, - { - 'packageName': 'postcss-env-function', - 'id': 'environment-variables', - 'importName': 'postcssEnvFunction', - }, { 'packageName': 'postcss-focus-visible', 'id': 'focus-visible-pseudo-class', diff --git a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css index 53d2ddca1..f8fd799d7 100644 --- a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css @@ -496,7 +496,7 @@ } .ic-unit { - --value-2ic: 'something'; + --value-2ic: initial; text-indent: 2em; content: var(--value-2ic); left: 2em; diff --git a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.false.expect.css b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.false.expect.css index 53d2ddca1..f8fd799d7 100644 --- a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.false.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.false.expect.css @@ -496,7 +496,7 @@ } .ic-unit { - --value-2ic: 'something'; + --value-2ic: initial; text-indent: 2em; content: var(--value-2ic); left: 2em; diff --git a/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css b/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css index b42d01e7b..f019302cd 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css @@ -408,7 +408,7 @@ } .ic-unit { - --value-2ic: 'something'; + --value-2ic: initial; text-indent: 2em; content: var(--value-2ic); left: 2em; diff --git a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78-saf10.expect.css b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78-saf10.expect.css index be8bb20a2..7b748514f 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78-saf10.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78-saf10.expect.css @@ -415,7 +415,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te } .ic-unit { - --value-2ic: 'something'; + --value-2ic: initial; text-indent: 2em; content: var(--value-2ic); left: var(--non-existing, 2em); diff --git a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.expect.css b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.expect.css index 27cecf4c1..4f5bce961 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.expect.css @@ -415,7 +415,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te } .ic-unit { - --value-2ic: 'something'; + --value-2ic: initial; text-indent: 2em; content: var(--value-2ic); left: var(--non-existing, 2em); diff --git a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.no-is-pseudo.expect.css b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.no-is-pseudo.expect.css index 27cecf4c1..4f5bce961 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.no-is-pseudo.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.no-is-pseudo.expect.css @@ -415,7 +415,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te } .ic-unit { - --value-2ic: 'something'; + --value-2ic: initial; text-indent: 2em; content: var(--value-2ic); left: var(--non-existing, 2em); diff --git a/plugin-packs/postcss-preset-env/test/basic.css b/plugin-packs/postcss-preset-env/test/basic.css index 260b431ce..7012894ad 100644 --- a/plugin-packs/postcss-preset-env/test/basic.css +++ b/plugin-packs/postcss-preset-env/test/basic.css @@ -324,7 +324,7 @@ } .ic-unit { - --value-2ic: 'something'; + --value-2ic: initial; text-indent: 2ic; content: var(--value-2ic); left: var(--non-existing, 2ic); diff --git a/plugin-packs/postcss-preset-env/test/basic.expect.css b/plugin-packs/postcss-preset-env/test/basic.expect.css index bf38fe3e2..1dbe6a053 100644 --- a/plugin-packs/postcss-preset-env/test/basic.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.expect.css @@ -519,7 +519,7 @@ } .ic-unit { - --value-2ic: 'something'; + --value-2ic: initial; text-indent: 2em; content: var(--value-2ic); left: 2em; diff --git a/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css b/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css index 50da8804e..9abe2ee2e 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css @@ -412,7 +412,7 @@ } .ic-unit { - --value-2ic: 'something'; + --value-2ic: initial; text-indent: 2em; content: var(--value-2ic); left: var(--non-existing, 2em); diff --git a/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css b/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css index 1ea635f67..5af186590 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css @@ -396,7 +396,7 @@ } .ic-unit { - --value-2ic: 'something'; + --value-2ic: initial; text-indent: 2em; content: var(--value-2ic); left: var(--non-existing, 2em); diff --git a/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css b/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css index 32b9e9c64..ca64a1650 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css @@ -534,7 +534,7 @@ } .ic-unit { - --value-2ic: 'something'; + --value-2ic: initial; text-indent: 2em; content: var(--value-2ic); left: 2em; diff --git a/plugin-packs/postcss-preset-env/test/basic.nesting.false.expect.css b/plugin-packs/postcss-preset-env/test/basic.nesting.false.expect.css index f03259270..15cb5fc49 100644 --- a/plugin-packs/postcss-preset-env/test/basic.nesting.false.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.nesting.false.expect.css @@ -517,7 +517,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te } .ic-unit { - --value-2ic: 'something'; + --value-2ic: initial; text-indent: 2em; content: var(--value-2ic); left: 2em; diff --git a/plugin-packs/postcss-preset-env/test/basic.nesting.true.expect.css b/plugin-packs/postcss-preset-env/test/basic.nesting.true.expect.css index 51505321b..bc3752d52 100644 --- a/plugin-packs/postcss-preset-env/test/basic.nesting.true.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.nesting.true.expect.css @@ -340,7 +340,7 @@ } .ic-unit { - --value-2ic: 'something'; + --value-2ic: initial; text-indent: 2ic; content: var(--value-2ic); left: var(--non-existing, 2ic); diff --git a/plugin-packs/postcss-preset-env/test/basic.op_mini.expect.css b/plugin-packs/postcss-preset-env/test/basic.op_mini.expect.css index e29a569b4..1a5bb8fc3 100644 --- a/plugin-packs/postcss-preset-env/test/basic.op_mini.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.op_mini.expect.css @@ -503,7 +503,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te } .ic-unit { - --value-2ic: 'something'; + --value-2ic: initial; text-indent: 2em; content: var(--value-2ic); left: 2em; diff --git a/plugin-packs/postcss-preset-env/test/basic.preserve.true.expect.css b/plugin-packs/postcss-preset-env/test/basic.preserve.true.expect.css index c62c804f1..ac8f97d25 100644 --- a/plugin-packs/postcss-preset-env/test/basic.preserve.true.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.preserve.true.expect.css @@ -874,7 +874,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te } .ic-unit { - --value-2ic: 'something'; + --value-2ic: initial; text-indent: 2em; text-indent: 2ic; content: var(--value-2ic); diff --git a/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css b/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css index 5e6f98151..85a6584d7 100644 --- a/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css @@ -357,7 +357,7 @@ } .ic-unit { - --value-2ic: 'something'; + --value-2ic: initial; text-indent: 2em; content: var(--value-2ic); left: var(--non-existing, 2em); diff --git a/plugin-packs/postcss-preset-env/test/basic.stage0-ff49.expect.css b/plugin-packs/postcss-preset-env/test/basic.stage0-ff49.expect.css index 018a44eb9..647dadedb 100644 --- a/plugin-packs/postcss-preset-env/test/basic.stage0-ff49.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.stage0-ff49.expect.css @@ -417,7 +417,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te } .ic-unit { - --value-2ic: 'something'; + --value-2ic: initial; text-indent: 2em; content: var(--value-2ic); left: var(--non-existing, 2em); diff --git a/plugin-packs/postcss-preset-env/test/basic.stage0-ff66.expect.css b/plugin-packs/postcss-preset-env/test/basic.stage0-ff66.expect.css index 02700ec42..06f59ae6a 100644 --- a/plugin-packs/postcss-preset-env/test/basic.stage0-ff66.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.stage0-ff66.expect.css @@ -401,7 +401,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te } .ic-unit { - --value-2ic: 'something'; + --value-2ic: initial; text-indent: 2em; content: var(--value-2ic); left: var(--non-existing, 2em); diff --git a/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css b/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css index c30829a09..2d6c84d9d 100644 --- a/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css @@ -524,7 +524,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te } .ic-unit { - --value-2ic: 'something'; + --value-2ic: initial; text-indent: 2em; content: var(--value-2ic); left: 2em; diff --git a/plugin-packs/postcss-preset-env/test/basic.vendors-1.expect.css b/plugin-packs/postcss-preset-env/test/basic.vendors-1.expect.css index c154a8c66..6941f6d99 100644 --- a/plugin-packs/postcss-preset-env/test/basic.vendors-1.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.vendors-1.expect.css @@ -523,7 +523,7 @@ } .ic-unit { - --value-2ic: 'something'; + --value-2ic: initial; text-indent: 2em; content: var(--value-2ic); left: 2em; diff --git a/plugin-packs/postcss-preset-env/test/basic.vendors-2.expect.css b/plugin-packs/postcss-preset-env/test/basic.vendors-2.expect.css index 70bd47030..7f47b80cf 100644 --- a/plugin-packs/postcss-preset-env/test/basic.vendors-2.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.vendors-2.expect.css @@ -486,7 +486,7 @@ } .ic-unit { - --value-2ic: 'something'; + --value-2ic: initial; text-indent: 2em; content: var(--value-2ic); left: 2em; diff --git a/plugin-packs/postcss-preset-env/test/basic.vendors-3.expect.css b/plugin-packs/postcss-preset-env/test/basic.vendors-3.expect.css index 223d5fead..85681e28d 100644 --- a/plugin-packs/postcss-preset-env/test/basic.vendors-3.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.vendors-3.expect.css @@ -459,7 +459,7 @@ } .ic-unit { - --value-2ic: 'something'; + --value-2ic: initial; text-indent: 2ic; content: var(--value-2ic); left: 2ic; diff --git a/plugin-packs/postcss-preset-env/test/generated-custom-exports.css b/plugin-packs/postcss-preset-env/test/generated-custom-exports.css deleted file mode 100644 index 126ccd8a7..000000000 --- a/plugin-packs/postcss-preset-env/test/generated-custom-exports.css +++ /dev/null @@ -1,9 +0,0 @@ -@custom-media --narrow-window (max-width: 30em); -@custom-media --dark-mode (prefers-color-scheme: dark); - -@custom-selector :--heading h1, h2, h3, h4, h5, h6; -@custom-selector :--view-m [data-view-size=m]; - -:root { - --order: 1; -} diff --git a/plugin-packs/postcss-preset-env/test/generated-custom-exports.js b/plugin-packs/postcss-preset-env/test/generated-custom-exports.js deleted file mode 100644 index 6237413bf..000000000 --- a/plugin-packs/postcss-preset-env/test/generated-custom-exports.js +++ /dev/null @@ -1,13 +0,0 @@ -module.exports = { - customMedia: { - '--narrow-window': '(max-width: 30em)', - '--dark-mode': '(prefers-color-scheme: dark)' - }, - customProperties: { - '--order': '1' - }, - customSelectors: { - ':--heading': 'h1, h2, h3, h4, h5, h6', - ':--view-m': '[data-view-size=m]' - } -}; diff --git a/plugin-packs/postcss-preset-env/test/generated-custom-exports.json b/plugin-packs/postcss-preset-env/test/generated-custom-exports.json deleted file mode 100644 index 500c8bff6..000000000 --- a/plugin-packs/postcss-preset-env/test/generated-custom-exports.json +++ /dev/null @@ -1,13 +0,0 @@ -{ - "custom-media": { - "--narrow-window": "(max-width: 30em)", - "--dark-mode": "(prefers-color-scheme: dark)" - }, - "custom-properties": { - "--order": "1" - }, - "custom-selectors": { - ":--heading": "h1, h2, h3, h4, h5, h6", - ":--view-m": "[data-view-size=m]" - } -} diff --git a/plugin-packs/postcss-preset-env/test/generated-custom-exports.mjs b/plugin-packs/postcss-preset-env/test/generated-custom-exports.mjs deleted file mode 100644 index 54030e248..000000000 --- a/plugin-packs/postcss-preset-env/test/generated-custom-exports.mjs +++ /dev/null @@ -1,13 +0,0 @@ -export const customMedia = { - '--narrow-window': '(max-width: 30em)', - '--dark-mode': '(prefers-color-scheme: dark)' -}; - -export const customProperties = { - '--order': '1' -}; - -export const customSelectors = { - ':--heading': 'h1, h2, h3, h4, h5, h6', - ':--view-m': '[data-view-size=m]' -}; diff --git a/plugin-packs/postcss-preset-env/test/layers-basic.css b/plugin-packs/postcss-preset-env/test/layers-basic.css index 854210747..d7e512a92 100644 --- a/plugin-packs/postcss-preset-env/test/layers-basic.css +++ b/plugin-packs/postcss-preset-env/test/layers-basic.css @@ -59,7 +59,13 @@ order: 9; } -@custom-media --narrow-window (max-width: 30em); +@custom-media --narrow-window (max-width: 500px); + +@layer extensions { + @custom-media --narrow-window (max-width: 30em); + + @custom-selector :--heading h1, h2, h3, h4, h5, h6; +} @media (--narrow-window) { .test-custom-media-queries { @@ -85,8 +91,6 @@ } } -@custom-selector :--heading h1, h2, h3, h4, h5, h6; - .test-custom-selectors:--heading { order:12; } diff --git a/plugin-packs/postcss-preset-env/test/layers-basic.expect.css b/plugin-packs/postcss-preset-env/test/layers-basic.expect.css index 328bf2873..1f666f928 100644 --- a/plugin-packs/postcss-preset-env/test/layers-basic.expect.css +++ b/plugin-packs/postcss-preset-env/test/layers-basic.expect.css @@ -1,6 +1,9 @@ + @custom-media --narrow-window (max-width: 30em); - .test-nesting-rules:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) p { + @custom-selector :--heading h1, h2, h3, h4, h5, h6; + + .test-nesting-rules:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) p { is-layer: C_D; -webkit-box-ordinal-group: 6; -webkit-order: 5.1; @@ -100,8 +103,8 @@ order: 6; } -.test-nesting-rules:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#), -#test-is-pseudo:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-nesting-rules:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#), +#test-is-pseudo:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-box-ordinal-group: 8; -webkit-order: 7; -moz-box-ordinal-group: 8; @@ -109,7 +112,7 @@ order: 7; } -.test-nesting-rules:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) + p, #test-is-pseudo:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) + p { +.test-nesting-rules:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) + p, #test-is-pseudo:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) + p { -webkit-box-ordinal-group: 9; -webkit-order: 8; -moz-box-ordinal-group: 9; @@ -117,8 +120,8 @@ order: 8; } -.test-nesting-rules:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#), -#test-is-pseudo:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-nesting-rules:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#), +#test-is-pseudo:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-box-ordinal-group: 10; @@ -131,8 +134,8 @@ order: 9; } -@media (max-width: 30em) { - .test-custom-media-queries:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +@media (max-width: 500px) { + .test-custom-media-queries:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-box-ordinal-group: 11; -webkit-order: 10; -moz-box-ordinal-group: 11; @@ -153,13 +156,13 @@ } @media (prefers-color-scheme: dark) { - body:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + body:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { background-color: black; color: white; } } -h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),h2.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),h3.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),h4.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),h5.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),h6.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-custom-selectors:--heading:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-box-ordinal-group:13; -webkit-order:12; -moz-box-ordinal-group:13; @@ -167,7 +170,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order:12; } -.test-case-insensitive-attributes[frame=hsides]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=Hsides]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSides]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSides]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIdes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIdes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIdes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIdes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsiDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsiDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSiDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSiDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsidEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsidEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSidEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSidEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIdEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIdEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIdEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIdEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsiDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsiDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSiDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSiDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsideS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsideS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSideS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSideS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIdeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIdeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIdeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIdeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsiDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsiDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSiDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSiDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsidES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsidES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSidES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSidES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIdES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIdES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIdES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIdES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsiDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsiDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSiDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSiDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-case-insensitive-attributes[frame=hsides]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=Hsides]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSides]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSides]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIdes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIdes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIdes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIdes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsiDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsiDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSiDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSiDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsidEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsidEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSidEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSidEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIdEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIdEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIdEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIdEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsiDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsiDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSiDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSiDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsideS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsideS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSideS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSideS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIdeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIdeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIdeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIdeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsiDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsiDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSiDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSiDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsidES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsidES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSidES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSidES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIdES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIdES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIdES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIdES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsiDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsiDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSiDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSiDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-box-ordinal-group: 14; -webkit-order: 13; -moz-box-ordinal-group: 14; @@ -175,7 +178,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order: 13; } -.test-rebeccapurple-color:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-rebeccapurple-color:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { color: #639; -webkit-box-ordinal-group: 15; -webkit-order: 14; @@ -184,7 +187,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order: 14; } -.test-hexadecimal-alpha-notation:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-hexadecimal-alpha-notation:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { background-color: rgba(243,243,243,0.95294); color: rgba(0,0,0,0.2); -webkit-box-ordinal-group: 16; @@ -194,7 +197,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order: 15; } -.test-color-functional-notation:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-color-functional-notation:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { color: rgba(178, 34, 34, 0.5); -webkit-box-ordinal-group: 17; -webkit-order: 16; @@ -203,7 +206,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order: 16; } -.test-lab-function:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-lab-function:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { background-color: rgb(179, 35, 35); background-color: color(display-p3 0.64331 0.19245 0.16771); color: rgba(179, 34, 35, 0.5); @@ -215,7 +218,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order: 17; } -.test-system-ui-font-family:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-system-ui-font-family:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; -webkit-box-ordinal-group: 19; -webkit-order: 18; @@ -224,7 +227,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order: 18; } -.test-font-variant-property:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-font-variant-property:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-font-feature-settings: "smcp"; -moz-font-feature-settings: "smcp"; font-feature-settings: "smcp"; @@ -236,7 +239,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order: 19; } -.test-all-property:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-all-property:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-animation: none 0s ease 0s 1 normal none running; -moz-animation: none 0s ease 0s 1 normal none running; -o-animation: none 0s ease 0s 1 normal none running; @@ -378,7 +381,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order: 20; } -.test-matches-pseudo-class:matches(:first-child, .special):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-matches-pseudo-class:matches(:first-child, .special):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-box-ordinal-group: 22; -webkit-order: 21; -moz-box-ordinal-group: 22; @@ -386,7 +389,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order: 21; } -.test-not-pseudo-class:not(:first-child):not(.special):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-not-pseudo-class:not(:first-child):not(.special):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-box-ordinal-group: 23; -webkit-order: 22; -moz-box-ordinal-group: 23; @@ -394,7 +397,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order: 22; } -.test-any-link-pseudo-class:link:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#), .test-any-link-pseudo-class:visited:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#), area[href].test-any-link-pseudo-class:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-any-link-pseudo-class:link:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#), .test-any-link-pseudo-class:visited:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#), area[href].test-any-link-pseudo-class:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-box-ordinal-group: 24; -webkit-order: 23; -moz-box-ordinal-group: 24; @@ -402,18 +405,18 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order: 23; } -.test-any-link-pseudo-class:-webkit-any-link:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-any-link-pseudo-class:-webkit-any-link:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-box-ordinal-group: 24; -webkit-order: 23; order: 23; } -.test-any-link-pseudo-class:-moz-any-link:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-any-link-pseudo-class:-moz-any-link:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -moz-box-ordinal-group: 24; order: 23; } -.test-any-link-pseudo-class:any-link:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-any-link-pseudo-class:any-link:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-box-ordinal-group: 24; -webkit-order: 23; -moz-box-ordinal-group: 24; @@ -421,7 +424,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order: 23; } -[dir="rtl"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .test-dir-pseudo-class { +[dir="rtl"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .test-dir-pseudo-class { -webkit-box-ordinal-group: 25; -webkit-order: 24; -moz-box-ordinal-group: 25; @@ -429,7 +432,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order: 24; } -.test-overflow-wrap-property:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-overflow-wrap-property:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-box-ordinal-group: 26; -webkit-order: 25; -moz-box-ordinal-group: 26; @@ -438,7 +441,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n word-wrap: break-word; } -.test-focus-visible-pseudo-class:focus-visible:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-focus-visible-pseudo-class:focus-visible:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-box-ordinal-group: 27; -webkit-order: 26; -moz-box-ordinal-group: 27; @@ -446,16 +449,16 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order: 26; } -.test-double-position-gradients:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-double-position-gradients:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { background-image: conic-gradient(yellowgreen 40%, gold 0deg,gold 75%, #f06 0deg); background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg); } -.test-blank-pseudo-class:blank:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-blank-pseudo-class:blank:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { background-color: yellow; } -.test-has-pseudo-class:has(.inner-class):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-has-pseudo-class:has(.inner-class):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { background-color: yellow; } @@ -499,46 +502,46 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order: 28; } -.test-hwb-function:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-hwb-function:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { background-color: rgba(0, 195, 255, .5); } -.test-opacity-percent:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-opacity-percent:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { opacity: 0.42; } -.clamp-same-unit:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.clamp-same-unit:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { width: max(10px, min(64px, 80px)); } -.complex-clamp:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.complex-clamp:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { width: max(-webkit-calc(100% - 10px), min(min(10px, 100%), max(40px, 4em))); width: max(-moz-calc(100% - 10px), min(min(10px, 100%), max(40px, 4em))); width: max(calc(100% - 10px), min(min(10px, 100%), max(40px, 4em))); } -.clamp-different-units:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.clamp-different-units:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { width: max(10%, min(2px, 4rem)); } -.mixed-clamp:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.mixed-clamp:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { grid-template-columns: max(22rem, min(40%, 32rem)) minmax(0, 1fr); margin: max(1rem, min(2%, 3rem)) 4vh; } -.calc-clamp:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.calc-clamp:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { margin: 0 40px 0 -webkit-calc(-1 * max(32px, min(16vw, 64px))); margin: 0 40px 0 -moz-calc(-1 * max(32px, min(16vw, 64px))); margin: 0 40px 0 calc(-1 * max(32px, min(16vw, 64px))); } -.multiple-calc-clamp:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.multiple-calc-clamp:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { margin: -webkit-calc(-1 * max(1px, min(2vw, 3px))) -webkit-calc(-1 * max(4px, min(5vw, 6px))); margin: -moz-calc(-1 * max(1px, min(2vw, 3px))) -moz-calc(-1 * max(4px, min(5vw, 6px))); margin: calc(-1 * max(1px, min(2vw, 3px))) calc(-1 * max(4px, min(5vw, 6px))); } -.nested-clamp:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.nested-clamp:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { font-size: max(max(1rem, min(2vw, 3rem)), min(4vw, 5rem)); } @@ -550,42 +553,42 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n src: url(a) format("woff2"); } -.block-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.block-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: block; display: block flow; } -.block-flow-root:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.block-flow-root:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: flow-root; display: block flow-root; } -.inline-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.inline-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: inline; display: inline flow; } -.inline-flow-root:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.inline-flow-root:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: inline-block; display: inline flow-root; } -.run-in-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.run-in-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: run-in; display: run-in flow; } -.list-item-block-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.list-item-block-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: list-item; display: list-item block flow; } -.inline-flow-list-item:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.inline-flow-list-item:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: inline list-item; display: inline flow list-item; } -.block-flex:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.block-flex:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: -webkit-box; display: -webkit-flex; display: -moz-box; @@ -594,7 +597,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n display: block flex; } -.inline-flex:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.inline-flex:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: -webkit-inline-box; display: -webkit-inline-flex; display: -moz-inline-box; @@ -603,52 +606,52 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n display: inline flex; } -.block-grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.block-grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: grid; display: block grid; } -.inline-grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.inline-grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: inline-grid; display: inline grid; } -.inline-ruby:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.inline-ruby:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: ruby; display: inline ruby; } -.block-table:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.block-table:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: table; display: block table; } -.inline-table:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.inline-table:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: inline-table; display: inline table; } -.table-cell-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.table-cell-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: table-cell; display: table-cell flow; } -.table-caption-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.table-caption-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: table-caption; display: table-caption flow; } -.ruby-base-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.ruby-base-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: ruby-base; display: ruby-base flow; } -.ruby-text-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.ruby-text-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: ruby-text; display: ruby-text flow; } -.color-function:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.color-function:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { prop-1: rgb(0,132,94); prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)'; prop-3: rgba(7,3,1,1); @@ -658,7 +661,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n prop-5: rgb(255,255,255); } -.oklab:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.oklab:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { color-1: rgb(73, 71, 69); color-1: color(display-p3 0.28515 0.27983 0.27246); color-2: rgba(121, 34, 67, 1); @@ -684,7 +687,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n color-12: color(display-p3 0.45207 0.66555 0.91656); } -.oklch:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.oklch:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { color-1: rgb(126, 37, 15); color-1: color(display-p3 0.45368 0.16978 0.09411); color-2: rgba(126, 37, 15, 1); @@ -724,9 +727,10 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n color-17: oklch(60% 0.1250 0.785398unknown); } -.ic-unit:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.ic-unit:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { --value-2ic: 'something'; text-indent: 2em; + content: 'something'; content: var(--value-2ic); left: 2em; left: var(--non-existing, 2em); @@ -738,12 +742,12 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n padding: 2 ic; } -.unset:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.unset:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { clip: auto; clip: initial; } -.mod:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.mod:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { padding: 8px 3px 1px -webkit-calc(3px + 50%); padding: 8px 3px 1px -moz-calc(3px + 50%); padding: 8px 3px 1px calc(3px + 50%); @@ -755,7 +759,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n width: 2px; } -.rem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.rem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { padding: 8px 3px 1px -webkit-calc(3px + 50%); padding: 8px 3px 1px -moz-calc(3px + 50%); padding: 8px 3px 1px calc(3px + 50%); @@ -766,7 +770,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n transform: rotate(-50deg); } -.round:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.round:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { top: 3px; right: 3px; bottom: 3px; diff --git a/plugin-packs/postcss-preset-env/test/layers-basic.preserve.true.expect.css b/plugin-packs/postcss-preset-env/test/layers-basic.preserve.true.expect.css index 2bbdb88d8..c683b43cc 100644 --- a/plugin-packs/postcss-preset-env/test/layers-basic.preserve.true.expect.css +++ b/plugin-packs/postcss-preset-env/test/layers-basic.preserve.true.expect.css @@ -1,6 +1,9 @@ + @custom-media --narrow-window (max-width: 30em); - .test-nesting-rules:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) p { + @custom-selector :--heading h1, h2, h3, h4, h5, h6; + + .test-nesting-rules:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) p { is-layer: C_D; -webkit-box-ordinal-group: 6; -webkit-order: 5.1; @@ -116,8 +119,8 @@ order: 6; } -.test-nesting-rules:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#), -#test-is-pseudo:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-nesting-rules:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#), +#test-is-pseudo:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-box-ordinal-group: 8; -webkit-order: 7; -moz-box-ordinal-group: 8; @@ -125,7 +128,7 @@ order: 7; } -.test-nesting-rules:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) + p, #test-is-pseudo:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) + p { +.test-nesting-rules:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) + p, #test-is-pseudo:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) + p { -webkit-box-ordinal-group: 9; -webkit-order: 8; -moz-box-ordinal-group: 9; @@ -133,8 +136,8 @@ order: 8; } -.test-nesting-rules:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#), -#test-is-pseudo:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-nesting-rules:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#), +#test-is-pseudo:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-box-ordinal-group: 10; @@ -147,10 +150,10 @@ order: 9; } -@custom-media --narrow-window (max-width: 30em); +@custom-media --narrow-window (max-width: 500px); -@media (max-width: 30em) { - .test-custom-media-queries:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +@media (max-width: 500px) { + .test-custom-media-queries:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-box-ordinal-group: 11; -webkit-order: 10; -moz-box-ordinal-group: 11; @@ -160,7 +163,7 @@ } @media (--narrow-window) { - .test-custom-media-queries:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + .test-custom-media-queries:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-box-ordinal-group: 11; -webkit-order: 10; -moz-box-ordinal-group: 11; @@ -183,30 +186,20 @@ @custom-media --dark-mode (prefers-color-scheme: dark); @media (prefers-color-scheme: dark) { - body:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + body:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { background-color: black; color: white; } } @media (--dark-mode) { - body:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + body:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { background-color: black; color: white; } } -@custom-selector :--heading h1, h2, h3, h4, h5, h6; - -h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),h2.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),h3.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),h4.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),h5.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),h6.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { - -webkit-box-ordinal-group:13; - -webkit-order:12; - -moz-box-ordinal-group:13; - -ms-flex-order:12; - order:12; -} - -.test-custom-selectors:--heading:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-custom-selectors:--heading:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-box-ordinal-group:13; -webkit-order:12; -moz-box-ordinal-group:13; @@ -214,7 +207,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order:12; } -.test-case-insensitive-attributes[frame=hsides]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=Hsides]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSides]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSides]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIdes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIdes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIdes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIdes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsiDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsiDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSiDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSiDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsidEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsidEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSidEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSidEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIdEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIdEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIdEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIdEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsiDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsiDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSiDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSiDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsideS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsideS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSideS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSideS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIdeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIdeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIdeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIdeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsiDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsiDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSiDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSiDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsidES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsidES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSidES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSidES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIdES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIdES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIdES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIdES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsiDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsiDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSiDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSiDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-case-insensitive-attributes[frame=hsides]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=Hsides]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSides]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSides]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIdes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIdes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIdes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIdes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsiDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsiDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSiDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSiDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIDes]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsidEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsidEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSidEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSidEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIdEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIdEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIdEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIdEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsiDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsiDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSiDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSiDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIDEs]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsideS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsideS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSideS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSideS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIdeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIdeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIdeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIdeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsiDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsiDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSiDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSiDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIDeS]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsidES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsidES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSidES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSidES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIdES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIdES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIdES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIdES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsiDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsiDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSiDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSiDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hsIDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HsIDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=hSIDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.test-case-insensitive-attributes[frame=HSIDES]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-box-ordinal-group: 14; -webkit-order: 13; -moz-box-ordinal-group: 14; @@ -222,7 +215,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order: 13; } -.test-rebeccapurple-color:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-rebeccapurple-color:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { color: #639; color: rebeccapurple; -webkit-box-ordinal-group: 15; @@ -232,7 +225,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order: 14; } -.test-hexadecimal-alpha-notation:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-hexadecimal-alpha-notation:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { background-color: rgba(243,243,243,0.95294); background-color: #f3f3f3f3; color: rgba(0,0,0,0.2); @@ -244,7 +237,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order: 15; } -.test-color-functional-notation:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-color-functional-notation:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { color: rgba(178, 34, 34, 0.5); color: rgb(70% 13.5% 13.5% / 50%); -webkit-box-ordinal-group: 17; @@ -254,7 +247,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order: 16; } -.test-lab-function:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-lab-function:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { background-color: rgb(179, 35, 35); background-color: color(display-p3 0.64331 0.19245 0.16771); background-color: lab(40% 56.6 39); @@ -268,7 +261,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order: 17; } -.test-system-ui-font-family:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-system-ui-font-family:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; -webkit-box-ordinal-group: 19; -webkit-order: 18; @@ -277,7 +270,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order: 18; } -.test-font-variant-property:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-font-variant-property:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-font-feature-settings: "smcp"; -moz-font-feature-settings: "smcp"; font-feature-settings: "smcp"; @@ -289,7 +282,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order: 19; } -.test-all-property:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-all-property:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-animation: none 0s ease 0s 1 normal none running; -moz-animation: none 0s ease 0s 1 normal none running; -o-animation: none 0s ease 0s 1 normal none running; @@ -431,7 +424,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order: 20; } -.test-matches-pseudo-class:matches(:first-child, .special):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-matches-pseudo-class:matches(:first-child, .special):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-box-ordinal-group: 22; -webkit-order: 21; -moz-box-ordinal-group: 22; @@ -439,7 +432,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order: 21; } -.test-not-pseudo-class:not(:first-child):not(.special):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-not-pseudo-class:not(:first-child):not(.special):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-box-ordinal-group: 23; -webkit-order: 22; -moz-box-ordinal-group: 23; @@ -447,7 +440,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order: 22; } -.test-any-link-pseudo-class:link:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#), .test-any-link-pseudo-class:visited:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#), area[href].test-any-link-pseudo-class:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-any-link-pseudo-class:link:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#), .test-any-link-pseudo-class:visited:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#), area[href].test-any-link-pseudo-class:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-box-ordinal-group: 24; -webkit-order: 23; -moz-box-ordinal-group: 24; @@ -455,18 +448,18 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order: 23; } -.test-any-link-pseudo-class:-webkit-any-link:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-any-link-pseudo-class:-webkit-any-link:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-box-ordinal-group: 24; -webkit-order: 23; order: 23; } -.test-any-link-pseudo-class:-moz-any-link:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-any-link-pseudo-class:-moz-any-link:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -moz-box-ordinal-group: 24; order: 23; } -.test-any-link-pseudo-class:any-link:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-any-link-pseudo-class:any-link:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-box-ordinal-group: 24; -webkit-order: 23; -moz-box-ordinal-group: 24; @@ -474,7 +467,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order: 23; } -[dir="rtl"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .test-dir-pseudo-class { +[dir="rtl"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .test-dir-pseudo-class { -webkit-box-ordinal-group: 25; -webkit-order: 24; -moz-box-ordinal-group: 25; @@ -482,7 +475,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order: 24; } -.test-dir-pseudo-class:dir(rtl):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-dir-pseudo-class:dir(rtl):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-box-ordinal-group: 25; -webkit-order: 24; -moz-box-ordinal-group: 25; @@ -490,7 +483,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order: 24; } -.test-overflow-wrap-property:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-overflow-wrap-property:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-box-ordinal-group: 26; -webkit-order: 25; -moz-box-ordinal-group: 26; @@ -499,7 +492,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n word-wrap: break-word; } -.test-focus-visible-pseudo-class:focus-visible:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-focus-visible-pseudo-class:focus-visible:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { -webkit-box-ordinal-group: 27; -webkit-order: 26; -moz-box-ordinal-group: 27; @@ -507,16 +500,16 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order: 26; } -.test-double-position-gradients:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-double-position-gradients:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { background-image: conic-gradient(yellowgreen 40%, gold 0deg,gold 75%, #f06 0deg); background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg); } -.test-blank-pseudo-class:blank:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-blank-pseudo-class:blank:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { background-color: yellow; } -.test-has-pseudo-class:has(.inner-class):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-has-pseudo-class:has(.inner-class):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { background-color: yellow; } @@ -576,22 +569,22 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n order: 28; } -.test-hwb-function:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-hwb-function:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { background-color: rgba(0, 195, 255, .5); background-color: hwb(194 0% 0% / .5); } -.test-opacity-percent:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.test-opacity-percent:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { opacity: 0.42; opacity: 42%; } -.clamp-same-unit:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.clamp-same-unit:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { width: max(10px, min(64px, 80px)); width: clamp(10px, 64px, 80px); } -.complex-clamp:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.complex-clamp:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { width: max(-webkit-calc(100% - 10px), min(min(10px, 100%), max(40px, 4em))); width: max(-moz-calc(100% - 10px), min(min(10px, 100%), max(40px, 4em))); width: max(calc(100% - 10px), min(min(10px, 100%), max(40px, 4em))); @@ -600,19 +593,19 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n width: clamp(calc(100% - 10px), min(10px, 100%), max(40px, 4em)); } -.clamp-different-units:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.clamp-different-units:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { width: max(10%, min(2px, 4rem)); width: clamp(10%, 2px, 4rem); } -.mixed-clamp:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.mixed-clamp:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { grid-template-columns: max(22rem, min(40%, 32rem)) minmax(0, 1fr); grid-template-columns: clamp(22rem, 40%, 32rem) minmax(0, 1fr); margin: max(1rem, min(2%, 3rem)) 4vh; margin: clamp(1rem, 2%, 3rem) 4vh; } -.calc-clamp:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.calc-clamp:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { margin: 0 40px 0 -webkit-calc(-1 * max(32px, min(16vw, 64px))); margin: 0 40px 0 -moz-calc(-1 * max(32px, min(16vw, 64px))); margin: 0 40px 0 calc(-1 * max(32px, min(16vw, 64px))); @@ -621,7 +614,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n margin: 0 40px 0 calc(-1 * clamp(32px, 16vw, 64px)); } -.multiple-calc-clamp:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.multiple-calc-clamp:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { margin: -webkit-calc(-1 * max(1px, min(2vw, 3px))) -webkit-calc(-1 * max(4px, min(5vw, 6px))); margin: -moz-calc(-1 * max(1px, min(2vw, 3px))) -moz-calc(-1 * max(4px, min(5vw, 6px))); margin: calc(-1 * max(1px, min(2vw, 3px))) calc(-1 * max(4px, min(5vw, 6px))); @@ -639,7 +632,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n margin: calc(-1 * clamp(1px, 2vw, 3px)) calc(-1 * clamp(4px, 5vw, 6px)); } -.nested-clamp:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.nested-clamp:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { font-size: max(max(1rem, min(2vw, 3rem)), min(4vw, 5rem)); font-size: max(clamp(1rem, 2vw, 3rem), min(4vw, 5rem)); font-size: max(1rem, min(2vw, 3rem)); @@ -655,42 +648,42 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n src: url(a) format(woff2); } -.block-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.block-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: block; display: block flow; } -.block-flow-root:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.block-flow-root:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: flow-root; display: block flow-root; } -.inline-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.inline-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: inline; display: inline flow; } -.inline-flow-root:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.inline-flow-root:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: inline-block; display: inline flow-root; } -.run-in-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.run-in-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: run-in; display: run-in flow; } -.list-item-block-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.list-item-block-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: list-item; display: list-item block flow; } -.inline-flow-list-item:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.inline-flow-list-item:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: inline list-item; display: inline flow list-item; } -.block-flex:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.block-flex:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: -webkit-box; display: -webkit-flex; display: -moz-box; @@ -699,7 +692,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n display: block flex; } -.inline-flex:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.inline-flex:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: -webkit-inline-box; display: -webkit-inline-flex; display: -moz-inline-box; @@ -708,52 +701,52 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n display: inline flex; } -.block-grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.block-grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: grid; display: block grid; } -.inline-grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.inline-grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: inline-grid; display: inline grid; } -.inline-ruby:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.inline-ruby:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: ruby; display: inline ruby; } -.block-table:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.block-table:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: table; display: block table; } -.inline-table:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.inline-table:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: inline-table; display: inline table; } -.table-cell-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.table-cell-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: table-cell; display: table-cell flow; } -.table-caption-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.table-caption-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: table-caption; display: table-caption flow; } -.ruby-base-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.ruby-base-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: ruby-base; display: ruby-base flow; } -.ruby-text-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.ruby-text-flow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: ruby-text; display: ruby-text flow; } -.color-function:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.color-function:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { prop-1: rgb(0,132,94); prop-1: color(display-p3 0.00000 0.51872 0.36985); prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)'; @@ -769,7 +762,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n prop-5: color(display-p3 1 1 1 1); } -.oklab:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.oklab:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { color-1: rgb(73, 71, 69); color-1: color(display-p3 0.28515 0.27983 0.27246); color-1: oklab(40% 0.001236 0.0039); @@ -806,7 +799,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n color-12: oklab(72.322% -0.0465 -0.1150); } -.oklch:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.oklch:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { color-1: rgb(126, 37, 15); color-1: color(display-p3 0.45368 0.16978 0.09411); color-1: oklch(40% 0.1268735435 34.568626); @@ -864,10 +857,11 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n color-17: oklch(60% 0.1250 0.785398unknown); } -.ic-unit:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.ic-unit:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { --value-2ic: 'something'; text-indent: 2em; text-indent: 2ic; + content: 'something'; content: var(--value-2ic); left: 2em; left: var(--non-existing, 2em); @@ -886,12 +880,12 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n padding: 2 ic; } -.unset:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.unset:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { clip: initial; clip: unset; } -.mod:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.mod:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { padding: 8px 3px 1px -webkit-calc(3px + 50%); padding: 8px 3px 1px -moz-calc(3px + 50%); padding: 8px 3px 1px calc(3px + 50%); @@ -912,7 +906,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n width: mod(mod(-18px, 5px), 5px); } -.rem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.rem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { padding: 8px 3px 1px -webkit-calc(3px + 50%); padding: 8px 3px 1px -moz-calc(3px + 50%); padding: 8px 3px 1px calc(3px + 50%); @@ -931,7 +925,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n transform: rotate(rem(-140deg, -90deg)); } -.round:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +.round:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { top: 3px; top: round(2.5px, 1px); right: 3px; diff --git a/plugins/postcss-custom-properties/.tape.mjs b/plugins/postcss-custom-properties/.tape.mjs index 43fa4ae48..47acf12d8 100644 --- a/plugins/postcss-custom-properties/.tape.mjs +++ b/plugins/postcss-custom-properties/.tape.mjs @@ -1,8 +1,6 @@ import postcssTape from '../../packages/postcss-tape/dist/index.mjs'; import plugin from 'postcss-custom-properties'; -import { strict as assert } from 'assert'; import postcssImport from 'postcss-import'; -import fs from 'fs'; postcssTape(plugin)({ 'basic': { @@ -14,383 +12,13 @@ postcssTape(plugin)({ preserve: false } }, - 'basic:import': { - message: 'supports { importFrom: { customProperties: { ... } } } usage', - warnings: 1, - options: { - importFrom: { - customProperties: { - '--color': 'rgb(255, 0, 0)', - '--color-2': 'yellow', - '--ref-color': 'var(--color)', - '--margin': '0 10px 20px 30px', - '--z-index': 10 - } - } - } - }, - 'basic:import-fn': { - message: 'supports { importFrom() } usage', - warnings: 1, - options: { - importFrom() { - return { - customProperties: { - '--color': 'rgb(255, 0, 0)', - '--color-2': 'yellow', - '--ref-color': 'var(--color)', - '--margin': '0 10px 20px 30px', - '--z-index': 10 - } - }; - } - }, - expect: 'basic.import.expect.css', - result: 'basic.import.result.css' - }, - 'basic:import-fn-promise': { - message: 'supports { async importFrom() } usage', - warnings: 1, - options: { - importFrom() { - return new Promise(resolve => { - resolve({ - customProperties: { - '--color': 'rgb(255, 0, 0)', - '--color-2': 'yellow', - '--ref-color': 'var(--color)', - '--z-index': 10 - } - }) - }); - } - }, - expect: 'basic.import.expect.css', - result: 'basic.import.result.css' - }, - 'basic:import-json': { - message: 'supports { importFrom: "test/import-properties.json" } usage', - warnings: 1, - options: { - importFrom: 'test/import-properties.json' - }, - expect: 'basic.import.expect.css', - result: 'basic.import.result.css' - }, - 'basic:import-cjs': { - message: 'supports { importFrom: "test/import-properties{-2}?.cjs" } usage', - warnings: 1, - options: { - importFrom: [ - 'test/import-properties.cjs', - 'test/import-properties-2.cjs' - ] - }, - expect: 'basic.import.expect.css', - result: 'basic.import.result.css' - }, - 'basic:import-mjs': { - message: 'supports { importFrom: "test/import-properties{-2}?.mjs" } usage', - warnings: 1, - options: { - importFrom: [ - 'test/import-properties.mjs', - 'test/import-properties-2.mjs' - ] - }, - expect: 'basic.import.expect.css', - result: 'basic.import.result.css' - }, - 'basic:import-css': { - message: 'supports { importFrom: "test/import-properties{-2}?.css" } usage', - warnings: 1, - options: { - importFrom: [ - 'test/import-properties.css', - 'test/import-properties-2.css' - ] - }, - expect: 'basic.import.expect.css', - result: 'basic.import.result.css' + 'examples/example': { + message: 'minimal example', }, - 'basic:import-css-js': { - message: 'supports { importFrom: "test/import-properties{-2}?.{css|js}" } usage', - warnings: 1, + 'examples/example:preserve-false': { + message: 'minimal example with { preserve: false }', options: { - importFrom: [ - 'test/import-properties.js', - 'test/import-properties-2.css' - ] - }, - expect: 'basic.import.expect.css', - result: 'basic.import.result.css' - }, - 'basic:import-css-pcss': { - message: 'supports { importFrom: "test/import-properties.{p}?css" } usage', - warnings: 1, - options: { - importFrom: [ - 'test/import-properties.pcss', - 'test/import-properties-2.css' - ] - }, - expect: 'basic.import.expect.css', - result: 'basic.import.result.css' - }, - 'basic:import-css-from': { - message: 'supports { importFrom: { from: "test/import-properties.css" } } usage', - warnings: 1, - options: { - importFrom: [ - { from: 'test/import-properties.css' }, - { from: 'test/import-properties-2.css' } - ] - }, - expect: 'basic.import.expect.css', - result: 'basic.import.result.css' - }, - 'basic:import-css-from-type': { - message: 'supports { importFrom: [ { from: "test/import-properties.css", type: "css" } ] } usage', - warnings: 1, - options: { - importFrom: [ - { from: 'test/import-properties.css', type: 'css' }, - { from: 'test/import-properties-2.css', type: 'css' } - ] - }, - expect: 'basic.import.expect.css', - result: 'basic.import.result.css' - }, - 'basic:import-override': { - message: 'importFrom with { preserve: false } should override root properties', - warnings: 1, - options: { - preserve: false, - importFrom: { - customProperties: { - '--color': 'rgb(0, 0, 0)', - '--color-2': 'yellow', - '--ref-color': 'var(--color)', - '--margin': '0 10px 20px 30px', - '--shadow-color': 'rgb(0,0,0)', - '--z-index': 10 - } - } - }, - expect: 'basic.import-override.expect.css', - result: 'basic.import-override.result.css' - }, - 'basic:import-override:inverse': { - message: 'importFrom with { preserve: false, overrideImportFromWithRoot: true } should override importFrom properties', - warnings: 1, - options: { - preserve: false, - overrideImportFromWithRoot: true, - importFrom: { - customProperties: { - '--color': 'rgb(0, 0, 0)', - '--color-2': 'yellow', - '--ref-color': 'var(--color)', - '--margin': '0 10px 20px 30px', - '--shadow-color': 'rgb(0,0,0)', - '--z-index': 10 - } - } - }, - expect: 'basic.import-override.inverse.expect.css', - result: 'basic.import-override.inverse.result.css' - }, - 'basic:export': { - message: 'supports { exportTo: { customProperties: { ... } } } usage', - warnings: 1, - options: { - exportTo: (global.__exportPropertiesObject = global.__exportPropertiesObject || { - customProperties: null - }) - }, - expect: 'basic.expect.css', - result: 'basic.result.css', - after() { - if (__exportPropertiesObject.customProperties['--color'] !== 'rgb(255, 0, 0)') { - throw new Error('The exportTo function failed'); - } - } - }, - 'basic:export-fn': { - message: 'supports { exportTo() } usage', - warnings: 1, - options: { - exportTo(customProperties) { - if (customProperties['--color'] !== 'rgb(255, 0, 0)') { - throw new Error('The exportTo function failed'); - } - } - }, - expect: 'basic.expect.css', - result: 'basic.result.css' - }, - 'basic:export-fn-promise': { - message: 'supports { async exportTo() } usage', - warnings: 1, - options: { - exportTo(customProperties) { - return new Promise((resolve, reject) => { - if (customProperties['--color'] !== 'rgb(255, 0, 0)') { - reject('The exportTo function failed'); - } else { - resolve(); - } - }); - } - }, - expect: 'basic.expect.css', - result: 'basic.result.css' - }, - 'basic:export-scss': { - message: 'supports { exportTo: "test/export-properties.scss" } usage', - warnings: 1, - options: { - exportTo: 'test/export-properties.scss' - }, - expect: 'basic.expect.css', - result: 'basic.result.css', - before() { - try { - global.__exportPropertiesString = fs.readFileSync('test/export-properties.scss', 'utf8'); - fs.rmSync('test/export-properties.scss'); - } catch (_) { - // ignore - } - }, - after() { - assert.strictEqual(global.__exportPropertiesString, fs.readFileSync('test/export-properties.scss', 'utf8')); - } - }, - 'basic:export-json': { - message: 'supports { exportTo: "test/export-properties.json" } usage', - warnings: 1, - options: { - exportTo: 'test/export-properties.json' - }, - expect: 'basic.expect.css', - result: 'basic.result.css', - before() { - try { - global.__exportPropertiesString = fs.readFileSync('test/export-properties.json', 'utf8'); - fs.rmSync('test/export-properties.json'); - } catch (_) { - // ignore - } - }, - after() { - assert.strictEqual(global.__exportPropertiesString, fs.readFileSync('test/export-properties.json', 'utf8')); - } - }, - 'basic:export-js': { - message: 'supports { exportTo: "test/export-properties.js" } usage', - warnings: 1, - options: { - exportTo: 'test/export-properties.js' - }, - expect: 'basic.expect.css', - result: 'basic.result.css', - before() { - try { - global.__exportPropertiesString = fs.readFileSync('test/export-properties.js', 'utf8'); - fs.rmSync('test/export-properties.js'); - } catch (_) { - // ignore - } - }, - after() { - assert.strictEqual(global.__exportPropertiesString, fs.readFileSync('test/export-properties.js', 'utf8')); - } - }, - 'basic:export-mjs': { - message: 'supports { exportTo: "test/export-properties.mjs" } usage', - warnings: 1, - options: { - exportTo: 'test/export-properties.mjs' - }, - expect: 'basic.expect.css', - result: 'basic.result.css', - before() { - try { - global.__exportPropertiesString = fs.readFileSync('test/export-properties.mjs', 'utf8'); - fs.rmSync('test/export-properties.mjs'); - } catch (_) { - // ignore - } - }, - after() { - assert.strictEqual(global.__exportPropertiesString, fs.readFileSync('test/export-properties.mjs', 'utf8')); - } - }, - 'basic:export-css': { - message: 'supports { exportTo: "test/export-properties.css" } usage', - warnings: 1, - options: { - exportTo: 'test/export-properties.css' - }, - expect: 'basic.expect.css', - result: 'basic.result.css', - before() { - try { - global.__exportPropertiesString = fs.readFileSync('test/export-properties.css', 'utf8'); - fs.rmSync('test/export-properties.css'); - } catch (_) { - // ignore - } - }, - after() { - assert.strictEqual(global.__exportPropertiesString, fs.readFileSync('test/export-properties.css', 'utf8')); - } - }, - 'basic:export-css-to': { - message: 'supports { exportTo: { to: "test/export-properties.css" } } usage', - warnings: 1, - options: { - exportTo: { to: 'test/export-properties.css' } - }, - expect: 'basic.expect.css', - result: 'basic.result.css', - before() { - try { - global.__exportPropertiesString = fs.readFileSync('test/export-properties.css', 'utf8'); - fs.rmSync('test/export-properties.css'); - } catch (_) { - // ignore - } - }, - after() { - assert.strictEqual(global.__exportPropertiesString, fs.readFileSync('test/export-properties.css', 'utf8')); - } - }, - 'basic:export-css-to-type': { - message: 'supports { exportTo: { to: "test/export-properties.css", type: "css" } } usage', - warnings: 1, - options: { - exportTo: { to: 'test/export-properties.css', type: 'css' } - }, - expect: 'basic.expect.css', - result: 'basic.result.css', - before() { - try { - global.__exportPropertiesString = fs.readFileSync('test/export-properties.css', 'utf8'); - fs.rmSync('test/export-properties.css'); - } catch (_) { - // ignore - } - }, - after() { - assert.strictEqual(global.__exportPropertiesString, fs.readFileSync('test/export-properties.css', 'utf8')); - } - }, - 'basic:import-is-empty': { - message: 'supports { importFrom: {} } usage', - options: { - importFrom: {}, - disableDeprecationNotice: true + preserve: false } }, 'import': { diff --git a/plugins/postcss-custom-properties/CHANGELOG.md b/plugins/postcss-custom-properties/CHANGELOG.md index 9aee657cd..f773cfdb9 100644 --- a/plugins/postcss-custom-properties/CHANGELOG.md +++ b/plugins/postcss-custom-properties/CHANGELOG.md @@ -3,6 +3,24 @@ ### Unreleased (major) - Updated: Support for Node v14+ (major). +- Removed : `importFrom` feature (breaking). +- Removed : `exportTo` feature (breaking). +- Added support for local custom property declarations. + +```css +.example { + --a-value: 20px; + margin: var(--a-value); +} + +/* becomes */ + +.example { + --a-value: 20px; + margin: 20px; + margin: var(--a-value); +} +``` ### 12.1.8 (June 10, 2022) diff --git a/plugins/postcss-custom-properties/README.md b/plugins/postcss-custom-properties/README.md index ab48d6d96..af618d557 100644 --- a/plugins/postcss-custom-properties/README.md +++ b/plugins/postcss-custom-properties/README.md @@ -1,58 +1,83 @@ -# PostCSS Custom Properties [][postcss] +# PostCSS Custom Properties [][postcss] -[![NPM Version][npm-img]][npm-url] -[![CSS Standard Status][css-img]][css-url] -[![Build Status][cli-img]][cli-url] -[][discord] +[][npm-url] [][css-url] [][cli-url] [][discord] [PostCSS Custom Properties] lets you use Custom Properties in CSS, following -the [CSS Custom Properties] specification. +the [PostCSS Custom Properties] specification. [](https://caniuse.com/#feat=css-variables) ```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 inly 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 +[PostCSS Custom Properties]: https://www.w3.org/TR/css-variables-1/ diff --git a/plugins/postcss-custom-properties/docs/README.md b/plugins/postcss-custom-properties/docs/README.md new file mode 100644 index 000000000..2b156de2d --- /dev/null +++ b/plugins/postcss-custom-properties/docs/README.md @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + +

+ +[] lets you use Custom Properties in CSS, following +the [PostCSS Custom Properties] specification. + +[](https://caniuse.com/#feat=css-variables) + +```pcss + + +/* becomes */ + + +``` + +**Note:** This plugin only processes variables that are defined in the `:root` or `html` selector. + +Locally defined custom properties will be used as fallbacks inly 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 */ + + +``` + + +[PostCSS Custom Properties]: diff --git a/plugins/postcss-custom-properties/package.json b/plugins/postcss-custom-properties/package.json index b01398067..20d39c9fd 100644 --- a/plugins/postcss-custom-properties/package.json +++ b/plugins/postcss-custom-properties/package.json @@ -43,12 +43,12 @@ "scripts": { "build": "rollup -c ../../rollup/default.js", "clean": "node -e \"fs.rmSync('./dist', { recursive: true, force: true });\"", - "docs": "node ../../.github/bin/generate-docs/install.mjs", + "docs": "node ../../.github/bin/generate-docs/install.mjs && node ../../.github/bin/generate-docs/readme.mjs", "lint": "npm run lint:eslint && npm run lint:package-json", "lint:eslint": "eslint ./src --ext .js --ext .ts --ext .mjs --no-error-on-unmatched-pattern", "lint:package-json": "node ../../.github/bin/format-package-json.mjs", "prepublishOnly": "npm run clean && npm run build && npm run test", - "test": "node .tape.mjs && node .tape.cjs && npm run test:exports", + "test": "node .tape.mjs && npm run test:exports", "test:exports": "node ./test/_import.mjs && node ./test/_require.cjs", "test:rewrite-expects": "REWRITE_EXPECTS=true node .tape.mjs" }, @@ -73,8 +73,10 @@ "w3c" ], "csstools": { + "cssdbId": "custom-properties", "exportName": "postcssCustomProperties", - "humanReadableName": "PostCSS Custom Properties" + "humanReadableName": "PostCSS Custom Properties", + "specUrl": "https://www.w3.org/TR/css-variables-1/" }, "volta": { "extends": "../../package.json" diff --git a/plugins/postcss-custom-properties/src/get-custom-properties-from-root.ts b/plugins/postcss-custom-properties/src/get-custom-properties-from-root.ts new file mode 100644 index 000000000..a87bda3b0 --- /dev/null +++ b/plugins/postcss-custom-properties/src/get-custom-properties-from-root.ts @@ -0,0 +1,75 @@ +import { Root, Rule } from 'postcss'; +import valuesParser from 'postcss-value-parser'; +import { isBlockIgnored } from './is-ignored'; + +// return custom selectors from the css root, conditionally removing them +export default function getCustomPropertiesFromRoot(root: Root): Map { + // initialize custom selectors + const customPropertiesFromHtmlElement: Map = new Map(); + const customPropertiesFromRootPseudo: Map = new Map(); + const out: Map = new Map(); + + // for each html or :root rule + root.each((rule) => { + if (rule.type !== 'rule') { + return; + } + + if (isHtmlRule(rule)) { + rule.each((decl) => { + if (decl.type !== 'decl') { + return; + } + + if (!decl.variable || isBlockIgnored(decl)) { + return; + } + + if (decl.value.toLowerCase().trim() === 'initial') { + return; + } + + customPropertiesFromHtmlElement.set(decl.prop, valuesParser(decl.value)); + }); + } else if (isRootRule(rule)) { + rule.each((decl) => { + if (decl.type !== 'decl') { + return; + } + + if (!decl.variable || isBlockIgnored(decl)) { + return; + } + + if (decl.value.toLowerCase().trim() === 'initial') { + return; + } + + customPropertiesFromRootPseudo.set(decl.prop, valuesParser(decl.value)); + }); + } + }); + + for (const [name, value] of customPropertiesFromHtmlElement.entries()) { + out.set(name, value); + } + + for (const [name, value] of customPropertiesFromRootPseudo.entries()) { + out.set(name, value); + } + + // return all custom properties, preferring :root properties over html properties + return out; +} + +// match html and :root rules +const htmlSelectorRegExp = /^html$/i; +const rootSelectorRegExp = /^:root$/i; + +function isHtmlRule(rule: Rule) { + return rule.selector.split(',').some(item => htmlSelectorRegExp.test(item)) && rule.nodes && rule.nodes.length; +} + +function isRootRule(rule: Rule) { + return rule.selector.split(',').some(item => rootSelectorRegExp.test(item)) && rule.nodes && rule.nodes.length; +} diff --git a/plugins/postcss-custom-properties/src/index.ts b/plugins/postcss-custom-properties/src/index.ts index 22b2f1187..8085bdfdf 100644 --- a/plugins/postcss-custom-properties/src/index.ts +++ b/plugins/postcss-custom-properties/src/index.ts @@ -1,103 +1,70 @@ import type { PluginCreator } from 'postcss'; -import type valuesParser from 'postcss-value-parser'; +import valuesParser from 'postcss-value-parser'; -import getCustomPropertiesFromRoot from './lib/get-custom-properties-from-root'; -import getCustomPropertiesFromImports from './lib/get-custom-properties-from-imports'; -import transformProperties from './lib/transform-properties'; -import writeCustomPropertiesToExports from './lib/write-custom-properties-to-exports'; -import type { ImportOptions, ExportOptions } from './lib/options'; +import getCustomPropertiesFromRoot from './get-custom-properties-from-root'; +import { isBlockIgnored } from './is-ignored'; +import transformProperties from './transform-properties'; export interface PluginOptions { - /** Do not emit warnings about "importFrom" and "exportTo" deprecations */ - disableDeprecationNotice?: boolean; - /** Determines whether Custom Properties and properties using custom properties should be preserved in their original form. */ + /** Determines whether properties using custom properties should be preserved in their original form. */ preserve?: boolean - - /** Specifies sources where Custom Properties can be imported from, which might be CSS, JS, and JSON files, functions, and directly passed objects. */ - importFrom?: ImportOptions | Array - - /** Specifies destinations where Custom Properties can be exported to, which might be CSS, JS, and JSON files, functions, and directly passed objects. */ - exportTo?: ExportOptions | Array - - /** Specifies if `importFrom` properties or `:root` properties have priority. */ - overrideImportFromWithRoot?: boolean } const creator: PluginCreator = (opts?: PluginOptions) => { - // whether to preserve custom selectors and rules using them const preserve = 'preserve' in Object(opts) ? Boolean(opts.preserve) : true; - const overrideImportFromWithRoot = 'overrideImportFromWithRoot' in Object(opts) ? Boolean(opts.overrideImportFromWithRoot) : false; - const disableDeprecationNotice = 'disableDeprecationNotice' in Object(opts) ? Boolean(opts.disableDeprecationNotice) : false; - - // sources to import custom selectors from - let importFrom: Array = []; - if (Array.isArray(opts?.importFrom)) { - importFrom = opts.importFrom; - } else if (opts?.importFrom) { - importFrom = [opts.importFrom]; - } - // destinations to export custom selectors to - let exportTo: Array = []; - if (Array.isArray(opts?.exportTo)) { - exportTo = opts.exportTo; - } else if (opts?.exportTo) { - exportTo = [opts.exportTo]; + if ('importFrom' in Object(opts)) { + throw new Error('[postcss-custom-properties] "importFrom" is no longer supported'); } - // promise any custom selectors are imported - const customPropertiesPromise = getCustomPropertiesFromImports(importFrom); - - // whether to return synchronous function if no asynchronous operations are requested - const canReturnSyncFunction = importFrom.length === 0 && exportTo.length === 0; + if ('exportTo' in Object(opts)) { + throw new Error('[postcss-custom-properties] "exportTo" is no longer supported'); + } return { postcssPlugin: 'postcss-custom-properties', - prepare () { + prepare: () => { let customProperties: Map = new Map(); - if (canReturnSyncFunction) { - return { - Once: (root) => { - customProperties = getCustomPropertiesFromRoot(root, { preserve }); - }, - Declaration: (decl) => { - transformProperties(decl, customProperties, { preserve }); - }, - OnceExit: () => { - customProperties.clear(); - }, - }; - } else { - return { - Once: async root => { - const importedCustomerProperties = (await customPropertiesPromise).entries(); - const rootCustomProperties = getCustomPropertiesFromRoot(root, { preserve: preserve }).entries(); - - if (overrideImportFromWithRoot) { - for (const [name, value] of [...importedCustomerProperties, ...rootCustomProperties]) { - customProperties.set(name, value); + return { + Once: (root) => { + customProperties = getCustomPropertiesFromRoot(root); + }, + Declaration: (decl) => { + let localCustomProperties = customProperties; + if (preserve && decl.parent) { + let didCopy = false; + + decl.parent.each((siblingDecl) => { + if (decl === siblingDecl) { + return; } - } else { - for (const [name, value] of [...rootCustomProperties, ...importedCustomerProperties]) { - customProperties.set(name, value); + + if (siblingDecl.type !== 'decl') { + return; } - } - - await writeCustomPropertiesToExports(customProperties, exportTo); - }, - Declaration: (decl) => { - transformProperties(decl, customProperties, { preserve }); - }, - OnceExit: (root, { result }) => { - if (!disableDeprecationNotice && (importFrom.length > 0 || exportTo.length > 0)) { - root.warn(result, '"importFrom" and "exportTo" will be removed in a future version of postcss-custom-properties.\nWe are looking for insights and anecdotes on how these features are used so that we can design the best alternative.\nPlease let us know if our proposal will work for you.\nVisit the discussion on github for more details. https://github.com/csstools/postcss-plugins/discussions/192'); - } - - customProperties.clear(); - }, - }; - } + + if (!siblingDecl.variable || isBlockIgnored(siblingDecl)) { + return; + } + + if (!didCopy) { + localCustomProperties = new Map(customProperties); + didCopy = true; + } + + if (siblingDecl.value.toLowerCase().trim() === 'initial') { + localCustomProperties.delete(siblingDecl.prop); + return; + } + + localCustomProperties.set(siblingDecl.prop, valuesParser(siblingDecl.value)); + }); + } + + transformProperties(decl, localCustomProperties, { preserve: preserve }); + }, + }; }, }; }; diff --git a/plugins/postcss-custom-properties/src/is-ignored.ts b/plugins/postcss-custom-properties/src/is-ignored.ts new file mode 100644 index 000000000..e1c5ccc5c --- /dev/null +++ b/plugins/postcss-custom-properties/src/is-ignored.ts @@ -0,0 +1,20 @@ +function isBlockIgnored(ruleOrDeclaration) { + const rule = ruleOrDeclaration.selector ? + ruleOrDeclaration : ruleOrDeclaration.parent; + + return /(!\s*)?postcss-custom-properties:\s*off\b/i.test(rule.toString()); +} + +function isRuleIgnored(rule) { + const previous = rule.prev(); + + return Boolean(isBlockIgnored(rule) || + previous && + previous.type === 'comment' && + /(!\s*)?postcss-custom-properties:\s*ignore\s+next\b/i.test(previous.text)); +} + +export { + isBlockIgnored, + isRuleIgnored, +}; diff --git a/plugins/postcss-custom-properties/src/transform-properties.ts b/plugins/postcss-custom-properties/src/transform-properties.ts new file mode 100644 index 000000000..03a0e8db7 --- /dev/null +++ b/plugins/postcss-custom-properties/src/transform-properties.ts @@ -0,0 +1,49 @@ +import valuesParser from 'postcss-value-parser'; +import transformValueAST from './transform-value-ast'; +import { isRuleIgnored } from './is-ignored'; + +// transform custom pseudo selectors with custom selectors +export default (decl, customProperties, opts) => { + if (isTransformableDecl(decl) && !isRuleIgnored(decl)) { + const originalValue = decl.value; + const valueAST = valuesParser(originalValue); + let value = transformValueAST(valueAST, customProperties); + + // protect against circular references + const valueSet = new Set(); + + while (value.includes('--') && value.toLowerCase().includes('var(') && !valueSet.has(value)) { + valueSet.add(value); + const parsedValueAST = valuesParser(value); + value = transformValueAST(parsedValueAST, customProperties); + } + + // conditionally transform values that have changed + if (value !== originalValue) { + if (opts.preserve) { + const beforeDecl = decl.cloneBefore({ value }); + + if (hasTrailingComment(beforeDecl)) { + beforeDecl.raws.value.value = beforeDecl.value.replace(trailingCommentRegExp, '$1'); + beforeDecl.raws.value.raw = beforeDecl.raws.value.value + beforeDecl.raws.value.raw.replace(trailingCommentRegExp, '$2'); + } + } else { + decl.value = value; + + if (hasTrailingComment(decl)) { + decl.raws.value.value = decl.value.replace(trailingCommentRegExp, '$1'); + decl.raws.value.raw = decl.raws.value.value + decl.raws.value.raw.replace(trailingCommentRegExp, '$2'); + } + } + } + } +}; + +// match custom properties + +// whether the declaration should be potentially transformed +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); +const trailingCommentRegExp = /^([\W\w]+)(\s*\/\*[\W\w]+?\*\/)$/; diff --git a/plugins/postcss-custom-properties/src/transform-value-ast.ts b/plugins/postcss-custom-properties/src/transform-value-ast.ts new file mode 100644 index 000000000..10d42b10b --- /dev/null +++ b/plugins/postcss-custom-properties/src/transform-value-ast.ts @@ -0,0 +1,50 @@ +export default function transformValueAST(root, customProperties) { + if (root.nodes && root.nodes.length) { + root.nodes.slice().forEach((child) => { + if (isVarFunction(child)) { + const [propertyNode, ...fallbacks] = child.nodes.filter((node) => node.type !== 'div'); + const { value: name } = propertyNode; + const index = root.nodes.indexOf(child); + + if (customProperties.has(name)) { + // Direct match of a custom property to a parsed value + const nodes = customProperties.get(name).nodes; + + // Re-transform nested properties without given one to avoid circular from keeping this forever + reTransformValueAST({ nodes }, customProperties, name); + + if (index > -1) { + root.nodes.splice(index, 1, ...nodes); + } + } else if (fallbacks.length) { + // No match, but fallback available + if (index > -1) { + root.nodes.splice(index, 1, ...child.nodes.slice(child.nodes.indexOf(fallbacks[0]))); + } + + transformValueAST(root, customProperties); + } + } else { + // Transform child nodes of current child + transformValueAST(child, customProperties); + } + }); + } + + return root.toString(); +} + +// reTransform the current ast without a custom property (to prevent recursion) +function reTransformValueAST(root, customProperties, withoutProperty) { + const nextCustomProperties = new Map(customProperties); + + nextCustomProperties.delete(withoutProperty); + + return transformValueAST(root, nextCustomProperties); +} + +// match var() functions +const varRegExp = /^var$/i; + +// whether the node is a var() function +const isVarFunction = node => node.type === 'function' && varRegExp.test(node.value) && Object(node.nodes).length > 0; diff --git a/plugins/postcss-custom-properties/test/_import.mjs b/plugins/postcss-custom-properties/test/_import.mjs index 98f876766..1992cbec1 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 a9a3a0897..270bdc3e8 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 92d7a27be..5f1823dc2 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 adbdb21f5..3b8fbb452 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 01b766559..270d6e387 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 000000000..837daa8c6 --- /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 000000000..1a8bce1bc --- /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 000000000..a5620ab45 --- /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); +} From 3c3024bca2e288ec1ac57e557df21b93325ea449 Mon Sep 17 00:00:00 2001 From: romainmenke Date: Sat, 3 Sep 2022 22:16:28 +0200 Subject: [PATCH 2/9] cleanup more tests --- .../test/import.ch87.array.expect.css | 15 --------------- .../test/import.ch87.expect.css | 15 --------------- .../import.ch87.incorrect-options.expect.css | 14 -------------- plugin-packs/postcss-preset-env/test/import.css | 16 ---------------- .../postcss-preset-env/test/import.expect.css | 15 --------------- 5 files changed, 75 deletions(-) delete mode 100644 plugin-packs/postcss-preset-env/test/import.ch87.array.expect.css delete mode 100644 plugin-packs/postcss-preset-env/test/import.ch87.expect.css delete mode 100644 plugin-packs/postcss-preset-env/test/import.ch87.incorrect-options.expect.css delete mode 100644 plugin-packs/postcss-preset-env/test/import.css delete mode 100644 plugin-packs/postcss-preset-env/test/import.expect.css diff --git a/plugin-packs/postcss-preset-env/test/import.ch87.array.expect.css b/plugin-packs/postcss-preset-env/test/import.ch87.array.expect.css deleted file mode 100644 index ded9c5eb8..000000000 --- a/plugin-packs/postcss-preset-env/test/import.ch87.array.expect.css +++ /dev/null @@ -1,15 +0,0 @@ -.test-custom-properties { - order: 1; - order: var(--order); -} - -@media (max-width: 40rem) { - .test-custom-media-queries { - order: 2; - } -} - -h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.test-custom-selectors,h5.test-custom-selectors,h6.test-custom-selectors { - order: 3; - } - diff --git a/plugin-packs/postcss-preset-env/test/import.ch87.expect.css b/plugin-packs/postcss-preset-env/test/import.ch87.expect.css deleted file mode 100644 index ded9c5eb8..000000000 --- a/plugin-packs/postcss-preset-env/test/import.ch87.expect.css +++ /dev/null @@ -1,15 +0,0 @@ -.test-custom-properties { - order: 1; - order: var(--order); -} - -@media (max-width: 40rem) { - .test-custom-media-queries { - order: 2; - } -} - -h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.test-custom-selectors,h5.test-custom-selectors,h6.test-custom-selectors { - order: 3; - } - diff --git a/plugin-packs/postcss-preset-env/test/import.ch87.incorrect-options.expect.css b/plugin-packs/postcss-preset-env/test/import.ch87.incorrect-options.expect.css deleted file mode 100644 index 855fbe258..000000000 --- a/plugin-packs/postcss-preset-env/test/import.ch87.incorrect-options.expect.css +++ /dev/null @@ -1,14 +0,0 @@ -.test-custom-properties { - order: var(--order); -} - -@media (--narrow-window) { - .test-custom-media-queries { - order: 2; - } -} - -.test-custom-selectors:--heading { - order: 3; - } - diff --git a/plugin-packs/postcss-preset-env/test/import.css b/plugin-packs/postcss-preset-env/test/import.css deleted file mode 100644 index e56269547..000000000 --- a/plugin-packs/postcss-preset-env/test/import.css +++ /dev/null @@ -1,16 +0,0 @@ -.test-custom-properties { - order: var(--order); -} - -@media (--narrow-window) { - .test-custom-media-queries { - order: 2; - } -} - -.test-custom-selectors { - &:--heading { - order: 3; - } -} - diff --git a/plugin-packs/postcss-preset-env/test/import.expect.css b/plugin-packs/postcss-preset-env/test/import.expect.css deleted file mode 100644 index ded9c5eb8..000000000 --- a/plugin-packs/postcss-preset-env/test/import.expect.css +++ /dev/null @@ -1,15 +0,0 @@ -.test-custom-properties { - order: 1; - order: var(--order); -} - -@media (max-width: 40rem) { - .test-custom-media-queries { - order: 2; - } -} - -h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.test-custom-selectors,h5.test-custom-selectors,h6.test-custom-selectors { - order: 3; - } - From 83eb74fae3c7741a383e8b44213636209d29464b Mon Sep 17 00:00:00 2001 From: romainmenke Date: Sat, 3 Sep 2022 22:22:29 +0200 Subject: [PATCH 3/9] cleanup --- plugin-packs/postcss-preset-env/.tape.mjs | 2 -- 1 file changed, 2 deletions(-) diff --git a/plugin-packs/postcss-preset-env/.tape.mjs b/plugin-packs/postcss-preset-env/.tape.mjs index 58cdc5575..02b429ea7 100644 --- a/plugin-packs/postcss-preset-env/.tape.mjs +++ b/plugin-packs/postcss-preset-env/.tape.mjs @@ -172,7 +172,6 @@ postcssTape(plugin)({ stage: 0, browsers: '> 0%' }, - warnings: 0, }, 'layers-basic:preserve:true': { message: 'supports layers usage with { preserve: true }', @@ -181,7 +180,6 @@ postcssTape(plugin)({ stage: 0, browsers: '> 0%' }, - warnings: 0, }, 'client-side-polyfills:stage-1': { message: 'stable client side polyfill behavior', From 6cc40f7bcc76566c2551ccdff790e1980c49cd64 Mon Sep 17 00:00:00 2001 From: romainmenke Date: Sat, 3 Sep 2022 22:27:10 +0200 Subject: [PATCH 4/9] docs and changelog --- plugin-packs/postcss-preset-env/CHANGELOG.md | 1 + plugin-packs/postcss-preset-env/README.md | 128 ------------------- 2 files changed, 1 insertion(+), 128 deletions(-) diff --git a/plugin-packs/postcss-preset-env/CHANGELOG.md b/plugin-packs/postcss-preset-env/CHANGELOG.md index 58b727061..59ccf7235 100644 --- a/plugin-packs/postcss-preset-env/CHANGELOG.md +++ b/plugin-packs/postcss-preset-env/CHANGELOG.md @@ -3,6 +3,7 @@ ### Unreleased (8.0.0-alpha.1) - Updated: Support for Node v14+ (major). +- Remove `postcss-env-function` (breaking). ### 8.0.0-alpha.0 (July 8, 2022) diff --git a/plugin-packs/postcss-preset-env/README.md b/plugin-packs/postcss-preset-env/README.md index 15c430b4e..51b8ae814 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. From ea0866648c8bcb92d3c87744d5967f46d9f10b3c Mon Sep 17 00:00:00 2001 From: romainmenke Date: Sat, 3 Sep 2022 23:00:29 +0200 Subject: [PATCH 5/9] cleanup --- .../lib/get-custom-properties-from-imports.ts | 158 ----------------- .../lib/get-custom-properties-from-root.ts | 63 ------- .../src/lib/is-ignored.ts | 20 --- .../src/lib/options.ts | 14 -- .../src/lib/transform-properties.ts | 49 ------ .../src/lib/transform-value-ast.ts | 50 ------ .../lib/write-custom-properties-to-exports.ts | 159 ------------------ 7 files changed, 513 deletions(-) delete mode 100644 plugins/postcss-custom-properties/src/lib/get-custom-properties-from-imports.ts delete mode 100644 plugins/postcss-custom-properties/src/lib/get-custom-properties-from-root.ts delete mode 100644 plugins/postcss-custom-properties/src/lib/is-ignored.ts delete mode 100644 plugins/postcss-custom-properties/src/lib/options.ts delete mode 100644 plugins/postcss-custom-properties/src/lib/transform-properties.ts delete mode 100644 plugins/postcss-custom-properties/src/lib/transform-value-ast.ts delete mode 100644 plugins/postcss-custom-properties/src/lib/write-custom-properties-to-exports.ts diff --git a/plugins/postcss-custom-properties/src/lib/get-custom-properties-from-imports.ts b/plugins/postcss-custom-properties/src/lib/get-custom-properties-from-imports.ts deleted file mode 100644 index 1296201a0..000000000 --- a/plugins/postcss-custom-properties/src/lib/get-custom-properties-from-imports.ts +++ /dev/null @@ -1,158 +0,0 @@ -import getCustomPropertiesFromRoot from './get-custom-properties-from-root'; -import path from 'path'; -import { pathToFileURL } from 'url'; -import type { ImportCustomProperties, ImportOptions } from './options'; -import valuesParser from 'postcss-value-parser'; -import { parse } from 'postcss'; -import { promises as fsp } from 'fs'; - -/* Get Custom Properties from CSS File -/* ========================================================================== */ - -async function getCustomPropertiesFromCSSFile(from) { - const css = await fsp.readFile(from); - const root = parse(css, { from : from.toString() }); - - return getCustomPropertiesFromRoot(root, { preserve: true }); -} - -/* Get Custom Properties from Object -/* ========================================================================== */ - -function getCustomPropertiesFromObject(object: ImportCustomProperties): Map { - const out: Map = new Map(); - - if ('customProperties' in object) { - for (const [name, value] of Object.entries(object.customProperties)) { - out.set(name, valuesParser(value.toString())); - } - } - - if ('custom-properties' in object) { - for (const [name, value] of Object.entries(object['custom-properties'])) { - out.set(name, valuesParser(value.toString())); - } - } - - return out; -} - -/* Get Custom Properties from JSON file -/* ========================================================================== */ - -async function getCustomPropertiesFromJSONFile(from): Promise