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')};
   }

docs/src/components/SideNav.pigment.ts

@@ -2,8 +2,8 @@ import { t } from '@pigment-css/theme';
 import { styled } from '@pigment-css/react-new';
 import { ScrollArea } from '@base-ui-components/react/scroll-area';
 
-import { applyText } from '../utils/theme';
 import Link from 'next/link';
+import { applyText } from '../utils/theme';
 
 export const Root = styled.nav(({ theme }) => ({
   $sideNavItemHeight: '2rem',
@@ -27,13 +27,12 @@ export const Root = styled.nav(({ theme }) => ({
 
 export const ViewPort = styled(ScrollArea.Viewport)`
   max-height: 100vh;
-  padding-top: 0.75rem;
-  padding-bottom: 3rem;
-  padding-left: 1.5rem;
-  padding-right: calc(
-    var(--sideNavScrollbarGapLeft) + var(--sideNavScrollbarWidth) / 2 +
-      var(--sideNavScrollbarThumbWidth) / 2
-  );
+  padding: 0.75rem
+    calc(
+      var(--sideNavScrollbarGapLeft) + var(--sideNavScrollbarWidth) / 2 +
+        var(--sideNavScrollbarThumbWidth) / 2
+    )
+    3rem 1.5rem;
 
   /* Scroll containers are focusable */
   outline: 0;
@@ -45,6 +44,7 @@ export const ViewPort = styled(ScrollArea.Viewport)`
     position: absolute;
     outline: 2px solid ${t('$color.blue')};
     outline-offset: -2px;
+
     /* Don't inset the outline on the right */
     right: -2px;
   }
@@ -57,7 +57,6 @@ export const ScrollBar = styled(ScrollArea.Scrollbar)`
 
   /* Click target width */
   width: var(--sideNavScrollbarWidth);
-
   opacity: 0;
   transition: opacity 200ms 500ms;
 
@@ -79,6 +78,7 @@ export const ScrollBarThumb = styled(ScrollArea.Thumb)`
     content: '';
     display: block;
     height: 100%;
+
     /* Visible thumb width */
     width: var(--sideNavScrollbarThumbWidth);
     border-radius: ${t('$radius.sm')};

packages/pigment-css-plugin/src/nextjs.ts

@@ -21,7 +21,6 @@ export default function pigment(
 ) {
   const { babelOptions = {}, asyncResolve, ...other } = pigmentConfig ?? {};
   if (process.env.TURBOPACK === '1') {
-    // eslint-disable-next-line no-console
     console.warn(
       `\x1B[33m${process.env.PACKAGE_NAME}: Turbo mode is not supported yet. Please disable it by removing the "--turbo" flag from your "next dev" command to use Pigment CSS.\x1B[39m`,
     );

packages/pigment-css-utils/tsconfig.json

@@ -1,10 +1,5 @@
 {
   "extends": "../../tsconfig.json",
-  "include": [
-    "src/**/*.tsx",
-    "src/**/*.ts",
-    "tests/**/*.spec.ts",
-    "tests/**/*.spec.tsx"
-  ],
+  "include": ["src/**/*.tsx", "src/**/*.ts", "tests/**/*.spec.ts", "tests/**/*.spec.tsx"],
   "exclude": ["./tsup.config.ts"]
 }