Repository: Automattic/wp-calypso
Pull request #102635: Set up build for vendored package
Author: login: oandregal
Created: 2025-04-15T17:04:15Z | Merged: 2025-04-24T14:47:14Z

Follow-up to https://github.com/Automattic/wp-calypso/pull/102276

## Proposed Changes

Sets up the build processes for `packages/dataviews` vendored copy.

## Tasks

- [x] Set it up as part of the yarn workspace.
  - [x] `clean`.
  - [x] build `packages/dataviews` upon running `yarn` (`prepare` command that calls `build`).
  - [x] remove exclusion from `wp-calypso/package.json`.
- [x] Compiled code (commands for the package):
  - [x] Output in `build/`: CJS.
  - [x] Output in `build-module/`: ESM.
  - [x] Output in `build-types/`: typescript types.
  - [x] Output in `build-style/`. `build:style` command.
    - [x] There are small differences from what's published in npm, we need sync from upstream to bring those changes in. For example, https://github.com/WordPress/gutenberg/commit/87b3af7957de01403da841a7a3945599d3263742 and https://github.com/WordPress/gutenberg/commit/10ae0d7d76bab76eff590985e13ab9c824b12d5a). https://github.com/Automattic/wp-calypso/pull/102704
    - [x] Pass base-styles differently. 
    - [x] `--wp-admin-theme-color-darker-10`: it's set to `rgb(0, 107, 160.5)` but it should be set to `#006ba1`.
  - [x] Output in `build-wp/`. Build WordPress bundle, `build:wp` command.
    - [x] There're some differences in `PopoverSlot` due to this PR using a different version of `@wordpress/components`. It's using 29.7.0 while the latest published one (which `@wordpress/dataviews` uses) is 29.8.0. This will be addressed in https://github.com/Automattic/wp-calypso/pull/102614
- [x] npm package preparation: review README, `package.json`, CHANGELOG, LICENSE, etc.

## Testing Instructions

- **Compare the output of styles and JavaScript** to what's available in the npm registry as `@wordpress/dataviews` 4.18.0.

| `@wordpress/dataviews` | This PR |  | 
| --- | --- | --- |
| `build-style/style.css` | `dist/style/style.css` | They should be exactly the same. | 
| `build-style/style-rtl.css` | `dist/style/style-rtl.css` | They should be exactly the same. |
| `build-wp/index.js` | `dist/wp/index.js` | The expectation is that there are no changes, other than paths in comments (e.g.: from `// ../../node_modules/@wordpress/components/...` to `// ../components/.` and a `flexShrink` value that changes from string to integer. | 

- **Test this PR with a small app.**

I've tested it by building a small app at ([dv-test](https://github.com/oandregal/dv-test)).

```sh
git clone git@github.com:oandregal/dv-test.git
npm install
npm start
```

It'll open a new browser tab at http://localhost:3000/ and you can interact with the data. The app bundles the latest changes in this PR as a tgz (`automattic-dataviews-0.1.0.tgz`), so it simulates it's using the `@automattic/dataviews` package.


Diff:
diff --git a/package.json b/package.json
index 9d2a34e80e88..53ff456e5c84 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,6 @@
 			"desktop",
 			"apps/*",
 			"packages/*",
-			"!packages/dataviews",
 			"test/e2e"
 		]
 	},
diff --git a/packages/dataviews/CHANGELOG.calypso.md b/packages/dataviews/CHANGELOG.calypso.md
new file mode 100644
index 000000000000..bd2542105749
--- /dev/null
+++ b/packages/dataviews/CHANGELOG.calypso.md
@@ -0,0 +1,7 @@
+# Changelog
+
+## Unreleased
+
+## 0.1.0
+
+- First release of the `@automattic/dataviews` package. It bundles all changes from `@wordpress/dataviews` 4.18.0.
diff --git a/packages/dataviews/LICENSE.md b/packages/dataviews/LICENSE.md
new file mode 100644
index 000000000000..76447ac95602
--- /dev/null
+++ b/packages/dataviews/LICENSE.md
@@ -0,0 +1,257 @@
+# The GNU General Public License, Version 2, June 1991 (GPLv2)
+
+> Copyright (C) 1989, 1991 Free Software Foundation, Inc.
+> 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA
+
+Everyone is permitted to copy and distribute verbatim copies of this license
+document, but changing it is not allowed.
+
+## Preamble
+
+The licenses for most software are designed to take away your freedom to share
+and change it. By contrast, the GNU General Public License is intended to
+guarantee your freedom to share and change free software--to make sure the
+software is free for all its users. This General Public License applies to most
+of the Free Software Foundation's software and to any other program whose
+authors commit to using it. (Some other Free Software Foundation software is
+covered by the GNU Library General Public License instead.) You can apply it to
+your programs, too.
+
+When we speak of free software, we are referring to freedom, not price. Our
+General Public Licenses are designed to make sure that you have the freedom to
+distribute copies of free software (and charge for this service if you wish),
+that you receive source code or can get it if you want it, that you can change
+the software or use pieces of it in new free programs; and that you know you can
+do these things.
+
+To protect your rights, we need to make restrictions that forbid anyone to deny
+you these rights or to ask you to surrender the rights. These restrictions
+translate to certain responsibilities for you if you distribute copies of the
+software, or if you modify it.
+
+For example, if you distribute copies of such a program, whether gratis or for a
+fee, you must give the recipients all the rights that you have. You must make
+sure that they, too, receive or can get the source code. And you must show them
+these terms so they know their rights.
+
+We protect your rights with two steps: (1) copyright the software, and (2) offer
+you this license which gives you legal permission to copy, distribute and/or
+modify the software.
+
+Also, for each author's protection and ours, we want to make certain that
+everyone understands that there is no warranty for this free software. If the
+software is modified by someone else and passed on, we want its recipients to
+know that what they have is not the original, so that any problems introduced by
+others will not reflect on the original authors' reputations.
+
+Finally, any free program is threatened constantly by software patents. We wish
+to avoid the danger that redistributors of a free program will individually
+obtain patent licenses, in effect making the program proprietary. To prevent
+this, we have made it clear that any patent must be licensed for everyone's free
+use or not licensed at all.
+
+The precise terms and conditions for copying, distribution and modification
+follow.
+
+## Terms And Conditions For Copying, Distribution And Modification
+
+**0.** This License applies to any program or other work which contains a notice
+placed by the copyright holder saying it may be distributed under the terms of
+this General Public License. The "Program", below, refers to any such program or
+work, and a "work based on the Program" means either the Program or any
+derivative work under copyright law: that is to say, a work containing the
+Program or a portion of it, either verbatim or with modifications and/or
+translated into another language. (Hereinafter, translation is included without
+limitation in the term "modification".) Each licensee is addressed as "you".
+
+Activities other than copying, distribution and modification are not covered by
+this License; they are outside its scope. The act of running the Program is not
+restricted, and the output from the Program is covered only if its contents
+constitute a work based on the Program (independent of having been made by
+running the Program). Whether that is true depends on what the Program does.
+
+**1.** You may copy and distribute verbatim copies of the Program's source code
+as you receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice and
+disclaimer of warranty; keep intact all the notices that refer to this License
+and to the absence of any warranty; and give any other recipients of the Program
+a copy of this License along with the Program.
+
+You may charge a fee for the physical act of transferring a copy, and you may at
+your option offer warranty protection in exchange for a fee.
+
+**2.** You may modify your copy or copies of the Program or any portion of it,
+thus forming a work based on the Program, and copy and distribute such
+modifications or work under the terms of Section 1 above, provided that you also
+meet all of these conditions:
+
+- **a)** You must cause the modified files to carry prominent notices stating
+  that you changed the files and the date of any change.
+
+- **b)** You must cause any work that you distribute or publish, that in whole
+  or in part contains or is derived from the Program or any part thereof, to
+  be licensed as a whole at no charge to all third parties under the terms of
+  this License.
+
+- **c)** If the modified program normally reads commands interactively when
+  run, you must cause it, when started running for such interactive use in the
+  most ordinary way, to print or display an announcement including an
+  appropriate copyright notice and a notice that there is no warranty (or
+  else, saying that you provide a warranty) and that users may redistribute
+  the program under these conditions, and telling the user how to view a copy
+  of this License. (Exception: if the Program itself is interactive but does
+  not normally print such an announcement, your work based on the Program is
+  not required to print an announcement.)
+
+These requirements apply to the modified work as a whole. If identifiable
+sections of that work are not derived from the Program, and can be reasonably
+considered independent and separate works in themselves, then this License, and
+its terms, do not apply to those sections when you distribute them as separate
+works. But when you distribute the same sections as part of a whole which is a
+work based on the Program, the distribution of the whole must be on the terms of
+this License, whose permissions for other licensees extend to the entire whole,
+and thus to each and every part regardless of who wrote it.
+
+Thus, it is not the intent of this section to claim rights or contest your
+rights to work written entirely by you; rather, the intent is to exercise the
+right to control the distribution of derivative or collective works based on the
+Program.
+
+In addition, mere aggregation of another work not based on the Program with the
+Program (or with a work based on the Program) on a volume of a storage or
+distribution medium does not bring the other work under the scope of this
+License.
+
+**3.** You may copy and distribute the Program (or a work based on it, under
+Section 2) in object code or executable form under the terms of Sections 1 and 2
+above provided that you also do one of the following:
+
+- **a)** Accompany it with the complete corresponding machine-readable source
+  code, which must be distributed under the terms of Sections 1 and 2 above on
+  a medium customarily used for software interchange; or,
+
+- **b)** Accompany it with a written offer, valid for at least three years, to
+  give any third party, for a charge no more than your cost of physically
+  performing source distribution, a complete machine-readable copy of the
+  corresponding source code, to be distributed under the terms of Sections 1
+  and 2 above on a medium customarily used for software interchange; or,
+
+- **c)** Accompany it with the information you received as to the offer to
+  distribute corresponding source code. (This alternative is allowed only for
+  noncommercial distribution and only if you received the program in object
+  code or executable form with such an offer, in accord with Subsection b
+  above.)
+
+The source code for a work means the preferred form of the work for making
+modifications to it. For an executable work, complete source code means all the
+source code for all modules it contains, plus any associated interface
+definition files, plus the scripts used to control compilation and installation
+of the executable. However, as a special exception, the source code distributed
+need not include anything that is normally distributed (in either source or
+binary form) with the major components (compiler, kernel, and so on) of the
+operating system on which the executable runs, unless that component itself
+accompanies the executable.
+
+If distribution of executable or object code is made by offering access to copy
+from a designated place, then offering equivalent access to copy the source code
+from the same place counts as distribution of the source code, even though third
+parties are not compelled to copy the source along with the object code.
+
+**4.** You may not copy, modify, sublicense, or distribute the Program except as
+expressly provided under this License. Any attempt otherwise to copy, modify,
+sublicense or distribute the Program is void, and will automatically terminate
+your rights under this License. However, parties who have received copies, or
+rights, from you under this License will not have their licenses terminated so
+long as such parties remain in full compliance.
+
+**5.** You are not required to accept this License, since you have not signed
+it. However, nothing else grants you permission to modify or distribute the
+Program or its derivative works. These actions are prohibited by law if you do
+not accept this License. Therefore, by modifying or distributing the Program (or
+any work based on the Program), you indicate your acceptance of this License to
+do so, and all its terms and conditions for copying, distributing or modifying
+the Program or works based on it.
+
+**6.** Each time you redistribute the Program (or any work based on the
+Program), the recipient automatically receives a license from the original
+licensor to copy, distribute or modify the Program subject to these terms and
+conditions. You may not impose any further restrictions on the recipients'
+exercise of the rights granted herein. You are not responsible for enforcing
+compliance by third parties to this License.
+
+**7.** If, as a consequence of a court judgment or allegation of patent
+infringement or for any other reason (not limited to patent issues), conditions
+are imposed on you (whether by court order, agreement or otherwise) that
+contradict the conditions of this License, they do not excuse you from the
+conditions of this License. If you cannot distribute so as to satisfy
+simultaneously your obligations under this License and any other pertinent
+obligations, then as a consequence you may not distribute the Program at all.
+For example, if a patent license would not permit royalty-free redistribution of
+the Program by all those who receive copies directly or indirectly through you,
+then the only way you could satisfy both it and this License would be to refrain
+entirely from distribution of the Program.
+
+If any portion of this section is held invalid or unenforceable under any
+particular circumstance, the balance of the section is intended to apply and the
+section as a whole is intended to apply in other circumstances.
+
+It is not the purpose of this section to induce you to infringe any patents or
+other property right claims or to contest validity of any such claims; this
+section has the sole purpose of protecting the integrity of the free software
+distribution system, which is implemented by public license practices. Many
+people have made generous contributions to the wide range of software
+distributed through that system in reliance on consistent application of that
+system; it is up to the author/donor to decide if he or she is willing to
+distribute software through any other system and a licensee cannot impose that
+choice.
+
+This section is intended to make thoroughly clear what is believed to be a
+consequence of the rest of this License.
+
+**8.** If the distribution and/or use of the Program is restricted in certain
+countries either by patents or by copyrighted interfaces, the original copyright
+holder who places the Program under this License may add an explicit
+geographical distribution limitation excluding those countries, so that
+distribution is permitted only in or among countries not thus excluded. In such
+case, this License incorporates the limitation as if written in the body of this
+License.
+
+**9.** The Free Software Foundation may publish revised and/or new versions of
+the General Public License from time to time. Such new versions will be similar
+in spirit to the present version, but may differ in detail to address new
+problems or concerns.
+
+Each version is given a distinguishing version number. If the Program specifies
+a version number of this License which applies to it and "any later version",
+you have the option of following the terms and conditions either of that version
+or of any later version published by the Free Software Foundation. If the
+Program does not specify a version number of this License, you may choose any
+version ever published by the Free Software Foundation.
+
+**10.** If you wish to incorporate parts of the Program into other free programs
+whose distribution conditions are different, write to the author to ask for
+permission. For software which is copyrighted by the Free Software Foundation,
+write to the Free Software Foundation; we sometimes make exceptions for this.
+Our decision will be guided by the two goals of preserving the free status of
+all derivatives of our free software and of promoting the sharing and reuse of
+software generally.
+
+## No Warranty
+
+**11.** BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY FOR
+THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. EXCEPT WHEN OTHERWISE
+STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM
+"AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING,
+BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A
+PARTICULAR PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE
+PROGRAM IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
+ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+**12.** IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR REDISTRIBUTE
+THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
+GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE USE OR
+INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF DATA OR DATA
+BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD PARTIES OR A
+FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS), EVEN IF SUCH HOLDER
+OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.
diff --git a/packages/dataviews/README.md b/packages/dataviews/README.md
index f2ac14853447..5bd9659440c2 100644
--- a/packages/dataviews/README.md
+++ b/packages/dataviews/README.md
@@ -1,4 +1,6 @@
-# The `@wordpress/dataviews` package
+# The `@automattic/dataviews` package
+
+> This package is based on the `@wordpress/dataviews` package and extends its functionality. See the "Contributing to this package" section for more info.
 
 The DataViews package offers two React components and a few utilities to work with a list of data:
 
