chore: remove stylesheetConfig option

packages/@lwc/compiler/README.md

@@ -41,7 +41,7 @@ const { code } = transformSync(source, filename, options);
 -   `options` (object, required) - the transformation options. The `name` and the `namespace` of the component is a minimum required for transformation.
     -   `name` (type: `string`, required) - name of the component, e.g. `foo` in `x/foo`.
     -   `namespace` (type: `string`, required) - namespace of the component, e.g. `x` in `x/foo`.
-    -   `stylesheetConfig` (type: `object`, default: `{}`) - The stylesheet compiler configuration to pass to the `@lwc/style-compiler`.
+    -   `stylesheetConfig` (type: `object`, default: `{}`) - Deprecated. Ignored by compiler.
     -   `experimentalDynamicComponent` (type: `DynamicImportConfig`, default: `null`) - The configuration to pass to `@lwc/compiler`.
     -   `experimentalDynamicDirective` (type: `boolean`, default: `false`) - The configuration to pass to `@lwc/template-compiler` to enable deprecated dynamic components.
     -   `enableDynamicComponents` (type: `boolean`, default: `false`) - The configuration to pass to `@lwc/template-compiler` to enable dynamic components.

packages/@lwc/compiler/src/options.ts

@@ -13,6 +13,11 @@ import { CustomRendererConfig } from '@lwc/template-compiler';
  * compiler option has already been logged to the `console`.
  */
 let alreadyWarnedAboutLwcSpread = false;
