remove individual component css outputs (#1932)

.changeset/neat-planets-trade.md

@@ -0,0 +1,12 @@
+---
+"@itwin/itwinui-css": major
+---
+
+All individual component CSS files have been removed. Instead, import `all.css` (the root export).
+
+```diff
+- @import "@itwin/itwinui-css/css/anchor.css";
+- @import "@itwin/itwinui-css/css/button.css";
+  …
++ @import "@itwin/itwinui-css";
+```

apps/css-workshop/pages/index.html

@@ -70,9 +70,7 @@
       @import url("./assets/demo.css");
       @import url("@itwin/itwinui-variables");
       @import url("@itwin/itwinui-variables/os.css");
-      @import url("@itwin/itwinui-css/global");
-      @import url("@itwin/itwinui-css/css/anchor.css");
-      @import url("@itwin/itwinui-css/css/code.css");
+      @import url("@itwin/itwinui-css");
     </style>
   </head>
 

packages/itwinui-css/README.md

@@ -37,31 +37,25 @@ If you're looking for React components, check out [`@itwin/itwinui-react`](https
 Install both packages:
 
 ```
-npm install @itwin/itwinui-css @itwin/itwinui-variables
-```
-
-or if using yarn:
-
-```
-yarn add @itwin/itwinui-css @itwin/itwinui-variables
+npm add @itwin/itwinui-css @itwin/itwinui-variables
 ```
 
 ---
 
 ## Usage
 
-Import the global styles and variables (only needs to be done once per page):
+Import both packages (only needs to be done once per page):
 
 ```css
 @import '@itwin/itwinui-variables';
-@import '@itwin/itwinui-css/global';
+@import '@itwin/itwinui-css';
 ```
 
 > **Note**: If your project doesn't support export maps, then you might need to import the css from the real paths:
 >
 > ```css
 > @import '@itwin/itwinui-variables/index.css';
-> @import '@itwin/itwinui-css/css/global.css';
+> @import '@itwin/itwinui-css/css/all.css';
 > ```
 
 Apply the `iui-root` class at the root of your app, and use `data-iui-theme` to specify theme (`light` or `dark`). See [`@itwin/itwinui-variables/README.md`](https://github.com/iTwin/iTwinUI/blob/main/packages/itwinui-variables/README.md) for more details on theming.
@@ -74,10 +68,6 @@ Apply the `iui-root` class at the root of your app, and use `data-iui-theme` to
 
 Now you can start using our components:
 
-```css
-@import '@itwin/itwinui-css/css/button.css';
-```
-
 ```html
 <button class="iui-button" data-iui-variant="default">
   <span>Hello world</span>

packages/itwinui-css/scripts/generateCss.js

@@ -38,24 +38,8 @@ const compileScss = async (path, outFile) => {
 };
 
 const run = async () => {
-  const files = await fs.promises.readdir(inDir, { withFileTypes: true });
-  const directories = files.filter((f) => f.isDirectory()).map((f) => f.name);
-
-  let allCss = ''; // we'll append all outputs to all.css
-
-  const globalCss = await compileScss(`${inDir}/global.scss`, 'global');
-  allCss += globalCss;
-
-  for (const component of directories) {
-    if (!ignorePaths.includes(component) && fs.existsSync(path.join(inDir, component, `${component}.scss`))) {
-      const outCss = await compileScss(`${inDir}/${component}/${component}.scss`, component);
-      allCss += outCss;
-    }
-  }
-
-  fs.writeFileSync(`${outDir}/all.css`, allCss);
-  console.log(` Wrote -> all.css`);
-
+  await compileScss(`${inDir}/global.scss`, 'global');
+  await compileScss(`${inDir}/all.scss`, 'all');
   console.log(green(`Converted all SCSS files to CSS.`));
 };
 

packages/itwinui-css/scripts/watchScss.mjs

@@ -12,18 +12,12 @@ import * as lightningCss from 'lightningcss';
 import { targets } from './lightningCssSettings.js';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const srcDir = path.join(__dirname, '..', 'src');
 const outDir = path.join(__dirname, '..', 'css');
 
-const components = (await fs.promises.readdir(srcDir, { withFileTypes: true }))
-  .filter((f) => f.isDirectory())
-  .map((f) => f.name);
-
 // array of tuples where [0] is the .scss source and [1] is the .css output
 const inputsAndOutputsList = [
   ['src/all.scss', 'css/all.css'],
   ['src/global.scss', 'css/global.css'],
-  ...components.map((name) => [`src/${name}/${name}.scss`, `css/${name}.css`]),
 ];
 
 // sass cli expects this format (https://sass-lang.com/documentation/cli/dart-sass)