@@ -10,14 +12,14 @@ The DataViews package offers two React components and a few utilities to work wi
 Install the module
 
 ```bash
-npm install @wordpress/dataviews --save
+npm install @automattic/dataviews --save
 ```
 
 ## `DataViews`
 
 <div class="callout callout-info">At <a href="https://wordpress.github.io/gutenberg/">WordPress Gutenberg's Storybook</a> there's an <a href="https://wordpress.github.io/gutenberg/?path=/docs/dataviews-dataviews--docs">example implementation of the Dataviews component</a>.</div>
 
-**Important note** If you're trying to use the `DataViews` component in a WordPress plugin or theme and you're building your scripts using the `@wordpress/scripts` package, you need to import the components from `@wordpress/dataviews/wp` instead of `@wordpress/dataviews`.
+**Important note** If you're trying to use the `DataViews` component in a WordPress plugin or theme and you're building your scripts using the `@wordpress/scripts` package, you need to import the components from `@automattic/dataviews/wp` instead of `@automattic/dataviews`.
 
 ### Usage
 
@@ -1221,8 +1223,8 @@ Example:
 
 ## Contributing to this package
 
-This is an individual package that's part of the Gutenberg project. The project is organized as a monorepo. It's made up of multiple self-contained software packages, each with a specific purpose. The packages in this monorepo are published to [npm](https://www.npmjs.com/) and used by [WordPress](https://make.wordpress.org/core/) as well as other software projects.
+This package is based on and extends the [`@wordpress/dataviews` package](https://www.npmjs.com/package/@wordpress/dataviews).
 
-To find out more about contributing to this package or Gutenberg as a whole, please read the project's main [contributor guide](https://github.com/WordPress/gutenberg/tree/HEAD/CONTRIBUTING.md).
+This is an individual package that's part of the wp-calypso project. The project is organized as a monorepo. It's made up of multiple self-contained software packages, each with a specific purpose. The packages in this monorepo are published to [npm](https://www.npmjs.com/) and used by [wp-calypso](https://github.com/automattic/wp-calypso/) as well as other software projects.
 
-<br /><br /><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>
+To find out more about contributing to this package or wp-calypso as a whole, please read the project's main [contributor guide](https://github.com/Automattic/wp-calypso/blob/trunk/docs/CONTRIBUTING.md).
diff --git a/packages/dataviews/build-style.js b/packages/dataviews/build-style.js
new file mode 100644
index 000000000000..6ec796c1a467
--- /dev/null
+++ b/packages/dataviews/build-style.js
@@ -0,0 +1,140 @@
+/**
+ * External dependencies
+ */
+const { promisify } = require( 'util' );
+const fs = require( 'fs' );
+const path = require( 'path' );
+const sass = require( 'sass' );
+const postcss = require( 'postcss' );
+const pkgDir = require( 'pkg-dir' );
+
+/**
+ * Path to packages directory.
+ *
+ * @type {string}
+ */
+const PACKAGES_DIR = path
+	.resolve( __dirname, '../../packages' )
+	.replace( /\\/g, '/' );
+
+/**
+ * Promisified fs.readFile.
+ *
+ * @type {Function}
+ */
+const readFile = promisify( fs.readFile );
+
+/**
+ * Promisified fs.writeFile.
+ *
+ * @type {Function}
+ */
+const writeFile = promisify( fs.writeFile );
+
+/**
+ * Promisified fs.writeFile.
+ *
+ * @type {Function}
+ */
+const makeDir = promisify( fs.mkdir );
+
+/**
+ * Promisified sass.render.
+ *
+ * @type {Function}
+ */
+const renderSass = promisify( sass.render );
+
+/**
+ * Get the package name for a specified file
+ *
+ * @param {string} file File name.
+ *
+ * @return {string} Package name.
+ */
+function getPackageName( file ) {
+	return path.relative( PACKAGES_DIR, file ).split( path.sep )[ 0 ];
+}
+
+/**
+ *
+ * @param {string} pkgName
+ * @returns {string}
+ */
+function findPackagePath( pkgName ) {
+	const path = require.resolve( pkgName );
+	return pkgDir.sync( path );
+}
+
+/**
+ * Get Build Path for a specified file.
+ *
+ * @param {string} file        File to build.
+ * @param {string} buildFolder Output folder.
+ *
+ * @return {string} Build path.
+ */
+function getBuildPath( file, buildFolder ) {
+	const pkgName = getPackageName( file );
+	const pkgSrcPath = path.resolve( PACKAGES_DIR, pkgName, 'src' );
+	const pkgBuildPath = path.resolve( PACKAGES_DIR, pkgName, buildFolder );
+	const relativeToSrcPath = path.relative( pkgSrcPath, file );
+	return path.resolve( pkgBuildPath, relativeToSrcPath );
+}
+
+async function buildCSS( file ) {
+	const outputFile = getBuildPath(
+		file.replace( '.scss', '.css' ),
+		'dist/style'
+	);
+	const outputFileRTL = getBuildPath(
+		file.replace( '.scss', '-rtl.css' ),
+		'dist/style'
+	);
+
+	const [ , contents ] = await Promise.all( [
+		makeDir( path.dirname( outputFile ), { recursive: true } ),
+		readFile( file, 'utf8' ),
+	] );
+
+	const importLists = [
+		'colors',
+		'breakpoints',
+		'variables',
+		'mixins',
+		'animations',
+		'z-index',
+		'default-custom-properties',
+	]
+		.map( ( imported ) => `@import "${ imported }";` )
+		.join( ' ' );
+
+	const builtSass = await renderSass( {
+		file,
+		includePaths: [ findPackagePath( '@wordpress/base-styles' ) ],
+		data: ''.concat( '@use "sass:math";', importLists, contents ),
+	} );
+
+	const result = await postcss( [
+		require( 'postcss-local-keyframes' ),
+		...require( '@wordpress/postcss-plugins-preset' ),
+	] ).process( builtSass.css, {
+		from: 'src/app.css',
+		to: 'dest/app.css',
+	} );
+
+	const resultRTL = await postcss( [ require( 'rtlcss' )() ] ).process(
+		result.css,
+		{
+			from: 'src/app.css',
+			to: 'dest/app.css',
+		}
+	);
+
+	await Promise.all( [
+		writeFile( outputFile, result.css ),
+		writeFile( outputFileRTL, resultRTL.css ),
+	] );
+}
+
+buildCSS( 'src/style.scss' );
diff --git a/packages/dataviews/build.js b/packages/dataviews/build.js
index 16146632d035..ef63f6442bcd 100644
--- a/packages/dataviews/build.js
+++ b/packages/dataviews/build.js
@@ -32,7 +32,7 @@ const wpExternals = {
 esbuild.build( {
 	entryPoints: [ 'src/index.ts' ],
 	bundle: true,
-	outdir: 'build-wp',
+	outdir: 'dist/wp',
 	plugins: [ wpExternals ],
 	jsx: 'automatic',
 	logLevel: 'info',
diff --git a/packages/dataviews/package.json b/packages/dataviews/package.json
index c932c9a2c36e..7b99b9bce612 100644
--- a/packages/dataviews/package.json
+++ b/packages/dataviews/package.json
@@ -1,7 +1,6 @@
 {
 	"name": "@automattic/dataviews",
 	"version": "0.1.0",
-	"private": true,
 	"description": "DataViews is a component that provides an API to render datasets using different types of layouts (table, grid, list, etc.).",
 	"author": "Automattic Inc.",
 	"license": "GPL-2.0-or-later",
@@ -18,30 +17,30 @@
 		"node": ">=18.12.0",
 		"npm": ">=8.19.2"
 	},
-	"main": "build/index.js",
-	"module": "build-module/index.js",
+	"main": "dist/cjs/index.js",
+	"module": "dist/esm/index.js",
+	"calypso:src": "src/index.ts",
 	"exports": {
 		".": {
-			"types": "./build-types/index.d.ts",
-			"import": "./build-module/index.js",
-			"default": "./build/index.js"
+			"calypso:src": "./src/index.ts",
+			"types": "./dist/types/index.d.ts",
+			"import": "./dist/esm/index.js",
+			"default": "./dist/cjs/index.js"
 		},
 		"./wp": {
-			"types": "./build-types/index.d.ts",
-			"default": "./build-wp/index.js"
+			"types": "./dist/types/index.d.ts",
+			"default": "./dist/wp/index.js"
 		},
-		"./package.json": {
-			"default": "./package.json"
-		},
-		"./build-style/": "./build-style/"
+		"./package.json": "./package.json",
+		"./build-style/*": "./dist/style/*"
 	},
 	"react-native": "src/index",
 	"wpScript": true,
-	"types": "build-types",
+	"types": "dist/types",
 	"sideEffects": false,
 	"dependencies": {
 		"@ariakit/react": "^0.4.15",
-		"@babel/runtime": "7.26.10",
+		"@wordpress/base-styles": "^5.22.0",
 		"@wordpress/components": "^29.8.0",
 		"@wordpress/compose": "^7.22.0",
 		"@wordpress/data": "^10.22.0",
@@ -55,12 +54,29 @@
 		"remove-accents": "^0.5.0"
 	},
 	"peerDependencies": {
-		"react": "^18.0.0"
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
 	},
+	"devDependencies": {
+		"@testing-library/jest-dom": "^6.6.3",
+		"@types/jest": "^29.5.14",
+		"@wordpress/postcss-plugins-preset": "^5.22.0",
+		"postcss": "^8.5.3",
+		"postcss-local-keyframes": "^0.0.2",
+		"sass": "1.54.0",
+		"typescript": "5.8.2"
+	},
 	"scripts": {
-		"build:wp": "node build"
+		"build": "yarn run build:js && yarn run build:style && yarn run build:wp",
+		"build:js": "tsc --build ./tsconfig.json ./tsconfig-cjs.json",
+		"build:style": "node build-style.js",
+		"build:wp": "node build",
+		"clean": "git clean --force -d -X",
+		"prepare": "yarn run build",
+		"prepack": "yarn run clean && yarn run build",
+		"watch": "tsc --build ./tsconfig.json --watch"
 	}
 }
diff --git a/packages/dataviews/src/components/dataviews-item-actions/index.tsx b/packages/dataviews/src/components/dataviews-item-actions/index.tsx
index 2f768888c2b0..3554ac6a2858 100644
--- a/packages/dataviews/src/components/dataviews-item-actions/index.tsx
+++ b/packages/dataviews/src/components/dataviews-item-actions/index.tsx
@@ -196,7 +196,7 @@ export default function ItemActions< Item >( {
 			justify="flex-end"
 			className="dataviews-item-actions"
 			style={ {
-				flexShrink: '0',
+				flexShrink: 0,
 				width: 'auto',
 			} }
 		>
diff --git a/packages/dataviews/tsconfig-cjs.json b/packages/dataviews/tsconfig-cjs.json
new file mode 100644
index 000000000000..a3e788252a24
--- /dev/null
+++ b/packages/dataviews/tsconfig-cjs.json
@@ -0,0 +1,7 @@
+{
+	"extends": "./tsconfig",
+	"compilerOptions": {
+		"module": "commonjs",
+		"outDir": "dist/cjs"
+	}
+}
diff --git a/packages/dataviews/tsconfig.json b/packages/dataviews/tsconfig.json
index a7c8759d257c..4d0e01ca95b2 100644
--- a/packages/dataviews/tsconfig.json
+++ b/packages/dataviews/tsconfig.json
@@ -1,25 +1,22 @@
 {
 	"$schema": "https://json.schemastore.org/tsconfig.json",
-	"extends": "../../tsconfig.base.json",
+	"extends": "@automattic/calypso-typescript-config/ts-package.json",
 	"compilerOptions": {
-		"types": [
-			"gutenberg-env",
-			"gutenberg-test-env",
-			"jest",
-			"@testing-library/jest-dom"
-		]
+		"allowJs": true,
+		"allowSyntheticDefaultImports": true,
+		"checkJs": true,
+		"declarationDir": "dist/types",
+		"esModuleInterop": false,
+		"lib": [ "DOM", "DOM.Iterable", "ESNext" ],
+		"module": "esnext",
+		"noFallthroughCasesInSwitch": true,
+		"noImplicitReturns": true,
+		"outDir": "dist/esm",
+		"rootDir": "src",
+		"target": "esnext",
+		"types": [ "jest", "@testing-library/jest-dom" ]
 	},
-	"references": [
-		{ "path": "../components" },
-		{ "path": "../compose" },
-		{ "path": "../data" },
-		{ "path": "../element" },
-		{ "path": "../i18n" },
-		{ "path": "../icons" },
-		{ "path": "../primitives" },
-		{ "path": "../private-apis" },
-		{ "path": "../warning" }
-	],
+	"include": [ "src" ],
 	"exclude": [
 		"src/**/*.android.js",
 		"src/**/*.ios.js",
diff --git a/yarn.lock b/yarn.lock
index 7caba35827de..b06670a7b292 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -807,6 +807,36 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@automattic/dataviews@workspace:packages/dataviews":
+  version: 0.0.0-use.local
+  resolution: "@automattic/dataviews@workspace:packages/dataviews"
+  dependencies:
+    "@ariakit/react": "npm:^0.4.15"
+    "@testing-library/jest-dom": "npm:^6.6.3"
+    "@types/jest": "npm:^29.5.14"
+    "@wordpress/base-styles": "npm:^5.22.0"
+    "@wordpress/components": "npm:^29.8.0"
+    "@wordpress/compose": "npm:^7.22.0"
+    "@wordpress/data": "npm:^10.22.0"
+    "@wordpress/element": "npm:^6.22.0"
+    "@wordpress/i18n": "npm:^5.22.0"
+    "@wordpress/icons": "npm:^10.22.0"
+    "@wordpress/postcss-plugins-preset": "npm:^5.22.0"
+    "@wordpress/primitives": "npm:^4.22.0"
+    "@wordpress/private-apis": "npm:^1.22.0"
+    "@wordpress/warning": "npm:^3.22.0"
+    clsx: "npm:^2.1.1"
+    postcss: "npm:^8.5.3"
+    postcss-local-keyframes: "npm:^0.0.2"
+    remove-accents: "npm:^0.5.0"
+    sass: "npm:1.54.0"
+    typescript: "npm:5.8.2"
+  peerDependencies:
+    react: ^18.0.0
+    react-dom: ^18.0.0
+  languageName: unknown
+  linkType: soft
+
 "@automattic/design-picker@workspace:^, @automattic/design-picker@workspace:packages/design-picker":
   version: 0.0.0-use.local
   resolution: "@automattic/design-picker@workspace:packages/design-picker"
@@ -10849,6 +10879,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@wordpress/postcss-plugins-preset@npm:5.22.0":
+  version: 5.22.0
+  resolution: "@wordpress/postcss-plugins-preset@npm:5.22.0"
+  dependencies:
+    "@wordpress/base-styles": "npm:^5.22.0"
+    autoprefixer: "npm:^10.4.20"
+  peerDependencies:
+    postcss: ^8.0.0
+  checksum: 8b1d08e77df38fd8696a0f9ea4d9cf9dad0c9e495edb8a4e087d01c2c570760f178ce49c950a8c580eb96b14e050f966ea7a9c273cfdddcd52336632c5fc00ac
+  languageName: node
+  linkType: hard
+
 "@wordpress/preferences@npm:4.22.0":
   version: 4.22.0
   resolution: "@wordpress/preferences@npm:4.22.0"
@@ -12316,21 +12358,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"autoprefixer@npm:^10.2.5":
-  version: 10.2.5
-  resolution: "autoprefixer@npm:10.2.5"
+"autoprefixer@npm:^10.2.5, autoprefixer@npm:^10.4.20":
+  version: 10.4.21
+  resolution: "autoprefixer@npm:10.4.21"
   dependencies:
-    browserslist: "npm:^4.16.3"
-    caniuse-lite: "npm:^1.0.30001196"
-    colorette: "npm:^1.2.2"
-    fraction.js: "npm:^4.0.13"
+    browserslist: "npm:^4.24.4"
+    caniuse-lite: "npm:^1.0.30001702"
+    fraction.js: "npm:^4.3.7"
     normalize-range: "npm:^0.1.2"
-    postcss-value-parser: "npm:^4.1.0"
+    picocolors: "npm:^1.1.1"
+    postcss-value-parser: "npm:^4.2.0"
   peerDependencies:
     postcss: ^8.1.0
   bin:
     autoprefixer: bin/autoprefixer
-  checksum: 77eea8d366a70abbb99cdda2fdd1c515891e077d2d2fa80505cc0fd38d2813db8237590c971f09b62ab5f37f479b35992edfcd09d4399ba8a0285853cbabc345
+  checksum: de5b71d26d0baff4bbfb3d59f7cf7114a6030c9eeb66167acf49a32c5b61c68e308f1e0f869d92334436a221035d08b51cd1b2f2c4689b8d955149423c16d4d4
   languageName: node
   linkType: hard
 
@@ -12992,7 +13034,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"browserslist@npm:^4.0.0, browserslist@npm:^4.12.0, browserslist@npm:^4.16.0, browserslist@npm:^4.16.3, browserslist@npm:^4.16.6, browserslist@npm:^4.21.10, browserslist@npm:^4.24.0, browserslist@npm:^4.24.4":
+"browserslist@npm:^4.0.0, browserslist@npm:^4.12.0, browserslist@npm:^4.16.0, browserslist@npm:^4.16.6, browserslist@npm:^4.21.10, browserslist@npm:^4.24.0, browserslist@npm:^4.24.4":
   version: 4.24.4
   resolution: "browserslist@npm:4.24.4"
   dependencies:
@@ -13716,10 +13758,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001196, caniuse-lite@npm:^1.0.30001688":
-  version: 1.0.30001702
-  resolution: "caniuse-lite@npm:1.0.30001702"
-  checksum: 52d46f41a96d179fd4e387bb6b26898148c31b626ff9aba105d207d2b0f869c7cb32ac67a6e8e0aeba3f03f33145ccfbee237250dfb58dba8b6526b4dd395ac6
+"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001688, caniuse-lite@npm:^1.0.30001702":
+  version: 1.0.30001715
+  resolution: "caniuse-lite@npm:1.0.30001715"
+  checksum: 0109a7da797ffbe1aa197baa5242b205011098eecec1087ef3d0c58ceea19be325ab6679b2751a78660adc3051a9f77e99d5789938fd1eb1235e6fdf6a1dbf8e
   languageName: node
   linkType: hard
 
@@ -14416,7 +14458,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"colorette@npm:^1.2.1, colorette@npm:^1.2.2":
+"colorette@npm:^1.2.1":
   version: 1.4.0
   resolution: "colorette@npm:1.4.0"
   checksum: 4955c8f7daafca8ae7081d672e4bd89d553bd5782b5846d5a7e05effe93c2f15f7e9c0cb46f341b59f579a39fcf436241ff79594899d75d5f3460c03d607fe9e
@@ -19309,10 +19351,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fraction.js@npm:^4.0.13":
-  version: 4.1.0
-  resolution: "fraction.js@npm:4.1.0"
-  checksum: db0e43d60dbe9211673dd88a0ba7984a1b3b34dcefa2619e12c73e9d58106fc172f13b6e6f10af5c17f2ef6439a02fe848218ec9498d4ced7cccb7ecce42e776
+"fraction.js@npm:^4.3.7":
+  version: 4.3.7
+  resolution: "fraction.js@npm:4.3.7"
+  checksum: df291391beea9ab4c263487ffd9d17fed162dbb736982dee1379b2a8cc94e4e24e46ed508c6d278aded9080ba51872f1bc5f3a5fd8d7c74e5f105b508ac28711
   languageName: node
   linkType: hard
 
@@ -27846,6 +27888,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss-local-keyframes@npm:^0.0.2":
+  version: 0.0.2
+  resolution: "postcss-local-keyframes@npm:0.0.2"
+  peerDependencies:
+    postcss: ^8.2.8
+  checksum: d84815005ec75fef50a3f4a9cb7cff59fe1222714bfe1d7864c217d7e305b45774af1567eb88af280274bf1fd56dd5a461e3d4d453bb9b44f051a3d85b79cd79
+  languageName: node
+  linkType: hard
+
 "postcss-media-query-parser@npm:^0.2.3":
   version: 0.2.3
   resolution: "postcss-media-query-parser@npm:0.2.3"
@@ -33956,7 +34007,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@npm:5.8.2, typescript@npm:^5.8.2":
+"typescript@npm:5.8.2":
   version: 5.8.2
   resolution: "typescript@npm:5.8.2"
   bin:
@@ -33966,7 +34017,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@patch:typescript@npm%3A5.8.2#optional!builtin<compat/typescript>, typescript@patch:typescript@npm%3A^5.8.2#optional!builtin<compat/typescript>":
+"typescript@npm:^5.8.2":
+  version: 5.8.3
+  resolution: "typescript@npm:5.8.3"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: 5f8bb01196e542e64d44db3d16ee0e4063ce4f3e3966df6005f2588e86d91c03e1fb131c2581baf0fb65ee79669eea6e161cd448178986587e9f6844446dbb48
+  languageName: node
+  linkType: hard
+
+"typescript@patch:typescript@npm%3A5.8.2#optional!builtin<compat/typescript>":
   version: 5.8.2
   resolution: "typescript@patch:typescript@npm%3A5.8.2#optional!builtin<compat/typescript>::version=5.8.2&hash=e012d7"
   bin:
@@ -33976,6 +34037,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"typescript@patch:typescript@npm%3A^5.8.2#optional!builtin<compat/typescript>":
+  version: 5.8.3
+  resolution: "typescript@patch:typescript@npm%3A5.8.3#optional!builtin<compat/typescript>::version=5.8.3&hash=e012d7"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: 92ea03509e06598948559ddcdd8a4ae5a7ab475766d5589f1b796f5731b3d631a4c7ddfb86a3bd44d58d10102b132cd4b4994dda9b63e6273c66d77d6a271dbd
+  languageName: node
+  linkType: hard
+
 "typeson-registry@npm:^1.0.0-alpha.20":
   version: 1.0.0-alpha.35
   resolution: "typeson-registry@npm:1.0.0-alpha.35"


Reviews:
user: login: oandregal
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-16T09:32:50Z
user: login: oandregal
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-16T09:33:57Z
user: login: oandregal
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-21T14:13:40Z
user: login: oandregal
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-21T14:19:27Z
user: login: jsnajdr
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-04-22T09:47:34Z
user: login: jsnajdr
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-04-22T10:05:07Z
user: login: oandregal
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-22T10:49:30Z
user: login: jsnajdr
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-04-22T11:01:21Z
user: login: oandregal
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-22T11:27:55Z
user: login: oandregal
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-22T11:35:47Z
user: login: oandregal
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-22T11:57:51Z
user: login: oandregal
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-22T11:58:37Z
user: login: oandregal
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-23T09:14:33Z
user: login: jsnajdr
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-04-23T10:49:54Z
user: login: oandregal
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-23T11:36:46Z
user: login: oandregal
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-23T11:37:07Z
user: login: oandregal
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-23T12:14:56Z
user: login: oandregal
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-23T14:23:58Z
user: login: jsnajdr
body: Looks good :+1:
state: APPROVED
author_association: MEMBER
submitted_at: 2025-04-24T11:35:26Z
user: login: sirreal
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-04-28T10:23:59Z

Review comments:
diff_hunk: @@ -1,3 +1,11 @@
+@import "../../node_modules/@wordpress/base-styles/colors";
path: packages/dataviews/src/style.scss
user: login: oandregal
body: TODO: fix this.
created_at: 2025-04-16T09:32:50Z
author_association: CONTRIBUTOR
diff_hunk: @@ -20,6 +20,7 @@
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
+	"calypso:src": "src/index.ts",
path: packages/dataviews/package.json
user: login: oandregal
body: I don't know what this property is for, but `docs/monorepo` [mention it as required](https://github.com/Automattic/wp-calypso/blob/trunk/docs/monorepo.md#:~:text=Your%20package.json%20can%20have%20any%20of%20the%20normal%20properties%20but%20at%20a%20minimum%20should%20contain%20main%2C%20module%2C%20calypso%3Asrc%20and%20sideEffects.).
created_at: 2025-04-16T09:33:57Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,138 @@
+/**
+ * External dependencies
+ */
+const { promisify } = require( 'util' );
+const fs = require( 'fs' );
+const path = require( 'path' );
+const sass = require( 'sass' );
+const postcss = require( 'postcss' );
+
+/**
+ * Path to packages directory.
+ *
+ * @type {string}
+ */
+const PACKAGES_DIR = path
+	.resolve( __dirname, '../../packages' )
+	.replace( /\\/g, '/' );
+
+/**
+ * Promisified fs.readFile.
+ *
+ * @type {Function}
+ */
+const readFile = promisify( fs.readFile );
+
+/**
+ * Promisified fs.writeFile.
+ *
+ * @type {Function}
+ */
+const writeFile = promisify( fs.writeFile );
+
+/**
+ * Promisified fs.writeFile.
+ *
+ * @type {Function}
+ */
+const makeDir = promisify( fs.mkdir );
+
+/**
+ * Promisified sass.render.
+ *
+ * @type {Function}
+ */
+const renderSass = promisify( sass.render );
+
+/**
+ * Get the package name for a specified file
+ *
+ * @param {string} file File name.
+ *
+ * @return {string} Package name.
+ */
+function getPackageName( file ) {
+	return path.relative( PACKAGES_DIR, file ).split( path.sep )[ 0 ];
+}
+
+/**
+ * Get Build Path for a specified file.
+ *
+ * @param {string} file        File to build.
+ * @param {string} buildFolder Output folder.
+ *
+ * @return {string} Build path.
+ */
+function getBuildPath( file, buildFolder ) {
+	const pkgName = getPackageName( file );
+	const pkgSrcPath = path.resolve( PACKAGES_DIR, pkgName, 'src' );
+	const pkgBuildPath = path.resolve( PACKAGES_DIR, pkgName, buildFolder );
+	const relativeToSrcPath = path.relative( pkgSrcPath, file );
+	return path.resolve( pkgBuildPath, relativeToSrcPath );
+}
+
+async function buildCSS( file ) {
+	const outputFile = getBuildPath(
+		file.replace( '.scss', '.css' ),
+		'build-style'
+	);
+	const outputFileRTL = getBuildPath(
+		file.replace( '.scss', '-rtl.css' ),
+		'build-style'
+	);
+
+	const [ , contents ] = await Promise.all( [
+		makeDir( path.dirname( outputFile ), { recursive: true } ),
+		readFile( file, 'utf8' ),
+	] );
+
+	const importLists = [
+		'colors',
+		'breakpoints',
+		'variables',
+		'mixins',
+		'animations',
+		'z-index',
+	]
+		// Editor and component styles should be excluded from the default CSS vars output.
+		.concat(
+			file.includes( 'common.scss' ) ||
+				! (
+					file.includes( 'block-library' ) ||
+					file.includes( 'components' )
+				)
+				? [ 'default-custom-properties' ]
+				: []
+		)
+		.map( ( imported ) => `@import "${ imported }";` )
+		.join( ' ' );
+
+	const builtSass = await renderSass( {
+		file,
+		includePaths: [ '../../node_modules/@wordpress/base-styles' ],
path: packages/dataviews/build-style.js
user: login: oandregal
body: [includePaths](https://sass-lang.com/documentation/js-api/interfaces/legacystringoptions/#includePaths) points to a place that can resolve imports.

Upstream [includes a path](https://github.com/WordPress/gutenberg/blob/trunk/bin/packages/build-worker.js#L125) that is not _installed_ (`packages/base-styles`) but we can't do that and need to point to the installed package here. This package is installed at the root, not in `packages/dataviews/node_modules`. Is there a better way to do this?
created_at: 2025-04-21T14:13:40Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,138 @@
+/**
+ * External dependencies
+ */
+const { promisify } = require( 'util' );
+const fs = require( 'fs' );
+const path = require( 'path' );
+const sass = require( 'sass' );
+const postcss = require( 'postcss' );
+
+/**
+ * Path to packages directory.
+ *
+ * @type {string}
+ */
+const PACKAGES_DIR = path
+	.resolve( __dirname, '../../packages' )
+	.replace( /\\/g, '/' );
+
+/**
+ * Promisified fs.readFile.
+ *
+ * @type {Function}
+ */
+const readFile = promisify( fs.readFile );
+
+/**
+ * Promisified fs.writeFile.
+ *
+ * @type {Function}
+ */
+const writeFile = promisify( fs.writeFile );
+
+/**
+ * Promisified fs.writeFile.
+ *
+ * @type {Function}
+ */
+const makeDir = promisify( fs.mkdir );
+
+/**
+ * Promisified sass.render.
+ *
+ * @type {Function}
+ */
+const renderSass = promisify( sass.render );
+
+/**
+ * Get the package name for a specified file
+ *
+ * @param {string} file File name.
+ *
+ * @return {string} Package name.
+ */
+function getPackageName( file ) {
+	return path.relative( PACKAGES_DIR, file ).split( path.sep )[ 0 ];
+}
+
+/**
+ * Get Build Path for a specified file.
+ *
+ * @param {string} file        File to build.
+ * @param {string} buildFolder Output folder.
+ *
+ * @return {string} Build path.
+ */
+function getBuildPath( file, buildFolder ) {
+	const pkgName = getPackageName( file );
+	const pkgSrcPath = path.resolve( PACKAGES_DIR, pkgName, 'src' );
+	const pkgBuildPath = path.resolve( PACKAGES_DIR, pkgName, buildFolder );
+	const relativeToSrcPath = path.relative( pkgSrcPath, file );
+	return path.resolve( pkgBuildPath, relativeToSrcPath );
+}
+
+async function buildCSS( file ) {
+	const outputFile = getBuildPath(
+		file.replace( '.scss', '.css' ),
+		'build-style'
+	);
+	const outputFileRTL = getBuildPath(
+		file.replace( '.scss', '-rtl.css' ),
+		'build-style'
+	);
+
+	const [ , contents ] = await Promise.all( [
+		makeDir( path.dirname( outputFile ), { recursive: true } ),
+		readFile( file, 'utf8' ),
+	] );
+
+	const importLists = [
+		'colors',
+		'breakpoints',
+		'variables',
+		'mixins',
+		'animations',
+		'z-index',
+	]
+		// Editor and component styles should be excluded from the default CSS vars output.
+		.concat(
+			file.includes( 'common.scss' ) ||
+				! (
+					file.includes( 'block-library' ) ||
+					file.includes( 'components' )
+				)
+				? [ 'default-custom-properties' ]
+				: []
+		)
+		.map( ( imported ) => `@import "${ imported }";` )
+		.join( ' ' );
+
+	const builtSass = await renderSass( {
+		file,
+		includePaths: [ '../../node_modules/@wordpress/base-styles' ],
path: packages/dataviews/build-style.js
user: login: oandregal
body: Alternatively, we could have a different entry point than `src/style.scss` that imports the `importList` files directly (e.g.: `@import "@wordpress/base-styles/colors";`). Unless there's a strong objection against this approach, I'd prefer to follow upstream as much as possible.
created_at: 2025-04-21T14:19:27Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,6 @@
+build/
+build-module/
+build-style/
+build-types/
+build-wp/
+node_modules/
path: packages/dataviews/.gitignore
user: login: jsnajdr
body: A better home for these ignores would be the root `.gitignore` file. There it's common to ignore also package-specific directories like `/packages/dataviews/build`.
created_at: 2025-04-22T09:15:11Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,8 @@
+module.exports = ( api ) => {
+	api.cache( true );
+
+	return {
+		presets: [ '@wordpress/babel-preset-default' ],
+		plugins: [ '@emotion/babel-plugin', 'babel-plugin-inline-json-import' ],
+	};
+};
path: packages/dataviews/babel.config.js
user: login: jsnajdr
body: It would be great if we could replace this Babel build (copy&pasted from Gutenberg) with TypeScript. TypeScript is able to do all the transpilation we need here, and also can generate CJS or ESM modules. We already use it to build all the other Calypso `/packages` -- just look at the `tsconfig.json` and `tsconfig-cjs.json` files and how they are invoked in the `build` scripts.

The Gutenberg Babel config has two additional plugins:
- Emotion: the DataViews package doesn't use it, does it?
- inline JSON import: TypeScript cannot do it (you need a bundler anyway to do it really 100% correct) but again: does the DataViews package do JSON imports? Probably not. In Gutenberg, JSON imports are typical for blocks.

All in all, TypeScript as configured in the Calypso repo should be able to build the package just fine.
created_at: 2025-04-22T09:39:19Z
author_association: MEMBER
diff_hunk: @@ -20,6 +20,7 @@
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
+	"calypso:src": "src/index.ts",
path: packages/dataviews/package.json
user: login: jsnajdr
body: This is for the Calypso build (the main app) to be able to consume source files in packages without first running the build step -- the one that creates the `build` or `dist` folders.

Calypso webpack build can work directly with the source (TS) files, it has all the TS/Babel transpilation set up. The `dist`/`build` directories are only for consumers that get the package from NPM.

Please add the same `calypso:src` field to the `exports`/`"."` definition a few lines below. We'll soon migrate the Calypso tooling setup to the more modern `exports` definition, in another PR.
created_at: 2025-04-22T09:43:55Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,138 @@
+/**
+ * External dependencies
+ */
+const { promisify } = require( 'util' );
+const fs = require( 'fs' );
+const path = require( 'path' );
+const sass = require( 'sass' );
+const postcss = require( 'postcss' );
+
+/**
+ * Path to packages directory.
+ *
+ * @type {string}
+ */
+const PACKAGES_DIR = path
+	.resolve( __dirname, '../../packages' )
+	.replace( /\\/g, '/' );
+
+/**
+ * Promisified fs.readFile.
+ *
+ * @type {Function}
+ */
+const readFile = promisify( fs.readFile );
+
+/**
+ * Promisified fs.writeFile.
+ *
+ * @type {Function}
+ */
+const writeFile = promisify( fs.writeFile );
+
+/**
+ * Promisified fs.writeFile.
+ *
+ * @type {Function}
+ */
+const makeDir = promisify( fs.mkdir );
path: packages/dataviews/build-style.js
user: login: jsnajdr
body: This is interesting, the code apparently predates the `fs/promises` module 🙂 
created_at: 2025-04-22T09:47:28Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,138 @@
+/**
+ * External dependencies
+ */
+const { promisify } = require( 'util' );
+const fs = require( 'fs' );
+const path = require( 'path' );
+const sass = require( 'sass' );
+const postcss = require( 'postcss' );
+
+/**
+ * Path to packages directory.
+ *
+ * @type {string}
+ */
+const PACKAGES_DIR = path
+	.resolve( __dirname, '../../packages' )
+	.replace( /\\/g, '/' );
+
+/**
+ * Promisified fs.readFile.
+ *
+ * @type {Function}
+ */
+const readFile = promisify( fs.readFile );
+
+/**
+ * Promisified fs.writeFile.
+ *
+ * @type {Function}
+ */
+const writeFile = promisify( fs.writeFile );
+
+/**
+ * Promisified fs.writeFile.
+ *
+ * @type {Function}
+ */
+const makeDir = promisify( fs.mkdir );
+
+/**
+ * Promisified sass.render.
+ *
+ * @type {Function}
+ */
+const renderSass = promisify( sass.render );
+
+/**
+ * Get the package name for a specified file
+ *
+ * @param {string} file File name.
+ *
+ * @return {string} Package name.
+ */
+function getPackageName( file ) {
+	return path.relative( PACKAGES_DIR, file ).split( path.sep )[ 0 ];
+}
+
+/**
+ * Get Build Path for a specified file.
+ *
+ * @param {string} file        File to build.
+ * @param {string} buildFolder Output folder.
+ *
+ * @return {string} Build path.
+ */
+function getBuildPath( file, buildFolder ) {
+	const pkgName = getPackageName( file );
+	const pkgSrcPath = path.resolve( PACKAGES_DIR, pkgName, 'src' );
+	const pkgBuildPath = path.resolve( PACKAGES_DIR, pkgName, buildFolder );
+	const relativeToSrcPath = path.relative( pkgSrcPath, file );
+	return path.resolve( pkgBuildPath, relativeToSrcPath );
+}
+
+async function buildCSS( file ) {
+	const outputFile = getBuildPath(
+		file.replace( '.scss', '.css' ),
+		'build-style'
+	);
+	const outputFileRTL = getBuildPath(
+		file.replace( '.scss', '-rtl.css' ),
+		'build-style'
+	);
+
+	const [ , contents ] = await Promise.all( [
+		makeDir( path.dirname( outputFile ), { recursive: true } ),
+		readFile( file, 'utf8' ),
+	] );
+
+	const importLists = [
+		'colors',
+		'breakpoints',
+		'variables',
+		'mixins',
+		'animations',
+		'z-index',
+	]
+		// Editor and component styles should be excluded from the default CSS vars output.
+		.concat(
+			file.includes( 'common.scss' ) ||
+				! (
+					file.includes( 'block-library' ) ||
+					file.includes( 'components' )
+				)
+				? [ 'default-custom-properties' ]
+				: []
+		)
+		.map( ( imported ) => `@import "${ imported }";` )
+		.join( ' ' );
+
+	const builtSass = await renderSass( {
+		file,
+		includePaths: [ '../../node_modules/@wordpress/base-styles' ],
path: packages/dataviews/build-style.js
user: login: jsnajdr
body: This `includePaths` looks fine, the only change I'd recommend is to delegate the actual resolving to Node:
```js
// finds the package in the ../../node_modules dir
const path = require.resolve( '@wordpress/base-styles' );
// converts the resolved index.js filename to a package root (where the package.json is)
const packagePath = require( 'pkg-dir' ).sync( path );
```
The same lookup is already happening in the `client/webpack.config.js` file.
created_at: 2025-04-22T10:05:07Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,8 @@
+module.exports = ( api ) => {
+	api.cache( true );
+
+	return {
+		presets: [ '@wordpress/babel-preset-default' ],
+		plugins: [ '@emotion/babel-plugin', 'babel-plugin-inline-json-import' ],
+	};
+};
path: packages/dataviews/babel.config.js
user: login: oandregal
body: It sounds sensible, I'll look into that.
created_at: 2025-04-22T10:49:30Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,8 @@
+module.exports = ( api ) => {
+	api.cache( true );
+
+	return {
+		presets: [ '@wordpress/babel-preset-default' ],
+		plugins: [ '@emotion/babel-plugin', 'babel-plugin-inline-json-import' ],
+	};
+};
path: packages/dataviews/babel.config.js
user: login: jsnajdr
body: For reference, I'm working on something very similar -- setting up a dual ESM/CJS build with TypeScript -- in a Jetpack package in this PR: https://github.com/Automattic/jetpack/pull/43106
created_at: 2025-04-22T11:01:21Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,138 @@
+/**
+ * External dependencies
+ */
+const { promisify } = require( 'util' );
+const fs = require( 'fs' );
+const path = require( 'path' );
+const sass = require( 'sass' );
+const postcss = require( 'postcss' );
+
+/**
+ * Path to packages directory.
+ *
+ * @type {string}
+ */
+const PACKAGES_DIR = path
+	.resolve( __dirname, '../../packages' )
+	.replace( /\\/g, '/' );
+
+/**
+ * Promisified fs.readFile.
+ *
+ * @type {Function}
+ */
+const readFile = promisify( fs.readFile );
+
+/**
+ * Promisified fs.writeFile.
+ *
+ * @type {Function}
+ */
+const writeFile = promisify( fs.writeFile );
+
+/**
+ * Promisified fs.writeFile.
+ *
+ * @type {Function}
+ */
+const makeDir = promisify( fs.mkdir );
+
+/**
+ * Promisified sass.render.
+ *
+ * @type {Function}
+ */
+const renderSass = promisify( sass.render );
+
+/**
+ * Get the package name for a specified file
+ *
+ * @param {string} file File name.
+ *
+ * @return {string} Package name.
+ */
+function getPackageName( file ) {
+	return path.relative( PACKAGES_DIR, file ).split( path.sep )[ 0 ];
+}
+
+/**
+ * Get Build Path for a specified file.
+ *
+ * @param {string} file        File to build.
+ * @param {string} buildFolder Output folder.
+ *
+ * @return {string} Build path.
+ */
+function getBuildPath( file, buildFolder ) {
+	const pkgName = getPackageName( file );
+	const pkgSrcPath = path.resolve( PACKAGES_DIR, pkgName, 'src' );
+	const pkgBuildPath = path.resolve( PACKAGES_DIR, pkgName, buildFolder );
+	const relativeToSrcPath = path.relative( pkgSrcPath, file );
+	return path.resolve( pkgBuildPath, relativeToSrcPath );
+}
+
+async function buildCSS( file ) {
+	const outputFile = getBuildPath(
+		file.replace( '.scss', '.css' ),
+		'build-style'
+	);
+	const outputFileRTL = getBuildPath(
+		file.replace( '.scss', '-rtl.css' ),
+		'build-style'
+	);
+
+	const [ , contents ] = await Promise.all( [
+		makeDir( path.dirname( outputFile ), { recursive: true } ),
+		readFile( file, 'utf8' ),
+	] );
+
+	const importLists = [
+		'colors',
+		'breakpoints',
+		'variables',
+		'mixins',
+		'animations',
+		'z-index',
+	]
+		// Editor and component styles should be excluded from the default CSS vars output.
+		.concat(
+			file.includes( 'common.scss' ) ||
+				! (
+					file.includes( 'block-library' ) ||
+					file.includes( 'components' )
+				)
+				? [ 'default-custom-properties' ]
+				: []
+		)
+		.map( ( imported ) => `@import "${ imported }";` )
+		.join( ' ' );
+
+	const builtSass = await renderSass( {
+		file,
+		includePaths: [ '../../node_modules/@wordpress/base-styles' ],
path: packages/dataviews/build-style.js
user: login: oandregal
body: 👍 pushed that change
created_at: 2025-04-22T11:27:54Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,6 @@
+build/
+build-module/
+build-style/
+build-types/
+build-wp/
+node_modules/
path: packages/dataviews/.gitignore
user: login: oandregal
body: 👍 pushed these changes
created_at: 2025-04-22T11:35:47Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1,25 +1,43 @@
 {
 	"$schema": "https://json.schemastore.org/tsconfig.json",
-	"extends": "../../tsconfig.base.json",
path: packages/dataviews/tsconfig.json
user: login: oandregal
body: I've copied the `tsconfig.base.json` from upstream into here.
created_at: 2025-04-22T11:57:51Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,8 @@
+module.exports = ( api ) => {
+	api.cache( true );
+
+	return {
+		presets: [ '@wordpress/babel-preset-default' ],
+		plugins: [ '@emotion/babel-plugin', 'babel-plugin-inline-json-import' ],
+	};
+};
path: packages/dataviews/babel.config.js
user: login: oandregal
body: I've pushed an initial `tsconfig.json`, need to fix some issues before it's ready.
created_at: 2025-04-22T11:58:36Z
author_association: CONTRIBUTOR
diff_hunk: @@ -20,6 +20,7 @@
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
+	"calypso:src": "src/index.ts",
path: packages/dataviews/package.json
user: login: oandregal
body: I pushed the suggested change.
created_at: 2025-04-23T09:14:33Z
author_association: CONTRIBUTOR
diff_hunk: @@ -20,10 +20,12 @@
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
+	"calypso:src": "src/index.ts",
 	"exports": {
 		".": {
 			"types": "./build-types/index.d.ts",
 			"import": "./build-module/index.js",
+			"calypso:src": "./src/index.ts",
path: packages/dataviews/package.json
user: login: jsnajdr
body: The `calypso:src` condition should be the first one, before `types` and `import`. Order matters here, the resolver in webpack/TypeScript/Jest will use the first condition that matches. And we always want it to be the `calypso:src` one.
created_at: 2025-04-23T10:39:25Z
author_association: MEMBER
diff_hunk: @@ -192,11 +192,12 @@ export default function ItemActions< Item >( {
 
 	return (
 		<HStack
+			as="div" // TODO: why is this required?
 			spacing={ 1 }
 			justify="flex-end"
 			className="dataviews-item-actions"
 			style={ {
-				flexShrink: '0',
+				flexShrink: 0, // TODO: why is this change necessary?
path: packages/dataviews/src/components/dataviews-item-actions/index.tsx
user: login: jsnajdr
body: Yes, why is this necessary and who (which tool) forced you to do it? 🙂 
created_at: 2025-04-23T10:40:14Z
author_association: MEMBER
diff_hunk: @@ -1,25 +1,31 @@
 {
 	"$schema": "https://json.schemastore.org/tsconfig.json",
-	"extends": "../../tsconfig.base.json",
path: packages/dataviews/tsconfig.json
user: login: jsnajdr
body: You can try to extend from the Calypso TS config base:
```
"extends": "@automattic/calypso-typescript-config/ts-package.json"
```
That should make the list of `compilerOptions` much smaller.
created_at: 2025-04-23T10:49:43Z
author_association: MEMBER
diff_hunk: @@ -1,25 +1,31 @@
 {
 	"$schema": "https://json.schemastore.org/tsconfig.json",
-	"extends": "../../tsconfig.base.json",
path: packages/dataviews/tsconfig.json
user: login: oandregal
body: I considered this, but had second thoughts. Upstream created the JS output using a babel script, so we're already changing how the output is produced. So, thinking this further, I suppose embracing calypso rules would be ok, and I've gone ahead and did this.

For what is worth:

- this enabled some extra flags that aren't set upstream: `disableReferencedProjectLoad`, `importHelpers`, `noEmitHelpers`, `forceConsistentCasingInFileNames`. I checked what they do, and they seem sensible.
- `esModuleInterop`: I've let it set to `false` because that's what upstream does. It was introduced [here](https://github.com/WordPress/gutenberg/pull/18942/files#diff-0b280a445be167f54cd916c0718c952b8e0d4ca9621903d05eec25efd4c6ed6dR30). I'm ccing @sirreal in case he has any thoughts, though I reckon it's been a few years since that change, and we didn't use TSC upstream to compile this code into CJS, as far as I'm aware.

created_at: 2025-04-23T11:36:46Z
author_association: CONTRIBUTOR
diff_hunk: @@ -20,10 +20,12 @@
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
+	"calypso:src": "src/index.ts",
 	"exports": {
 		".": {
 			"types": "./build-types/index.d.ts",
 			"import": "./build-module/index.js",
+			"calypso:src": "./src/index.ts",
path: packages/dataviews/package.json
user: login: oandregal
body: pushed
created_at: 2025-04-23T11:37:06Z
author_association: CONTRIBUTOR
diff_hunk: @@ -192,11 +192,12 @@ export default function ItemActions< Item >( {
 
 	return (
 		<HStack
+			as="div" // TODO: why is this required?
 			spacing={ 1 }
 			justify="flex-end"
 			className="dataviews-item-actions"
 			style={ {
-				flexShrink: '0',
+				flexShrink: 0, // TODO: why is this change necessary?
path: packages/dataviews/src/components/dataviews-item-actions/index.tsx
user: login: oandregal
body: I investigated this now and think this is fine.

What I know:

- Gutenberg ends up using `csstype 3.1.2`, that defines the property as:

```typescript
export type FlexShrink = Globals | (number & {}) | (string & {});
```

Both number or string types are valid. This can be seen in the `packages/dataviews` code, where there's another [usage](https://github.com/Automattic/wp-calypso/blob/eafba877442c5d816ae4f9286b38fd22a59c5f0a/packages/dataviews/src/components/dataviews/index.tsx#L161) of `flexShrink` that is a number, not a string. That's why Gutenberg didn't report anything.

- Calypso ends up using `csstype 3.0.7`, which defines it in a more restrictive way:

```typescript
export type FlexShrink = Globals | (number & {});
```

that's why it reports it.

`csstype` is a dependency of `@types/react`. Gutenberg depends on the 18.3.1 version that depends on `"csstype": "^3.0.2"`. Calypso depends on the 18.3.18 version that depends on `"csstype": "^3.0.2"`. So, there must be another project in Gutenberg that requires a newer version of `csstype` (which is more permissive).

I don't think it's worth investigating this prop type change further, so I went ahead and removed the TODO. This thread and the commit comment will serve as future reference.
created_at: 2025-04-23T12:14:56Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,138 @@
+/**
+ * External dependencies
+ */
+const { promisify } = require( 'util' );
+const fs = require( 'fs' );
+const path = require( 'path' );
+const sass = require( 'sass' );
+const postcss = require( 'postcss' );
+
+/**
+ * Path to packages directory.
+ *
+ * @type {string}
+ */
+const PACKAGES_DIR = path
+	.resolve( __dirname, '../../packages' )
+	.replace( /\\/g, '/' );
+
+/**
+ * Promisified fs.readFile.
+ *
+ * @type {Function}
+ */
+const readFile = promisify( fs.readFile );
+
+/**
+ * Promisified fs.writeFile.
+ *
+ * @type {Function}
+ */
+const writeFile = promisify( fs.writeFile );
+
+/**
+ * Promisified fs.writeFile.
+ *
+ * @type {Function}
+ */
+const makeDir = promisify( fs.mkdir );
path: packages/dataviews/build-style.js
user: login: oandregal
body: Yeah, this has been extracted from [build-workers](https://github.com/WordPress/gutenberg/blob/trunk/bin/packages/build-worker.js) as it is. Most of it has been written a few years ago, and I suppose there could be simpler ways to do the same today. I didn't think it was worth refactoring this, as it's convenient to be able to compare with upstream.
created_at: 2025-04-23T14:23:57Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1,25 +1,31 @@
 {
 	"$schema": "https://json.schemastore.org/tsconfig.json",
-	"extends": "../../tsconfig.base.json",
path: packages/dataviews/tsconfig.json
user: login: sirreal
body: Seems reasonable. I think we could have kept more of the extended config instead of overriding (like `es2022` instead of `esnext` for several settings) to keep more packages with the same configuration.
created_at: 2025-04-28T10:23:58Z
author_association: MEMBER

PR comments:
user: login: github-actions[bot]
created_at: 2025-04-15T17:04:28Z
body: <details>
<summary>Calypso Live <a href="https://calypso.live?image=registry.a8c.com/calypso/app:build-141449">(direct link)</a></summary>
<table>
<tr>
<td>
<img src="https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=https%3A%2F%2Fcalypso.live%3Fimage%3Dregistry.a8c.com%2Fcalypso%2Fapp%3Abuild-141449%26flags%3Doauth&choe=UTF-8" />
</td>
<td>
<a href="https://calypso.live?image=registry.a8c.com/calypso/app:build-141449">https://calypso.live?image=registry.a8c.com/calypso/app:build-141449</a>
</td>
</tr>
</table>
</details>
<details>
<summary>Jetpack Cloud live <a href="https://calypso.live?image=registry.a8c.com/calypso/app:build-141449&env=jetpack">(direct link)</a></summary>
<table>
<tr>
<td>
<img src="https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=https%3A%2F%2Fcalypso.live%3Fimage%3Dregistry.a8c.com%2Fcalypso%2Fapp%3Abuild-141449%26env%3Djetpack%26flags%3Doauth&choe=UTF-8" />
</td>
<td>
<a href="https://calypso.live?image=registry.a8c.com/calypso/app:build-141449&env=jetpack">https://calypso.live?image=registry.a8c.com/calypso/app:build-141449&env=jetpack</a>
</td>
</tr>
</table>
</details>
<details>
<summary>Automattic for Agencies live <a href="https://calypso.live?image=registry.a8c.com/calypso/app:build-141449&env=a8c-for-agencies">(direct link)</a></summary>
<table>
<tr>
<td>
<img src="https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=https%3A%2F%2Fcalypso.live%3Fimage%3Dregistry.a8c.com%2Fcalypso%2Fapp%3Abuild-141449%26env%3Da8c-for-agencies%26flags%3Doauth&choe=UTF-8" />
</td>
<td>
<a href="https://calypso.live?image=registry.a8c.com/calypso/app:build-141449&env=a8c-for-agencies">https://calypso.live?image=registry.a8c.com/calypso/app:build-141449&env=a8c-for-agencies</a>
</td>
</tr>
</table>
</details>
<!--calypso-live-watermark:apr@v1-->
author_association: NONE
user: login: matticbot
created_at: 2025-04-15T17:13:37Z
body: <!-- icfy-watermark: c52822 -->
This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at [iscalypsofastyet.com](http://iscalypsofastyet.com).
author_association: CONTRIBUTOR
user: login: matticbot
created_at: 2025-04-15T17:18:07Z
body: **This PR modifies the release build for the following Calypso Apps:**

_For info about this notification, see here: PCYsg-OT6-p2_

* blaze-dashboard
* happy-blocks
* help-center
* notifications
* odyssey-stats
* wpcom-block-editor

To test WordPress.com changes, run `install-plugin.sh $pluginSlug update/automattic-dataviews-package` on your sandbox.
<!--calypso-app-artifacts-watermark:apr@v1-->
author_association: CONTRIBUTOR
user: login: oandregal
created_at: 2025-04-21T16:38:41Z
body: The `build-wp` output is good since https://github.com/Automattic/wp-calypso/pull/102614 landed and brings the latest wordpress packages.

The `build-style` output is good since https://github.com/Automattic/wp-calypso/pull/102704 brought the latest changes from upstream. However, I'm running into an intermitent issue where ` --wp-admin-theme-color-darker-10` is set to `rgb(0, 107, 160.5)` but it should be set to `#006ba1`.

author_association: CONTRIBUTOR
user: login: oandregal
created_at: 2025-04-22T15:58:04Z
body: @jsnajdr I've configured this to use `tsconfig.json`, as suggested. I've configured it to use the same output folders as `@wordpress/dataviews`, though the actual files are going to be different given they use different compilers — I suppose that's fine for consumers.

I've reviewed all the options for the TSC, and they look fine to me. I've taken the upstream tsconfig as base and only modified things that I needed, so it's a bit different from what the base calypso tsconfig.
author_association: CONTRIBUTOR
user: login: oandregal
created_at: 2025-04-23T15:32:22Z
body: > **Why the color value for `--wp-admin-theme-color-darker-10` is `rgb(0, 107, 160.5)` instead of `#006ba1`? Does it matter?**
>
> I've been looking at these questions today and the answers are: 1) I don't know, 2) I think it doesn't and we should probably move on.

This is the full context:

The `build:style` command generates the stylesheet under `build-style/style.css` (also the RTL version), and it bundles some CSS Custom Properties defined in the `@wordpress/base-styles` package.

Input ([mixins](https://github.com/WordPress/gutenberg/blob/b23709686bea6c64b33fd476437b0d5cfd68a382/packages/base-styles/_mixins.scss#L506-L523) and [default-custom-properties](https://github.com/WordPress/gutenberg/blob/b23709686bea6c64b33fd476437b0d5cfd68a382/packages/base-styles/_default-custom-properties.scss#L5)):

```scss
@mixin admin-scheme($color-primary) {
	--wp-admin-theme-color-darker-10: #{darken($color-primary, 5%)};
	--wp-admin-theme-color-darker-10--rgb: #{hex-to-rgb(darken($color-primary, 5%))};
	--wp-admin-theme-color-darker-20: #{darken($color-primary, 10%)};
	--wp-admin-theme-color-darker-20--rgb: #{hex-to-rgb(darken($color-primary, 10%))};
}

:root {
  @include admin-scheme(#007cba);
}
```

Output:

```css
:root {
  --wp-admin-theme-color-darker-10: rgb(0, 107, 160.5);
  --wp-admin-theme-color-darker-10--rgb: 0, 107, 161;
  --wp-admin-theme-color-darker-20: #005a87;
  --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
}
```

Note the color value for `--wp-admin-theme-color-darker-10`. In the published `@wordpress/dataviews` package ([4.18.0 version](https://www.npmjs.com/package/@wordpress/dataviews/v/4.18.0), shares the same code as this PR), the output is slightly different, it has been compiled to the HEX value:

```css
--wp-admin-theme-color-darker-10: #006ba1;
```

That's the only difference in the whole file.

Considering that HEX values represent the same color space as RGB and that `#006ba1` translates to `rgb(0, 107, 161)` I think it's fine. I investigated why this happened, and I don't have an answer. If designers confirm this is ok of a change, I'll move on.

For reference, this is what I've checked so far:

- Both Gutenberg (`buildCSS` in [build-worker](https://github.com/WordPress/gutenberg/blob/11adb45dcf87204a17604c7a5d67bb3d36b4508e/bin/packages/build-worker.js#L123)) and Calypso (`buildCSS` function in `build-style` in this PR that has been copied from Gutenberg) use the same process and content:

```javascript
	const builtSass = await renderSass( {
		file,
		includePaths: [ findPackagePath( '@wordpress/base-styles' ) ],
		data: ''.concat( '@use "sass:math";', importLists, contents ),
	} );
```

- The `sass` version in wp-calypso and gutenberg is the same (1.54.0).
- In Gutenberg, if I execute the `npm run build:packages` command (which in turn calls build-worker), I'm getting the HEX color (same as the `@wordpress/dataviews` package).
- I tested adding a new content that was essentially `const test = ':root{ --my-color: #{darken(#007cba, 5%)};}';` and it outputs `:root{--my-color: rgb(0, 107, 160.5);}`.
- As per the docs, it doesn't seem that the [`darken` function](https://sass-lang.com/documentation/modules/color/#darken) can take a config/color space/etc. via environmental variable or similar. Checked [the code](https://github.com/sass/dart-sass/blob/3b8afa2b3e97174499af031d2cfceb47fb84b42a/lib/src/functions/color.dart#L210), and it doesn't look like it can. I haven't found any evidence that Gutenberg is configuring this differently.
- I've also reviewed older versions of `@wordpress/dataviews` package published in the registry and all of them have the HEX color.

I ran out of ideas to try today, and I'm a bit puzzled as to why I'm getting a different color value. I'm sharing this with some folks in case they have more ideas to address it. If nothing comes to mind, and it's confirmed innocuous, I'll leave it as it is for now and will move on to other things.

author_association: CONTRIBUTOR
user: login: oandregal
created_at: 2025-04-23T16:35:38Z
body: > The sass version in wp-calypso and gutenberg is the same (1.54.0).

This is true. However, the `packages/dataviews/package.json` didn't pin the version, like the top-level `package.json` does. As a result, there were two copies of the sass compiler. 1.54.0 at the top-level and 1.87.0 at `packages/dataviews`. Apparently, the darken function behaves differently between the two.

I pushed a fix and the stylesheet is now the same.
author_association: CONTRIBUTOR
user: login: oandregal
created_at: 2025-04-24T11:09:21Z
body: I've tested this PR in a small app I've built at ([dv-test](https://github.com/oandregal/dv-test)).

```sh
git clone git@github.com:oandregal/dv-test.git
npm install
npm start
```

It'll open a new browser tab at http://localhost:3000/ and you can interact with the data.

The app bundles this PR as a tgz (`automattic-dataviews-0.1.0.tgz`), so it simulates it's using the `@automattic/dataviews` package.

At first, I tried using local paths, but they end up being problematic with React hooks. For hooks to work, the react import from your application code needs to resolve to the same module as the react import from inside the react-dom package: hooks rely on a global centralized registry, if there are two React versions, there are two different registries that don't talk to each other. This is easier said than done: [docs](https://react.dev/warnings/invalid-hook-call-warning#mismatching-versions-of-react-and-react-dom), [other experiences](https://github.com/facebook/react/issues/13991). After some trying to make them work with local paths, I've switched to bundle the tgz.
author_association: CONTRIBUTOR