@valbuild/cli 0.138.0 → 0.138.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @valbuild/cli
 
+## 0.138.1
+
+### Patch Changes
+
+- [#758](https://github.com/valbuild/val/pull/758) [`af57406`](https://github.com/valbuild/val/commit/af57406fb679f5917559a8c97507b7c42f2b48fe) Thanks [@freekh](https://github.com/freekh)! - `val publish` no longer stores a project's stylesheets as its source. It still compiles them, so the site's CSS is unchanged, but the source a managed project's Studio builds from comes without them — as the platform's own publish has always stored it.
+
+  A stored stylesheet broke every Studio publish that followed: a browser build cannot run a Tailwind `@plugin` (the starter's `src/styles.css` has `@plugin "@tailwindcss/typography"`), so it refused the stylesheet and the publish failed with "build failed 3 times". Without one, the Studio ships the live site's CSS, which is right — a Studio edit never changes a stylesheet.
+
+- Updated dependencies []:
+  - @valbuild/server@0.138.1
+  - @valbuild/language-server@0.138.1
+
 ## 0.138.0
 
 ### Minor Changes

package/cli/dist/valbuild-cli-cli.cjs.dev.js

@@ -2351,6 +2351,25 @@ const CODE_FILE = /\.(tsx?|jsx?|mjs|cjs|css)$/;
  */
 const JSON_FILE = /\.json$/;
 
+/**
+ * The project's source as it is STORED, which is what the Studio builds from:
+ * every file this build read, less the stylesheets.
+ *
+ * This build compiles them, because it can run what a stylesheet asks for -- a
+ * Tailwind `@plugin` is a module resolved and executed from `node_modules`. A
+ * build in the browser cannot, and refuses the stylesheet rather than ship a
+ * page that is quietly unstyled; the starter's `src/styles.css` has
+ * `@plugin "@tailwindcss/typography"`. So a stored stylesheet made every
+ * Studio publish after the first one fail. Without it, the Studio's build has
+ * no CSS of its own and ships the live site's (`liveStylesheet` in the
+ * Studio), which is right: a Studio save changes content and uploaded files,
+ * never a stylesheet. It is also what the platform's own publish has always
+ * stored.
+ */
+function withoutStylesheets(sources) {
+  return Object.fromEntries(Object.entries(sources).filter(([key]) => !key.endsWith(".css")));
+}
+
 /**
  * The project's own files: its source as text, and the binaries it imports
  * (an image, a font) base64, as `BuildInput.assets` takes them. `public/` is
@@ -2487,6 +2506,7 @@ async function buildArtifacts(options) {
     // Less the one about the layer, which is the thing this goes on to build.
     warnings.push(...((wiring === null || wiring === void 0 ? void 0 : wiring.warnings) ?? []).filter(warning => !warning.includes("dependency layer built for it")));
     const sources = (wiring === null || wiring === void 0 ? void 0 : wiring.files) ?? onDisk;
+    const projectSource = withoutStylesheets(sources);
 
     // The dependency layer: from what the project imports, of what it declares.
     log("Building the dependency layer");
@@ -2526,9 +2546,10 @@ async function buildArtifacts(options) {
       env: publicEnv(options.env ?? process.env),
       publicFiles: readPublicFiles(root),
       assets,
-      // The project's own files, without the generated tree: what the next
-      // publish -- the Studio's included -- starts from.
-      projectSource: sources,
+      // The project's own files, without the generated tree or the
+      // stylesheets: what the next publish -- the Studio's included -- starts
+      // from. See `withoutStylesheets`.
+      projectSource,
       loadCssModule: node.cssModuleLoader(root),
       ...(splitter ? {
         routeSplitter: splitter
@@ -2536,7 +2557,7 @@ async function buildArtifacts(options) {
       rsc: target.project.rsc
     });
     const artifacts = await builder.publishArtifacts(built, {
-      projectSource: sources
+      projectSource
     });
     const dir = options.outDir ?? fs__default$1["default"].mkdtempSync(path__default["default"].join(os__default["default"].tmpdir(), "val-publish-"));
     for (const artifact of artifacts) {

package/cli/dist/valbuild-cli-cli.cjs.prod.js

@@ -2351,6 +2351,25 @@ const CODE_FILE = /\.(tsx?|jsx?|mjs|cjs|css)$/;
  */
 const JSON_FILE = /\.json$/;
 
+/**
+ * The project's source as it is STORED, which is what the Studio builds from:
+ * every file this build read, less the stylesheets.
+ *
+ * This build compiles them, because it can run what a stylesheet asks for -- a
+ * Tailwind `@plugin` is a module resolved and executed from `node_modules`. A
+ * build in the browser cannot, and refuses the stylesheet rather than ship a
+ * page that is quietly unstyled; the starter's `src/styles.css` has
+ * `@plugin "@tailwindcss/typography"`. So a stored stylesheet made every
+ * Studio publish after the first one fail. Without it, the Studio's build has
+ * no CSS of its own and ships the live site's (`liveStylesheet` in the
+ * Studio), which is right: a Studio save changes content and uploaded files,
+ * never a stylesheet. It is also what the platform's own publish has always
+ * stored.
+ */
+function withoutStylesheets(sources) {
+  return Object.fromEntries(Object.entries(sources).filter(([key]) => !key.endsWith(".css")));
+}
+
 /**
  * The project's own files: its source as text, and the binaries it imports
  * (an image, a font) base64, as `BuildInput.assets` takes them. `public/` is
@@ -2487,6 +2506,7 @@ async function buildArtifacts(options) {
     // Less the one about the layer, which is the thing this goes on to build.
     warnings.push(...((wiring === null || wiring === void 0 ? void 0 : wiring.warnings) ?? []).filter(warning => !warning.includes("dependency layer built for it")));
     const sources = (wiring === null || wiring === void 0 ? void 0 : wiring.files) ?? onDisk;
+    const projectSource = withoutStylesheets(sources);
 
     // The dependency layer: from what the project imports, of what it declares.
     log("Building the dependency layer");
@@ -2526,9 +2546,10 @@ async function buildArtifacts(options) {
       env: publicEnv(options.env ?? process.env),
       publicFiles: readPublicFiles(root),
       assets,
-      // The project's own files, without the generated tree: what the next
-      // publish -- the Studio's included -- starts from.
-      projectSource: sources,
+      // The project's own files, without the generated tree or the
+      // stylesheets: what the next publish -- the Studio's included -- starts
+      // from. See `withoutStylesheets`.
+      projectSource,
       loadCssModule: node.cssModuleLoader(root),
       ...(splitter ? {
         routeSplitter: splitter
@@ -2536,7 +2557,7 @@ async function buildArtifacts(options) {
       rsc: target.project.rsc
     });
     const artifacts = await builder.publishArtifacts(built, {
-      projectSource: sources
+      projectSource
     });
     const dir = options.outDir ?? fs__default$1["default"].mkdtempSync(path__default["default"].join(os__default["default"].tmpdir(), "val-publish-"));
     for (const artifact of artifacts) {

package/cli/dist/valbuild-cli-cli.esm.js

@@ -2316,6 +2316,25 @@ const CODE_FILE = /\.(tsx?|jsx?|mjs|cjs|css)$/;
  */
 const JSON_FILE = /\.json$/;
 
+/**
+ * The project's source as it is STORED, which is what the Studio builds from:
+ * every file this build read, less the stylesheets.
+ *
+ * This build compiles them, because it can run what a stylesheet asks for -- a
+ * Tailwind `@plugin` is a module resolved and executed from `node_modules`. A
+ * build in the browser cannot, and refuses the stylesheet rather than ship a
+ * page that is quietly unstyled; the starter's `src/styles.css` has
+ * `@plugin "@tailwindcss/typography"`. So a stored stylesheet made every
+ * Studio publish after the first one fail. Without it, the Studio's build has
+ * no CSS of its own and ships the live site's (`liveStylesheet` in the
+ * Studio), which is right: a Studio save changes content and uploaded files,
+ * never a stylesheet. It is also what the platform's own publish has always
+ * stored.
+ */
+function withoutStylesheets(sources) {
+  return Object.fromEntries(Object.entries(sources).filter(([key]) => !key.endsWith(".css")));
+}
+
 /**
  * The project's own files: its source as text, and the binaries it imports
  * (an image, a font) base64, as `BuildInput.assets` takes them. `public/` is
@@ -2452,6 +2471,7 @@ async function buildArtifacts(options) {
     // Less the one about the layer, which is the thing this goes on to build.
     warnings.push(...((wiring === null || wiring === void 0 ? void 0 : wiring.warnings) ?? []).filter(warning => !warning.includes("dependency layer built for it")));
     const sources = (wiring === null || wiring === void 0 ? void 0 : wiring.files) ?? onDisk;
+    const projectSource = withoutStylesheets(sources);
 
     // The dependency layer: from what the project imports, of what it declares.
     log("Building the dependency layer");
@@ -2491,9 +2511,10 @@ async function buildArtifacts(options) {
       env: publicEnv(options.env ?? process.env),
       publicFiles: readPublicFiles(root),
       assets,
-      // The project's own files, without the generated tree: what the next
-      // publish -- the Studio's included -- starts from.
-      projectSource: sources,
+      // The project's own files, without the generated tree or the
+      // stylesheets: what the next publish -- the Studio's included -- starts
+      // from. See `withoutStylesheets`.
+      projectSource,
       loadCssModule: node.cssModuleLoader(root),
       ...(splitter ? {
         routeSplitter: splitter
@@ -2501,7 +2522,7 @@ async function buildArtifacts(options) {
       rsc: target.project.rsc
     });
     const artifacts = await builder.publishArtifacts(built, {
-      projectSource: sources
+      projectSource
     });
     const dir = options.outDir ?? fs$1.mkdtempSync(path.join(os.tmpdir(), "val-publish-"));
     for (const artifact of artifacts) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@valbuild/cli",
   "private": false,
-  "version": "0.138.0",
+  "version": "0.138.1",
   "description": "Val CLI tools",
   "repository": {
     "type": "git",
@@ -28,8 +28,8 @@
     "zod-validation-error": "^5.0.0",
     "@valbuild/core": "0.138.0",
     "@valbuild/eslint-plugin": "0.125.0",
-    "@valbuild/language-server": "0.138.0",
-    "@valbuild/server": "0.138.0",
+    "@valbuild/language-server": "0.138.1",
+    "@valbuild/server": "0.138.1",
     "@valbuild/shared": "0.138.0"
   },
   "peerDependencies": {

package/src/publish/__fixtures__/buildPublishProbe.ts

@@ -86,6 +86,10 @@ type Report = {
   uploadedLayerRev: string | null;
   /** Whether the source artifact holds the project's own route file. */
   sourceHasRoute: boolean;
+  /** Whether the source artifact holds a stylesheet -- it must not. */
+  sourceHasStylesheet: boolean;
+  /** Whether the stylesheet was compiled into the site's CSS all the same. */
+  cssHasRule: boolean;
   /** Whether the client build carries the page's text. */
   clientHasPage: boolean;
   /** Whether the imported image reached the build, inlined. */
@@ -183,6 +187,14 @@ async function publishOnce(
       ? "src/routes/index.tsx" in
         (JSON.parse(source.toString("utf8")) as Record<string, string>)
       : false,
+    sourceHasStylesheet: source
+      ? Object.keys(
+          JSON.parse(source.toString("utf8")) as Record<string, string>,
+        ).some((key) => key.endsWith(".css"))
+      : false,
+    cssHasRule: (fake.stored.get("css")?.toString("utf8") ?? "").includes(
+      "rebeccapurple",
+    ),
     clientHasPage: clientText.includes("hello from the checkout"),
     clientHasLogo: clientText.includes(
       `data:image/png;base64,${LOGO.toString("base64")}`,

package/src/publish/buildArtifacts.ts

@@ -97,6 +97,29 @@ const CODE_FILE = /\.(tsx?|jsx?|mjs|cjs|css)$/;
  */
 const JSON_FILE = /\.json$/;
 
+/**
+ * The project's source as it is STORED, which is what the Studio builds from:
+ * every file this build read, less the stylesheets.
+ *
+ * This build compiles them, because it can run what a stylesheet asks for -- a
+ * Tailwind `@plugin` is a module resolved and executed from `node_modules`. A
+ * build in the browser cannot, and refuses the stylesheet rather than ship a
+ * page that is quietly unstyled; the starter's `src/styles.css` has
+ * `@plugin "@tailwindcss/typography"`. So a stored stylesheet made every
+ * Studio publish after the first one fail. Without it, the Studio's build has
+ * no CSS of its own and ships the live site's (`liveStylesheet` in the
+ * Studio), which is right: a Studio save changes content and uploaded files,
+ * never a stylesheet. It is also what the platform's own publish has always
+ * stored.
+ */
+export function withoutStylesheets(
+  sources: Record<string, string>,
+): Record<string, string> {
+  return Object.fromEntries(
+    Object.entries(sources).filter(([key]) => !key.endsWith(".css")),
+  );
+}
+
 /**
  * The project's own files: its source as text, and the binaries it imports
  * (an image, a font) base64, as `BuildInput.assets` takes them. `public/` is
@@ -244,6 +267,7 @@ export async function buildArtifacts(options: {
       ),
     );
     const sources = wiring?.files ?? onDisk;
+    const projectSource = withoutStylesheets(sources);
 
     // The dependency layer: from what the project imports, of what it declares.
     log("Building the dependency layer");
@@ -295,15 +319,16 @@ export async function buildArtifacts(options: {
       env: publicEnv(options.env ?? process.env),
       publicFiles: readPublicFiles(root),
       assets,
-      // The project's own files, without the generated tree: what the next
-      // publish -- the Studio's included -- starts from.
-      projectSource: sources,
+      // The project's own files, without the generated tree or the
+      // stylesheets: what the next publish -- the Studio's included -- starts
+      // from. See `withoutStylesheets`.
+      projectSource,
       loadCssModule: node.cssModuleLoader(root),
       ...(splitter ? { routeSplitter: splitter } : {}),
       rsc: target.project.rsc,
     });
     const artifacts: PublishArtifact[] = await builder.publishArtifacts(built, {
-      projectSource: sources,
+      projectSource,
     });
 
     const dir =

package/src/publish/buildPublish.test.ts

@@ -29,6 +29,8 @@ type Run = {
   buildTargetCalls: number;
   uploadedLayerRev: string | null;
   sourceHasRoute: boolean;
+  sourceHasStylesheet: boolean;
+  cssHasRule: boolean;
   clientHasPage: boolean;
   clientHasLogo: boolean;
   buildRouteBuilt: boolean;
@@ -76,6 +78,14 @@ test("the stored source is the project's own files", () => {
   expect(probe.fresh.sourceHasRoute).toBe(true);
 });
 
+test("a stylesheet is built, and not stored as source", () => {
+  // The Studio builds from the stored source, in a browser that cannot run a
+  // Tailwind `@plugin`; a stored stylesheet failed every Studio publish after
+  // the first. Without one it ships the live site's CSS, compiled here.
+  expect(probe.fresh.cssHasRule).toBe(true);
+  expect(probe.fresh.sourceHasStylesheet).toBe(false);
+});
+
 test("an image the project imports reaches the build", () => {
   expect(probe.fresh.clientHasLogo).toBe(true);
 });