Skip to content

Commit 3eb5958

Browse files
committed
chore: define clean state for nx; remove cache from clean
1 parent 0868a96 commit 3eb5958

File tree

4 files changed

+149
-186
lines changed

4 files changed

+149
-186
lines changed

README.md

Lines changed: 107 additions & 169 deletions
Original file line numberDiff line numberDiff line change
@@ -44,58 +44,25 @@ Spectrum CSS components have build output that uses CSS custom properties to cha
4444

4545
```html
4646
<!-- Include global variables first -->
47-
<link
48-
rel="stylesheet"
49-
href="node_modules/@spectrum-css/vars/dist/spectrum-global.css"
50-
/>
47+
<link rel="stylesheet" href="node_modules/@spectrum-css/vars/dist/spectrum-global.css"/>
5148

5249
<!-- Include only the scales your application needs -->
53-
<link
54-
rel="stylesheet"
55-
href="node_modules/@spectrum-css/vars/dist/spectrum-medium.css"
56-
/>
57-
<link
58-
rel="stylesheet"
59-
href="node_modules/@spectrum-css/vars/dist/spectrum-large.css"
60-
/>
50+
<link rel="stylesheet" href="node_modules/@spectrum-css/vars/dist/spectrum-medium.css"/>
51+
<link rel="stylesheet" href="node_modules/@spectrum-css/vars/dist/spectrum-large.css"/>
6152

6253
<!-- Include only the colorstops your application needs -->
63-
<link
64-
rel="stylesheet"
65-
href="node_modules/@spectrum-css/vars/dist/spectrum-light.css"
66-
/>
67-
<link
68-
rel="stylesheet"
69-
href="node_modules/@spectrum-css/vars/dist/spectrum-dark.css"
70-
/>
71-
<link
72-
rel="stylesheet"
73-
href="node_modules/@spectrum-css/vars/dist/spectrum-darkest.css"
74-
/>
54+
<link rel="stylesheet" href="node_modules/@spectrum-css/vars/dist/spectrum-light.css"/>
55+
<link rel="stylesheet" href="node_modules/@spectrum-css/vars/dist/spectrum-dark.css"/>
56+
<link rel="stylesheet" href="node_modules/@spectrum-css/vars/dist/spectrum-darkest.css"/>
7557

7658
<!-- Include tokens -->
77-
<link
78-
rel="stylesheet"
79-
href="node_modules/@spectrum-css/tokens/dist/index.css"
80-
/>
59+
<link rel="stylesheet" href="node_modules/@spectrum-css/tokens/dist/index.css"/>
8160

8261
<!-- Include index-vars.css for all components you need -->
83-
<link
84-
rel="stylesheet"
85-
href="node_modules/@spectrum-css/page/dist/index-vars.css"
86-
/>
87-
<link
88-
rel="stylesheet"
89-
href="node_modules/@spectrum-css/typography/dist/index-vars.css"
90-
/>
91-
<link
92-
rel="stylesheet"
93-
href="node_modules/@spectrum-css/icon/dist/index-vars.css"
94-
/>
95-
<link
96-
rel="stylesheet"
97-
href="node_modules/@spectrum-css/button/dist/index-vars.css"
98-
/>
62+
<link rel="stylesheet" href="node_modules/@spectrum-css/page/dist/index-vars.css"/>
63+
<link rel="stylesheet" href="node_modules/@spectrum-css/typography/dist/index-vars.css"/>
64+
<link rel="stylesheet" href="node_modules/@spectrum-css/icon/dist/index-vars.css"/>
65+
<link rel="stylesheet" href="node_modules/@spectrum-css/button/dist/index-vars.css"/>
9966
```
10067

