@stack-dev/react-css 0.1.0

package/.turbo/turbo-build.log

@@ -0,0 +1,99 @@
+
+
+> @stack-dev/react-css@0.1.0 build /home/benmclean/projects/stack-dev/packages/react-css
+> tsup
+
+▲ [WARNING] The condition "types" here will never be used as it comes after both "import" and "require" [package.json]
+
+    package.json:13:6:
+      13 │       "types": "./dist/index.d.ts"
+         ╵       ~~~~~~~
+
+  The "import" condition comes earlier and will be used for all "import" statements:
+
+    package.json:11:6:
+      11 │       "import": "./dist/index.mjs",
+         ╵       ~~~~~~~~
+
+  The "require" condition comes earlier and will be used for all "require" calls:
+
+    package.json:12:6:
+      12 │       "require": "./dist/index.js",
+         ╵       ~~~~~~~~~
+
+CLI Building entry: src/index.ts
+CLI Using tsconfig: tsconfig.json
+CLI tsup v8.5.1
+CLI Using tsup config: /home/benmclean/projects/stack-dev/packages/react-css/tsup.config.ts
+CLI Target: esnext
+CLI Cleaning output folder
+CJS Build start
+ESM Build start
+
+ WARN  ▲ [WARNING] The condition "types" here will never be used as it comes after both "import" and "require" [package.json]                                                                                        10:12:34 p.m.
+
+    package.json:13:6:
+      13 │       "types": "./dist/index.d.ts"
+         ╵       ~~~~~~~
+
+  The "import" condition comes earlier and will be used for all "import" statements:
+
+    package.json:11:6:
+      11 │       "import": "./dist/index.mjs",
+         ╵       ~~~~~~~~
+
+  The "require" condition comes earlier and will be used for all "require" calls:
+
+    package.json:12:6:
+      12 │       "require": "./dist/index.js",
+         ╵       ~~~~~~~~~
+
+
+
+
+ WARN  ▲ [WARNING] Import "styledButton" will always be undefined because the file "src/button.module.css" has no exports [import-is-undefined]                                                                      10:12:34 p.m.
+
+    src/button.tsx:7:30:
+      7 │     <button className={styles.styledButton} {...props}>
+        ╵                               ~~~~~~~~~~~~
+
+
+
+
+ WARN  ▲ [WARNING] The condition "types" here will never be used as it comes after both "import" and "require" [package.json]                                                                                        10:12:34 p.m.
+
+    package.json:13:6:
+      13 │       "types": "./dist/index.d.ts"
+         ╵       ~~~~~~~
+
+  The "import" condition comes earlier and will be used for all "import" statements:
+
+    package.json:11:6:
+      11 │       "import": "./dist/index.mjs",
+         ╵       ~~~~~~~~
+
+  The "require" condition comes earlier and will be used for all "require" calls:
+
+    package.json:12:6:
+      12 │       "require": "./dist/index.js",
+         ╵       ~~~~~~~~~
+
+
+
+
+ WARN  ▲ [WARNING] Import "styledButton" will always be undefined because the file "src/button.module.css" has no exports [import-is-undefined]                                                                      10:12:34 p.m.
+
+    src/button.tsx:7:30:
+      7 │     <button className={styles.styledButton} {...props}>
+        ╵                               ~~~~~~~~~~~~
+
+
+
+CJS dist/index.js 1.03 KB
+CJS ⚡️ Build success in 76ms
+ESM dist/index.mjs 572.00 B
+ESM ⚡️ Build success in 75ms
+DTS Build start
+DTS ⚡️ Build success in 1108ms
+DTS dist/index.d.ts  215.00 B
+DTS dist/index.d.mts 215.00 B

package/dist/index.d.mts

@@ -0,0 +1,6 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { HTMLAttributes } from 'react';
+
+declare function Button(props: HTMLAttributes<HTMLButtonElement>): react_jsx_runtime.JSX.Element;
+
+export { Button };

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { HTMLAttributes } from 'react';
+
+declare function Button(props: HTMLAttributes<HTMLButtonElement>): react_jsx_runtime.JSX.Element;
+
+export { Button };

package/dist/index.js

