@depthark/css-first

Instructions

Implementation Reference

• src/index.ts:183-223 (handler)

  Main execution handler for the check_css_browser_support tool. Fetches MDN browser support data, generates recommendation, and returns JSON-formatted response with safety assessment.

  async (args: { css_property: string; include_experimental?: boolean }) => {
    try {
      const { css_property, include_experimental = false } = args;
  
      const supportInfo: BrowserSupportInfo = await fetchBrowserSupportFromMDN(
        css_property,
        include_experimental
      );
  
      const result = {
        property: css_property,
        browser_support: supportInfo,
        recommendation: generateBrowserSupportRecommendation(supportInfo),
        safe_to_use: supportInfo.overall_support >= 80,
      };
  
      return {
        content: [
          {
            type: "text" as const,
            text: JSON.stringify(result, null, 2),
          },
        ],
      };
    } catch (error) {
      return {
        content: [
          {
            type: "text" as const,
            text: JSON.stringify(
              {
                error: error instanceof Error ? error.message : "Unknown error",
              },
              null,
              2
            ),
          },
        ],
      };
    }
  }

• src/index.ts:175-182 (schema)

  Zod input schema defining parameters: css_property (string, required) and include_experimental (boolean, optional).

    css_property: z
      .string()
      .describe("CSS property name to check browser support for"),
    include_experimental: z
      .boolean()
      .optional()
      .describe("Include experimental/draft features in results"),
  },

• src/index.ts:171-224 (registration)

  MCP server.tool registration call for 'check_css_browser_support' tool, including name, description, schema, and handler function.

  server.tool(
    "check_css_browser_support",
    "Checks browser support for specific CSS properties using MDN data and provides detailed compatibility information.",
    {
      css_property: z
        .string()
        .describe("CSS property name to check browser support for"),
      include_experimental: z
        .boolean()
        .optional()
        .describe("Include experimental/draft features in results"),
    },
    async (args: { css_property: string; include_experimental?: boolean }) => {
      try {
        const { css_property, include_experimental = false } = args;
  
        const supportInfo: BrowserSupportInfo = await fetchBrowserSupportFromMDN(
          css_property,
          include_experimental
        );
  
        const result = {
          property: css_property,
          browser_support: supportInfo,
          recommendation: generateBrowserSupportRecommendation(supportInfo),
          safe_to_use: supportInfo.overall_support >= 80,
        };
  
        return {
          content: [
            {
              type: "text" as const,
              text: JSON.stringify(result, null, 2),
            },
          ],
        };
      } catch (error) {
        return {
          content: [
            {
              type: "text" as const,
              text: JSON.stringify(
                {
                  error: error instanceof Error ? error.message : "Unknown error",
                },
                null,
                2
              ),
            },
          ],
        };
      }
    }
  );

• src/services/css/mdnClient.ts:468-506 (helper)

  Core helper function that fetches or simulates browser support data for a given CSS property from MDN sources, with caching and fallback logic.

  export async function fetchBrowserSupportFromMDN(
    cssProperty: string,
    includeExperimental: boolean = false
  ): Promise<BrowserSupportInfo> {
    try {
      const mdnData = await fetchMDNData(cssProperty);
  
      const supportInfo: BrowserSupportInfo = {
        overall_support:
          mdnData.browserSupport?.overall_support ||
          getBrowserSupportPercentage(cssProperty),
        browsers: mdnData.browserSupport?.browsers || {
          chrome: { version: "90+", support: "full" },
          firefox: { version: "88+", support: "full" },
          safari: { version: "14+", support: "full" },
          edge: { version: "90+", support: "full" },
        },
        experimental_features: includeExperimental
          ? getExperimentalFeatures(cssProperty)
          : [],
      };
  
      return supportInfo;
    } catch {
      // Fallback to static data
      return {
        overall_support: getBrowserSupportPercentage(cssProperty),
        browsers: {
          chrome: { version: "90+", support: "full" },
          firefox: { version: "88+", support: "full" },
          safari: { version: "14+", support: "full" },
          edge: { version: "90+", support: "full" },
        },
        experimental_features: includeExperimental
          ? getExperimentalFeatures(cssProperty)
          : [],
      };
    }
  }

• src/services/css/guidance.ts:12-24 (helper)

  Helper function that generates human-readable recommendation text based on browser support percentage.

  export function generateBrowserSupportRecommendation(supportInfo: any): string {
    const { overall_support } = supportInfo;
    
    if (overall_support >= 95) {
      return 'Excellent browser support. Safe to use in production without fallbacks.';
    } else if (overall_support >= 85) {
      return 'Good browser support. Consider fallbacks for legacy browsers if needed.';
    } else if (overall_support >= 70) {
      return 'Moderate browser support. Provide fallbacks for older browsers.';
    } else {
      return 'Limited browser support. Consider alternative approaches or polyfills.';
    }
  }