[react] Export globalCss from index (#148)

package.json

@@ -27,7 +27,7 @@
     "size:snapshot": "node --max-old-space-size=4096 ./scripts/sizeSnapshot/create",
     "size:why": "pnpm size:snapshot --analyze",
     "test": "node scripts/test.mjs",
-    "tc": "node test/cli.js",
+    "tc": "node scripts/cli.js",
     "test:extended": "pnpm eslint && pnpm typescript && pnpm test:coverage",
     "test:coverage": "pnpm build && cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=text mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}'",
     "test:coverage:ci": "pnpm build && cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=lcov mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}'",
@@ -39,7 +39,7 @@
     "test:regressions:server": "serve test/regressions -p 5001",
     "test:unit": "cross-env NODE_ENV=test mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}'",
     "test:argos": "node ./scripts/pushArgos.mjs",
-    "typescript": "tsc -b tsconfig.typecheck.json",
+    "typescript": "lerna run --no-bail --parallel typescript",
     "typescript:ci": "lerna run --concurrency 3 --no-bail --no-sort typescript",
     "validate-declarations": "tsx scripts/validateTypescriptDeclarations.mts"
   },

packages/pigment-css-react/package.json

@@ -28,7 +28,7 @@
     "test": "cd ../../ && cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=text mocha 'packages/pigment-css-react/**/*.test.{js,ts,tsx}'",
     "test:update": "cd ../../ && cross-env NODE_ENV=test UPDATE_FIXTURES=true mocha 'packages/pigment-css-react/**/*.test.{js,ts,tsx}'",
     "test:ci": "cd ../../ && cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=lcov --report-dir=./coverage/pigment-css-react mocha 'packages/pigment-css-react/**/*.test.{js,ts,tsx}'",
-    "typecheck": "tsc --noEmit -p ."
+    "typescript": "tsc --noEmit -p ."
   },
   "dependencies": {
     "@babel/core": "^7.24.4",

packages/pigment-css-react/src/index.spec.ts

@@ -0,0 +1,66 @@
+import { css, globalCss, keyframes, styled, sx } from '@pigment-css/react';
+
+declare module '@pigment-css/react/theme' {
+  interface ThemeArgs {
+    theme: {
+      palette: {
+        primary: {
+          main: string;
+        };
+      };
+    };
+  }
+}
+
+css``;
+css({
+  color: 'red',
+});
+
+globalCss`
+  html {
+    font-size: 16px;
+  }
+`;
+globalCss(({ theme }) => ({
+  body: {
+    color: theme.palette.primary.main,
+  },
+}));
+
+keyframes``;
+keyframes(() => ({
+  from: {
+    opacity: 0,
+  },
+  to: {
+    opacity: 1,
+  },
+}));
+
+styled.div``;
+styled.div(({ theme }) => ({
+  color: theme.palette.primary.main,
+}));
+
+sx({ color: 'red' });
+sx(({ theme }) => ({
+  color: theme.palette.primary.main,
+}));
+sx([
+  { color: 'red' },
+  ({ theme }) => ({
+    color: theme.palette.primary.main,
+  }),
+]);
+const foo = true;
+sx([
+  true && { color: 'red' },
+  foo
+    ? ({ theme }) => ({
+        color: theme.palette.primary.main,
+      })
+    : {
+        color: 'blue',
+      },
+]);

packages/pigment-css-react/src/index.ts

@@ -7,3 +7,4 @@ export { default as css } from './css';
 export { default as createUseThemeProps } from './createUseThemeProps';
 export { default as internal_createExtendSxProp } from './createExtendSxProp';
 export { default as useTheme } from './useTheme';
+export { default as globalCss } from './globalCss';