10168
Make sure you've included the relevant classes to choose which scale and colorstop you want:
@@ -108,27 +75,15 @@ To switch to Express, load vars from `@spectrum-css/expressvars` instead of `@sp
10875

10976
```html
11077
<html class="spectrum spectrum--medium spectrum--light spectrum--express">
111-
<head>
112-
<!-- Include only the scales your application needs -->
113-
<link
114-
rel="stylesheet"
115-
href="node_modules/@spectrum-css/expressvars/dist/spectrum-medium.css"
116-
/>
117-
<link
118-
rel="stylesheet"
119-
href="node_modules/@spectrum-css/expressvars/dist/spectrum-large.css"
120-
/>
121-
122-
<!-- Include only the colorstops your application needs -->
123-
<link
124-
rel="stylesheet"
125-
href="node_modules/@spectrum-css/expressvars/dist/spectrum-light.css"
126-
/>
127-
<link
128-
rel="stylesheet"
129-
href="node_modules/@spectrum-css/expressvars/dist/spectrum-dark.css"
130-
/>
131-
</head>
78+
<head>
79+
<!-- Include only the scales your application needs -->
80+
<link rel="stylesheet" href="node_modules/@spectrum-css/expressvars/dist/spectrum-medium.css"/>
81+
<link rel="stylesheet" href="node_modules/@spectrum-css/expressvars/dist/spectrum-large.css"/>
82+
83+
<!-- Include only the colorstops your application needs -->
84+
<link rel="stylesheet" href="node_modules/@spectrum-css/expressvars/dist/spectrum-light.css"/>
85+
<link rel="stylesheet" href="node_modules/@spectrum-css/expressvars/dist/spectrum-dark.css"/>
86+
</head>
13287
</html>
13388
```
13489

@@ -169,7 +124,7 @@ These icons are released within the [`@adobe/spectrum-css-workflow-icons`](https
169124

170125
```js
171126
loadIcons(
172-
"node_modules/@adobe/spectrum-css-workflow-icons/dist/spectrum-icons.svg"
127+
"node_modules/@adobe/spectrum-css-workflow-icons/dist/spectrum-icons.svg"
173128
);
174129
```
175130

@@ -212,12 +167,12 @@ Spectrum CSS is designed to be as flexible as possible, and as such, leaves room
212167

213168
```json
214169
{
215-
"name": "my-project",
216-
"devDependencies": {
217-
"@spectrum-css/button": "^3.0.0",
218-
"@spectrum-css/page": "^3.0.0",
219-
"@spectrum-css/vars": "^3.0.0"
220-
}
170+
"name": "my-project",
171+
"devDependencies": {
172+
"@spectrum-css/button": "^3.0.0",
173+
"@spectrum-css/page": "^3.0.0",
174+
"@spectrum-css/vars": "^3.0.0"
175+
}
221176
}
222177
```
223178

@@ -243,12 +198,12 @@ Next, create a `postcss.config.js`:
243198

244199
```js
245200
module.exports = {
246-
plugins: [
247-
require("postcss-import"),
248-
require("postcss-varfallback"),
249-
require("postcss-dropunusedvars"),
250-
require("cssnano"),
251-
],
201+
plugins: [
202+
require("postcss-import"),
203+
require("postcss-varfallback"),
204+
require("postcss-dropunusedvars"),
205+
require("cssnano"),
206+
],
252207
};
253208
```
254209

@@ -278,34 +233,34 @@ Then, add something like this to your `postcss.config.js`:
278233

279234
```js
280235
module.exports = {
281-
plugins: [
282-
require("postcss-transformselectors")({
283-
replace: [
284-
{ search: ".spectrum-Heading--sizeXXL", replace: "h1" },
285-
{ search: ".spectrum-Heading--sizeXL", replace: "h2" },
286-
{ search: ".spectrum-Heading--sizeL", replace: "h3" },
287-
],
288-
transform: (selector) => {
289-
if (selector.startsWith(".spectrum-Heading")) {
290-
// Operate on each selector in a selector list
291-
return selector
292-
.split(",")
293-
.map((selectorPart) => {
294-
// Create separate selectors for each reference to .spectrum-Heading
295-
return ["h1", "h2", "h3"]
296-
.map((h) => {
297-
return selectorPart.replace(".spectrum-Heading", h);
298-
})
299-
.join(",");
300-
})
301-
.join(",");
302-
}
303-
304-
// Don't mess with things that don't have .spectrum-Heading in them
305-
return selector;
306-
},
307-
}),
308-
],
236+
plugins: [
237+
require("postcss-transformselectors")({
238+
replace: [
239+
{ search: ".spectrum-Heading--sizeXXL", replace: "h1" },
240+
{ search: ".spectrum-Heading--sizeXL", replace: "h2" },
241+
{ search: ".spectrum-Heading--sizeL", replace: "h3" },
242+
],
243+
transform: (selector) => {
244+
if (selector.startsWith(".spectrum-Heading")) {
245+
// Operate on each selector in a selector list
246+
return selector
247+
.split(",")
248+
.map((selectorPart) => {
249+
// Create separate selectors for each reference to .spectrum-Heading
250+
return ["h1", "h2", "h3"]
251+
.map((h) => {
252+
return selectorPart.replace(".spectrum-Heading", h);
253+
})
254+
.join(",");
255+
})
256+
.join(",");
257+
}
258+
259+
// Don't mess with things that don't have .spectrum-Heading in them
260+
return selector;
261+
},
262+
}),
263+
],
309264
};
310265
```
311266

@@ -322,71 +277,53 @@ yarn install
322277
yarn start
323278
```
324279

