CI fixes

Author: Brijesh Bittu

.eslintignore

@@ -38,3 +38,4 @@ pnpm-lock.yaml
 # If we want to format these files we'd need to do it in crowdin
 docs/**/*-pt.md
 docs/**/*-zh.md
+/tmpapps

.eslintrc.js

@@ -197,6 +197,7 @@ module.exports = {
 
     'react/jsx-no-useless-fragment': ['error', { allowExpressions: true }],
     'lines-around-directive': 'off',
+    'react/prop-types': 'off',
   },
   overrides: [
     {
@@ -277,7 +278,7 @@ module.exports = {
     },
     // Next.js entry points pages
     {
-      files: ['docs/pages/**/*.js'],
+      files: ['docs/apps/**/*{.tsx,.ts,.js}'],
       rules: {
         'react/prop-types': 'off',
       },

docs/eslint.config.mjs

@@ -1,6 +1,6 @@
-import { dirname } from "path";
-import { fileURLToPath } from "url";
-import { FlatCompat } from "@eslint/eslintrc";
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+import { FlatCompat } from '@eslint/eslintrc';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -9,8 +9,6 @@ const compat = new FlatCompat({
   baseDirectory: __dirname,
 });
 
-const eslintConfig = [
-  ...compat.extends("next/core-web-vitals", "next/typescript"),
-];
+const eslintConfig = [...compat.extends('next/core-web-vitals', 'next/typescript')];
 
 export default eslintConfig;

docs/package.json

@@ -3,6 +3,7 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
+    "clean": "rm -rf .next export",
     "dev": "next dev",
     "build": "next build",
     "start": "pnpm dlx serve export",

docs/src/app/(public)/(content)/layout.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import type { Metadata, Viewport } from 'next/types';
-import { Main, Root } from './layout.pigment';
 import { Header } from 'docs/src/components/Header';
 import * as SideNav from 'docs/src/components/SideNav';
 import { nav } from 'docs/src/nav';
+import { Main, Root } from './layout.pigment';
 
 export default function Layout({ children }: React.PropsWithChildren) {
   return (

docs/src/app/(public)/page.tsx

@@ -1,9 +1,9 @@
 import { Metadata, Viewport } from 'next';
 import Image from 'next/image';
 
-import { Root, Content, Heading, linkStyle, Caption } from './page.pigment';
 import { Link } from 'docs/src/components/Link';
 import { ArrowRightIcon } from 'docs/src/icons/ArrowRightIcon';
+import { Root, Content, Heading, linkStyle, Caption } from './page.pigment';
 
 const description = 'A build-time CSS-in-JS styling engine';
 

docs/src/app/layout.pigment.tsx

@@ -15,5 +15,4 @@ export const bodyCls = css`
   min-width: 320px;
   line-height: 1.5;
   font-synthesis: none;
-  -webkit-font-smoothing: antialiased;
 `;

docs/src/app/not-found.tsx

@@ -1,6 +1,6 @@
 import { Metadata } from 'next';
-import { Root, Content, Heading, linkStyle, Caption } from './(public)/page.pigment';
 import { Link } from 'docs/src/components/Link';
+import { Root, Content, Heading, linkStyle, Caption } from './(public)/page.pigment';
 import Layout from './(public)/layout';
 
 export default function Notfound() {

docs/src/components/Header.pigment.ts

@@ -88,6 +88,7 @@ export const headerButton = css`
       background-color: ${t('$color.gray.100')};
     }
   }
+
   @media not (hover: hover) {
     &:active {
       background-color: ${t('$color.gray.100')};

docs/src/components/MobileNav.pigment.ts

@@ -6,11 +6,9 @@ export const backdrop = css`
   position: fixed;
   inset: 0;
   height: 100dvh;
-
   transition-duration: 600ms;
   transition-property: -webkit-backdrop-filter, backdrop-filter, opacity;
   transition-timing-function: ${t('$ease.out.fast')};
-  -webkit-backdrop-filter: blur(1.5px);
   backdrop-filter: blur(1.5px);
   background-image: linear-gradient(to bottom, transparent 2rem, rgb(0 0 0 / 5%) 50%);
 
@@ -20,8 +18,7 @@ export const backdrop = css`
 
   &[data-starting-style],
   &[data-ending-style] {
-    -webkit-backdrop-filter: blur(0px);
-    backdrop-filter: blur(0px);
+    backdrop-filter: blur(0);
     opacity: 0;
   }
 
@@ -96,6 +93,7 @@ export const viewport = css(({ theme }) => ({
 
 export const viewportInner = css`
   position: relative;
+
   /* Prevent children's margin collapse */
   display: flex;
   flex-direction: column;
@@ -174,7 +172,6 @@ export const navClose = css`
   background-color: ${t('$color.gray.200')};
 
   /* Blur the dividers behind */
-  -webkit-backdrop-filter: blur(1rem);
   backdrop-filter: blur(1rem);
 
   &:focus-visible {
@@ -228,6 +225,7 @@ export const navLink = css`
   display: flex;
   gap: 0.675rem;
   align-items: center;
+
   /* @TODO - Fix the css processor so that you can use local css variables through t() */
   height: var(--mobileNavItemHeight);
   padding-inline: var(--mobileNavItemPaddingX);
@@ -244,7 +242,10 @@ export const navLink = css`
   }
 
   @supports (-webkit-tap-highlight-color: black) {
+    ---var: 1;
+
     /* Applying background-color on :active shows it when touching items while scrolling */
+
     /* This activates only on real link taps */
     -webkit-tap-highlight-color: ${t('$color.gray.300')};
   }