@@ -0,0 +1,2 @@
+"use strict";var d=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var c=Object.prototype.hasOwnProperty;var p=(e,t)=>{for(var n in t)d(e,n,{get:t[n],enumerable:!0})},a=(e,t,n,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of f(t))!c.call(e,r)&&r!==n&&d(e,r,{get:()=>t[r],enumerable:!(o=u(t,r))||o.enumerable});return e};var m=e=>a(d({},"__esModule",{value:!0}),e);var h={};p(h,{Button:()=>y});module.exports=m(h);function s(e,{insertAt:t}={}){if(!e||typeof document>"u")return;let n=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css",t==="top"&&n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}s(`.styledButton{background:#00f;color:#fff;padding:10px;border:none;border-radius:4px;cursor:pointer}
+`);var i=require("react/jsx-runtime");function y(e){return(0,i.jsx)("button",{className:void 0,...e,children:e.children})}0&&(module.exports={Button});

package/dist/index.mjs

@@ -0,0 +1,2 @@
+function o(t,{insertAt:d}={}){if(!t||typeof document>"u")return;let n=document.head||document.getElementsByTagName("head")[0],e=document.createElement("style");e.type="text/css",d==="top"&&n.firstChild?n.insertBefore(e,n.firstChild):n.appendChild(e),e.styleSheet?e.styleSheet.cssText=t:e.appendChild(document.createTextNode(t))}o(`.styledButton{background:#00f;color:#fff;padding:10px;border:none;border-radius:4px;cursor:pointer}
+`);import{jsx as s}from"react/jsx-runtime";function u(t){return s("button",{className:void 0,...t,children:t.children})}export{u as Button};

package/eslint.config.mjs

@@ -0,0 +1,10 @@
+import base from '@stack-dev/eslint-config/base.mjs';
+import react from '@stack-dev/eslint-config/react.mjs';
+
+export default [
+  ...base,
+  ...react,
+  { 
+    ignores: ['**/dist/**', '**/coverage/**'] 
+  }
+];

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@stack-dev/react-css",
+  "version": "0.1.0",
+  "private": false,
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "development": "./src/index.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./index.css": "./dist/index.css"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/react": "^16.0.0",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.1",
+    "@vitest/coverage-v8": "^3.2.4",
+    "eslint": "^9.32.0",
+    "jsdom": "^25.0.0",
+    "postcss": "^8.4.0",
+    "prettier": "^3.6.2",
+    "prettier-plugin-organize-imports": "^4.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tsup": "^8.0.0",
+    "vitest": "^3.2.4",
+    "@stack-dev/prettier-config": "0.1.0",
+    "@stack-dev/typescript-config": "0.1.0",
+    "@stack-dev/eslint-config": "0.1.0"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "lint": "eslint .",
+    "format": "prettier . --write",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  }
+}

package/prettier.config.mjs

@@ -0,0 +1,3 @@
+import base from '@stack-dev/prettier-config/base.mjs';
+
+export default base;

package/src/button.module.css

@@ -0,0 +1,8 @@
+.styledButton {
+  background: blue;
+  color: white;
+  padding: 10px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}

package/src/button.spec.tsx

@@ -0,0 +1,25 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Button } from './button';
+
+describe('Button', () => {
+  it('renders the label correctly', () => {
+    render(<Button label="Click Me" />);
+    expect(screen.getByText('Click Me')).toBeDefined();
+  });
+
+  it('is a button element', () => {
+    render(<Button label="Submit" />);
+    const buttonElement = screen.getByRole('button');
+    expect(buttonElement.tagName).toBe('BUTTON');
+  });
+
+  /* Note: Testing for specific CSS classes with CSS Modules is tricky 
+     because class names are mangled (e.g., _styledButton_123). 
+     Usually, we just test that the class attribute exists.
+  */
+  it('applies a class name', () => {
+    render(<Button label="Styled" />);
+    const buttonElement = screen.getByRole('button');
+    expect(buttonElement.className).toBeTruthy();
+  });
+});

package/src/button.tsx

@@ -0,0 +1,11 @@
+import { HTMLAttributes } from 'react';
+
+import * as styles from './button.module.css';
+
+export function Button(props: HTMLAttributes<HTMLButtonElement>) {
+  return (
+    <button className={styles.styledButton} {...props}>
+      {props.children}
+    </button>
+  );
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from './button';

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "@stack-dev/typescript-config/tsconfig.react.json",
+  "compilerOptions": {
+    "outDir": "dist"
+  },
+  "include": ["src"]
+}

package/tsup.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+  entry: ['src/index.ts'],
+  format: ['cjs', 'esm'],
+  dts: true,
+  minify: true,
+  clean: true,
+  splitting: false,
+  external: ['react', 'react-dom'],
+  injectStyle: true,
+  outExtension({ format }) {
+    return {
+      js: format === 'esm' ? '.mjs' : '.js',
+    };
+  },
+});

package/vitest.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json', 'html'],
+    },
+    css: true,
+  },
+});