325-
Your `dist/` folder should now have a local copy of the Spectrum CSS docs and minimal CSS files, and your browser should be open with the project's preview site. Editing any of the `.css` or the `.stories.js` files in `components/*` will update the project documentation and live reload in your browser.
280+
Your `dist/` folder should now have a local copy of the compiled CSS files, and your browser should be open with the project's preview site. Editing any of the `.css` or the `.stories.js` files in `components/*` will update the project documentation and live reload in your browser.
326281

327-
**Important:** Ensure you have Node.js > 14 installed or the build system will not run. Node.js > 16.x is preferred.
282+
**Important:** Ensure you have Node.js >= 14 installed or the build system will not run. Node.js 16.x is preferred.
328283

329-
This project is leveraging caching from [Nx](https://nx.dev/) to speed up the build process. If you are seeing unexpected results, you can clear the cache by running `yarn nx clean` or `yarn nx run-many --target clean --all`.
284+
This project is leveraging caching from [Nx](https://nx.dev/) to speed up the build process. If you are seeing unexpected results, you can clear the cache by running `yarn nx reset`.
330285

331286
To spin up the local development environment ([Storybook](https://storybook.js.org/docs/web-components/get-started/introduction)) without first building the components, use: `SKIP_BUILD=true yarn start` as `yarn start` alone will start from a clean build.
332287

333288
### Documentation site
334289

335290
#### Local documentation site
336291

337-
Building the project will build and launch the project documentation site in your browser automatically.
338-
339-
See [site generation](site/README.md) for more information.
340-
341-
#### Generating and deploying external documentation site
342-
343-
Checkout `nextjs` branch, pull, and install dependencies.
344-
345-
```shell
346-
git checkout nextjs
347-
git pull
348-
yarn install
349-
```
350-
351-
Update `yml` data from main
352-
353-
```shell
354-
yarn importdata
355-
```
356-
357-
Run `prep` script to build the static site locally
292+
After installing the project, you can spin up a local view of the documentation site with:
358293

359294
```shell
360-
yarn prep
295+
yarn dev
361296
```
362297

363-
Commit changes
298+
See [site generation](site/README.md) for more information. This is being imminently updated to 11ty so it's advised to hold off opening any pull requests to change the site until that is complete.
364299

365-
```shell
366-
git commit -am '<message here>'
367-
```
300+
#### Generating and deploying external documentation site
368301

369-
Deploy
302+
To generate the documentation site, run the following command:
370303

371304
```shell
372-
yarn deploy
305+
yarn release:site
373306
```
374307

375-
Push changes to `nextjs` branch
376-
377-
```shell
378-
git push origin nextjs
379-
```
308+
This will generate the documentation site in the `dist/` folder and push that content to gh-pages.
380309

381310
### CLI
382311

383312
The following tasks are available:
384313

385-
- `yarn build:all` - Performs a build of all components, documentation site, and storybook
386-
- `yarn build` - Performs a build of all components
387-
- `yarn dev` - Performs a component build, runs storybook, and serves the documentation on the default port (3000), then starts watching components and website files
388-
- `yarn clean` - Cleans all output files for the project and all components
389-
- `yarn watch` - Assuming a build has already been performed, re-starts starts watching components and website files. Presumes a browser is already open to your locally served docs
314+
- `yarn build:all`: Performs a build of all components, documentation site, and storybook
315+
- `yarn build`: Performs a build of all components
316+
- `yarn build:components`: Builds components in parallel; uses cache
317+
- `yarn build:preview`: Builds storybook & dependencies (all components)
318+
- `yarn build:site`: Builds the website only
319+
- `yarn clean`: Cleans all output files for the project and all components
320+
- `yarn ci:storybook`: Builds storybook & dependencies (all components) for CI
321+
- `yarn clean:components`: Deletes compiled assets for all component folders
322+
- `yarn clean:preview`: Deletes the storybook compiled assets
323+
- `yarn dev` - Performs a component build, runs storybook in the background on port (3000), then builds the documentation site, opening the content from `dist/`
324+
- `yarn lint`: Lints packages and css for components
325+
- `yarn start`: Triggers storybook build and dev server
326+
- `yarn watch` - Assuming a build has already been performed, re-starts starts watching components and website files; Presumes a browser is already open to your locally served docs
390327

391328
---
392329

@@ -396,41 +333,42 @@ The following tasks are available:
396333

397334
Releasing individual components is handled by Lerna. When any component or its dependencies change, Lerna will queue that component (and all of its dependents) up for a release.
398335

399-
To release everything that has changed, simply run:
336+
To release everything that has changed, run:
400337

401338
```shell
402339
yarn release
403340
```
404341

405-
Version numbers are automatically determined, changelogs generated, and packages published.
342+
A build of all components is run, then a `lerna publish` command is fired (with settings to prevent publishing private packages). Version numbers are automatically determined, changelogs generated, and packages published to npm.
406343

407-
### Releasing the website
344+
<details>
345+
<summary>Prereleases</summary>
408346

409-
After performing a release, run the following command to release the website:
347+
Before changes are considered production-ready, a prerelease tag might be created to facilitate testing in downstream projects.
348+
349+
**Before starting, ensure that you're working from a branch other than `main`.**
350+
351+
Commit changes using the typical conventional commit syntax.
352+
353+
To publish a prerelease:
410354

411355
```shell
412-
yarn release:docs
356+
yarn release:beta
413357
```
414358

415-
### Publishing prereleases
359+
This will build the affected package(s) locally, then attempt to bump the version numbers in the affected package(s) (via `lerna publish from-package --conventional-prerelease --preid beta --pre-dist-tag beta --no-private`).
416360

417-
Occasionally, it can be helpful for our subscribers to test CSS changes before they're considered ready to be part of a stable release. To facilitate this, we can publish prerelease versions.
361+
- Before publishing to npm, Lerna will show a preview of the affected package version numbers that look something like:
418362

419-
To publish prerelease versions:
420-
421-
- First, be sure that you're working on a branch other than `main`.
422-
- Once your change(s) are ready to be committed, be aware of the severity of the change(s), and be sure to author your commit message so that Lerna understands how to increase the version number(s) of the affected components.
423-
- Once your changes are committed, you **must** build the affected package(s) locally **before** publishing them to npm. An npm task for cleaning, building, and beta publishing is available, and it can be run via the following command: `yarn release:beta-from-package`. This command will perform a full `clean` (via the `clean` task), a full `build` (via the `build` task), and will attempt to bump the version numbers in the affected package(s) (via `lerna publish --conventional-prerelease --preid beta --pre-dist-tag beta --no-private`).
424-
- Depending on the severity of your change(s), and before publishing to npm, Lerna should show a preview of the affected package version numbers that look something like: `@spectrum-css/tag: 3.3.8 => 3.3.9-beta.0`. Additionally, at this time, Lerna will ask if you would like to continue with publishing the changes or cancel.
425-
- Selecting `y` to publish will publish the affected package(s) to npm.
363+
```shell
364+
Changes:
365+
- @spectrum-css/accordion: 4.0.12 => 4.0.13-beta.0
366+
- @spectrum-css/actionbar: 6.0.62 => 6.0.63-beta.0
367+
- @spectrum-css/actionbutton: 5.0.2 => 5.0.3-beta.0
368+
```
426369

427-
### Manual prerelease versioning & publishing
370+
At this time, Lerna will ask if you would like to continue with publishing the changes or cancel. Selecting `y` to publish will publish the affected package(s) to npm (assuming you have permissions to publish to npm for the project).
428371

429-
Occasionally, you may want to run a prerelease for an individual package and skip a version bump for consuming packages. It's possible to manually change a package's version number to achieve this.
372+
Not sure if you have permissions? Try `npm login` first. Do not run the lerna release if you do not have permissions to publish to npm as it will leave the package(s) in a hanging state with tags in github but no published package(s) on npm.
430373

431-
- For the package that you want to prerelease, manually alter the version number in the package's `package.json` file.
432-
- For example, let's say you'd like to release a `beta` version of the Switch component. In the Switch's `package.json`, manually change the `version` number from its current number (`"version": "1.0.23"`) to the next appropriate semver version number (`"version": "2.0.0-beta.0"`).
433-
- Save your changes, and commit them with the appropriate conventional commit-style commit message: `chore(switch): manual version bump for beta release` or something similar.
434-
- You **must** run a build **before** continuing with the prerelease. An npm task for cleaning, building, and beta publishing is available, and it can be run via the following command: `yarn release:beta-from-package`. This command will perform a full `clean` (via the `clean` task), a full `build` (via the `build` task), and will attempt to publish the package (via `lerna publish --conventional-prerelease --preid beta --pre-dist-tag beta --no-private`).
435-
- Depending on the severity of your change(s), and before publishing to npm, Lerna should show a preview of the affected package version number that looks something like: `@spectrum-css/switch: 1.0.23 => 2.0.0-beta.0`. Additionally, at this time, Lerna will ask if you would like to continue with publishing the changes or cancel.
436-
- Selecting `y` to publish will publish the affected package(s) to npm.
374+
</details>

0 commit comments

Comments
 (0)