refactor: remove css variables feature flag (#4337)

Css variables are landed. No need for conditional rendering.

Author: TrySound

apps/builder/app/builder/features/sidebar-left/panels/navigator/navigator-tree.tsx

@@ -3,7 +3,6 @@ import { nanoid } from "nanoid";
 import { atom, computed } from "nanostores";
 import { mergeRefs } from "@react-aria/utils";
 import { useStore } from "@nanostores/react";
-import { isFeatureEnabled } from "@webstudio-is/feature-flags";
 import {
   Box,
   rawTheme,
@@ -481,7 +480,7 @@ export const NavigatorTree = () => {
       }}
     >
       <TreeRoot>
-        {isFeatureEnabled("cssVars") && rootMeta && (
+        {rootMeta && (
           <TreeNode
             level={0}
             isSelected={selectedKey === ROOT_INSTANCE_ID}

apps/builder/app/builder/features/style-panel/property-label.tsx

@@ -2,7 +2,6 @@ import { atom } from "nanostores";
 import { useStore } from "@nanostores/react";
 import { useState, type ReactNode } from "react";
 import { AlertIcon, ResetIcon } from "@webstudio-is/icons";
-import { isFeatureEnabled } from "@webstudio-is/feature-flags";
 import {
   hyphenateProperty,
   toValue,
@@ -55,7 +54,7 @@ const renderCss = (styles: ComputedStyleDecl[], isComputed: boolean) => {
   for (const styleDecl of styles) {
     const property = hyphenateProperty(styleDecl.property);
     let value;
-    if (isComputed && isFeatureEnabled("cssVars")) {
+    if (isComputed) {
       value = toValue(styleDecl.usedValue);
     } else {
       value = toValue(styleDecl.cascadedValue);

apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx

@@ -11,7 +11,6 @@ import {
 import { useStore } from "@nanostores/react";
 import { computed } from "nanostores";
 import { matchSorter } from "match-sorter";
-import { isFeatureEnabled } from "@webstudio-is/feature-flags";
 import { PlusIcon } from "@webstudio-is/icons";
 import {
   Box,
@@ -123,9 +122,6 @@ const matchOrSuggestToCreate = (
   const matched = matchSorter(items, search, {
     keys: [itemToString],
   });
-  if (isFeatureEnabled("cssVars") === false) {
-    return matched;
-  }
   const propertyName = search.trim();
   if (
     propertyName.startsWith("--") &&
@@ -149,9 +145,7 @@ const getNewPropertyDescription = (item: null | SearchItem) => {
 };
 
 const insertStyles = (text: string) => {
-  const parsedStyles = parseCss(`selector{${text}}`, {
-    customProperties: true,
-  });
+  const parsedStyles = parseCss(`selector{${text}}`);
   if (parsedStyles.length === 0) {
     return false;
   }

apps/builder/app/builder/features/style-panel/shared/css-fragment.tsx

@@ -9,22 +9,17 @@ import {
 } from "@codemirror/autocomplete";
 import { parseCss } from "@webstudio-is/css-data";
 import { css as style } from "@webstudio-is/design-system";
-import { isFeatureEnabled } from "@webstudio-is/feature-flags";
 import {
   CodeEditorBase,
   getMinMaxHeightVars,
 } from "~/builder/shared/code-editor-base";
 import { $availableVariables } from "./model";
 
 export const parseCssFragment = (css: string, fallbacks: string[]) => {
-  let parsed = parseCss(`.styles{${css}}`, {
-    customProperties: isFeatureEnabled("cssVars"),
-  });
+  let parsed = parseCss(`.styles{${css}}`);
   if (parsed.length === 0) {
     for (const fallbackProperty of fallbacks) {
-      parsed = parseCss(`.styles{${fallbackProperty}: ${css}}`, {
-        customProperties: isFeatureEnabled("cssVars"),
-      });
+      parsed = parseCss(`.styles{${fallbackProperty}: ${css}}`);
       parsed = parsed.filter((styleDecl) => styleDecl.value.type !== "invalid");
       if (parsed.length > 0) {
         break;

apps/builder/app/shared/style-object-model.test.tsx

@@ -46,7 +46,7 @@ const createModel = ({
   matchingStates?: Set<string>;
 }): StyleObjectModel => {
   const instanceTags = new Map<Instance["id"], HtmlTags>();
-  const parsedStyles = parseCss(css, { customProperties: true });
+  const parsedStyles = parseCss(css);
   const styles: Styles = new Map();
   for (const { breakpoint, selector, state, property, value } of parsedStyles) {
     const styleDecl: StyleDecl = {
@@ -77,7 +77,7 @@ const createModel = ({
   }
   const presetStyles = new Map<string, StyleValue>();
   for (const [componentName, css] of Object.entries(presets ?? {})) {
-    const parsedStyles = parseCss(css, { customProperties: true });
+    const parsedStyles = parseCss(css);
     for (const styleDecl of parsedStyles) {
       const key = getPresetStyleDeclKey({
         component: componentName,

packages/css-data/src/parse-css.test.ts

@@ -406,27 +406,15 @@ describe("Parse CSS", () => {
     ]);
   });
 
-  // @todo https://github.com/webstudio-is/webstudio/issues/3399
-  test("parse variable as unset default", () => {
-    expect(parseCss(`a { color: var(--color) }`)).toEqual([
-      {
-        selector: "a",
-        property: "color",
-        value: { type: "keyword", value: "unset" },
-      },
-    ]);
-  });
-
-  test("optionally parse variable as var value", () => {
+  test("parse variable as var value", () => {
     expect(
       parseCss(
         `
         a {
           color: var(--color);
           background-color: var(--color, red);
         }
-        `,
-        { customProperties: true }
+        `
       )
     ).toEqual([
       {

packages/css-data/src/parse-css.ts

@@ -57,8 +57,7 @@ const unprefixProperty = (property: string) => {
 
 const parseCssValue = (
   property: string,
-  value: string,
-  { customProperties }: { customProperties: boolean }
+  value: string
 ): Map<StyleProperty, StyleValue> => {
   const expanded = new Map(expandShorthands([[property, value]]));
   const final = new Map();
@@ -70,12 +69,6 @@ const parseCssValue = (
       continue;
     }
 
-    // @todo https://github.com/webstudio-is/webstudio/issues/3399
-    if (customProperties === false && value.includes("var(")) {
-      final.set(property, { type: "keyword", value: "unset" });
-      continue;
-    }
-
     final.set(
       property,
       parseCssValueLonghand(
@@ -101,12 +94,7 @@ type Selector = {
   state?: string;
 };
 
-type ParserOptions = {
-  customProperties?: boolean;
-};
-
-export const parseCss = (css: string, options: ParserOptions = {}) => {
-  const customProperties = options.customProperties ?? false;
+export const parseCss = (css: string) => {
   const ast = cssTreeTryParse(css);
   const styles = new Map<string, ParsedStyleDecl>();
 
@@ -231,8 +219,7 @@ export const parseCss = (css: string, options: ParserOptions = {}) => {
 
     const parsedCss = parseCssValue(
       unprefixProperty(node.property),
-      stringValue,
-      { customProperties }
+      stringValue
     );
 
     for (const { name: selector, state } of selectors) {

packages/feature-flags/src/flags.ts

@@ -4,7 +4,6 @@ export const internalComponents = false;
 export const unsupportedBrowsers = false;
 export const aiRadixComponents = false;
 export const cms = false;
-export const cssVars = false;
 export const filters = false;
 export const xmlElement = false;
 export const staticExport = false;