[RFC] feat: add rollup-plugin-include-css

package.json

@@ -8,7 +8,7 @@
   ],
   "scripts": {
     "setup": "./script/setup",
-    "build": "npm run build -w @primer/react",
+    "build": "npm run build -w rollup-plugin-include-css -w @primer/react",
     "clean": "npm run clean -ws --if-present",
     "clean:all": "npm run clean && rimraf node_modules docs/node_modules packages/*/node_modules examples/*/node_modules",
     "format": "prettier --cache --write '**/*.{js,css,md,mdx,ts,tsx,yml}'",

packages/react/package.json

@@ -38,7 +38,10 @@
     "./lib-esm/internal/*": null
   },
   "typings": "lib/index.d.ts",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.module.css.js",
+    "**/*.module.css"
+  ],
   "scripts": {
     "build": "./script/build",
     "clean": "rimraf dist lib lib-esm css",
@@ -205,6 +208,7 @@
     "recast": "0.23.6",
     "rimraf": "5.0.5",
     "rollup": "4.9.6",
+    "rollup-plugin-include-css": "^0.0.0",
     "rollup-plugin-postcss": "4.0.2",
     "rollup-plugin-visualizer": "5.9.2",
     "semver": "7.6.2",

packages/react/rollup.config.js → packages/react/rollup.config.mjs

@@ -5,9 +5,10 @@ import replace from '@rollup/plugin-replace'
 import terser from '@rollup/plugin-terser'
 import glob from 'fast-glob'
 import {visualizer} from 'rollup-plugin-visualizer'
-import postcss from 'rollup-plugin-postcss'
+import {includeCSS} from 'rollup-plugin-include-css'
+import postcssPresetEnv from 'postcss-preset-env'
 import MagicString from 'magic-string'
-import packageJson from './package.json'
+import packageJson from './package.json' assert {type: 'json'}
 
 const input = new Set([
   // "exports"
@@ -44,7 +45,7 @@ const input = new Set([
       'src/ActionMenu/index.ts',
     ],
     {
-      cwd: __dirname,
+      cwd: import.meta.dirname,
       ignore: [
         '**/__tests__/**',
         '*.stories.tsx',
@@ -121,11 +122,21 @@ const baseConfig = {
     commonjs({
       extensions,
     }),
-    postcss({
-      extract: 'components.css',
-      autoModules: false,
-      modules: {generateScopedName: 'prc_[local]_[hash:base64:5]'},
-      // plugins are defined in postcss.config.js
+    includeCSS({
+      modulesRoot: 'src',
+      postcssPlugins: [
+        postcssPresetEnv({
+          stage: 2, // https://preset-env.cssdb.org/features/#stage-2
+          features: {
+            'nesting-rules': {noIsPseudoSelector: true},
+            'focus-visible-pseudo-class': false,
+            'logical-properties-and-values': false,
+          },
+        }),
+      ],
+      postcssModulesOptions: {
+        generateScopedName: 'prc_[local]_[hash:base64:5]',
+      },
     }),
     /**
      * This custom rollup plugin allows us to preserve directives in source

packages/react/script/build

@@ -9,7 +9,7 @@ npm run clean
 npm run build:precompile-color-schemes
 
 # Bundle
-npx rollup -c --bundleConfigAsCjs
+npx rollup -c
 
 # Type check
 npx tsc --project tsconfig.build.json

packages/react/src/Blankslate/Blankslate.module.css

@@ -0,0 +1,96 @@
+.container {
+  container-type: inline-size;
+}
+
+.blankslate {
+  --blankslate-outer-padding-block: var(--base-size-32);
+  --blankslate-outer-padding-inline: var(--base-size-32);
+  display: grid;
+  justify-items: center;
+  padding: var(--blankslate-outer-padding-block) var(--blankslate-outer-padding-inline);
+}
+
+.blankslate[data-spacious='true'] {
+  --blankslate-outer-padding-block: var(--base-size-80);
+  --blankslate-outer-padding-inline: var(--base-size-40);
+}
+
+.blankslate[data-border='true'] {
+  /* border: var(--borderWidth-thin) solid var(--borderColor-default, ${get('colors.border.default')}); */
+  border-radius: var(--borderRadius-medium);
+}
+
+.blankslate[data-narrow='true'] {
+  margin: 0 auto;
+  max-width: 485px;
+}
+
+.heading,
+.description {
+  margin: 0;
+  margin-bottom: var(--stack-gap-condensed);
+}
+
+.heading {
+  font-size: var(--text-title-size-medium);
+  font-weight: var(--text-title-weight-medium);
+}
+
+.description {
+  /* color: var(--fgColor-muted, ${get('colors.fg.muted')}); */
+  font-size: var(--text-body-size-large);
+}
+
+.action {
+  margin-top: var(--stack-gap-normal);
+}
+
+.action:first-of-type {
+  margin-top: var(--stack-gap-spacious);
+}
+
+.action:last-of-type {
+  margin-bottom: var(--stack-gap-condensed);
+}
+
+/* At the time these styles were written, 34rem was our "small" breakpoint width */
+@container (max-width: 34rem) {
+  .container .blankslate {
+    --blankslate-outer-padding-block: var(--base-size-20);
+    --blankslate-outer-padding-inline: var(--base-size-20);
+  }
+
+  .container .blankslate[data-spacious='true'] {
+    --blankslate-outer-padding-block: var(--base-size-44);
+    --blankslate-outer-padding-inline: var(--base-size-28);
+  }
+
+  .container .visual {
+    margin-bottom: var(--stack-gap-condensed);
+    max-width: var(--base-size-24);
+  }
+
+  .container .visual svg {
+    width: 100%;
+  }
+
+  .container .heading {
+    font-size: var(--text-title-size-small);
+  }
+
+  .container .description {
+    font-size: var(--text-body-size-medium);
+  }
+
+  .container .action {
+    margin-top: var(--stack-gap-condensed);
+  }
+
+  .container .action:first-of-type {
+    margin-top: var(--stack-gap-normal);
+  }
+
+  .container .action:last-of-type {
+    margin-bottom: calc(var(--stack-gap-condensed) / 2);
+  }
+}

packages/react/src/Blankslate/Blankslate.tsx

@@ -2,8 +2,9 @@
 import Box from '../Box'
 import {Button} from '../Button'
 import Link from '../Link'
 import {get} from '../constants'
 import styled from 'styled-components'
+import classes from './Blankslate.module.css'
 
 export type BlankslateProps = React.PropsWithChildren<{
   /**
@@ -22,126 +23,22 @@
   spacious?: boolean
 }>
 
-const StyledBlankslate = styled.div`
-  container-type: inline-size;
-
-  .Blankslate {
-    --blankslate-outer-padding-block: var(--base-size-32);
-    --blankslate-outer-padding-inline: var(--base-size-32);
-    display: grid;
-    justify-items: center;
-    padding: var(--blankslate-outer-padding-block) var(--blankslate-outer-padding-inline);
-  }
-
-  .Blankslate[data-spacious='true'] {
-    --blankslate-outer-padding-block: var(--base-size-80);
-    --blankslate-outer-padding-inline: var(--base-size-40);
-  }
-
-  .Blankslate[data-border='true'] {
-    border: var(--borderWidth-thin) solid var(--borderColor-default, ${get('colors.border.default')});
-    border-radius: var(--borderRadius-medium);
-  }
-
-  .Blankslate[data-narrow='true'] {
-    margin: 0 auto;
-    max-width: 485px;
-  }
-
-  .Blankslate-Heading,
-  .Blankslate-Description {
-    margin: 0;
-    margin-bottom: var(--stack-gap-condensed);
-  }
-
-  .Blankslate-Heading {
-    font-size: var(--text-title-size-medium);
-    font-weight: var(--text-title-weight-medium);
-  }
-
-  .Blankslate-Description {
-    color: var(--fgColor-muted, ${get('colors.fg.muted')});
-    font-size: var(--text-body-size-large);
-  }
-
-  .Blankslate-Action {
-    margin-top: var(--stack-gap-normal);
-  }
-
-  .Blankslate-Action:first-of-type {
-    margin-top: var(--stack-gap-spacious);
-  }
-
-  .Blankslate-Action:last-of-type {
-    margin-bottom: var(--stack-gap-condensed);
-  }
-`
-
-const BlankslateContainerQuery = `
-  /* At the time these styles were written,
-  34rem was our "small" breakpoint width */
-  @container (max-width: 34rem) {
-    ${StyledBlankslate} .Blankslate {
-    --blankslate-outer-padding-block: var(--base-size-20);
-    --blankslate-outer-padding-inline: var(--base-size-20);
-  }
-
-  ${StyledBlankslate} .Blankslate[data-spacious='true'] {
-    --blankslate-outer-padding-block: var(--base-size-44);
-    --blankslate-outer-padding-inline: var(--base-size-28);
-  }
-
-  ${StyledBlankslate} .Blankslate-Visual {
-    margin-bottom: var(--stack-gap-condensed);
-    max-width: var(--base-size-24);
-  }
-
-  ${StyledBlankslate} .Blankslate-Visual svg {
-    width: 100%;
-  }
-
-  ${StyledBlankslate} .Blankslate-Heading {
-    font-size: var(--text-title-size-small);
-  }
-
-  ${StyledBlankslate} .Blankslate-Description {
-    font-size: var(--text-body-size-medium);
-  }
-
-  ${StyledBlankslate} .Blankslate-Action {
-    margin-top: var(--stack-gap-condensed);
-  }
-
-  ${StyledBlankslate} .Blankslate-Action:first-of-type {
-    margin-top: var(--stack-gap-normal);
-  }
-
-  ${StyledBlankslate} .Blankslate-Action:last-of-type {
-    margin-bottom: calc(var(--stack-gap-condensed) / 2);
-  }
-`
-
 function Blankslate({border, children, narrow, spacious}: BlankslateProps) {
   return (
     <>
-      {/*
-        This is a workaround so we can use `@container` without upgrading `styled-components` to 6.x
-        See [this comment](https://github.com/primer/react/pull/3869#discussion_r1392523030) for more info
-      */}
-      <style type="text/css">{BlankslateContainerQuery}</style>
-      <StyledBlankslate>
-        <div className="Blankslate" data-border={border} data-narrow={narrow} data-spacious={spacious}>
+      <div className={classes.container}>
+        <div className={classes.blankslate} data-border={border} data-narrow={narrow} data-spacious={spacious}>
           {children}
         </div>
-      </StyledBlankslate>
+      </div>
     </>
   )
 }
 
 export type VisualProps = React.PropsWithChildren
 
 function Visual({children}: VisualProps) {
-  return <span className="Blankslate-Visual">{children}</span>
+  return <span className={classes.visual}>{children}</span>
 }
 
 export type HeadingProps = React.PropsWithChildren<{
@@ -150,7 +47,7 @@
 
 function Heading({as = 'h2', children}: HeadingProps) {
   return (
-    <Box as={as} className="Blankslate-Heading">
+    <Box as={as} className={classes.heading}>
       {children}
     </Box>
   )
@@ -159,7 +56,7 @@
 export type DescriptionProps = React.PropsWithChildren
 
 function Description({children}: DescriptionProps) {
-  return <p className="Blankslate-Description">{children}</p>
+  return <p className={classes.description}>{children}</p>
 }
 
 export type PrimaryActionProps = React.PropsWithChildren<{
@@ -168,7 +65,7 @@
 
 function PrimaryAction({children, href}: PrimaryActionProps) {
   return (
-    <div className="Blankslate-Action">
+    <div className={classes.action}>
       <Button as="a" href={href} variant="primary">
         {children}
       </Button>
@@ -182,7 +79,7 @@
 
 function SecondaryAction({children, href}: SecondaryActionProps) {
   return (
-    <div className="Blankslate-Action">
+    <div className={classes.action}>
       <Link href={href}>{children}</Link>
     </div>
   )