diff --git a/.changeset/minions-chips-cheat.md b/.changeset/minions-chips-cheat.md
new file mode 100644
index 000000000..771199c3a
--- /dev/null
+++ b/.changeset/minions-chips-cheat.md
@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/css': minor
+---
+
+Add support `@position-try` rules
diff --git a/fixtures/features/src/features.css.ts b/fixtures/features/src/features.css.ts
index 7d70a1a02..b2bbaa38f 100644
--- a/fixtures/features/src/features.css.ts
+++ b/fixtures/features/src/features.css.ts
@@ -60,3 +60,14 @@ export const styleVariantsCompositionInSelector = styleVariants({
globalStyle(`body ${styleVariantsCompositionInSelector.variant}`, {
fontSize: '24px',
});
+
+// Style with position-try
+export const styleWithPositionTry = style({
+ backgroundColor: 'black',
+ '@position-try': {
+ '--custom-left': {
+ width: '100px',
+ margin: '0 10px 0 0',
+ },
+ },
+});
diff --git a/fixtures/features/src/html.ts b/fixtures/features/src/html.ts
index 340b74a77..396f06269 100644
--- a/fixtures/features/src/html.ts
+++ b/fixtures/features/src/html.ts
@@ -1,5 +1,5 @@
-import * as styles from './features.css';
import testNodes from '../test-nodes.json';
+import * as styles from './features.css';
export default `
Merged style
@@ -9,6 +9,7 @@ export default `
Composition only
Style composition in selector
Style variants composition in selector
+ Style with @position-try
`;
// @ts-expect-error Vite env not defined
diff --git a/fixtures/features/test-nodes.json b/fixtures/features/test-nodes.json
index 41b30ff4a..b822b3453 100644
--- a/fixtures/features/test-nodes.json
+++ b/fixtures/features/test-nodes.json
@@ -5,5 +5,6 @@
"styleVariantsWithMappedComposition": "styleVariantsWithMappedComposition",
"compositionOnly": "compositionOnly",
"styleCompositionInSelector": "styleCompositionInSelector",
- "styleVariantsCompositionInSelector": "styleVariantsCompositionInSelector"
+ "styleVariantsCompositionInSelector": "styleVariantsCompositionInSelector",
+ "styleWithPositionTry": "styleWithPositionTry"
}
diff --git a/fixtures/next-app-router/tsconfig.json b/fixtures/next-app-router/tsconfig.json
index d751428c7..fa462c208 100644
--- a/fixtures/next-app-router/tsconfig.json
+++ b/fixtures/next-app-router/tsconfig.json
@@ -8,7 +8,8 @@
"name": "next"
}
],
- "strictNullChecks": true
+ "strictNullChecks": true,
+ "module": "esnext"
},
"include": [
"next-env.d.ts",
@@ -17,5 +18,7 @@
".next/types/**/*.ts",
"dist/types/**/*.ts"
],
- "exclude": ["node_modules"]
+ "exclude": [
+ "node_modules"
+ ]
}
diff --git a/fixtures/next-pages-router/tsconfig.json b/fixtures/next-pages-router/tsconfig.json
index f295fe6d3..26386dc26 100644
--- a/fixtures/next-pages-router/tsconfig.json
+++ b/fixtures/next-pages-router/tsconfig.json
@@ -3,8 +3,16 @@
"compilerOptions": {
"forceConsistentCasingInFileNames": true,
"jsx": "preserve",
- "strictNullChecks": true
+ "strictNullChecks": true,
+ "module": "esnext",
+ "moduleResolution": "node"
},
- "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
- "exclude": ["node_modules"]
+ "include": [
+ "next-env.d.ts",
+ "**/*.ts",
+ "**/*.tsx"
+ ],
+ "exclude": [
+ "node_modules"
+ ]
}
diff --git a/packages/css/src/transformCss.test.ts b/packages/css/src/transformCss.test.ts
index bd03a49b3..f6adeb772 100644
--- a/packages/css/src/transformCss.test.ts
+++ b/packages/css/src/transformCss.test.ts
@@ -1,7 +1,7 @@
-import { setFileScope, endFileScope } from './fileScope';
-import { createVar } from './vars';
-import { transformCss } from './transformCss';
+import { endFileScope, setFileScope } from './fileScope';
import { style } from './style';
+import { transformCss } from './transformCss';
+import { createVar } from './vars';
setFileScope('test');
@@ -2500,6 +2500,285 @@ describe('transformCss', () => {
}
`);
});
+
+ it('should handle @position-try declaration', () => {
+ expect(
+ transformCss({
+ composedClassLists: [],
+ localClassNames: ['testClass'],
+ cssObjs: [
+ {
+ type: 'local',
+ selector: 'testClass',
+ rule: {
+ display: 'flex',
+ '@position-try': {
+ '--custom-left': {
+ width: '100px',
+ margin: '0 10px 0 0',
+ },
+ },
+ },
+ },
+ ],
+ }).join('\n'),
+ ).toMatchInlineSnapshot(`
+ .testClass {
+ display: flex;
+ }
+ @position-try --custom-left {
+ .testClass {
+ width: 100px;
+ margin: 0 10px 0 0;
+ }
+ }
+ `);
+ });
+
+ it('should multiple custom position inside @position-try declaration', () => {
+ expect(
+ transformCss({
+ composedClassLists: [],
+ localClassNames: ['testClass'],
+ cssObjs: [
+ {
+ type: 'local',
+ selector: 'testClass',
+ rule: {
+ display: 'flex',
+ '@position-try': {
+ '--custom-left': {
+ width: '100px',
+ margin: '0 10px 0 0',
+ },
+ '--custom-right': {
+ width: '100px',
+ margin: '0 10px 0 0',
+ },
+ },
+ },
+ },
+ ],
+ }).join('\n'),
+ ).toMatchInlineSnapshot(`
+ .testClass {
+ display: flex;
+ }
+ @position-try --custom-left {
+ .testClass {
+ width: 100px;
+ margin: 0 10px 0 0;
+ }
+ }
+ @position-try --custom-right {
+ .testClass {
+ width: 100px;
+ margin: 0 10px 0 0;
+ }
+ }
+ `);
+ });
+
+ it('should handle @position-try inside media queries', () => {
+ expect(
+ transformCss({
+ composedClassLists: [],
+ localClassNames: ['testClass'],
+ cssObjs: [
+ {
+ type: 'local',
+ selector: 'testClass',
+ rule: {
+ display: 'flex',
+ '@media': {
+ 'screen and (min-width: 700px)': {
+ '@position-try': {
+ '--custom-left': {
+ width: '100px',
+ margin: '0 10px 0 0',
+ },
+ },
+ },
+ },
+ },
+ },
+ ],
+ }).join('\n'),
+ ).toMatchInlineSnapshot(`
+ .testClass {
+ display: flex;
+ }
+ @media screen and (min-width: 700px) {
+ @position-try --custom-left {
+ .testClass {
+ width: 100px;
+ margin: 0 10px 0 0;
+ }
+ }
+ }
+ `);
+ });
+
+ it('should handle @position-try inside container queries', () => {
+ expect(
+ transformCss({
+ composedClassLists: [],
+ localClassNames: ['testClass'],
+ cssObjs: [
+ {
+ type: 'local',
+ selector: 'testClass',
+ rule: {
+ display: 'flex',
+ '@container': {
+ 'sidebar (min-width: 700px)': {
+ '@position-try': {
+ '--custom-left': {
+ width: '100px',
+ margin: '0 10px 0 0',
+ },
+ },
+ },
+ },
+ },
+ },
+ ],
+ }).join('\n'),
+ ).toMatchInlineSnapshot(`
+ .testClass {
+ display: flex;
+ }
+ @container sidebar (min-width: 700px) {
+ @position-try --custom-left {
+ .testClass {
+ width: 100px;
+ margin: 0 10px 0 0;
+ }
+ }
+ }
+ `);
+ });
+
+ it('should handle @position-try inside a layer', () => {
+ expect(
+ transformCss({
+ composedClassLists: [],
+ localClassNames: ['testClass'],
+ cssObjs: [
+ {
+ type: 'local',
+ selector: 'testClass',
+ rule: {
+ '@layer': {
+ 'mock-layer': {
+ '@position-try': {
+ '--custom-left': {
+ width: '100px',
+ margin: '0 10px 0 0',
+ },
+ },
+ },
+ },
+ },
+ },
+ ],
+ }).join('\n'),
+ ).toMatchInlineSnapshot(`
+ @layer mock-layer;
+ @layer mock-layer {
+ @position-try --custom-left {
+ .testClass {
+ width: 100px;
+ margin: 0 10px 0 0;
+ }
+ }
+ }
+ `);
+ });
+
+ it('should throw an error when not using a type in @position-try scope', () => {
+ expect(() =>
+ transformCss({
+ composedClassLists: [],
+ localClassNames: ['testClass'],
+ cssObjs: [
+ {
+ type: 'local',
+ selector: 'testClass',
+ rule: {
+ display: 'flex',
+ '@position-try': {
+ // @ts-expect-error This test is to cover the error for non-allowed properties inside @position-try scope
+ invalidName: {
+ backgroundColor: 'blue',
+ },
+ },
+ },
+ },
+ ],
+ }),
+ ).toThrowErrorMatchingInlineSnapshot(
+ 'Invalid @position-try name: "invalidName". Position names must follow the type (--custom-name).',
+ );
+ });
+
+ it('should throw an error when using a non allowed property inside @position-try scope', () => {
+ expect(() =>
+ transformCss({
+ composedClassLists: [],
+ localClassNames: ['testClass'],
+ cssObjs: [
+ {
+ type: 'local',
+ selector: 'testClass',
+ rule: {
+ display: 'flex',
+ '@position-try': {
+ '--custom-left': {
+ // @ts-expect-error This test is to cover the error for non-allowed properties inside @position-try scope
+ backgroundColor: 'blue',
+ },
+ },
+ },
+ },
+ ],
+ }),
+ ).toThrowErrorMatchingInlineSnapshot(
+ 'Invalid properties in @position-try --custom-left rule: backgroundColor. Only inset, margin, sizing, self-alignment, position-anchor, and position-area properties are allowed.',
+ );
+ });
+
+ it('should throw an error when a at-rule is use inside @position-try scope', () => {
+ expect(() =>
+ transformCss({
+ composedClassLists: [],
+ localClassNames: ['testClass'],
+ cssObjs: [
+ {
+ type: 'local',
+ selector: 'testClass',
+ rule: {
+ display: 'flex',
+ '@position-try': {
+ '--custom-left': {
+ width: '100px',
+ margin: '0 10px 0 0',
+ // @ts-expect-error This test is to cover the error when a at-rule is used inside @position-try scope
+ '@media': {
+ 'screen and (min-width: 700px)': {
+ display: 'grid',
+ },
+ },
+ },
+ },
+ },
+ },
+ ],
+ }),
+ ).toThrowErrorMatchingInlineSnapshot(
+ 'Nested at-rules (e.g. "@media") are not allowed inside @position-try block.',
+ );
+ });
});
endFileScope();
diff --git a/packages/css/src/transformCss.ts b/packages/css/src/transformCss.ts
index 51cb8725c..1bdb18c06 100644
--- a/packages/css/src/transformCss.ts
+++ b/packages/css/src/transformCss.ts
@@ -2,25 +2,25 @@ import { getVarName } from '@vanilla-extract/private';
import cssesc from 'cssesc';
import AhoCorasick from 'modern-ahocorasick';
+import { markCompositionUsed } from './adapter';
+import { ConditionalRuleset } from './conditionalRulesets';
+import { simplePseudoLookup, simplePseudos } from './simplePseudos';
import type {
CSS,
- CSSStyleBlock,
CSSKeyframesBlock,
CSSPropertiesWithVars,
- StyleRule,
- StyleWithSelectors,
- GlobalFontFaceRule,
+ CSSPropertyBlock,
CSSSelectorBlock,
+ CSSStyleBlock,
Composition,
+ GlobalFontFaceRule,
+ StyleRule,
+ StyleWithSelectors,
WithQueries,
- CSSPropertyBlock,
} from './types';
-import { markCompositionUsed } from './adapter';
-import { forEach, omit, mapKeys } from './utils';
-import { validateSelector } from './validateSelector';
-import { ConditionalRuleset } from './conditionalRulesets';
-import { simplePseudos, simplePseudoLookup } from './simplePseudos';
+import { forEach, mapKeys, omit } from './utils';
import { validateMediaQuery } from './validateMediaQuery';
+import { validateSelector } from './validateSelector';
const DECLARATION = '__DECLARATION';
@@ -74,6 +74,35 @@ const UNITLESS: Record = {
strokeWidth: true,
};
+// List of properties allowed in @position-try according to the spec
+const POSITION_TRY_PROPERTIES = [
+ // Inset properties
+ 'top',
+ 'right',
+ 'bottom',
+ 'left',
+ 'inset',
+ // Margin properties
+ 'margin',
+ 'marginTop',
+ 'marginRight',
+ 'marginBottom',
+ 'marginLeft',
+ // Sizing properties
+ 'width',
+ 'height',
+ 'minWidth',
+ 'minHeight',
+ 'maxWidth',
+ 'maxHeight',
+ // Self-alignment properties
+ 'alignSelf',
+ 'justifySelf',
+ // Anchor positioning properties
+ 'positionAnchor',
+ 'positionArea',
+];
+
function dashify(str: string) {
return str
.replace(/([A-Z])/g, '-$1')
@@ -101,6 +130,7 @@ const specialKeys = [
'@media',
'@supports',
'@container',
+ '@position-try',
'selectors',
];
@@ -188,6 +218,7 @@ class Stylesheet {
this.transformMedia(root, root.rule['@media']);
this.transformSupports(root, root.rule['@supports']);
this.transformContainer(root, root.rule['@container']);
+ this.transformPositionTry(root, root.rule['@position-try']);
this.transformSimplePseudos(root, root.rule);
this.transformSelectors(root, root.rule);
@@ -408,6 +439,11 @@ class Stylesheet {
selectorRule['@container'],
conditions,
);
+ this.transformPositionTry(
+ root,
+ selectorRule!['@position-try'],
+ conditions,
+ );
});
}
@@ -445,6 +481,11 @@ class Stylesheet {
this.transformLayer(root, mediaRule!['@layer'], conditions);
this.transformSupports(root, mediaRule!['@supports'], conditions);
this.transformContainer(root, mediaRule!['@container'], conditions);
+ this.transformPositionTry(
+ root,
+ mediaRule!['@position-try'],
+ conditions,
+ );
}
}
}
@@ -481,6 +522,11 @@ class Stylesheet {
this.transformLayer(root, containerRule!['@layer'], conditions);
this.transformSupports(root, containerRule!['@supports'], conditions);
this.transformMedia(root, containerRule!['@media'], conditions);
+ this.transformPositionTry(
+ root,
+ containerRule!['@position-try'],
+ conditions,
+ );
});
}
}
@@ -516,6 +562,11 @@ class Stylesheet {
this.transformMedia(root, layerRule!['@media'], conditions);
this.transformSupports(root, layerRule!['@supports'], conditions);
this.transformContainer(root, layerRule!['@container'], conditions);
+ this.transformPositionTry(
+ root,
+ layerRule!['@position-try'],
+ conditions,
+ );
});
}
}
@@ -550,6 +601,11 @@ class Stylesheet {
this.transformLayer(root, supportsRule!['@layer'], conditions);
this.transformMedia(root, supportsRule!['@media'], conditions);
this.transformContainer(root, supportsRule!['@container'], conditions);
+ this.transformPositionTry(
+ root,
+ supportsRule!['@position-try'],
+ conditions,
+ );
});
}
}
@@ -589,6 +645,70 @@ class Stylesheet {
}
}
+ transformPositionTry(
+ root: CSSStyleBlock | CSSSelectorBlock,
+ rules: WithQueries['@position-try'],
+ parentConditions: Array = [],
+ ) {
+ if (rules) {
+ this.currConditionalRuleset?.addConditionPrecedence(
+ parentConditions,
+ Object.keys(rules).map((name) => `@position-try ${name}`),
+ );
+
+ forEach(rules, (positionRule, name) => {
+ const nestedAtRuleKey = Object.keys(positionRule).find((key) =>
+ key.startsWith('@'),
+ );
+ if (nestedAtRuleKey) {
+ throw new Error(
+ `Nested at-rules (e.g. "${nestedAtRuleKey}") are not allowed inside @position-try block.`,
+ );
+ }
+
+ // Check if position name starts with double dash
+ if (!name.startsWith('--')) {
+ throw new Error(
+ `Invalid @position-try name: "${name}". Position names must follow the type (--custom-name).`,
+ );
+ }
+
+ // Check for invalid properties inside the custom position
+ const ruleProps = Object.keys(positionRule);
+ const invalidProps = ruleProps.filter(
+ (prop) =>
+ !POSITION_TRY_PROPERTIES.includes(prop) &&
+ !specialKeys.includes(prop) &&
+ !prop.startsWith(':'),
+ );
+
+ if (invalidProps.length > 0) {
+ throw new Error(
+ `Invalid properties in @position-try ${name} rule: ${invalidProps.join(
+ ', ',
+ )}. ` +
+ `Only inset, margin, sizing, self-alignment, position-anchor, and position-area properties are allowed.`,
+ );
+ }
+
+ const conditions = [...parentConditions, `@position-try ${name}`];
+
+ this.addConditionalRule(
+ {
+ selector: root.selector,
+ rule: omit(positionRule, specialKeys),
+ },
+ conditions,
+ );
+
+ if (root.type === 'local') {
+ this.transformSimplePseudos(root, positionRule, conditions);
+ this.transformSelectors(root, positionRule, conditions);
+ }
+ });
+ }
+ }
+
toCss() {
const css: Array = [];
diff --git a/packages/css/src/types.ts b/packages/css/src/types.ts
index 36cf21b89..88749b7a2 100644
--- a/packages/css/src/types.ts
+++ b/packages/css/src/types.ts
@@ -1,5 +1,5 @@
import type { CSSVarFunction, MapLeafNodes } from '@vanilla-extract/private';
-import type { AtRule, Properties } from 'csstype';
+import type { AtRule, Globals, Properties } from 'csstype';
import type { SimplePseudos } from './simplePseudos';
@@ -16,8 +16,54 @@ interface ContainerProperties {
containerName?: string;
}
+interface AnchorProperties {
+ positionTryFallbacks?: 'none' | Globals | (string & {});
+ positionTry?: 'none' | Globals | (string & {});
+ positionTryOrder?:
+ | 'normal'
+ | 'most-height'
+ | 'most-width'
+ | 'most-block-sise'
+ | 'most-inline-size'
+ | Globals
+ | (string & {});
+ positionVisibility?: 'always' | 'anchors-visible' | 'no-overflow' | Globals;
+}
+
+// Properties allowed in @position-try rule according to the CSS Anchor Positioning spec
+// https://www.w3.org/TR/css-anchor-position-1/#accepted-position-try-properties
+export type PositionTryProperties = Pick<
+ CSSProperties,
+ // Inset properties
+ | 'top'
+ | 'right'
+ | 'bottom'
+ | 'left'
+ | 'inset'
+ // Margin properties
+ | 'margin'
+ | 'marginTop'
+ | 'marginRight'
+ | 'marginBottom'
+ | 'marginLeft'
+ // Sizing properties
+ | 'width'
+ | 'height'
+ | 'minWidth'
+ | 'minHeight'
+ | 'maxWidth'
+ | 'maxHeight'
+ // Self-alignment properties
+ | 'alignSelf'
+ | 'justifySelf'
+ // Anchor positioning properties
+ // | 'positionAnchor'
+ // | 'positionArea'
+>;
+
type CSSTypeProperties = Properties &
- ContainerProperties;
+ ContainerProperties &
+ AnchorProperties;
export type CSSProperties = {
[Property in keyof CSSTypeProperties]:
@@ -47,17 +93,24 @@ type Query = {
[query: string]: Omit;
};
};
+type PositionTryQuery = {
+ '@position-try'?: {
+ [positionName: `--${string}`]: PositionTryProperties;
+ };
+};
export type MediaQueries = Query<'@media', StyleType>;
export type FeatureQueries = Query<'@supports', StyleType>;
export type ContainerQueries = Query<'@container', StyleType>;
export type Layers = Query<'@layer', StyleType>;
+export type PositionTryQueries = PositionTryQuery;
interface AllQueries
extends MediaQueries>,
FeatureQueries>,
ContainerQueries>,
- Layers> {}
+ Layers>,
+ PositionTryQueries {}
export type WithQueries = StyleType & AllQueries;
diff --git a/tests/e2e/features.playwright.ts-snapshots/features-esbuild--development.css b/tests/e2e/features.playwright.ts-snapshots/features-esbuild--development.css
index 80b29198c..fc1b9b641 100644
--- a/tests/e2e/features.playwright.ts-snapshots/features-esbuild--development.css
+++ b/tests/e2e/features.playwright.ts-snapshots/features-esbuild--development.css
@@ -41,6 +41,9 @@ body .features_styleCompositionInSelector__1o6ek507 {
body .features_styleVariantsCompositionInSelector_variant__1o6ek50a {
font-size: 24px;
}
+.features_styleWithPositionTry__1o6ek50b {
+ background-color: black;
+}
@media screen and (min-width: 700px) {
.features_mergedStyle__1o6ek500 {
color: plum;
@@ -49,3 +52,9 @@ body .features_styleVariantsCompositionInSelector_variant__1o6ek50a {
content: "Above 700px";
}
}
+@position-try --custom-left {
+ .features_styleWithPositionTry__1o6ek50b {
+ width: 100px;
+ margin: 0 10px 0 0;
+ }
+}
diff --git a/tests/e2e/features.playwright.ts-snapshots/features-esbuild--production.css b/tests/e2e/features.playwright.ts-snapshots/features-esbuild--production.css
index eab69d9ad..371dcffdf 100644
--- a/tests/e2e/features.playwright.ts-snapshots/features-esbuild--production.css
+++ b/tests/e2e/features.playwright.ts-snapshots/features-esbuild--production.css
@@ -41,6 +41,9 @@ body ._1o6ek507 {
body ._1o6ek50a {
font-size: 24px;
}
+._1o6ek50b {
+ background-color: black;
+}
@media screen and (min-width: 700px) {
._1o6ek500 {
color: plum;
@@ -49,3 +52,9 @@ body ._1o6ek50a {
content: "Above 700px";
}
}
+@position-try --custom-left {
+ ._1o6ek50b {
+ width: 100px;
+ margin: 0 10px 0 0;
+ }
+}
diff --git a/tests/e2e/features.playwright.ts-snapshots/features-esbuild-next--development.css b/tests/e2e/features.playwright.ts-snapshots/features-esbuild-next--development.css
index 80b29198c..fc1b9b641 100644
--- a/tests/e2e/features.playwright.ts-snapshots/features-esbuild-next--development.css
+++ b/tests/e2e/features.playwright.ts-snapshots/features-esbuild-next--development.css
@@ -41,6 +41,9 @@ body .features_styleCompositionInSelector__1o6ek507 {
body .features_styleVariantsCompositionInSelector_variant__1o6ek50a {
font-size: 24px;
}
+.features_styleWithPositionTry__1o6ek50b {
+ background-color: black;
+}
@media screen and (min-width: 700px) {
.features_mergedStyle__1o6ek500 {
color: plum;
@@ -49,3 +52,9 @@ body .features_styleVariantsCompositionInSelector_variant__1o6ek50a {
content: "Above 700px";
}
}
+@position-try --custom-left {
+ .features_styleWithPositionTry__1o6ek50b {
+ width: 100px;
+ margin: 0 10px 0 0;
+ }
+}
diff --git a/tests/e2e/features.playwright.ts-snapshots/features-esbuild-next--production.css b/tests/e2e/features.playwright.ts-snapshots/features-esbuild-next--production.css
index eab69d9ad..371dcffdf 100644
--- a/tests/e2e/features.playwright.ts-snapshots/features-esbuild-next--production.css
+++ b/tests/e2e/features.playwright.ts-snapshots/features-esbuild-next--production.css
@@ -41,6 +41,9 @@ body ._1o6ek507 {
body ._1o6ek50a {
font-size: 24px;
}
+._1o6ek50b {
+ background-color: black;
+}
@media screen and (min-width: 700px) {
._1o6ek500 {
color: plum;
@@ -49,3 +52,9 @@ body ._1o6ek50a {
content: "Above 700px";
}
}
+@position-try --custom-left {
+ ._1o6ek50b {
+ width: 100px;
+ margin: 0 10px 0 0;
+ }
+}
diff --git a/tests/e2e/features.playwright.ts-snapshots/features-mini-css-extract--development.css b/tests/e2e/features.playwright.ts-snapshots/features-mini-css-extract--development.css
index 93a2f8db5..bb8803758 100644
--- a/tests/e2e/features.playwright.ts-snapshots/features-mini-css-extract--development.css
+++ b/tests/e2e/features.playwright.ts-snapshots/features-mini-css-extract--development.css
@@ -41,6 +41,9 @@ body .features_styleCompositionInSelector__87f2ru7 {
body .features_styleVariantsCompositionInSelector_variant__87f2rua {
font-size: 24px;
}
+.features_styleWithPositionTry__87f2rub {
+ background-color: black;
+}
@media screen and (min-width: 700px) {
.features_mergedStyle__87f2ru0 {
color: plum;
@@ -49,3 +52,9 @@ body .features_styleVariantsCompositionInSelector_variant__87f2rua {
content: "Above 700px";
}
}
+@position-try --custom-left {
+ .features_styleWithPositionTry__87f2rub {
+ width: 100px;
+ margin: 0 10px 0 0;
+ }
+}
diff --git a/tests/e2e/features.playwright.ts-snapshots/features-mini-css-extract--production.css b/tests/e2e/features.playwright.ts-snapshots/features-mini-css-extract--production.css
index 1a86f8112..96a85c223 100644
--- a/tests/e2e/features.playwright.ts-snapshots/features-mini-css-extract--production.css
+++ b/tests/e2e/features.playwright.ts-snapshots/features-mini-css-extract--production.css
@@ -41,6 +41,9 @@ body ._87f2ru7 {
body ._87f2rua {
font-size: 24px;
}
+._87f2rub {
+ background-color: black;
+}
@media screen and (min-width: 700px) {
._87f2ru0 {
color: plum;
@@ -49,3 +52,9 @@ body ._87f2rua {
content: "Above 700px";
}
}
+@position-try --custom-left {
+ ._87f2rub {
+ width: 100px;
+ margin: 0 10px 0 0;
+ }
+}
diff --git a/tests/e2e/features.playwright.ts-snapshots/features-parcel--development.css b/tests/e2e/features.playwright.ts-snapshots/features-parcel--development.css
index d5b1e089e..e94c8032e 100644
--- a/tests/e2e/features.playwright.ts-snapshots/features-parcel--development.css
+++ b/tests/e2e/features.playwright.ts-snapshots/features-parcel--development.css
@@ -41,7 +41,10 @@ body .features_styleCompositionInSelector__87f2ru7 {
body .features_styleVariantsCompositionInSelector_variant__87f2rua {
font-size: 24px;
}
-@media screen and (min-width: 700px) {
+.features_styleWithPositionTry__87f2rub {
+ background-color: #000;
+}
+@media screen and (width >= 700px) {
.features_mergedStyle__87f2ru0 {
color: plum;
}
@@ -49,3 +52,9 @@ body .features_styleVariantsCompositionInSelector_variant__87f2rua {
content: "Above 700px";
}
}
+@position-try --custom-left {
+ . features_styleWithPositionTry__87f2rub {
+ width: 100px;
+ margin: 0 10px 0 0;
+ }
+}
diff --git a/tests/e2e/features.playwright.ts-snapshots/features-parcel--production.css b/tests/e2e/features.playwright.ts-snapshots/features-parcel--production.css
index 8a9bc08b9..20fee2c4b 100644
--- a/tests/e2e/features.playwright.ts-snapshots/features-parcel--production.css
+++ b/tests/e2e/features.playwright.ts-snapshots/features-parcel--production.css
@@ -41,7 +41,10 @@ body ._87f2ru7 {
body ._87f2rua {
font-size: 24px;
}
-@media screen and (min-width: 700px) {
+._87f2rub {
+ background-color: #000;
+}
+@media screen and (width >= 700px) {
._87f2ru0 {
color: plum;
}
@@ -49,3 +52,9 @@ body ._87f2rua {
content: "Above 700px";
}
}
+@position-try --custom-left {
+ . _87f2rub {
+ width: 100px;
+ margin: 0 10px 0 0;
+ }
+}
diff --git a/tests/e2e/features.playwright.ts-snapshots/features-vite--production.css b/tests/e2e/features.playwright.ts-snapshots/features-vite--production.css
index eab69d9ad..371dcffdf 100644
--- a/tests/e2e/features.playwright.ts-snapshots/features-vite--production.css
+++ b/tests/e2e/features.playwright.ts-snapshots/features-vite--production.css
@@ -41,6 +41,9 @@ body ._1o6ek507 {
body ._1o6ek50a {
font-size: 24px;
}
+._1o6ek50b {
+ background-color: black;
+}
@media screen and (min-width: 700px) {
._1o6ek500 {
color: plum;
@@ -49,3 +52,9 @@ body ._1o6ek50a {
content: "Above 700px";
}
}
+@position-try --custom-left {
+ ._1o6ek50b {
+ width: 100px;
+ margin: 0 10px 0 0;
+ }
+}
diff --git a/tests/e2e/layers.playwright.ts-snapshots/layers-parcel--development.css b/tests/e2e/layers.playwright.ts-snapshots/layers-parcel--development.css
index b29a6ada9..e72f3dbba 100644
--- a/tests/e2e/layers.playwright.ts-snapshots/layers-parcel--development.css
+++ b/tests/e2e/layers.playwright.ts-snapshots/layers-parcel--development.css
@@ -1,10 +1,4 @@
@layer lib;
-@layer lib.styles_base__18onbx40;
-@media screen and (min-width: 600px) {
- @layer typography;
-}
-@layer lib.styles_utilities__18onbx42;
-@layer typography;
@layer lib.styles_base__18onbx40 {
a {
color: red;
@@ -14,7 +8,16 @@
color: #00f;
}
}
-@media screen and (min-width: 600px) {
+@media screen and (width >= 600px) {
+ @layer typography;
+}
+@layer lib.styles_utilities__18onbx42 {
+ .styles_pink__18onbx43 {
+ color: #ff69b4;
+ }
+}
+@layer typography;
+@media screen and (width >= 600px) {
@layer typography {
a {
color: green;
@@ -22,8 +25,3 @@
}
}
}
-@layer lib.styles_utilities__18onbx42 {
- .styles_pink__18onbx43 {
- color: #ff69b4;
- }
-}
diff --git a/tests/e2e/layers.playwright.ts-snapshots/layers-parcel--production.css b/tests/e2e/layers.playwright.ts-snapshots/layers-parcel--production.css
index 6ea8ef78a..32cc57882 100644
--- a/tests/e2e/layers.playwright.ts-snapshots/layers-parcel--production.css
+++ b/tests/e2e/layers.playwright.ts-snapshots/layers-parcel--production.css
@@ -1,10 +1,4 @@
@layer lib;
-@layer lib._18onbx40;
-@media screen and (min-width: 600px) {
- @layer typography;
-}
-@layer lib._18onbx42;
-@layer typography;
@layer lib._18onbx40 {
a {
color: red;
@@ -14,7 +8,16 @@
color: #00f;
}
}
-@media screen and (min-width: 600px) {
+@media screen and (width >= 600px) {
+ @layer typography;
+}
+@layer lib._18onbx42 {
+ ._18onbx43 {
+ color: #ff69b4;
+ }
+}
+@layer typography;
+@media screen and (width >= 600px) {
@layer typography {
a {
color: green;
@@ -22,8 +25,3 @@
}
}
}
-@layer lib._18onbx42 {
- ._18onbx43 {
- color: #ff69b4;
- }
-}
diff --git a/tests/e2e/low-level.playwright.ts-snapshots/low-level-parcel--development.css b/tests/e2e/low-level.playwright.ts-snapshots/low-level-parcel--development.css
index 216ae3144..6b923d80d 100644
--- a/tests/e2e/low-level.playwright.ts-snapshots/low-level-parcel--development.css
+++ b/tests/e2e/low-level.playwright.ts-snapshots/low-level-parcel--development.css
@@ -7,8 +7,8 @@
background-color: var(--color__cj5d030);
padding: 20px;
}
-@media screen and (min-width: 200px) {
- @container styles_my-container__cj5d031 (min-width: 400px) {
+@media screen and (width >= 200px) {
+ @container styles_my-container__cj5d031 (width >= 400px) {
.styles_block__cj5d033 {
color: #fff;
}
diff --git a/tests/e2e/low-level.playwright.ts-snapshots/low-level-parcel--production.css b/tests/e2e/low-level.playwright.ts-snapshots/low-level-parcel--production.css
index 6dfce362d..2edaef644 100644
--- a/tests/e2e/low-level.playwright.ts-snapshots/low-level-parcel--production.css
+++ b/tests/e2e/low-level.playwright.ts-snapshots/low-level-parcel--production.css
@@ -7,8 +7,8 @@
background-color: var(--cj5d030);
padding: 20px;
}
-@media screen and (min-width: 200px) {
- @container cj5d031 (min-width: 400px) {
+@media screen and (width >= 200px) {
+ @container cj5d031 (width >= 400px) {
.cj5d033 {
color: #fff;
}
diff --git a/tests/e2e/recipes.playwright.ts-snapshots/recipes-parcel--development.css b/tests/e2e/recipes.playwright.ts-snapshots/recipes-parcel--development.css
index 4cfc1c6f7..edbc408c7 100644
--- a/tests/e2e/recipes.playwright.ts-snapshots/recipes-parcel--development.css
+++ b/tests/e2e/recipes.playwright.ts-snapshots/recipes-parcel--development.css
@@ -40,7 +40,7 @@
.styles_stack_space_medium__spi1frd {
gap: 20px;
}
-@media only screen and (min-width: 600px) {
+@media only screen and (width >= 600px) {
.styles_button_compound_0__spi1frb {
border: 2px solid green;
}
diff --git a/tests/e2e/recipes.playwright.ts-snapshots/recipes-parcel--production.css b/tests/e2e/recipes.playwright.ts-snapshots/recipes-parcel--production.css
index 96985e423..0dacf35b4 100644
--- a/tests/e2e/recipes.playwright.ts-snapshots/recipes-parcel--production.css
+++ b/tests/e2e/recipes.playwright.ts-snapshots/recipes-parcel--production.css
@@ -40,7 +40,7 @@
.spi1frd {
gap: 20px;
}
-@media only screen and (min-width: 600px) {
+@media only screen and (width >= 600px) {
.spi1frb {
border: 2px solid green;
}
diff --git a/tests/e2e/snapshots/features-Desktop---Chromium-darwin.png b/tests/e2e/snapshots/features-Desktop---Chromium-darwin.png
index 8db457d4e..d1a555d06 100644
Binary files a/tests/e2e/snapshots/features-Desktop---Chromium-darwin.png and b/tests/e2e/snapshots/features-Desktop---Chromium-darwin.png differ
diff --git a/tests/e2e/snapshots/features-Mobile---Chromium-darwin.png b/tests/e2e/snapshots/features-Mobile---Chromium-darwin.png
index d2e0ec85b..46fd413a6 100644
Binary files a/tests/e2e/snapshots/features-Mobile---Chromium-darwin.png and b/tests/e2e/snapshots/features-Mobile---Chromium-darwin.png differ
diff --git a/tests/e2e/sprinkles.playwright.ts-snapshots/sprinkles-parcel--development.css b/tests/e2e/sprinkles.playwright.ts-snapshots/sprinkles-parcel--development.css
index 13ec9ccd3..809b97e5c 100644
--- a/tests/e2e/sprinkles.playwright.ts-snapshots/sprinkles-parcel--development.css
+++ b/tests/e2e/sprinkles.playwright.ts-snapshots/sprinkles-parcel--development.css
@@ -1,88 +1,3 @@
-@layer responsive-layer-name;
-@layer unconditional-layer-name;
-.styles_container__3nw5tz3 {
- container: styles_containerName__3nw5tz2/size;
-}
-.styles_display_flex_mobile__3nw5tz4 {
- display: flex;
-}
-.styles_display_none_mobile__3nw5tz8 {
- display: none;
-}
-.styles_display_block_mobile__3nw5tzc {
- display: block;
-}
-.styles_paddingTop_small_mobile__3nw5tzg {
- padding-top: 10px;
-}
-.styles_paddingTop_medium_mobile__3nw5tzk {
- padding-top: 20px;
-}
-.styles_color_red__3nw5tz18 {
- --textAlpha__3nw5tz1: 1;
- color: rgba(255, 0, 0, var(--textAlpha__3nw5tz1));
-}
-body {
- margin: 0;
-}
-body .styles__3nw5tz1c {
- background: red;
-}
-@media screen and (min-width: 768px) {
- @container styles_containerName__3nw5tz2 (min-width: 768px) {
- .styles_display_flex_tablet__3nw5tz5 {
- display: flex;
- }
- .styles_display_none_tablet__3nw5tz9 {
- display: none;
- }
- .styles_display_block_tablet__3nw5tzd {
- display: block;
- }
- .styles_paddingTop_small_tablet__3nw5tzh {
- padding-top: 10px;
- }
- .styles_paddingTop_medium_tablet__3nw5tzl {
- padding-top: 20px;
- }
- }
-}
-@media screen and (min-width: 1024px) {
- @container styles_containerName__3nw5tz2 (min-width: 1024px) {
- .styles_display_flex_desktop__3nw5tz6 {
- display: flex;
- }
- .styles_display_none_desktop__3nw5tza {
- display: none;
- }
- .styles_display_block_desktop__3nw5tze {
- display: block;
- }
- .styles_paddingTop_small_desktop__3nw5tzi {
- padding-top: 10px;
- }
- .styles_paddingTop_medium_desktop__3nw5tzm {
- padding-top: 20px;
- }
- }
- @supports not (display: grid) {
- [data-dark-mode] .styles_display_flex_darkDesktop__3nw5tz7 {
- display: flex;
- }
- [data-dark-mode] .styles_display_none_darkDesktop__3nw5tzb {
- display: none;
- }
- [data-dark-mode] .styles_display_block_darkDesktop__3nw5tzf {
- display: block;
- }
- [data-dark-mode] .styles_paddingTop_small_darkDesktop__3nw5tzj {
- padding-top: 10px;
- }
- [data-dark-mode] .styles_paddingTop_medium_darkDesktop__3nw5tzn {
- padding-top: 20px;
- }
- }
-}
@layer responsive-layer-name {
.styles_background_red_mobile__3nw5tzo {
--alpha__3nw5tz0: 1;
@@ -100,8 +15,8 @@ body .styles__3nw5tz1c {
.styles_backgroundOpacity_0\.3_mobile__3nw5tz14 {
--alpha__3nw5tz0: 0.3;
}
- @media screen and (min-width: 768px) {
- @container styles_containerName__3nw5tz2 (min-width: 768px) {
+ @media screen and (width >= 768px) {
+ @container styles_containerName__3nw5tz2 (width >= 768px) {
.styles_background_red_tablet__3nw5tzp {
--alpha__3nw5tz0: 1;
background: rgba(255, 0, 0, var(--alpha__3nw5tz0));
@@ -120,8 +35,8 @@ body .styles__3nw5tz1c {
}
}
}
- @media screen and (min-width: 1024px) {
- @container styles_containerName__3nw5tz2 (min-width: 1024px) {
+ @media screen and (width >= 1024px) {
+ @container styles_containerName__3nw5tz2 (width >= 1024px) {
.styles_background_red_desktop__3nw5tzq {
--alpha__3nw5tz0: 1;
background: rgba(255, 0, 0, var(--alpha__3nw5tz0));
@@ -167,3 +82,86 @@ body .styles__3nw5tz1c {
--textAlpha__3nw5tz1: 0.8;
}
}
+.styles_container__3nw5tz3 {
+ container: styles_containerName__3nw5tz2/size;
+}
+.styles_display_flex_mobile__3nw5tz4 {
+ display: flex;
+}
+.styles_display_none_mobile__3nw5tz8 {
+ display: none;
+}
+.styles_display_block_mobile__3nw5tzc {
+ display: block;
+}
+.styles_paddingTop_small_mobile__3nw5tzg {
+ padding-top: 10px;
+}
+.styles_paddingTop_medium_mobile__3nw5tzk {
+ padding-top: 20px;
+}
+.styles_color_red__3nw5tz18 {
+ --textAlpha__3nw5tz1: 1;
+ color: rgba(255, 0, 0, var(--textAlpha__3nw5tz1));
+}
+body {
+ margin: 0;
+}
+body .styles__3nw5tz1c {
+ background: red;
+}
+@media screen and (width >= 768px) {
+ @container styles_containerName__3nw5tz2 (width >= 768px) {
+ .styles_display_flex_tablet__3nw5tz5 {
+ display: flex;
+ }
+ .styles_display_none_tablet__3nw5tz9 {
+ display: none;
+ }
+ .styles_display_block_tablet__3nw5tzd {
+ display: block;
+ }
+ .styles_paddingTop_small_tablet__3nw5tzh {
+ padding-top: 10px;
+ }
+ .styles_paddingTop_medium_tablet__3nw5tzl {
+ padding-top: 20px;
+ }
+ }
+}
+@media screen and (width >= 1024px) {
+ @container styles_containerName__3nw5tz2 (width >= 1024px) {
+ .styles_display_flex_desktop__3nw5tz6 {
+ display: flex;
+ }
+ .styles_display_none_desktop__3nw5tza {
+ display: none;
+ }
+ .styles_display_block_desktop__3nw5tze {
+ display: block;
+ }
+ .styles_paddingTop_small_desktop__3nw5tzi {
+ padding-top: 10px;
+ }
+ .styles_paddingTop_medium_desktop__3nw5tzm {
+ padding-top: 20px;
+ }
+ }
+ @supports not (display: grid) {
+ [data-dark-mode] .styles_display_flex_darkDesktop__3nw5tz7 {
+ display: flex;
+ }
+ [data-dark-mode] .styles_display_none_darkDesktop__3nw5tzb {
+ display: none;
+ }
+ [data-dark-mode] .styles_display_block_darkDesktop__3nw5tzf {
+ display: block;
+ }
+ [data-dark-mode] .styles_paddingTop_small_darkDesktop__3nw5tzj {
+ padding-top: 10px;
+ }
+ [data-dark-mode] .styles_paddingTop_medium_darkDesktop__3nw5tzn {
+ padding-top: 20px;
+ }
+ }
+}
diff --git a/tests/e2e/sprinkles.playwright.ts-snapshots/sprinkles-parcel--production.css b/tests/e2e/sprinkles.playwright.ts-snapshots/sprinkles-parcel--production.css
index 0ff1d17ff..5d6cffdf7 100644
--- a/tests/e2e/sprinkles.playwright.ts-snapshots/sprinkles-parcel--production.css
+++ b/tests/e2e/sprinkles.playwright.ts-snapshots/sprinkles-parcel--production.css
@@ -1,88 +1,3 @@
-@layer responsive-layer-name;
-@layer unconditional-layer-name;
-._3nw5tz3 {
- container: _3nw5tz2/size;
-}
-._3nw5tz4 {
- display: flex;
-}
-._3nw5tz8 {
- display: none;
-}
-._3nw5tzc {
- display: block;
-}
-._3nw5tzg {
- padding-top: 10px;
-}
-._3nw5tzk {
- padding-top: 20px;
-}
-._3nw5tz18 {
- --_3nw5tz1: 1;
- color: rgba(255, 0, 0, var(--_3nw5tz1));
-}
-body {
- margin: 0;
-}
-body ._3nw5tz1c {
- background: red;
-}
-@media screen and (min-width: 768px) {
- @container _3nw5tz2 (min-width: 768px) {
- ._3nw5tz5 {
- display: flex;
- }
- ._3nw5tz9 {
- display: none;
- }
- ._3nw5tzd {
- display: block;
- }
- ._3nw5tzh {
- padding-top: 10px;
- }
- ._3nw5tzl {
- padding-top: 20px;
- }
- }
-}
-@media screen and (min-width: 1024px) {
- @container _3nw5tz2 (min-width: 1024px) {
- ._3nw5tz6 {
- display: flex;
- }
- ._3nw5tza {
- display: none;
- }
- ._3nw5tze {
- display: block;
- }
- ._3nw5tzi {
- padding-top: 10px;
- }
- ._3nw5tzm {
- padding-top: 20px;
- }
- }
- @supports not (display: grid) {
- [data-dark-mode] ._3nw5tz7 {
- display: flex;
- }
- [data-dark-mode] ._3nw5tzb {
- display: none;
- }
- [data-dark-mode] ._3nw5tzf {
- display: block;
- }
- [data-dark-mode] ._3nw5tzj {
- padding-top: 10px;
- }
- [data-dark-mode] ._3nw5tzn {
- padding-top: 20px;
- }
- }
-}
@layer responsive-layer-name {
._3nw5tzo {
--_3nw5tz0: 1;
@@ -100,8 +15,8 @@ body ._3nw5tz1c {
._3nw5tz14 {
--_3nw5tz0: 0.3;
}
- @media screen and (min-width: 768px) {
- @container _3nw5tz2 (min-width: 768px) {
+ @media screen and (width >= 768px) {
+ @container _3nw5tz2 (width >= 768px) {
._3nw5tzp {
--_3nw5tz0: 1;
background: rgba(255, 0, 0, var(--_3nw5tz0));
@@ -120,8 +35,8 @@ body ._3nw5tz1c {
}
}
}
- @media screen and (min-width: 1024px) {
- @container _3nw5tz2 (min-width: 1024px) {
+ @media screen and (width >= 1024px) {
+ @container _3nw5tz2 (width >= 1024px) {
._3nw5tzq {
--_3nw5tz0: 1;
background: rgba(255, 0, 0, var(--_3nw5tz0));
@@ -167,3 +82,86 @@ body ._3nw5tz1c {
--_3nw5tz1: 0.8;
}
}
+._3nw5tz3 {
+ container: _3nw5tz2/size;
+}
+._3nw5tz4 {
+ display: flex;
+}
+._3nw5tz8 {
+ display: none;
+}
+._3nw5tzc {
+ display: block;
+}
+._3nw5tzg {
+ padding-top: 10px;
+}
+._3nw5tzk {
+ padding-top: 20px;
+}
+._3nw5tz18 {
+ --_3nw5tz1: 1;
+ color: rgba(255, 0, 0, var(--_3nw5tz1));
+}
+body {
+ margin: 0;
+}
+body ._3nw5tz1c {
+ background: red;
+}
+@media screen and (width >= 768px) {
+ @container _3nw5tz2 (width >= 768px) {
+ ._3nw5tz5 {
+ display: flex;
+ }
+ ._3nw5tz9 {
+ display: none;
+ }
+ ._3nw5tzd {
+ display: block;
+ }
+ ._3nw5tzh {
+ padding-top: 10px;
+ }
+ ._3nw5tzl {
+ padding-top: 20px;
+ }
+ }
+}
+@media screen and (width >= 1024px) {
+ @container _3nw5tz2 (width >= 1024px) {
+ ._3nw5tz6 {
+ display: flex;
+ }
+ ._3nw5tza {
+ display: none;
+ }
+ ._3nw5tze {
+ display: block;
+ }
+ ._3nw5tzi {
+ padding-top: 10px;
+ }
+ ._3nw5tzm {
+ padding-top: 20px;
+ }
+ }
+ @supports not (display: grid) {
+ [data-dark-mode] ._3nw5tz7 {
+ display: flex;
+ }
+ [data-dark-mode] ._3nw5tzb {
+ display: none;
+ }
+ [data-dark-mode] ._3nw5tzf {
+ display: block;
+ }
+ [data-dark-mode] ._3nw5tzj {
+ padding-top: 10px;
+ }
+ [data-dark-mode] ._3nw5tzn {
+ padding-top: 20px;
+ }
+ }
+}
diff --git a/tests/e2e/themed.playwright.ts-snapshots/themed-parcel--development.css b/tests/e2e/themed.playwright.ts-snapshots/themed-parcel--development.css
index b66ddfdb8..f122f479a 100644
--- a/tests/e2e/themed.playwright.ts-snapshots/themed-parcel--development.css
+++ b/tests/e2e/themed.playwright.ts-snapshots/themed-parcel--development.css
@@ -1,27 +1,3 @@
-@layer themes_themeLayer__cdwe0v7;
-@layer globalThemeLayer;
-:root,
-.themes_theme__cdwe0v0 {
- --colors-backgroundColor__cdwe0v1: blue;
- --colors-text__cdwe0v2: white;
- --space-1__cdwe0v3: 4px;
- --space-2__cdwe0v4: 8px;
- --space-3__cdwe0v5: 12px;
-}
-.themes_altTheme__cdwe0v6 {
- --colors-backgroundColor__cdwe0v1: green;
- --colors-text__cdwe0v2: white;
- --space-1__cdwe0v3: 8px;
- --space-2__cdwe0v4: 12px;
- --space-3__cdwe0v5: 16px;
-}
-.themes_responsiveTheme__cdwe0ve {
- --colors-backgroundColor__cdwe0v1: pink;
- --colors-text__cdwe0v2: purple;
- --space-1__cdwe0v3: 6px;
- --space-2__cdwe0v4: 12px;
- --space-3__cdwe0v5: 18px;
-}
@layer themes_themeLayer__cdwe0v7 {
.themes_altTheme2Class__cdwe0v8 {
--colors-backgroundColor__cdwe0v9: green;
@@ -40,24 +16,12 @@
--space-3__cdwe0vd: 16px;
}
}
-@media screen and (min-width: 768px) {
+@media screen and (width >= 768px) {
.themes_responsiveTheme__cdwe0ve {
--colors-backgroundColor__cdwe0v1: purple;
--colors-text__cdwe0v2: pink;
}
}
-.shared_shadow__5iqv0q0 {
- box-shadow: 0 0 5px red;
-}
-body {
- background-color: #87ceeb;
-}
-body,
-button {
- line-height: 16px;
-}
-@layer themes_themeLayer__cdwe0v7;
-@layer globalThemeLayer;
:root,
.themes_theme__cdwe0v0 {
--colors-backgroundColor__cdwe0v1: blue;
@@ -80,25 +44,7 @@ button {
--space-2__cdwe0v4: 12px;
--space-3__cdwe0v5: 18px;
}
-@layer themes_themeLayer__cdwe0v7 {
- .themes_altTheme2Class__cdwe0v8 {
- --colors-backgroundColor__cdwe0v9: green;
- --colors-text__cdwe0va: white;
- --space-1__cdwe0vb: 8px;
- --space-2__cdwe0vc: 12px;
- --space-3__cdwe0vd: 16px;
- }
-}
-@layer globalThemeLayer {
- :root {
- --colors-backgroundColor__cdwe0v9: green;
- --colors-text__cdwe0va: white;
- --space-1__cdwe0vb: 8px;
- --space-2__cdwe0vc: 12px;
- --space-3__cdwe0vd: 16px;
- }
-}
-@media screen and (min-width: 768px) {
+@media screen and (width >= 768px) {
.themes_responsiveTheme__cdwe0ve {
--colors-backgroundColor__cdwe0v1: purple;
--colors-text__cdwe0v2: pink;
@@ -152,7 +98,7 @@ html .styles_opacity_1\/2__blj6yb6 {
html .styles_opacity_1\/4__blj6yb7 {
opacity: var(--blankVar1__blj6yb4, var(--blankVar2__blj6yb5, 0.25));
}
-@media only screen and (min-width: 500px) {
+@media only screen and (width >= 500px) {
.styles_container__blj6yb1 {
border: 1px solid var(--colors-backgroundColor__cdwe0v1);
}
@@ -160,7 +106,7 @@ html .styles_opacity_1\/4__blj6yb7 {
padding: var(--space-1__cdwe0v3);
}
}
-@media only screen and (min-width: 1000px) {
+@media only screen and (width >= 1000px) {
.styles_button__blj6yb3 {
padding: var(--space-2__cdwe0v4);
}
diff --git a/tests/e2e/themed.playwright.ts-snapshots/themed-parcel--production.css b/tests/e2e/themed.playwright.ts-snapshots/themed-parcel--production.css
index 0d65edccf..e492ce8ea 100644
--- a/tests/e2e/themed.playwright.ts-snapshots/themed-parcel--production.css
+++ b/tests/e2e/themed.playwright.ts-snapshots/themed-parcel--production.css
@@ -1,27 +1,3 @@
-@layer cdwe0v7;
-@layer globalThemeLayer;
-:root,
-.cdwe0v0 {
- --cdwe0v1: blue;
- --cdwe0v2: white;
- --cdwe0v3: 4px;
- --cdwe0v4: 8px;
- --cdwe0v5: 12px;
-}
-.cdwe0v6 {
- --cdwe0v1: green;
- --cdwe0v2: white;
- --cdwe0v3: 8px;
- --cdwe0v4: 12px;
- --cdwe0v5: 16px;
-}
-.cdwe0ve {
- --cdwe0v1: pink;
- --cdwe0v2: purple;
- --cdwe0v3: 6px;
- --cdwe0v4: 12px;
- --cdwe0v5: 18px;
-}
@layer cdwe0v7 {
.cdwe0v8 {
--cdwe0v9: green;
@@ -40,24 +16,12 @@
--cdwe0vd: 16px;
}
}
-@media screen and (min-width: 768px) {
+@media screen and (width >= 768px) {
.cdwe0ve {
--cdwe0v1: purple;
--cdwe0v2: pink;
}
}
-._5iqv0q0 {
- box-shadow: 0 0 5px red;
-}
-body {
- background-color: #87ceeb;
-}
-body,
-button {
- line-height: 16px;
-}
-@layer cdwe0v7;
-@layer globalThemeLayer;
:root,
.cdwe0v0 {
--cdwe0v1: blue;
@@ -80,25 +44,7 @@ button {
--cdwe0v4: 12px;
--cdwe0v5: 18px;
}
-@layer cdwe0v7 {
- .cdwe0v8 {
- --cdwe0v9: green;
- --cdwe0va: white;
- --cdwe0vb: 8px;
- --cdwe0vc: 12px;
- --cdwe0vd: 16px;
- }
-}
-@layer globalThemeLayer {
- :root {
- --cdwe0v9: green;
- --cdwe0va: white;
- --cdwe0vb: 8px;
- --cdwe0vc: 12px;
- --cdwe0vd: 16px;
- }
-}
-@media screen and (min-width: 768px) {
+@media screen and (width >= 768px) {
.cdwe0ve {
--cdwe0v1: purple;
--cdwe0v2: pink;
@@ -146,7 +92,7 @@ html .blj6yb6 {
html .blj6yb7 {
opacity: var(--blj6yb4, var(--blj6yb5, 0.25));
}
-@media only screen and (min-width: 500px) {
+@media only screen and (width >= 500px) {
.blj6yb1 {
border: 1px solid var(--cdwe0v1);
}
@@ -154,7 +100,7 @@ html .blj6yb7 {
padding: var(--cdwe0v3);
}
}
-@media only screen and (min-width: 1000px) {
+@media only screen and (width >= 1000px) {
.blj6yb3 {
padding: var(--cdwe0v4);
}