+/**
+ * Flag indicating that a warning about still using the deprecated `stylesheetConfig`
+ * compiler option has already been logged to the `console`.
+ */
+let alreadyWarnedOnStylesheetConfig = false;
 
 type RecursiveRequired<T> = {
     [P in keyof T]-?: RecursiveRequired<T[P]>;
@@ -46,6 +51,10 @@ const DEFAULT_OUTPUT_CONFIG: Required<OutputConfig> = {
 
 export type CustomPropertiesResolution = { type: 'native' } | { type: 'module'; name: string };
 
+/**
+ * @deprecated - Custom property transforms are deprecated because IE11 and other legacy browsers are no longer supported.
+ */
+// TODO [#3266]: Remove StylesheetConfig as part of breaking change wishlist
 export interface StylesheetConfig {
     customProperties?: {
         resolution?: CustomPropertiesResolution;
@@ -139,6 +148,15 @@ function validateOptions(options: TransformOptions) {
         );
     }
 
+    if (!isUndefined(options.stylesheetConfig) && !alreadyWarnedOnStylesheetConfig) {
+        alreadyWarnedOnStylesheetConfig = true;
+
+        // eslint-disable-next-line no-console
+        console.warn(
+            `"stylesheetConfig" property is deprecated. The value doesn't impact the compilation and can safely be removed.`
+        );
+    }
+
     if (!isUndefined(options.stylesheetConfig)) {
         validateStylesheetConfig(options.stylesheetConfig);
     }

packages/@lwc/compiler/src/transformers/__tests__/transform-css.spec.ts

@@ -35,32 +35,14 @@ it('should apply transformation for stylesheet file', async () => {
 });
 
 describe('custom properties', () => {
-    it('should not transform var functions if custom properties a resolved natively', async () => {
+    it('should not transform var functions', async () => {
         const actual = `div { color: var(--bg-color); }`;
         const { code } = await transform(actual, 'foo.css', {
             ...TRANSFORMATION_OPTIONS,
-            stylesheetConfig: {
-                customProperties: { resolution: { type: 'native' } },
-            },
         });
 
         expect(code).toContain('var(--bg-color)');
     });
-
-    it('should transform var functions if custom properties a resolved via a module', async () => {
-        const actual = `div { color: var(--bg-color); }`;
-        const { code } = await transform(actual, 'foo.css', {
-            ...TRANSFORMATION_OPTIONS,
-            stylesheetConfig: {
-                customProperties: {
-                    resolution: { type: 'module', name: '@customProperties' },
-                },
-            },
-        });
-
-        expect(code).not.toContain('var(--bg-color)');
-        expect(code).toContain('import varResolver from "@customProperties";');
-    });
 });
 
 describe('regressions', () => {

packages/@lwc/rollup-plugin/README.md

@@ -27,7 +27,7 @@ export default {
 -   `rootDir` (type: `string`, default: rollup `input` directory) - The LWC root module directory.
 -   `sourcemap` (type: `boolean`, default: `false`) - If `true` the plugin will produce source maps.
 -   `modules` (type: `ModuleRecord[]`, default: `[]`) - The [module resolution](https://lwc.dev/guide/es_modules#module-resolution) overrides passed to the `@lwc/module-resolver`.
--   `stylesheetConfig` (type: `object`, default: `{}`) - The stylesheet compiler configuration to pass to the `@lwc/style-compiler`.
+-   `stylesheetConfig` (type: `object`, default: `{}`) - Deprecated. Ignored by compiler.
 -   `preserveHtmlComments` (type: `boolean`, default: `false`) - The configuration to pass to the `@lwc/template-compiler`.
 -   `experimentalDynamicComponent` (type: `DynamicImportConfig`, default: `null`) - The configuration to pass to `@lwc/compiler`.
 -   `experimentalDynamicDirective` (type: `boolean`, default: `false`) - The configuration to pass to `@lwc/template-compiler` to enable deprecated dynamic components.

packages/@lwc/rollup-plugin/src/__tests__/compilerConfig/compilerConfig.spec.ts

@@ -9,35 +9,6 @@ import { rollup, RollupWarning } from 'rollup';
 
 import lwc from '../../index';
 
-describe('stylesheetConfig', () => {
-    it('should accept custom property resolver config', async () => {
-        const RESOLVER_MODULE = 'myCssResolver';
-
-        const bundle = await rollup({
-            input: path.resolve(__dirname, 'fixtures/test/test.js'),
-            plugins: [
-                lwc({
-                    stylesheetConfig: {
-                        customProperties: {
-                            resolution: {
-                                type: 'module',
-                                name: RESOLVER_MODULE,
-                            },
-                        },
-                    },
-                }),
-            ],
-            external: [RESOLVER_MODULE],
-        });
-
-        const { output } = await bundle.generate({
-            format: 'esm',
-        });
-
-        expect(output[0].imports).toEqual([RESOLVER_MODULE]);
-    });
-});
-
 describe('templateConfig', () => {
     it('compile with preserveHtmlComments option', async () => {
         const bundle = await rollup({

packages/@lwc/style-compiler/src/__tests__/fixtures/keyframes-with-custom-properties/expected.js

@@ -1,9 +1,8 @@
-import varResolver from "custom-properties-resolver";
 function stylesheet(token, useActualHostSelector, useNativeDirPseudoclass) {
   var shadowSelector = token ? ("[" + token + "]") : "";
   var hostSelector = token ? ("[" + token + "-host]") : "";
   var suffixToken = token ? ("-" + token) : "";
-  return "@keyframes slidein" + suffixToken + " {from {margin-left: 100%;}to {margin-left: 0%;}}div" + shadowSelector + " {color: " + (varResolver("--my-var")) + ";animation: 200ms slidein" + suffixToken + ";}span" + shadowSelector + " {animation: " + (varResolver("--another-var")) + " slidein" + suffixToken + ";}p" + shadowSelector + " {animation-name: slidein" + suffixToken + ";animation-delay: 1s;}input" + shadowSelector + " {animation-name: spin;}";
+  return "@keyframes slidein" + suffixToken + " {from {margin-left: 100%;}to {margin-left: 0%;}}div" + shadowSelector + " {color: var(--my-var);animation: 200ms slidein" + suffixToken + ";}span" + shadowSelector + " {animation: var(--another-var) slidein" + suffixToken + ";}p" + shadowSelector + " {animation-name: slidein" + suffixToken + ";animation-delay: 1s;}input" + shadowSelector + " {animation-name: spin;}";
   /*LWC compiler vX.X.X*/
 }
 export default [stylesheet];

packages/@lwc/style-compiler/src/__tests__/fixtures/nester-vars-compounded/expected.js

@@ -1,9 +1,8 @@
-import varResolver from "custom-properties-resolver";
 function stylesheet(token, useActualHostSelector, useNativeDirPseudoclass) {
   var shadowSelector = token ? ("[" + token + "]") : "";
   var hostSelector = token ? ("[" + token + "-host]") : "";
   var suffixToken = token ? ("-" + token) : "";
-  return ".a" + shadowSelector + " {box-shadow: " + (varResolver("--lwc-c-active-button-box-shadow","0 0 2px " + varResolver("--lwc-brand-accessible","#0070d2"))) + ";}";
+  return ".a" + shadowSelector + " {box-shadow: var(--lwc-c-active-button-box-shadow, 0 0 2px var(--lwc-brand-accessible, #0070d2));}";
   /*LWC compiler vX.X.X*/
 }
 export default [stylesheet];

packages/@lwc/style-compiler/src/__tests__/fixtures/var-function-multiple/expected.js

@@ -1,9 +1,8 @@
-import varResolver from "custom-properties-resolver";
 function stylesheet(token, useActualHostSelector, useNativeDirPseudoclass) {
   var shadowSelector = token ? ("[" + token + "]") : "";
   var hostSelector = token ? ("[" + token + "-host]") : "";
   var suffixToken = token ? ("-" + token) : "";
-  return "div" + shadowSelector + " {color: " + (varResolver("--lwc-color")) + "," + (varResolver("--lwc-other")) + ";}div" + shadowSelector + " {border: " + (varResolver("--border","1px solid rgba(0,0,0,0.1)")) + ";}div" + shadowSelector + " {background: linear-gradient(to top," + (varResolver("--lwc-color")) + "," + (varResolver("--lwc-other")) + ");}";
+  return "div" + shadowSelector + " {color: var(--lwc-color), var(--lwc-other);}div" + shadowSelector + " {border: var(--border, 1px solid rgba(0, 0, 0, 0.1));}div" + shadowSelector + " {background: linear-gradient(to top, var(--lwc-color), var(--lwc-other));}";
   /*LWC compiler vX.X.X*/
 }
 export default [stylesheet];

packages/@lwc/style-compiler/src/__tests__/fixtures/var-function-nested/expected.js

@@ -1,9 +1,8 @@
-import varResolver from "custom-properties-resolver";
 function stylesheet(token, useActualHostSelector, useNativeDirPseudoclass) {
   var shadowSelector = token ? ("[" + token + "]") : "";
   var hostSelector = token ? ("[" + token + "-host]") : "";
   var suffixToken = token ? ("-" + token) : "";
-  return "div" + shadowSelector + " {background: " + (varResolver("--lwc-color",varResolver("--lwc-other","black"))) + ";}";
+  return "div" + shadowSelector + " {background: var(--lwc-color, var(--lwc-other, black));}";
   /*LWC compiler vX.X.X*/
 }
 export default [stylesheet];

packages/@lwc/style-compiler/src/__tests__/fixtures/var-function/expected.js

@@ -1,9 +1,8 @@
-import varResolver from "custom-properties-resolver";
 function stylesheet(token, useActualHostSelector, useNativeDirPseudoclass) {
   var shadowSelector = token ? ("[" + token + "]") : "";
   var hostSelector = token ? ("[" + token + "-host]") : "";
   var suffixToken = token ? ("-" + token) : "";
-  return "div" + shadowSelector + " {color: " + (varResolver("--lwc-color")) + ";}div" + shadowSelector + " {color: " + (varResolver("--lwc-color","black")) + ";}div" + shadowSelector + " {color: " + (varResolver("--lwc-color")) + " important;}";
+  return "div" + shadowSelector + " {color: var(--lwc-color);}div" + shadowSelector + " {color: var(--lwc-color, black);}div" + shadowSelector + " {color: var(--lwc-color) important;}";
   /*LWC compiler vX.X.X*/
 }
 export default [stylesheet];

packages/@lwc/style-compiler/src/__tests__/fixtures/var-host-combined/expected.js

@@ -1,9 +1,8 @@
-import varResolver from "custom-properties-resolver";
 function stylesheet(token, useActualHostSelector, useNativeDirPseudoclass) {
   var shadowSelector = token ? ("[" + token + "]") : "";
   var hostSelector = token ? ("[" + token + "-host]") : "";
   var suffixToken = token ? ("-" + token) : "";
-  return ((useActualHostSelector ? ":host {" : hostSelector + " {")) + "color: " + (varResolver("--lwc-color")) + ";padding: 10px;}" + ((useActualHostSelector ? ":host(.foo) {" : hostSelector + ".foo {")) + "background: linear-gradient(to top," + (varResolver("--lwc-color")) + "," + (varResolver("--lwc-other")) + ");}div" + shadowSelector + " {background: " + (varResolver("--lwc-color",varResolver("--lwc-other","black"))) + ";display: \"block\";}";
+  return ((useActualHostSelector ? ":host {" : hostSelector + " {")) + "color: var(--lwc-color);padding: 10px;}" + ((useActualHostSelector ? ":host(.foo) {" : hostSelector + ".foo {")) + "background: linear-gradient(to top, var(--lwc-color), var(--lwc-other));}div" + shadowSelector + " {background: var(--lwc-color, var(--lwc-other, black));display: \"block\";}";
   /*LWC compiler vX.X.X*/
 }
 export default [stylesheet];

packages/@lwc/style-compiler/src/__tests__/fixtures/var-nested-with-resolver-and-color-name/expected.js

@@ -1,9 +1,8 @@
-import varResolver from "custom-properties-resolver";
 function stylesheet(token, useActualHostSelector, useNativeDirPseudoclass) {
   var shadowSelector = token ? ("[" + token + "]") : "";
   var hostSelector = token ? ("[" + token + "-host]") : "";
   var suffixToken = token ? ("-" + token) : "";
-  return "div" + shadowSelector + " {--slds-c-button-neutral-shadow-focus: " + (varResolver("--slds-c-buttonstateful-shadow-focus",varResolver("--sds-g-color-brand-base-50","#0176d3") + " black")) + ";}";
+  return "div" + shadowSelector + " {--slds-c-button-neutral-shadow-focus: var(\n --slds-c-buttonstateful-shadow-focus,\n var(--sds-g-color-brand-base-50, #0176d3) black\n );}";
   /*LWC compiler vX.X.X*/
 }
 export default [stylesheet];

packages/@lwc/style-compiler/src/__tests__/fixtures/var-nested-with-resolver/expected.js

@@ -1,9 +1,8 @@
-import varResolver from "custom-properties-resolver";
 function stylesheet(token, useActualHostSelector, useNativeDirPseudoclass) {
   var shadowSelector = token ? ("[" + token + "]") : "";
   var hostSelector = token ? ("[" + token + "-host]") : "";
   var suffixToken = token ? ("-" + token) : "";
-  return "div" + shadowSelector + " {--slds-c-button-neutral-shadow-focus: " + (varResolver("--slds-c-buttonstateful-shadow-focus",varResolver("--sds-g-color-brand-base-50","#0176d3") + " 0 0 3px")) + ";}";
+  return "div" + shadowSelector + " {--slds-c-button-neutral-shadow-focus: var(\n --slds-c-buttonstateful-shadow-focus,\n var(--sds-g-color-brand-base-50, #0176d3) 0 0 3px\n );}";
   /*LWC compiler vX.X.X*/
 }
 export default [stylesheet];

packages/@lwc/style-compiler/src/postcss-lwc-plugin.ts

@@ -11,7 +11,6 @@ import { APIVersion } from '@lwc/shared';
 import validateIdSelectors from './no-id-selectors/validate';
 import transformImport from './css-import/transform';
 import transformSelectorScoping, { SelectorScopingConfig } from './selector-scoping/transform';
-import transformCustomProperties from './custom-properties/transform';
 import transformDirPseudoClass from './dir-pseudo-class/transform';
 import transformAtRules from './scope-at-rules/transform';
 
@@ -46,7 +45,6 @@ export default function postCssLwcPlugin(options: {
 
     return (root, result) => {
         transformImport(root, result, options.scoped);
-        transformCustomProperties(root, result);
         transformAtRules(root);
 
         root.walkRules((rule) => {