diff --git a/.eslintrc b/.eslintrc index 8b38a1559d2..f239b6052d6 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,22 +1,21 @@ { "env": { "node": true, - "es6": true + "es2020": true }, "parserOptions": { - "ecmaVersion": 6 + "sourceType": "module" }, "extends": "eslint:recommended", "rules": { - "brace-style": ["error", "stroustrup", { "allowSingleLine": true }], - "func-call-spacing": ["error", "never"], - "indent": ["error", 2], - "linebreak-style": ["error", "unix"], - "no-console": "off", - "quotes": ["error", "single"], - "avoidEscape": true, - "semi": ["error", "always"], - "space-before-blocks": ["error", "always"] + "brace-style": ["warn", "stroustrup", { "allowSingleLine": true }], + "func-call-spacing": ["warn", "never"], + "indent": ["warn", 2], + "linebreak-style": ["warn", "unix"], + "no-console": 0, + "quotes": ["warn", "single"], + "semi": ["warn", "always"], + "space-before-blocks": ["warn", "always"] }, "root": true } diff --git a/.github/GUIDE.md b/.github/GUIDE.md new file mode 100644 index 00000000000..0ad7d5252b0 --- /dev/null +++ b/.github/GUIDE.md @@ -0,0 +1,108 @@ +# GitHub Actions, templates, and bots (oh my!) + +The goal of this documentation is to provide an outline for the GitHub goodness that exists in this folder. This is a living document, so please feel free to contribute to it. + +## Architecture + +```bash +⎪ actions +├── file-diff +├──── action.yml - this defines the inputs and outputs of the action +├──── index.js - the code that runs the action +├──── package.json - has dependencies so has package +├──── README.md - more documentation yay! +⎪ workflows +├── development.yml - run on pull requests only +├── production.yml - runs only on pushes to main +├── vrt.yml - a reusable workflow that can be called by other workflows (i.e., development.yml or production.yml) or called on it's own via [workflow dispatch](https://github.blog/changelog/2020-07-06-github-actions-manual-triggers-with-workflow_dispatch/). +├── build.yml - builds a branch and outputs the compiled assets as artifacts +├── compare-results.yml - compares the compiled assets between the pull request branch and the main branch +``` + +**But wait! There's more!** + +```bash +⎪ ISSUE_TEMPLATE +├── --bug-report.md +├── --documentation-issue.md +├── --feature-request.md +├── --support-request.md +⎪ PULL_REQUEST_TEMPLATE.md +⎪ CONTRIBUTING.md +⎪ dependabot.yml +``` + +## Actions + +### File Diff + +This action is used to determine if a compiled asset has changed between two branches. See the [README](./file-diff/README.md) for more information. + +## Workflows + +### Development + +This workflow runs: + +- on pull requests when: + - opened against the `main` branch + - opened, reopened, synchronized (i.e., when a commit is pushed to the pull request), labeled or unlabeled, or if auto merge is enabled + - any files other than markdown have changed (i.e., will not run on a pull request that only changes markdown files) + +#### What does this workflow do? + +##### 👷‍♀️ Build + +Builds the pull request branch against various development environments. Installs dependencies and builds the project looking for basic processing errors. + +##### 👷‍♀️ Compare results + +Compares the compiled assets between the pull request branch and the base branch. If there are differences, a comment is added to the pull request with a table detailing the files and the size differences. + +_to-do_: This needs to diff the actual content of the files as well. Right now we're leveraging a canary approach which would catch any file size changes to the compiled assets. However, **if the content of the file changes but the size doesn't, we won't catch that**. + +##### 🧹 Linting + +Runs stylelint or eslint if any relevant assets have been updated in this PR. + +##### 📝 Publish site + +After the build and visual regression tests have passed, this will build the docs site and publish it to Netlify. + +##### 📸 Visual regression testing + +Run these tests if the `run_vrt` label is added to the pull request. + +**OR** the pull request is not in a draft state and is mergeable (meaning no conflicts with the base branch) + +**OR** the pull request review request is approved. + +The only step in this job is to run the `vrt.yml` workflow. + +### Production + +This workflow runs: + +- on pushes to the `main` branch + +#### What does this workflow do? + +##### 👷🏾 1. Build + +Builds the `main` branch and outputs the compiled assets as artifacts. + +##### 📝 2. Publish site + +Publish the docs site to Netlify. + +##### 📸 3. Visual regression testing + +Run the visual regression testing for **ALL** pushes to the `main` branch. Triggers the `vrt.yml` workflow, see below for more information. + + + +### Visual regression testing + +First, why is this a workflow and not it's own action? We want to be able to trigger the visual regression test manually via the GitHub UI or dynamically via another workflow. It also doesn't need to run in the same container as the rest of the workflow. An action is a definition of tasks and runs in the context it's called within while a workflow runs in it's own container. diff --git a/.github/actions/file-diff/index.js b/.github/actions/file-diff/index.js index 8493422694a..bf7fce5a54d 100644 --- a/.github/actions/file-diff/index.js +++ b/.github/actions/file-diff/index.js @@ -17,162 +17,229 @@ const { join, sep } = require("path"); const core = require("@actions/core"); const { - fetchFilesAndSizes, - bytesToSize, - addComment, + fetchFilesAndSizes, + bytesToSize, + addComment, } = require("./utilities.js"); async function run() { - try { - // --------------- Fetch user input values --------------- - const token = core.getInput("token"); - const path = core.getInput("path"); - const diffPath = core.getInput("diff-path"); - const fileGlobPattern = core.getMultilineInput("file-glob-pattern", { - trimWhitespace: true, - }); - const shouldAddComment = core.getBooleanInput("comment") ?? true; - const commentHeader = core.getInput("comment-header"); - // --------------- End user input --------------- - - // --------------- Evaluate compiled assets --------------- - /** @type Map */ - const pathOutput = await fetchFilesAndSizes(path, fileGlobPattern, { core }); - /** - * If a diff path is provided, get the diff files and their sizes - * @type Map - **/ - const diffOutput = await fetchFilesAndSizes(diffPath, fileGlobPattern, { core }); - /** - * Indicates that there are files we're comparing against - * and not just reporting on the overall size of the compiled assets - * @type boolean - */ - const hasDiff = diffOutput.size > 0; - // --------------- End evaluation --------------- - - /** Split the data by component package */ - const COMPONENTS = splitDataByComponent(pathOutput, diffOutput); - const sections = makeTable(COMPONENTS); - - const overallSize = [...pathOutput.values()].reduce((acc, size) => acc + size, 0); - - /** Calculate the overall size of the updated assets */ - const overallDiffSize = hasDiff ? [...diffOutput.values()].reduce((acc, size) => acc + size, 0) : undefined; - - /** If no diff map data provided, we're going to report on the overall size */ - /** - * If the updated assets are the same as the original, - * report no change - * @todo could likely use this to report the overall change; is that helpful info? - **/ - let markdown = - diffOutput.size === 0 - ? `\n\n**Overall size**: ${bytesToSize(overallSize)}\n` - : hasDiff ? `**Overall Δ**: ${printChange(overallDiffSize - overallSize)}${ - overallSize === overallDiffSize - ? " 🎉" - : ` (${printPercentChange((overallDiffSize - overallSize) / overallSize)})` - }\n` : ""; - - markdown += sections.map(({ name, totalSize, totalDiffSize, fileMap }) => { - const md = []; - md.push(`\n### ${name}\n`); - - // If a diff path was provided and the component folder doesn't exist, - // report that the compiled assets were removed - if (hasDiff && !existsSync(join(diffPath, "components", name))) { - md.push("🚨 **Package was deleted, moved, or renamed** 🚨\n"); - return md.join("\n") + '\n'; - } - - if (hasDiff && totalSize > 0 && totalDiffSize === 0) { - md.push("🚨 **All compiled assets were removed or are empty** 🚨\n"); - return md.join("\n") + '\n'; - } - - if (hasDiff) md.push(printChange(totalDiffSize - totalSize) + '\n'); - - md.push(...[ - [ - "File", - "Size", - ...(hasDiff ? ["Diff", "Δ", "Δ%"] : []) - ], - [ - " - ", - " - ", - ...(hasDiff ? [" - ", " - ", " - "] : []), - ], - [ - "**Total changes**", - bytesToSize(totalSize), - ...(hasDiff ? [ - bytesToSize(totalDiffSize), - printChange(totalDiffSize - totalSize), - printPercentChange((totalDiffSize - totalSize) / totalSize), - ] : []), - ], - ...[...fileMap.entries()].reduce((table, [readableFilename, { byteSize, diffByteSize }]) => { - // @todo readable filename can be linked to html diff of the file? - // https://github.com/adobe/spectrum-css/pull/2093/files#diff-6badd53e481452b5af234953767029ef2e364427dd84cdeed25f5778b6fca2e6 - const row = [ - readableFilename, - bytesToSize(byteSize), - diffByteSize ? bytesToSize(diffByteSize) : "**new**", - ]; - - if (hasDiff && typeof diffByteSize !== "undefined" && diffByteSize !== "NaN") { - const delta = (diffByteSize - byteSize) / byteSize; - row.push(printChange(diffByteSize - byteSize), printPercentChange(delta)); - } - return [...table, row]; - }, []) - ].map((row) => `| ${row.join(" | ")} |`)); - - return md.join("\n") + '\n'; - }).join("\n"); - - // --------------- Start Comment --------------- - if (shouldAddComment) { - await addComment({ - search: new RegExp(`^${commentHeader}`), - content: `${commentHeader}\n${markdown}`, - token, - }); - } - // --------------- End Comment --------------- - - // Add a summary to the GitHub Actions output - core.startGroup(commentHeader); - core.info(markdown); - core.endGroup(); - - core.summary = markdown; - - // --------------- Set output variables --------------- - if (pathOutput.size > 0) { - const totalSize = [...pathOutput.entries()].reduce((acc, [_, size]) => acc + size, 0); - core.setOutput("total-size", totalSize); - - if (hasDiff) { - const totalDiffSize = [...diffOutput.entries()].reduce((acc, [_, size]) => acc + size, 0); - - core.setOutput("has-changed", hasDiff && totalSize !== totalDiffSize ? "true" : "false"); - } - } else { - core.setOutput("total-size", 0); - } - } catch (error) { - core.error(error.stack); - core.setFailed(error.message); - } + try { + // --------------- Fetch user input values --------------- + const token = core.getInput("token"); + const path = core.getInput("path"); + const diffPath = core.getInput("diff-path"); + const fileGlobPattern = core.getMultilineInput("file-glob-pattern", { + trimWhitespace: true, + }); + const shouldAddComment = core.getBooleanInput("comment") ?? true; + const commentHeader = core.getInput("comment-header"); + // --------------- End user input --------------- + + // --------------- Evaluate compiled assets --------------- + /** @type Map */ + const pathOutput = await fetchFilesAndSizes(path, fileGlobPattern, { + core, + }); + /** + * If a diff path is provided, get the diff files and their sizes + * @type Map + **/ + const diffOutput = await fetchFilesAndSizes(diffPath, fileGlobPattern, { + core, + }); + /** + * Indicates that there are files we're comparing against + * and not just reporting on the overall size of the compiled assets + * @type boolean + */ + const hasDiff = diffOutput.size > 0; + // --------------- End evaluation --------------- + + /** Split the data by component package */ + const COMPONENTS = splitDataByComponent(pathOutput, diffOutput); + const sections = makeTable(COMPONENTS); + + const overallSize = [...pathOutput.values()].reduce( + (acc, size) => acc + size, + 0 + ); + + /** Calculate the overall size of the updated assets */ + const overallDiffSize = hasDiff + ? [...diffOutput.values()].reduce((acc, size) => acc + size, 0) + : undefined; + + /** If no diff map data provided, we're going to report on the overall size */ + /** + * If the updated assets are the same as the original, + * report no change + * @todo could likely use this to report the overall change; is that helpful info? + **/ + const markdown = []; + const summary = [ + "### Summary", + `**Total size**: ${bytesToSize(overallDiffSize)}*` + ]; + const summaryTable = []; + + if (sections.length === 0) { + summary.push(...["", " 🎉 No changes detected in any packages"]); + } else { + if (diffOutput.size > 0 && hasDiff) { + let changeSummary = `**Total change (Δ)**: ${printChange( + overallDiffSize - overallSize + )}`; + + if (overallSize === overallDiffSize) changeSummary += " 🎉"; + else + changeSummary += ` (${printPercentChange( + (overallDiffSize - overallSize) / overallSize + )})`; + + summary.push(...[changeSummary, ""]); + } + + summaryTable.push( + ["Package", "Size", ...(hasDiff ? ["Δ"] : [])], + ["-", "-", ...(hasDiff ? ["-"] : [])] + ); + + markdown.push(`
`, `Details`, ""); + + sections.map(({ name, totalSize, totalDiffSize, fileMap }) => { + const md = ["", `#### ${name}`, ""]; + const data = [name, bytesToSize(totalDiffSize)]; + + if (hasDiff) { + // If a diff path was provided and the component folder doesn't exist, + // report that the compiled assets were removed + if (!existsSync(join(diffPath, "components", name))) { + data.push("🚨 package deleted/moved/renamed"); + summaryTable.push(data); + return; + } + + if (totalSize > 0 && totalDiffSize === 0) { + data.push("⚠️ assets deleted/moved/renamed"); + summaryTable.push(data); + return; + } + + if (totalSize === 0 && totalDiffSize > 0) { + data.push("🎉 new package"); + } else { + data.push(printChange(totalDiffSize - totalSize)); + } + } + + summaryTable.push(data); + + md.push( + ...[ + ["File", "Size", ...(hasDiff ? ["Original size", "Δ", "Δ%"] : [])], + [" - ", " - ", ...(hasDiff ? [" - ", " - ", " - "] : [])], + [ + "**Total changes**", + bytesToSize(totalSize), + ...(hasDiff + ? [ + bytesToSize(totalDiffSize), + printChange(totalDiffSize - totalSize), + printPercentChange((totalDiffSize - totalSize) / totalSize), + ] + : []), + ], + ...fileMap.entries(), + ] + .reduce( + ( + table, + [readableFilename, { byteSize = 0, diffByteSize = 0 }] + ) => { + // @todo readable filename can be linked to html diff of the file? + // https://github.com/adobe/spectrum-css/pull/2093/files#diff-6badd53e481452b5af234953767029ef2e364427dd84cdeed25f5778b6fca2e6 + const row = [ + readableFilename, + byteSize === 0 ? "**removed**" : bytesToSize(byteSize), + diffByteSize === 0 ? "" : bytesToSize(diffByteSize), + ]; + + if (hasDiff && diffByteSize > 0) { + if (byteSize === 0) row.push("", ""); + else { + row.push(printChange(diffByteSize - byteSize), ""); + } + } + + return [...table, row]; + }, + [] + ) + .map((row) => `| ${row.join(" | ")} |`), + ); + + markdown.push(...md); + }); + + markdown.push("", `
`); + } + + if (summaryTable.length > 1) { + summary.push(...summaryTable.map((row) => `| ${row.join(" | ")} |`)); + } + + markdown.push("", `* An ASCII character in UTF-8 is 8 bits or 1 byte.`); + + // --------------- Start Comment --------------- + if (shouldAddComment) { + await addComment({ + search: new RegExp(`^${commentHeader}`), + content: [commentHeader, summary.join("\n"), markdown.join("\n")].join( + "\n\n" + ), + token, + }); + } + // --------------- End Comment --------------- + + // Add a summary to the GitHub Actions output + core.startGroup(commentHeader); + core.info(summary.join("\n")); + core.info(markdown.join("\n")); + core.endGroup(); + + core.summary = summary.join("\n"); + + // --------------- Set output variables --------------- + if (pathOutput.size > 0) { + const totalSize = [...pathOutput.entries()].reduce( + (acc, [_, size]) => acc + size, + 0 + ); + core.setOutput("total-size", totalSize); + + if (hasDiff) { + const totalDiffSize = [...diffOutput.entries()].reduce( + (acc, [_, size]) => acc + size, + 0 + ); + + core.setOutput( + "has-changed", + hasDiff && totalSize !== totalDiffSize ? "true" : "false" + ); + } + } else { + core.setOutput("total-size", 0); + } + } catch (error) { + core.error(error.stack); + core.setFailed(error.message); + } } run(); - - /** * Convert the provided difference between file sizes into a human * readable representation of the change. @@ -180,9 +247,11 @@ run(); * @returns {string} */ const printChange = function (difference) { - return difference === 0 - ? `No change 🎉` - : `${difference > 0 ? "+" : "-"}${bytesToSize(Math.abs(difference))} ${difference > 0 ? "⬆" : "⬇"}`; + return difference === 0 + ? `No change 🎉` + : `${difference > 0 ? "+" : "-"}${bytesToSize(Math.abs(difference))} ${ + difference > 0 ? "⬆" : "⬇" + }`; }; /** @@ -193,9 +262,9 @@ const printChange = function (difference) { * @returns {string} */ const printPercentChange = function (delta) { - if (delta === 0) return `0%`; - const direction = delta > 0 ? "+" : "-"; - return `${direction}${Math.abs(delta * 100).toFixed(2)}%`; + if (delta === 0) return `0%`; + const direction = delta > 0 ? "+" : "-"; + return `${direction}${Math.abs(delta * 100).toFixed(2)}%`; }; /** @@ -205,22 +274,28 @@ const printPercentChange = function (delta) { * @returns {string} */ const makeTable = function (COMPONENTS) { - const sections = []; - - /** Next convert that component data into a comment */ - COMPONENTS.forEach((fileMap, componentName) => { - const totalSize = [...fileMap.values()].reduce((acc, { byteSize }) => acc + byteSize, 0); - const totalDiffSize = [...fileMap.values()].reduce((acc, { diffByteSize = 0 }) => acc + diffByteSize, 0); - - /** - * We don't need to report on components that haven't changed unless they're new or removed - */ - if (totalSize === totalDiffSize) return; - - sections.push({ name: componentName, totalSize, totalDiffSize, fileMap }); - }); - - return sections; + const sections = []; + + /** Next convert that component data into a comment */ + COMPONENTS.forEach((fileMap, componentName) => { + const totalSize = [...fileMap.values()].reduce( + (acc, { byteSize }) => acc + byteSize, + 0 + ); + const totalDiffSize = [...fileMap.values()].reduce( + (acc, { diffByteSize = 0 }) => acc + diffByteSize, + 0 + ); + + /** + * We don't need to report on components that haven't changed unless they're new or removed + */ + if (totalSize === totalDiffSize) return; + + sections.push({ name: componentName, totalSize, totalDiffSize, fileMap }); + }); + + return sections; }; /** @@ -230,27 +305,29 @@ const makeTable = function (COMPONENTS) { * @returns {Map>} */ const splitDataByComponent = function (dataMap, diffMap = new Map()) { - const COMPONENTS = new Map(); - [...dataMap.entries()].forEach(([file, byteSize]) => { - // Determine the name of the component - const parts = file.split(sep); - const componentIdx = parts.findIndex((part) => part === "dist") - 1; - const componentName = parts[componentIdx]; - const readableFilename = file.replace(/^.*\/dist\//, ""); - - const fileMap = COMPONENTS.has(componentName) ? COMPONENTS.get(componentName) : new Map(); - - if (!fileMap.has(readableFilename)) { - fileMap.set(readableFilename, { - byteSize, - diffByteSize: diffMap.get(file), - }); - } else { - throw new Error(`The file ${file} was found twice in the dataset`); - } - - /** Update the component's table data */ - COMPONENTS.set(componentName, fileMap); - }); - return COMPONENTS; + const COMPONENTS = new Map(); + [...dataMap.entries()].forEach(([file, byteSize]) => { + // Determine the name of the component + const parts = file.split(sep); + const componentIdx = parts.findIndex((part) => part === "dist") - 1; + const componentName = parts[componentIdx]; + const readableFilename = file.replace(/^.*\/dist\//, ""); + + const fileMap = COMPONENTS.has(componentName) + ? COMPONENTS.get(componentName) + : new Map(); + + if (!fileMap.has(readableFilename)) { + fileMap.set(readableFilename, { + byteSize, + diffByteSize: diffMap.get(file), + }); + } else { + throw new Error(`The file ${file} was found twice in the dataset`); + } + + /** Update the component's table data */ + COMPONENTS.set(componentName, fileMap); + }); + return COMPONENTS; }; diff --git a/.github/actions/file-diff/utilities.js b/.github/actions/file-diff/utilities.js index 06662046223..f905d77b127 100644 --- a/.github/actions/file-diff/utilities.js +++ b/.github/actions/file-diff/utilities.js @@ -67,7 +67,7 @@ exports.bytesToSize = function (bytes) { const sizes = ["bytes", "KB", "MB", "GB", "TB"]; // Determine the size identifier to use (KB, MB, etc) const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024))); - if (i === 0) return "< 1KB"; + if (i === 0) return (bytes / 1000).toFixed(2) + " " + sizes[1]; return (bytes / Math.pow(1024, i)).toFixed(2) + " " + sizes[i]; }; diff --git a/.github/workflows/compare-results.yml b/.github/workflows/compare-results.yml index f69e68d80b9..164970fe2d5 100644 --- a/.github/workflows/compare-results.yml +++ b/.github/workflows/compare-results.yml @@ -90,8 +90,8 @@ jobs: uses: ./.github/actions/file-diff # uses: spectrum-tools/gh-action-file-diff@v1 with: - path: ${{ github.workspace }}/${{ inputs.base-sha }}/ - diff-path: ${{ github.workspace }}/${{ inputs.head-sha }}/ + path: ${{ github.workspace }}/${{ inputs.head-sha }}/ + diff-path: ${{ github.workspace }}/${{ inputs.base-sha }}/ file-glob-pattern: components/*/dist/** token: ${{ secrets.GITHUB_TOKEN }} diff --git a/.github/workflows/development.yml b/.github/workflows/development.yml index 93a3a63cd3f..caf6162c2cb 100644 --- a/.github/workflows/development.yml +++ b/.github/workflows/development.yml @@ -20,7 +20,6 @@ on: paths-ignore: - "LICENSE" - "*.hbs" - - "plugins/conventional-changelog-spectrum/**" types: - opened @@ -82,44 +81,44 @@ jobs: # ------------------------------------------------------------- # Returns all changed pull request files. # -------------------------------------------------------------- - # changed_files: - # runs-on: ubuntu-latest - # name: Capture changed-files - # outputs: - # styles_added_files: ${{ steps.changed-files.outputs.styles_added_files }} - # styles_modified_files: ${{ steps.changed-files.outputs.styles_modified_files }} - # eslint_added_files: ${{ steps.changed-files.outputs.eslint_added_files }} - # eslint_modified_files: ${{ steps.changed-files.outputs.eslint_modified_files }} - # permissions: - # pull-requests: read + changed_files: + runs-on: ubuntu-latest + name: Capture changed-files + outputs: + styles_added_files: ${{ steps.changed-files.outputs.styles_added_files }} + styles_modified_files: ${{ steps.changed-files.outputs.styles_modified_files }} + # eslint_added_files: ${{ steps.changed-files.outputs.eslint_added_files }} + # eslint_modified_files: ${{ steps.changed-files.outputs.eslint_modified_files }} + permissions: + pull-requests: read - # steps: - # - name: Get changed files - # id: changed-files - # uses: tj-actions/changed-files@v39 - # with: - # files_yaml: | - # styles: - # - components/*/index.css - # - components/*/themes/spectrum.css - # - components/*/themes/express.css - # eslint: - # - components/*/package.json - # - components/*/project.json - # - components/*/stories/*.js + steps: + - name: Get changed files + id: changed-files + uses: tj-actions/changed-files@v39 + with: + files_yaml: | + styles: + - components/*/index.css + - components/*/themes/spectrum.css + - components/*/themes/express.css + # eslint: + # - components/*/package.json + # - components/*/project.json + # - components/*/stories/*.js # ------------------------------------------------------------- # Lint pre-compiled assets for consistency # ------------------------------------------------------------- lint: name: Lint - # needs: [changed_files] + needs: [changed_files] uses: ./.github/workflows/lint.yml - # with: - # styles_added_files: ${{ needs.changed_files.outputs.styles_added_files }} - # styles_modified_files: ${{ needs.changed_files.outputs.styles_modified_files }} - # eslint_added_files: ${{ needs.changed_files.outputs.eslint_added_files }} - # eslint_modified_files: ${{ needs.changed_files.outputs.eslint_modified_files }} + with: + styles_added_files: ${{ needs.changed_files.outputs.styles_added_files }} + styles_modified_files: ${{ needs.changed_files.outputs.styles_modified_files }} + # eslint_added_files: ${{ needs.changed_files.outputs.eslint_added_files }} + # eslint_modified_files: ${{ needs.changed_files.outputs.eslint_modified_files }} secrets: inherit # ------------------------------------------------------------- diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index 9e1ef4dcf78..f9f5367886f 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -12,12 +12,12 @@ on: styles_modified_files: type: string required: false - eslint_added_files: - type: string - required: false - eslint_modified_files: - type: string - required: false + # eslint_added_files: + # type: string + # required: false + # eslint_modified_files: + # type: string + # required: false workflow_call: inputs: styles_added_files: @@ -26,12 +26,12 @@ on: styles_modified_files: type: string required: false - eslint_added_files: - type: string - required: false - eslint_modified_files: - type: string - required: false + # eslint_added_files: + # type: string + # required: false + # eslint_modified_files: + # type: string + # required: false permissions: contents: read @@ -74,24 +74,24 @@ jobs: run: yarn install --frozen-lockfile --cache-folder .cache/yarn - name: Lint component styles - # if: ${{ inputs.styles_added_files != '' || inputs.styles_modified_files != '' }} + if: ${{ inputs.styles_added_files != '' || inputs.styles_modified_files != '' }} uses: reviewdog/action-stylelint@v1.18.1 with: fail_on_error: true level: error reporter: github-pr-check filter_mode: file - stylelint_input: "components/*/index.css components/*/themes/*.css" - # stylelint_input: "${{ inputs.styles_added_files }} ${{ inputs.styles_modified_files }}" + # stylelint_input: "components/*/index.css components/*/themes/*.css" + stylelint_input: "${{ inputs.styles_added_files }} ${{ inputs.styles_modified_files }}" stylelint_config: stylelint.config.js # - name: Run eslint on packages and stories # uses: reviewdog/action-eslint@v1.20.0 - # # if: ${{ inputs.eslint_added_files != '' || inputs.eslint_modified_files != '' }} + # if: ${{ inputs.eslint_added_files != '' || inputs.eslint_modified_files != '' }} # with: # fail_on_error: true # level: error # reporter: github-pr-check # filter_mode: file - # eslint_flags: "components/*/stories/*.js" - # # eslint_flags: "${{ inputs.eslint_added_files }} ${{ inputs.eslint_modified_files }}" + # # eslint_flags: "components/*/stories/*.js" + # eslint_flags: "${{ inputs.eslint_added_files }} ${{ inputs.eslint_modified_files }}" diff --git a/.github/workflows/publish-site.yml b/.github/workflows/publish-site.yml index f434775a37e..7445bf11d12 100644 --- a/.github/workflows/publish-site.yml +++ b/.github/workflows/publish-site.yml @@ -87,9 +87,14 @@ jobs: components/*/dist/** key: ubuntu-latest-node18-compiled-assets-${{ steps.set-SHAs.outputs.head }} + - name: Build storybook site + if: ${{ github.event.inputs.storybook-url == '' }} + shell: bash + run: yarn ci:storybook --output-dir {{ .github.workspace }}/dist/preview + - name: Build docs site shell: bash - run: yarn build:all + run: yarn build:site env: CHROMATIC_URL: ${{ inputs.storybook-url }} diff --git a/.storybook/package.json b/.storybook/package.json index ab6d326449b..4455788a01a 100644 --- a/.storybook/package.json +++ b/.storybook/package.json @@ -6,17 +6,8 @@ "author": "Adobe", "homepage": "https://opensource.adobe.com/spectrum-css/preview", "main": "main.js", - "scripts": { - "build": "yarn storybook", - "clean": "rimraf storybook-static", - "new": "yarn workspace @spectrum-css/generator new story", - "start": "WATCH_MODE=true storybook dev --quiet --config-dir .", - "storybook": "storybook build --quiet --config-dir .", - "test": "chromatic --only-changed --build-script-name build --junit-report", - "test:scope": "yarn test --only-story-names" - }, "dependencies": { - "@adobe/spectrum-css-workflow-icons": "^1.2.1", + "@adobe/spectrum-css-workflow-icons": "^1.5.4", "@spectrum-css/expressvars": "^3.0.9", "@spectrum-css/icon": "^4.0.5", "@spectrum-css/site": "^4.0.2", @@ -49,7 +40,6 @@ "file-loader": "6.2.0", "lit": "^2.8.0", "lodash-es": "^4.17.21", - "npm-run-all": "^4.1.5", "postcss": "^7.0.36", "postcss-class-prefix": "^0.3.0", "postcss-loader": "^4.0.0", @@ -61,46 +51,10 @@ "react": "^18.0.0", "react-dom": "^18.0.0", "react-syntax-highlighter": "^15.5.0", - "rimraf": "^5.0.1", - "source-map-loader": "^1.0.0", + "source-map-loader": "^4.0.1", "storybook": "^7.5.1", "storybook-addon-pseudo-states": "^2.1.0", "style-loader": "3.3.3", "webpack": "^5.83.1" - }, - "nx": { - "targets": { - "build": { - "dependsOn": [ - "^build" - ], - "inputs": [ - "{workspaceRoot}/assets", - "{workspaceRoot}/decorators", - "{workspaceRoot}/*.js", - "{workspaceRoot}/*.html", - "{projectRoot}/components/*/dist" - ], - "outputs": [ - "{workspaceRoot}/storybook-static" - ] - }, - "clean": { - "inputs": [ - "{workspaceRoot}/storybook-static" - ] - } - }, - "implicitDependencies": [ - "@spectrum-css/*", - "!@spectrum-css/generator" - ], - "includedScripts": [ - "clean", - "test", - "test:scope", - "storybook", - "build" - ] } } diff --git a/.storybook/project.json b/.storybook/project.json new file mode 100644 index 00000000000..1c46a77138f --- /dev/null +++ b/.storybook/project.json @@ -0,0 +1,104 @@ +{ + "name": "storybook", + "namedInputs": { + "tools": [ + "{projectRoot}/assets", + "{projectRoot}/decorators", + "{projectRoot}/*.{js,html}" + ] + }, + "implicitDependencies": [ + "@spectrum-css/*", + "!@spectrum-css/generator", + "!@spectrum-css/bundle-builder", + "!@spectrum-css/component-builder", + "!@spectrum-css/component-builder-simple" + ], + "targets": { + "clean": { + "cache": true, + "inputs": [ + "{projectRoot}/storybook-static", + { "externalDependencies": ["rimraf"] } + ], + "executor": "nx:run-commands", + "options": { + "commands": [ + "rimraf {projectRoot}/storybook-static", + "test -d {projectRoot}/storybook-static && echo \"Error: storybook-static directory could not be removed\" && exit 1 || exit 0" + ], + "parallel": false + } + }, + "build": { + "cache": true, + "dependsOn": ["^build"], + "inputs": [ + "{projectRoot}/assets", + "{projectRoot}/decorators", + "{projectRoot}/*.js", + "{projectRoot}/*.html", + "{workspaceRoot}/components/*/dist", + { "externalDependencies": ["storybook"] } + ], + "outputs": ["{projectRoot}/storybook-static"], + "executor": "nx:run-commands", + "options": { + "cwd": "{projectRoot}", + "commands": [ + "storybook build --config-dir . --output-dir ./storybook-static" + ] + }, + "configurations": { + "ci": { + "cache": false, + "commands": ["storybook build --config-dir ."] + } + } + }, + "start": { + "cache": true, + "dependsOn": ["^build"], + "inputs": [ + "{projectRoot}/assets", + "{projectRoot}/decorators", + "{projectRoot}/*.js", + "{projectRoot}/*.html", + "{workspaceRoot}/components/*/dist", + { "externalDependencies": ["storybook"] }, + { "env": "WATCH_MODE" } + ], + "executor": "nx:run-commands", + "options": { + "cwd": "{projectRoot}", + "commands": ["WATCH_MODE=true storybook dev --config-dir ."] + } + }, + "test": { + "cache": true, + "inputs": [ + "{projectRoot}/assets", + "{projectRoot}/decorators", + "{projectRoot}/*.js", + "{projectRoot}/*.html", + "{workspaceRoot}/components/*/dist", + { "externalDependencies": ["chromatic", "storybook"] }, + { "env": "CHROMATIC_PROJECT_TOKEN" } + ], + "executor": "nx:run-commands", + "options": { + "cwd": "{projectRoot}", + "commands": [ + "chromatic --only-changed --build-script-name build --junit-report" + ] + }, + "configurations": { + "scope": { + "commands": [ + "chromatic --build-script-name build --junit-report --only-story-names" + ] + } + } + } + } +} diff --git a/components/accordion/package.json b/components/accordion/package.json index 3f73f3accf9..661d11ce125 100644 --- a/components/accordion/package.json +++ b/components/accordion/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/icon": ">=4", diff --git a/components/actionbar/package.json b/components/actionbar/package.json index bf69736bd9a..ec3661df505 100644 --- a/components/actionbar/package.json +++ b/components/actionbar/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/actionbutton": ">=5", diff --git a/components/actionbutton/package.json b/components/actionbutton/package.json index a4d581648e6..c8b0df8eb38 100644 --- a/components/actionbutton/package.json +++ b/components/actionbutton/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/icon": ">=4", diff --git a/components/actiongroup/package.json b/components/actiongroup/package.json index d8fadc89223..0532ed87ab5 100644 --- a/components/actiongroup/package.json +++ b/components/actiongroup/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/actionbutton": ">=5", diff --git a/components/actionmenu/package.json b/components/actionmenu/package.json index afe3c3156f1..7fa85476b29 100644 --- a/components/actionmenu/package.json +++ b/components/actionmenu/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/actionbutton": ">=5", diff --git a/components/alertbanner/package.json b/components/alertbanner/package.json index d458530c1e2..f177fda4b89 100644 --- a/components/alertbanner/package.json +++ b/components/alertbanner/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/closebutton": ">=3", diff --git a/components/alertdialog/package.json b/components/alertdialog/package.json index a8b3aec5c2e..7a378c930ff 100644 --- a/components/alertdialog/package.json +++ b/components/alertdialog/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/button": ">=11", diff --git a/components/asset/package.json b/components/asset/package.json index 31cb7a6d8be..2aeaa8c50b0 100644 --- a/components/asset/package.json +++ b/components/asset/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/vars": ">=9" diff --git a/components/assetcard/package.json b/components/assetcard/package.json index b184e61be5f..22a10d315eb 100644 --- a/components/assetcard/package.json +++ b/components/assetcard/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/checkbox": ">=7", diff --git a/components/assetlist/package.json b/components/assetlist/package.json index 6ad183da910..57526d4f724 100644 --- a/components/assetlist/package.json +++ b/components/assetlist/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/checkbox": ">=7.0.0", diff --git a/components/avatar/package.json b/components/avatar/package.json index e391d5f73d2..c1f9448066a 100644 --- a/components/avatar/package.json +++ b/components/avatar/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/tokens": ">=13" diff --git a/components/badge/package.json b/components/badge/package.json index 2a2decd6b53..17e80ceac01 100644 --- a/components/badge/package.json +++ b/components/badge/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/tokens": ">=13" diff --git a/components/breadcrumb/package.json b/components/breadcrumb/package.json index e0538b8084d..b1127530bd3 100644 --- a/components/breadcrumb/package.json +++ b/components/breadcrumb/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/actionbutton": ">=5", diff --git a/components/button/package.json b/components/button/package.json index c4af253dd1a..beff8edd888 100644 --- a/components/button/package.json +++ b/components/button/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/tokens": ">=13" diff --git a/components/buttongroup/package.json b/components/buttongroup/package.json index 63291c9c208..e69161185ef 100644 --- a/components/buttongroup/package.json +++ b/components/buttongroup/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/button": ">=10", diff --git a/components/calendar/package.json b/components/calendar/package.json index 2c8f48f570c..b49dc5e084b 100644 --- a/components/calendar/package.json +++ b/components/calendar/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/actionbutton": ">=5", diff --git a/components/card/package.json b/components/card/package.json index debee7daf2c..39bda2673a8 100644 --- a/components/card/package.json +++ b/components/card/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/actionbutton": ">=5", diff --git a/components/checkbox/package.json b/components/checkbox/package.json index 7ec8cd9b44f..f3f4d75a84b 100644 --- a/components/checkbox/package.json +++ b/components/checkbox/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/icon": ">=4", diff --git a/components/clearbutton/package.json b/components/clearbutton/package.json index ea285da62c8..aa70d482c56 100644 --- a/components/clearbutton/package.json +++ b/components/clearbutton/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/tokens": ">=13" diff --git a/components/closebutton/package.json b/components/closebutton/package.json index 3eba923aa65..7b6ce9b4d1e 100644 --- a/components/closebutton/package.json +++ b/components/closebutton/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/tokens": ">=13" diff --git a/components/coachindicator/package.json b/components/coachindicator/package.json index 6fb197a2026..f0254cfc212 100644 --- a/components/coachindicator/package.json +++ b/components/coachindicator/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/tokens": ">=13" diff --git a/components/coachmark/package.json b/components/coachmark/package.json index edd69f8d297..688056f46e9 100644 --- a/components/coachmark/package.json +++ b/components/coachmark/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/actionbutton": ">=5", diff --git a/components/colorarea/package.json b/components/colorarea/package.json index 1f8cb510b9b..e09ebc5a167 100644 --- a/components/colorarea/package.json +++ b/components/colorarea/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/colorhandle": ">=5", diff --git a/components/colorhandle/package.json b/components/colorhandle/package.json index 8ba5576ac8a..90625808f44 100644 --- a/components/colorhandle/package.json +++ b/components/colorhandle/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/colorloupe": ">=3", diff --git a/components/colorloupe/package.json b/components/colorloupe/package.json index 19232fef704..510d4f50e49 100644 --- a/components/colorloupe/package.json +++ b/components/colorloupe/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/tokens": ">=13" diff --git a/components/colorslider/package.json b/components/colorslider/package.json index ab9816d8f2f..7bbac2424de 100644 --- a/components/colorslider/package.json +++ b/components/colorslider/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/colorhandle": ">=6.1.0", diff --git a/components/colorwheel/package.json b/components/colorwheel/package.json index 0ec87a98a57..0f1a97493c6 100644 --- a/components/colorwheel/package.json +++ b/components/colorwheel/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/colorhandle": ">=5", diff --git a/components/combobox/package.json b/components/combobox/package.json index 41193addb19..2178cbf712c 100644 --- a/components/combobox/package.json +++ b/components/combobox/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/pickerbutton": ">=4", diff --git a/components/commons/package.json b/components/commons/package.json index 9f28226e4cc..5e37d905f22 100644 --- a/components/commons/package.json +++ b/components/commons/package.json @@ -14,9 +14,6 @@ "url": "https://github.com/adobe/spectrum-css/issues" }, "main": "dist/index-vars.css", - "scripts": { - "build": "echo 'No build required'" - }, "publishConfig": { "access": "public" } diff --git a/components/contextualhelp/package.json b/components/contextualhelp/package.json index 195c82b1f1d..01111189cfe 100644 --- a/components/contextualhelp/package.json +++ b/components/contextualhelp/package.json @@ -17,8 +17,7 @@ "main": "dist/index-vars.css", "scripts": { "build": "gulp", - "test": "echo \"Error: no test specified\" && exit 1", - "watch": "gulp watch" + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/actionbutton": ">=5", diff --git a/components/cyclebutton/package.json b/components/cyclebutton/package.json index 496553a4728..80e825421f1 100644 --- a/components/cyclebutton/package.json +++ b/components/cyclebutton/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/actionbutton": ">=5", diff --git a/components/datepicker/package.json b/components/datepicker/package.json index 5234f9ba82d..0b70950829f 100644 --- a/components/datepicker/package.json +++ b/components/datepicker/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/pickerbutton": ">=3", diff --git a/components/dial/package.json b/components/dial/package.json index 83a848bfa92..f49a1d91fe1 100644 --- a/components/dial/package.json +++ b/components/dial/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/icon": ">=4", diff --git a/components/dialog/package.json b/components/dialog/package.json index 976ea08cbf6..ced0858e4eb 100644 --- a/components/dialog/package.json +++ b/components/dialog/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/button": ">=11", diff --git a/components/divider/package.json b/components/divider/package.json index 063e61f1f6b..c5d53420d0f 100644 --- a/components/divider/package.json +++ b/components/divider/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/tokens": ">=13" diff --git a/components/dropindicator/package.json b/components/dropindicator/package.json index 3e848b0fa2c..5da8cf10f27 100644 --- a/components/dropindicator/package.json +++ b/components/dropindicator/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/icon": ">=4", diff --git a/components/dropzone/package.json b/components/dropzone/package.json index af85416db23..21ccc7512f6 100644 --- a/components/dropzone/package.json +++ b/components/dropzone/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/illustratedmessage": ">=6", diff --git a/components/fieldgroup/package.json b/components/fieldgroup/package.json index 3f8cf8c85e7..f80e2dbd596 100644 --- a/components/fieldgroup/package.json +++ b/components/fieldgroup/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/checkbox": ">=7", diff --git a/components/fieldlabel/package.json b/components/fieldlabel/package.json index 1d7a385b607..3ec1e653ce6 100644 --- a/components/fieldlabel/package.json +++ b/components/fieldlabel/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/icon": ">=4", diff --git a/components/floatingactionbutton/package.json b/components/floatingactionbutton/package.json index d16452419bb..8aad88620a6 100644 --- a/components/floatingactionbutton/package.json +++ b/components/floatingactionbutton/package.json @@ -17,8 +17,7 @@ "main": "dist/index-vars.css", "scripts": { "build": "gulp", - "test": "echo \"Error: no test specified\" && exit 1", - "watch": "gulp watch" + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/tokens": ">=13" diff --git a/components/helptext/package.json b/components/helptext/package.json index 323292d7ca2..f6f50ba9415 100644 --- a/components/helptext/package.json +++ b/components/helptext/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/icon": ">=4", diff --git a/components/icon/package.json b/components/icon/package.json index 72f53fafcd5..819b5f9f6bc 100644 --- a/components/icon/package.json +++ b/components/icon/package.json @@ -16,6 +16,7 @@ "main": "dist/index-vars.css", "scripts": { "build": "gulp", + "clean": "rimraf dist", "update": "gulp updateIcons" }, "peerDependencies": { diff --git a/components/illustratedmessage/package.json b/components/illustratedmessage/package.json index a484a394d60..45c41c439bc 100644 --- a/components/illustratedmessage/package.json +++ b/components/illustratedmessage/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/tokens": ">=13", diff --git a/components/infieldbutton/package.json b/components/infieldbutton/package.json index 3ac5b8bfa0f..770a637a431 100644 --- a/components/infieldbutton/package.json +++ b/components/infieldbutton/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/tokens": ">=13" diff --git a/components/inlinealert/package.json b/components/inlinealert/package.json index 1cf0cec3969..697897b4295 100644 --- a/components/inlinealert/package.json +++ b/components/inlinealert/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/icon": ">=4", diff --git a/components/link/package.json b/components/link/package.json index 27203300817..a175deb9c03 100644 --- a/components/link/package.json +++ b/components/link/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/tokens": ">=13" diff --git a/components/logicbutton/package.json b/components/logicbutton/package.json index f287321e81b..c33e08f68b1 100644 --- a/components/logicbutton/package.json +++ b/components/logicbutton/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/tokens": ">=13" diff --git a/components/menu/package.json b/components/menu/package.json index 6bbaa5fffdb..9c8c050623b 100644 --- a/components/menu/package.json +++ b/components/menu/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/checkbox": ">=7", diff --git a/components/miller/package.json b/components/miller/package.json index a06cf03b89a..6661630edf0 100644 --- a/components/miller/package.json +++ b/components/miller/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/assetlist": ">=3", diff --git a/components/modal/package.json b/components/modal/package.json index ad6476b2bc5..1109668dcf5 100644 --- a/components/modal/package.json +++ b/components/modal/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/tokens": ">=13" diff --git a/components/overlay/package.json b/components/overlay/package.json index c08f088fb45..caa73b6cd03 100644 --- a/components/overlay/package.json +++ b/components/overlay/package.json @@ -14,9 +14,6 @@ "url": "https://github.com/adobe/spectrum-css/issues" }, "main": "index.css", - "scripts": { - "build": "echo 'No build required'" - }, "publishConfig": { "access": "public" } diff --git a/components/page/package.json b/components/page/package.json index 6f0a05539e1..cc86fda3142 100644 --- a/components/page/package.json +++ b/components/page/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "dependencies": { "@spectrum-css/tokens": "^13.0.5" diff --git a/components/pagination/package.json b/components/pagination/package.json index 12946e882c7..b90e1c81121 100644 --- a/components/pagination/package.json +++ b/components/pagination/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/actionbutton": ">=5", diff --git a/components/picker/package.json b/components/picker/package.json index 6b5cdd50089..246258c9722 100644 --- a/components/picker/package.json +++ b/components/picker/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/icon": ">=4", diff --git a/components/pickerbutton/package.json b/components/pickerbutton/package.json index b0925b7d846..1785e7d0084 100644 --- a/components/pickerbutton/package.json +++ b/components/pickerbutton/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/icon": ">=4", diff --git a/components/popover/package.json b/components/popover/package.json index 8262feab841..3a40f132c4d 100644 --- a/components/popover/package.json +++ b/components/popover/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/alertdialog": ">=1", diff --git a/components/progressbar/package.json b/components/progressbar/package.json index 45da1f0a492..8e339837c01 100644 --- a/components/progressbar/package.json +++ b/components/progressbar/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/fieldlabel": ">=6", diff --git a/components/progresscircle/package.json b/components/progresscircle/package.json index 8d1a09797c7..4e5bc13d95a 100644 --- a/components/progresscircle/package.json +++ b/components/progresscircle/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/tokens": ">=13" diff --git a/components/quickaction/package.json b/components/quickaction/package.json index a3dde483c43..f02c6cbf2f7 100644 --- a/components/quickaction/package.json +++ b/components/quickaction/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/actionbutton": ">=5", diff --git a/components/radio/package.json b/components/radio/package.json index a9666c22fb0..3a01e724a04 100644 --- a/components/radio/package.json +++ b/components/radio/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/icon": ">=4", diff --git a/components/rating/package.json b/components/rating/package.json index 0592ab359a6..ff268530fe8 100644 --- a/components/rating/package.json +++ b/components/rating/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/icon": ">=4", diff --git a/components/search/package.json b/components/search/package.json index 0daeaf113c3..99dc0ec5341 100644 --- a/components/search/package.json +++ b/components/search/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/clearbutton": ">=5", diff --git a/components/searchwithin/package.json b/components/searchwithin/package.json index 28b2c8d62bb..8d0bc251994 100644 --- a/components/searchwithin/package.json +++ b/components/searchwithin/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/clearbutton": ">=5", diff --git a/components/sidenav/package.json b/components/sidenav/package.json index 92720354ddf..8cd5420daa5 100644 --- a/components/sidenav/package.json +++ b/components/sidenav/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/tokens": ">=13" diff --git a/components/site/package.json b/components/site/package.json index 8df887dbd27..bd3e0a41314 100644 --- a/components/site/package.json +++ b/components/site/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/vars": ">=9" diff --git a/components/slider/package.json b/components/slider/package.json index 7f2e5b62c74..4b6d7431e20 100644 --- a/components/slider/package.json +++ b/components/slider/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/stepper": ">=5", diff --git a/components/splitbutton/package.json b/components/splitbutton/package.json index c3862be2dd2..c29644d51ec 100644 --- a/components/splitbutton/package.json +++ b/components/splitbutton/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/button": ">=10", diff --git a/components/splitview/package.json b/components/splitview/package.json index a93c6f18354..b8310bb4ee6 100644 --- a/components/splitview/package.json +++ b/components/splitview/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/tokens": ">=13" diff --git a/components/statuslight/package.json b/components/statuslight/package.json index a88c1e8a0b9..7eb1a8f0eb6 100644 --- a/components/statuslight/package.json +++ b/components/statuslight/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/tokens": ">=13" diff --git a/components/steplist/package.json b/components/steplist/package.json index b342d3b04ef..56e6b086e7d 100644 --- a/components/steplist/package.json +++ b/components/steplist/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/icon": ">=4", diff --git a/components/stepper/package.json b/components/stepper/package.json index b5396f73a1a..56b4a050dfb 100644 --- a/components/stepper/package.json +++ b/components/stepper/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/actionbutton": ">=5", diff --git a/components/swatch/package.json b/components/swatch/package.json index 80cbdfba9d2..80bd2b8e511 100644 --- a/components/swatch/package.json +++ b/components/swatch/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/opacitycheckerboard": ">=1.0.0-alpha.0", diff --git a/components/swatchgroup/package.json b/components/swatchgroup/package.json index deed685189c..5897ca70420 100644 --- a/components/swatchgroup/package.json +++ b/components/swatchgroup/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/swatch": ">=4", diff --git a/components/switch/package.json b/components/switch/package.json index 781e537cd65..8a432e25a00 100644 --- a/components/switch/package.json +++ b/components/switch/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/tokens": ">=13" diff --git a/components/table/package.json b/components/table/package.json index 61cf0e3dc08..02647242fe5 100644 --- a/components/table/package.json +++ b/components/table/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/icon": ">=4", diff --git a/components/tabs/package.json b/components/tabs/package.json index 1f7be5d6978..c3a9a2d976d 100644 --- a/components/tabs/package.json +++ b/components/tabs/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/menu": ">=5", diff --git a/components/tag/package.json b/components/tag/package.json index 39663cc76e1..9fb2a7d894d 100644 --- a/components/tag/package.json +++ b/components/tag/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/clearbutton": ">=5", diff --git a/components/taggroup/package.json b/components/taggroup/package.json index bb9607708ec..41e4ca5ad81 100644 --- a/components/taggroup/package.json +++ b/components/taggroup/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/clearbutton": ">=5", diff --git a/components/textfield/package.json b/components/textfield/package.json index 2d897255628..f06da135b45 100644 --- a/components/textfield/package.json +++ b/components/textfield/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/tokens": ">=13" diff --git a/components/thumbnail/package.json b/components/thumbnail/package.json index c48d3de90ed..a88a429c8b0 100644 --- a/components/thumbnail/package.json +++ b/components/thumbnail/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/opacitycheckerboard": ">=1.0.0-alpha.0", diff --git a/components/toast/package.json b/components/toast/package.json index 2539d2f0624..800022cab91 100644 --- a/components/toast/package.json +++ b/components/toast/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/button": ">=10", diff --git a/components/tooltip/package.json b/components/tooltip/package.json index a83cbba25ca..af526c1583e 100644 --- a/components/tooltip/package.json +++ b/components/tooltip/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/icon": ">=4", diff --git a/components/tray/package.json b/components/tray/package.json index 3916f165c0b..ddee9f854a6 100644 --- a/components/tray/package.json +++ b/components/tray/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/button": ">=10", diff --git a/components/treeview/package.json b/components/treeview/package.json index 70ced45fa72..fdf78d4bf41 100644 --- a/components/treeview/package.json +++ b/components/treeview/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/icon": ">=4", diff --git a/components/typography/package.json b/components/typography/package.json index 899d8b756da..90a14f11b99 100644 --- a/components/typography/package.json +++ b/components/typography/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/tokens": ">=13" diff --git a/components/underlay/package.json b/components/underlay/package.json index 34ab10dd7a2..3b6d1aa712a 100644 --- a/components/underlay/package.json +++ b/components/underlay/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/tokens": ">=13" diff --git a/components/well/package.json b/components/well/package.json index 6706c9a35ad..06654b32f32 100644 --- a/components/well/package.json +++ b/components/well/package.json @@ -15,7 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "build": "gulp" + "build": "gulp", + "clean": "rimraf dist" }, "peerDependencies": { "@spectrum-css/tokens": ">=13" diff --git a/generator/templates/package.json.hbs b/generator/templates/package.json.hbs index b6c30fc1a19..22936b09491 100644 --- a/generator/templates/package.json.hbs +++ b/generator/templates/package.json.hbs @@ -15,9 +15,8 @@ }, "main": "dist/index-vars.css", "scripts": { - "clean": "rimraf dist", "build": "gulp", - "test": "nx test:scope @spectrum-css/preview {{ folderName }}" + "clean": "rimraf dist" }, "peerDependencies": { "{{ tokens.name }}": ">={{ parse tokens.version '.' 0 1 }}" diff --git a/nx.json b/nx.json index 3c50661b1fa..f58b363ee95 100644 --- a/nx.json +++ b/nx.json @@ -2,16 +2,19 @@ "npmScope": "@spectrum-css", "tasksRunnerOptions": { "default": { - "runner": "nx/tasks-runners/default", - "options": { - "cacheableOperations": ["build"] - } + "runner": "nx/tasks-runners/default" } }, "targetDefaults": { + "clean": { + "cache": true, + "inputs": ["{projectRoot}/dist", { "externalDependencies": ["rimraf"] }] + }, "build": { + "cache": true, "dependsOn": ["clean", "^build"], - "inputs": ["{workspaceRoot}/*.css"] + "inputs": ["{projectRoot}/*.css", { "externalDependencies": ["gulp"] }], + "outputs": ["{projectRoot}/dist"] } }, "includedScripts": ["build"] diff --git a/package.json b/package.json index 1446597fe3c..6de6b10aa0f 100644 --- a/package.json +++ b/package.json @@ -24,44 +24,39 @@ "build:all": "run-s build:preview build:site", "postbuild:all": "yarn mv:preview", "build:clean": "run-s clean build", - "build:components": "lerna run --scope \"${SCOPE:-@spectrum-css/*}\" --ignore \"@spectrum-css/{*-builder*,preview,generator}\" build", + "build:components": "nx run-many --target build --projects \"@spectrum-css/*\" --exclude \"@spectrum-css/generator @spectrum-css/preview @spectrum-css/bundle-builder @spectrum-css/component-builder @spectrum-css/component-builder-simple\"", "postbuild:components": "yarn docs:mod", - "build:preview": "nx build @spectrum-css/preview", + "build:preview": "nx build storybook", + "prebuild:site": "yarn build:components", "build:site": "gulp buildDocs -LLL", "cache:clean": "nx reset", "ci": "yarn build:all", - "ci:storybook": "nx run-many --projects @spectrum-css/preview --target build", + "ci:storybook": "nx run storybook:build:ci", "clean": "yarn cache:clean && run-p clean:*", - "clean:components": "lerna exec --scope \"${SCOPE:-@spectrum-css/*}\" --ignore \"@spectrum-css/{*-builder*,preview,generator}\" -- rimraf dist", + "clean:components": "nx run-many --target clean --projects \"@spectrum-css/*\" --exclude \"@spectrum-css/generator @spectrum-css/preview @spectrum-css/bundle-builder @spectrum-css/component-builder @spectrum-css/component-builder-simple\"", "clean:docs": "rimraf dist", - "clean:preview": "nx clean @spectrum-css/preview", - "precompare": "yarn build:components", + "clean:preview": "nx clean storybook", + "precompare": "yarn build", "compare": "node ./tasks/compare-compiled-output.js", "predev": "yarn build:components", "dev": "NODE_ENV=development BROWSERSYNC_OPEN=true gulp dev", "docs:mod": "node tasks/mod-extractor.js", "postdocs:mod": "prettier --cache --write components/*/metadata/*.md > /dev/null", "preinstall": "command -v nvm >/dev/null 2>&1 && nvm use || exit 0", - "lint:components": "node ./tasks/packageLint.js", - "lint:styles": "stylelint", - "mv:preview": "rimraf dist/preview && mv .storybook/storybook-static dist/preview", + "mv:preview": "test -d .storybook/storybook-static && rimraf dist/preview && mv .storybook/storybook-static dist/preview || exit 0", "new": "nx run @spectrum-css/generator:new", "precommit": "lint-staged", "prepare": "husky install && run-p refresh:*", - "prepare:site": "run-s clean:docs build:all", "refresh:directory": "test -n $BASH_VERSION && bash ./tasks/clean-up-after-migration.sh || exit 0", "refresh:env": "test -n $BASH_VERSION && bash ./tasks/copy-env-from-root.sh || exit 0", - "prerelease": "yarn version:build", + "prerelease": "nx affected --target build", "release": "lerna publish", "release:beta-from-package": "yarn release from-package --conventional-prerelease --preid beta --pre-dist-tag beta --no-private", - "prerelease:site": "yarn prepare:site", + "prerelease:site": "yarn build:site", "release:site": "gh-pages -d dist/ -f -e .", - "prestart": "yarn build:components", - "start": "NODE_ENV=development yarn workspace @spectrum-css/preview start", - "test": "nx test @spectrum-css/preview", - "test:scope": "nx test:scope @spectrum-css/preview", - "version:build": "lerna run --since origin/main build", - "watch": "gulp watch" + "start": "nx start storybook", + "test": "nx test storybook", + "test:scope": "nx run storybook:test:scope" }, "workspaces": [ "components/*", @@ -122,9 +117,8 @@ "last 2 iOS versions" ], "lint-staged": { - "components/*/package.json": [ - "yarn lint:components", - "prettier-package-json --write" + "*.css": [ + "stylelint --fix --quiet" ], "package.json": [ "prettier-package-json --write" diff --git a/plugins/stylelint-no-missing-parenthesis/package.json b/plugins/stylelint-no-missing-parenthesis/package.json index a88249a7ea4..0a6f2e14999 100644 --- a/plugins/stylelint-no-missing-parenthesis/package.json +++ b/plugins/stylelint-no-missing-parenthesis/package.json @@ -2,11 +2,10 @@ "private": true, "name": "stylelint-no-missing-parenthesis", "version": "1.1.0", - "license": "MIT", - "author": "Rajdeep Chandra", + "license": "Apache-2.0", + "author": "Adobe", "main": "index.js", "scripts": { - "lint": "stylelint index.js", "prepublishOnly": "yarn test", "test": "ava" }, diff --git a/plugins/stylelint-no-missing-var/package.json b/plugins/stylelint-no-missing-var/package.json index 66aa8eff24a..8c5b3c964cf 100644 --- a/plugins/stylelint-no-missing-var/package.json +++ b/plugins/stylelint-no-missing-var/package.json @@ -2,11 +2,10 @@ "private": true, "name": "stylelint-no-missing-var", "version": "1.1.0", - "license": "MIT", - "author": "Rajdeep Chandra", + "license": "Apache-2.0", + "author": "Adobe", "main": "index.js", "scripts": { - "lint": "stylelint index.js", "prepublishOnly": "yarn test", "test": "ava" }, diff --git a/plugins/stylelint-suit-naming-pattern/package.json b/plugins/stylelint-suit-naming-pattern/package.json index 6fea03a8c06..ed79ae7b3d2 100644 --- a/plugins/stylelint-suit-naming-pattern/package.json +++ b/plugins/stylelint-suit-naming-pattern/package.json @@ -2,7 +2,7 @@ "private": true, "name": "stylelint-suit-naming-pattern", "version": "1.1.0", - "license": "MIT", + "license": "Apache-2.0", "main": "index.js", "scripts": { "prepublishOnly": "yarn test", diff --git a/site/includes/nav.pug b/site/includes/nav.pug index e40da4be242..c842bdff2cd 100644 --- a/site/includes/nav.pug +++ b/site/includes/nav.pug @@ -26,5 +26,5 @@ span.spectrum-SideNav-link-text Spectrum unless process.env.NODE_ENV === 'development' li.spectrum-SideNav-item - a.spectrum-SideNav-itemLink(href='preview/', rel='noopener') + a.spectrum-SideNav-itemLink(href=process.env.CHROMATIC_URL ? process.env.CHROMATIC_URL : 'preview/', rel='noopener') span.spectrum-SideNav-link-text Component preview diff --git a/tasks/compare-compiled-output.js b/tasks/compare-compiled-output.js index b281af95ce8..c56f6ea6e32 100644 --- a/tasks/compare-compiled-output.js +++ b/tasks/compare-compiled-output.js @@ -20,349 +20,463 @@ const Diff2Html = require("diff2html"); require("colors"); +const util = require("util"); +const exec = util.promisify(require("child_process").exec); + const pathing = { - root: join(__dirname, "../"), - components: join(__dirname, "../components"), + root: join(__dirname, "../"), + components: join(__dirname, "../components"), }; const bytesToSize = function (bytes) { - if (bytes === 0) return "0"; + if (bytes === 0) return "0"; - const sizes = ["bytes", "KB", "MB", "GB", "TB"]; - // Determine the size identifier to use (KB, MB, etc) - const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024))); - if (i === 0) return "< 1KB"; - return (bytes / Math.pow(1024, i)).toFixed(2) + " " + sizes[i]; + const sizes = ["bytes", "KB", "MB", "GB", "TB"]; + // Determine the size identifier to use (KB, MB, etc) + const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024))); + if (i === 0) return (bytes / 1000).toFixed(2) + " " + sizes[1]; + return (bytes / Math.pow(1024, i)).toFixed(2) + " " + sizes[i]; }; env.addFilter("bytesToSize", bytesToSize); env.addFilter("print", (data) => JSON.stringify(data, null, 2)); const log = { - error: (err) => process.stderr.write(`${err}\n\n`), - write: (msg) => process.stdout.write(`${msg}\n`), - writeTable: (data, padding = 30) => { - // This utility function is used to print a table of data to the console - const table = (data = [], size = padding) => data.map((row) => `${row ?? " "}`.padEnd(size)).join(""); - process.stdout.write(`${table(data)}\n`); - }, + error: (err) => process.stderr.write(`${err}\n\n`), + write: (msg) => process.stdout.write(msg), + writeTable: (data, padding = 30) => { + // This utility function is used to print a table of data to the console + const table = (data = [], size = padding) => + data.map((row) => `${row ?? " "}`.padEnd(size)).join(""); + process.stdout.write(`${table(data)}\n`); + }, }; const cleanAndMkdir = (path, clean = true) => { - if (!path) return; + if (!path) return; - let isFile = false; + let isFile = false; - // If the output directory exists, delete it but don't throw an error if it doesn't - if (clean && existsSync(path)) { - isFile = statSync(path).isFile(); - rimrafSync(path, { preserveRoot: true }); - } + // If the output directory exists, delete it but don't throw an error if it doesn't + if (clean && existsSync(path)) { + isFile = statSync(path).isFile(); + rimrafSync(path, { preserveRoot: true }); + } - // Create the output directory fresh - mkdirSync(isFile ? dirname(path) : path, { recursive: true }); + // Create the output directory fresh + mkdirSync(isFile ? dirname(path) : path, { recursive: true }); }; const allComponents = - readdirSync(pathing.components, { withFileTypes: true }) - ?.filter((file) => file.isDirectory()) - .map((file) => file.name) ?? []; - -async function renderTemplate(templateFile, templateVariables = {}, outputPath = undefined) { - templateFile = join(__dirname, "templates", `${templateFile}.njk`); - - if (typeof templateFile === "undefined" || !existsSync(templateFile)) { - Promise.reject(`Template file ${templateFile} not found. Could not render output.`); - return; - } - - const content = await readFile(templateFile, { encoding: "utf-8" }); - - // Generate an HTML summary of the component's compiled assets with links to the HTML diffs of each file - const html = env.renderString(content, { - allComponents, - ...templateVariables, - }); - - if (typeof outputPath === "undefined") return html; - - return writeFile(outputPath, html, { encoding: "utf-8" }); + readdirSync(pathing.components, { withFileTypes: true }) + ?.filter((file) => file.isDirectory()) + .map((file) => file.name) ?? []; + +async function renderTemplate( + templateFile, + templateVariables = {}, + outputPath = undefined +) { + templateFile = join(__dirname, "templates", `${templateFile}.njk`); + + if (typeof templateFile === "undefined" || !existsSync(templateFile)) { + Promise.reject( + `Template file ${templateFile} not found. Could not render output.` + ); + return; + } + + const content = await readFile(templateFile, { encoding: "utf-8" }); + + // Generate an HTML summary of the component's compiled assets with links to the HTML diffs of each file + const html = env.renderString(content, { + allComponents, + ...templateVariables, + }); + + if (typeof outputPath === "undefined") return html; + + return writeFile(outputPath, html, { encoding: "utf-8" }); } -async function generateDiff(filepath, outputPath, localContent, remoteContent, renderData) { - // @todo, this data seems more useful than the html output but we can't render it visually 🤔 - // const diff = Diff.diffCss(localContent, remoteContent); - const patch = Diff.createPatch(filepath, localContent, remoteContent); - const html = Diff2Html.html(Diff2Html.parse(patch), { - drawFileList: true, - matching: "lines", - outputFormat: "side-by-side", - }); - - return renderTemplate( - "diff-preview", - { - ...renderData, - file: filepath, - html, - }, - join(outputPath, `${basename(filepath, ".css")}.html`), - ); +async function generateDiff( + filepath, + outputPath, + localContent, + remoteContent, + renderData +) { + // @todo, this data seems more useful than the html output but we can't render it visually 🤔 + // const diff = Diff.diffCss(localContent, remoteContent); + const patch = Diff.createPatch(filepath, localContent, remoteContent); + const html = Diff2Html.html(Diff2Html.parse(patch), { + drawFileList: true, + matching: "lines", + outputFormat: "side-by-side", + }); + + return renderTemplate( + "diff-preview", + { + ...renderData, + file: filepath, + html, + }, + join(outputPath, `${basename(filepath, ".css")}.html`) + ); } -async function processComponent(component, { - cwd = process.cwd(), - output = pathing.output, - cacheLocation = pathing.cache, -}) { - if (!component) return Promise.reject("No component specified."); - - cleanAndMkdir(join(output, "diffs", component)); - cleanAndMkdir(join(output, "latest")); - - const pkgPath = join(cwd, component, "package.json"); - const pkg = existsSync(pkgPath) ? require(pkgPath) : { name: `@spectrum-css/${component}` }; - - let tag; - let found = 0; - - // Using a set, we can remove duplicates from the list of compiled assets - const filelist = new Set(); - const warnings = []; - - // Check if the component exists locally and has compiled output - if (existsSync(join(cwd, component))) { - found++; - - // Note: component might exist locally but might not contain any compiled output - const files = (await fg("**/*.css", { cwd: join(cwd, component, "dist") })) ?? []; - files.forEach((file) => filelist.add(file)); - } else { - warnings.push(`${`${relative(pathing.root, join(cwd, component))}`.brightYellow} not found locally.\n`); - } - - if (pkg && pkg.name) { - const printPkgName = pkg.name.brightYellow; - - // Check if the component exists on npm; do not fail if it isn't found - - // report it and output only the sizes of the local compiled assets - const npmData = - (await npmFetch.json(pkg.name).catch((err) => { - // @todo: do we need to report on the error messages returned? - warnings.push(err ?? `Failed to fetch ${printPkgName} from npm.\n`); - })) ?? {}; - - // If the component exists on npm, fetch the latest release data - // @todo what is the fallback if there isn't a latest tag? - if (npmData["dist-tags"]?.latest) { - tag = npmData["dist-tags"]?.latest; - } - - if (tag) { - // Check locally to see if we have already fetched the tarball - // for this tag; if not, fetch it and extract it - const tarballPath = join(cacheLocation, `${component}-${tag}.tgz`); - const tarballUrl = npmData.versions?.[tag]?.dist?.tarball; - if (!existsSync(tarballPath) && tarballUrl) { - // Here is where we check the cached packages folder for the tarball - // so we don't have to re-fetch it every time - const tarballFile = await npmFetch(tarballUrl).catch(() => {}); - if (!tarballFile || (tarballFile.status && tarballFile.status !== 200)) { - log.error(`Failed to fetch release content for ${pkg.name}`); - } else { - await writeFile(tarballPath, await tarballFile.buffer(), { encoding: "utf-8" }); - } - } - - // The tarball path should exist locally now; if not, something went wrong - if (existsSync(tarballPath)) { - await tar - .extract({ - file: tarballPath, - cwd: join(output, "latest"), - // Only unpack the dist folder - filter: (path) => path.startsWith("package/dist"), - strip: 2, - }) - .catch((err) => warnings.push(err)); - } - - if (existsSync(join(output, "latest"))) { - const files = - (await fg("**/*.css", { - cwd: join(output, "latest"), - })) ?? []; - - if (files.length > 0) found++; - files.forEach((file) => filelist.add(file)); - } - } - } - - if (found < 1) { - return Promise.reject(`${component.cyan} does not exist. Try checking the package's name and spelling.`); - } - - if (filelist.size === 0) { - return Promise.reject(`No compiled assets found associated with ${component.cyan}.`); - } - - // For all files found locally & on npm, report back on it's sizes - return Promise.all( - [...filelist].map(async (filename) => - processFile(filename, join(cwd, component, "dist"), join(output, "latest")), - ), - ).then((results) => { - const fileMap = results.reduce((acc, { filename, ...data }) => { - acc.set(filename, data); - return acc; - }, new Map()); - - return { - component, - warnings, - tag, - pkg, - fileMap, - }; - }); +async function processComponent( + component, + { + cwd = process.cwd(), + output = pathing.output, + cacheLocation = pathing.cache, + } +) { + if (!component) return Promise.reject("No component specified."); + + cleanAndMkdir(join(output, "diffs", component)); + cleanAndMkdir(join(output, "latest")); + + const pkgPath = join(cwd, component, "package.json"); + const pkg = existsSync(pkgPath) + ? require(pkgPath) + : { name: `@spectrum-css/${component}` }; + + let tag; + let found = 0; + + // Using a set, we can remove duplicates from the list of compiled assets + const filelist = new Set(); + const warnings = []; + + // Check if the component exists locally and has compiled output + if (existsSync(join(cwd, component))) { + found++; + + // Note: component might exist locally but might not contain any compiled output + const files = + (await fg("**/*.css", { cwd: join(cwd, component, "dist") })) ?? []; + files.forEach((file) => filelist.add(file)); + } else { + warnings.push( + `${ + `${relative(pathing.root, join(cwd, component))}`.brightYellow + } not found locally.\n` + ); + } + + if (pkg && pkg.name) { + const printPkgName = pkg.name.brightYellow; + + // Check if the component exists on npm; do not fail if it isn't found - + // report it and output only the sizes of the local compiled assets + const npmData = + (await npmFetch.json(pkg.name).catch((err) => { + // @todo: do we need to report on the error messages returned? + warnings.push(err ?? `Failed to fetch ${printPkgName} from npm.\n`); + })) ?? {}; + + // If the component exists on npm, fetch the latest release data + // @todo what is the fallback if there isn't a latest tag? + if (npmData["dist-tags"]?.latest) { + tag = npmData["dist-tags"]?.latest; + } + + if (tag) { + // Check locally to see if we have already fetched the tarball + // for this tag; if not, fetch it and extract it + const tarballPath = join(cacheLocation, `${component}-${tag}.tgz`); + const tarballUrl = npmData.versions?.[tag]?.dist?.tarball; + if (!existsSync(tarballPath) && tarballUrl) { + // Here is where we check the cached packages folder for the tarball + // so we don't have to re-fetch it every time + const tarballFile = await npmFetch(tarballUrl).catch(() => {}); + if ( + !tarballFile || + (tarballFile.status && tarballFile.status !== 200) + ) { + log.error(`Failed to fetch release content for ${pkg.name}`); + } else { + await writeFile(tarballPath, await tarballFile.buffer(), { + encoding: "utf-8", + }); + } + } + + // The tarball path should exist locally now; if not, something went wrong + if (existsSync(tarballPath)) { + await tar + .extract({ + file: tarballPath, + cwd: join(output, "latest"), + // Only unpack the dist folder + filter: (path) => path.startsWith("package/dist"), + strip: 2, + }) + .catch((err) => warnings.push(err)); + } + + if (existsSync(join(output, "latest"))) { + const files = + (await fg("**/*.css", { + cwd: join(output, "latest"), + })) ?? []; + + if (files.length > 0) found++; + files.forEach((file) => filelist.add(file)); + } + } + } + + if (found < 1) { + return Promise.reject( + `${component.cyan} does not exist. Try checking the package's name and spelling.` + ); + } + + if (filelist.size === 0) { + return Promise.reject( + `No compiled assets found associated with ${component.cyan}.` + ); + } + + // For all files found locally & on npm, report back on it's sizes + return Promise.all( + [...filelist].map(async (filename) => + processFile( + filename, + join(cwd, component, "dist"), + join(output, "latest") + ) + ) + ).then((results) => { + const fileMap = results.reduce((acc, { filename, ...data }) => { + acc.set(filename, data); + return acc; + }, new Map()); + + return { + component, + warnings, + tag, + pkg, + fileMap, + }; + }); } async function processFile(filename, localPath, comparePath) { - const data = {}; - - // Look for the file locally - if (existsSync(join(localPath, filename))) { - const content = await readFile(join(localPath, filename), { encoding: "utf-8" }); - const stats = statSync(join(localPath, filename)); - data.local = { - path: join(localPath, filename), - content, - size: stats.size, - }; - } - - // Look for the file in the data pulled from NPM - if (existsSync(join(comparePath, filename))) { - const content = await readFile(join(comparePath, filename), { encoding: "utf-8" }); - const stats = statSync(join(comparePath, filename)); - data.npm = { - path: join(comparePath, filename), - content, - size: stats.size, - }; - } - - return { - filename, - ...data, - }; + const componentName = localPath.split("/")[localPath.split("/").length - 2]; + const data = {}; + + // Look for the file locally + if (existsSync(join(localPath, filename))) { + const content = await readFile(join(localPath, filename), { + encoding: "utf-8", + }); + const stats = statSync(join(localPath, filename)); + data.local = { + path: join(localPath, filename), + content, + size: stats.size, + }; + } + + // Look for the file in the data pulled from NPM + if (existsSync(join(comparePath, filename))) { + const content = await readFile(join(comparePath, filename), { + encoding: "utf-8", + }); + const stats = statSync(join(comparePath, filename)); + data.npm = { + path: join(comparePath, filename), + content, + size: stats.size, + }; + + if (stats.size > 0 && data.local && data.local.size > 0) { + data.link = `diffs/${componentName}/${basename(filename, ".css")}.html`; + } + } + + return { + filename, + ...data, + }; } -async function main(components = allComponents, output, { skipCache = false } = {}) { - pathing.output = output; - pathing.cache = join(output, "packages"); - pathing.latest = join(output, "latest"); - - /** Setup the folder structure */ - cleanAndMkdir(pathing.output); - - // This is our cache of fetched tarballs from npm; do not clean this directory - // unless we want to re-fetch the tarballs - cleanAndMkdir(pathing.cache, skipCache); - - cleanAndMkdir(pathing.latest); - - /** - * Each component will report on it's file structure locally when compared - * against it's latest tag on npm; then a console report will be logged and - * a visual diff generated for each file that has changed. - */ - const results = await Promise.all( - components.map((component) => { - return processComponent(component, { - cwd: pathing.components, - output: pathing.output, - cacheLocation: pathing.cache, - }); - }), - ).catch((err) => { - log.error(err); - }); - - if (!results || results.length === 0) return Promise.resolve(); - - const componentData = new Map(); - const promises = []; - - for (const { component, warnings, tag, pkg, fileMap } of results) { - const files = [...fileMap.keys()]; - - if (!files || files.length === 0) { - log.error(`No compiled assets found associated with ${`@spectrum-css/${component}`.brightYellow}.`); - continue; - } - - componentData.set(component, { - pkg, - tag, - files: fileMap, - }); - - // This is our report header to indicate the start of a new component's data - log.writeTable([`\n${_.pad(` ${component} `, 20, "-").cyan}\n`]); - - if (warnings.length > 0) warnings.forEach((warning) => log.write(warning)); - - // Write a table of the file sizes to the console for easy comparison - log.writeTable(["Filename", "Size", "Size (release)"], 20); - - files.forEach(async (file) => { - const { local, npm } = fileMap.get(file); - - log.writeTable([ - `${file}`.green, - local?.size ? `${bytesToSize(local.size)}`.gray : `** removed **`.red, - npm?.size ? `${bytesToSize(npm.size)}`.gray : `** new **`.yellow, - ]); - - if (local && local.content && npm && npm.content) { - promises.push( - generateDiff(file, join(output, "diffs", component), local.content, npm.content, { - component, - tag, - }), - ); - } - }); - } - - await Promise.all(promises).catch((err) => { - log.error(err); - }); - - // This is writing a summary of all the components that were compared - // to make reviewing the diffs easier to navigate - return renderTemplate( - "compare-listing", - { - title: "Compiled asset comparison", - components: [...componentData.keys()], - data: componentData.entries(), - root: pathing.root, - }, - join(output, "index.html"), - ) - .then(async () => { - // Open the summary in the browser for easy review - const open = (await import("open"))?.default; - if (open) await open(join(output, "index.html")); - }) - .catch((err) => Promise.reject(err)); +async function main( + components, + output, + { skipCache = false } = {} +) { + let buildAllComponents = false; + if (!components || components.length === 0) { + buildAllComponents = true; + components = allComponents; + } + + pathing.output = output; + pathing.cache = join(output, "packages"); + pathing.latest = join(output, "latest"); + + /** Setup the folder structure */ + cleanAndMkdir(pathing.output); + + // This is our cache of fetched tarballs from npm; do not clean this directory + // unless we want to re-fetch the tarballs + cleanAndMkdir(pathing.cache, skipCache); + + cleanAndMkdir(pathing.latest); + + /** + * Each component will report on it's file structure locally when compared + * against it's latest tag on npm; then a console report will be logged and + * a visual diff generated for each file that has changed. + */ + const results = await Promise.all( + components.map(async (component) => { + return processComponent(component, { + cwd: pathing.components, + output: pathing.output, + cacheLocation: pathing.cache, + }).catch((err) => + Promise.resolve({ + component, + warnings: [err], + }) + ); + }) + ).catch((err) => { + log.error(err); + }); + + if ( + !results || + results.length === 0 || + results.every((r) => !r.fileMap || r.fileMap.size === 0) + ) { + log.error(`No compiled assets found for ${components.join(", ")}.`); + + if (results && results.some((r) => r.warnings?.length > 0)) { + results.forEach((r) => { + if (r.warnings?.length > 0) { + r.warnings.forEach((warning) => log.error(warning)); + } + }); + } + return Promise.resolve(); + } + + const componentData = new Map(); + const promises = []; + + for (const { + component, + warnings = [], + tag, + pkg = {}, + fileMap = new Map(), + } of results) { + let hasComponentChange = false; + const files = [...fileMap.keys()]; + + if (!files || files.length === 0) { + log.error( + `No compiled assets found associated with ${ + `@spectrum-css/${component}`.brightYellow + }.` + ); + continue; + } + + componentData.set(component, { + pkg, + tag, + files: fileMap, + }); + + // This is our report header to indicate the start of a new component's data + log.writeTable([`\n${_.pad(` ${component} `, 20, "-").cyan}\n`]); + + if (warnings.length > 0) { + warnings.forEach((warning) => log.write(`${warning}\n`)); + } + + // Write a table of the file sizes to the console for easy comparison + log.writeTable(["Filename", "Size", "Size (release)"], 20); + + files.forEach(async (file) => { + let hasFileChange = false; + const { local, npm } = fileMap.get(file); + + log.writeTable([ + `${file}`.green, + local?.size ? `${bytesToSize(local.size)}`.gray : `** removed **`.red, + npm?.size ? `${bytesToSize(npm.size)}`.gray : `** new **`.yellow, + ]); + + if (local?.size && npm?.size && local.size !== npm.size) { + hasFileChange = true; + hasComponentChange = true; + } + + if (local && local.content && npm && npm.content && hasFileChange) { + promises.push( + generateDiff( + file, + join(output, "diffs", component), + local.content, + npm.content, + { + component, + tag, + } + ).then(() => hasComponentChange) + ); + } + }); + } + + const hasAnyChange = await Promise.all(promises) + .then((hasChange) => hasChange.some((change) => change)) + .catch((err) => { + log.error(err); + }); + + if (!hasAnyChange) { + log.write(`\n${"✓".green} No changes detected.\n`); + return Promise.resolve(); + } + + // This is writing a summary of all the components that were compared + // to make reviewing the diffs easier to navigate + return renderTemplate( + "compare-listing", + { + title: "Compiled asset comparison", + components: [...componentData.keys()], + data: componentData.entries(), + root: pathing.root, + }, + join(output, "index.html") + ) + .then(async () => { + // Open the summary in the browser for easy review + const open = (await import("open"))?.default; + if (open) await open(join(output, "index.html")); + }) + .catch((err) => Promise.reject(err)); } -let { _: components, output = join(pathing.root, ".diff-output"), cache = true } = yargs(hideBin(process.argv)).argv; - -if (!components || components.length === 0) components = allComponents; +let { + _: components, + output = join(pathing.root, ".diff-output"), + cache = true, +} = yargs(hideBin(process.argv)).argv; -main(components, output, { skipCache: !cache }); +main(components, output, { skipCache: !cache }).then((code) => { + process.exit(code); +}); diff --git a/tasks/templates/compare-listing.njk b/tasks/templates/compare-listing.njk index 496f5cce97d..44723d751f8 100644 --- a/tasks/templates/compare-listing.njk +++ b/tasks/templates/compare-listing.njk @@ -8,7 +8,7 @@ {% for component in allComponents -%} - {% if component not in ["actionmenu", "commons", "overlay"] %} + {% if component not in ["commons", "overlay"] %} {% endif %} {%- endfor -%} @@ -19,46 +19,49 @@ - -

Compiled asset comparison

+ +

Compiled asset comparison

+
{% if components.length > 5 %} - {% endif %} -
- {% for component, details in data -%} - - - - - - - - - - - - - - - - - {% for file, fileData in details.files -%} - - - - - - {%- endfor -%} - -
@spectrum-css/{{ component }}
FilenameSize
{% if details.tag %}v{{ details.tag }}{% endif %}Local
{% if fileData.link %}{% endif %}{{ file }}{% if fileData.link %}{% endif %}{% if fileData and fileData.npm and fileData.npm.size %}{{ fileData.npm.size | bytesToSize }}{% else %}new{% endif %}{% if fileData and fileData.local and fileData.local.size %}{{ fileData.local.size | bytesToSize }}{% else %}removed{% endif %}
- {%- endfor -%} +
+ {% for component, details in data -%} + + + + + + + + + + + + + + + + + {% for file, fileData in details.files -%} + + + + + + {%- endfor -%} + +
@spectrum-css/{{ component }}
FilenameSize
{% if details.tag %}v{{ details.tag }}{% endif %}Local
{% if fileData.link %}{% endif %}{{ file }}{% if fileData.link %}{% endif %}{% if fileData and fileData.npm and fileData.npm.size %}{{ fileData.npm.size | bytesToSize }}{% else %}new{% endif %}{% if fileData and fileData.local and fileData.local.size %}{{ fileData.local.size | bytesToSize }}{% else %}removed{% endif %}
+ {%- endfor -%} +
diff --git a/tasks/templates/diff-preview.njk b/tasks/templates/diff-preview.njk index bea71737e24..ba986359ed1 100644 --- a/tasks/templates/diff-preview.njk +++ b/tasks/templates/diff-preview.njk @@ -8,23 +8,23 @@ {% for component in allComponents -%} - {% if component not in ["actionmenu", "commons", "overlay"] %} - + {% if component not in ["commons", "overlay"] %} + {% endif %} {%- endfor -%} - - - + + + - + - + - {% raw %}{{ html }}{% endraw %} + {{ html|safe }} - + diff --git a/tokens/package.json b/tokens/package.json index 1a66afa6b41..19bec0fb7cf 100644 --- a/tokens/package.json +++ b/tokens/package.json @@ -15,9 +15,9 @@ }, "main": "dist/index.css", "scripts": { - "prebuild": "rimraf dist/*", "build": "run-s convert:tokens css:prepare format:results clean:empty", "build:tokens": "style-dictionary build --config style-dictionary.config.js && postcss --replace dist/css/*.css", + "clean": "rimraf dist", "clean:empty": "find dist -type f -empty -delete", "concat:dist": "concat-cli -f dist/css/*.css dist/css/**/*.css -o dist/index.css", "convert:tokens": "run-p build:tokens copy:*", diff --git a/tools/bundle-builder/vars/index.js b/tools/bundle-builder/vars/index.js index c931c5e5c0b..f7e47437dc4 100644 --- a/tools/bundle-builder/vars/index.js +++ b/tools/bundle-builder/vars/index.js @@ -139,7 +139,9 @@ function buildUnique() { .src([ path.join(varDir, "dist/*.css"), "!" + path.join(varDir, "dist/index.css") - ]) + ], { + allowEmpty: true + }) .pipe( through.obj(function makeUnique(file, enc, cb) { let css = file.contents.toString(); diff --git a/yarn.lock b/yarn.lock index 8126ffeb386..da12bfa58b9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -56,7 +56,7 @@ resolved "https://registry.yarnpkg.com/@adobe/focus-ring-polyfill/-/focus-ring-polyfill-0.1.5.tgz#b20b5bd1ffb0ceaf42aae1f0837f39ce29f9eb9b" integrity sha512-OLa/TlzPv6vzMPi3DT9/Gefu/HJptcBcFmMYTpeNTZ6Y+t2TL+CZtjGlu438O2V03c86KEEgMlm9nQ70kW3bPw== -"@adobe/spectrum-css-workflow-icons@^1.2.1": +"@adobe/spectrum-css-workflow-icons@^1.5.4": version "1.5.4" resolved "https://registry.yarnpkg.com/@adobe/spectrum-css-workflow-icons/-/spectrum-css-workflow-icons-1.5.4.tgz#0e09ff519c36139176c3ba3ce617a995c9032f67" integrity sha512-sZ19YOLGw5xTZzCEkVXPjf53lXVzo063KmDTJjpSjy/XLVsF+RaX0b436SfSM4hsIUZ7n27+UsbOvzFaFjcYXw== @@ -4238,7 +4238,7 @@ a-sync-waterfall@^1.0.0: resolved "https://registry.yarnpkg.com/a-sync-waterfall/-/a-sync-waterfall-1.0.1.tgz#75b6b6aa72598b497a125e7a2770f14f4c8a1fa7" integrity sha512-RYTOHHdWipFUliRFMCS4X2Yn2X8M87V/OpSqWzKKOGhzqyUxzyVmhHDH9sAvG+ZuQf/TAOFsLCpMw09I1ufUnA== -abab@^2.0.5: +abab@^2.0.6: version "2.0.6" resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.6.tgz#41b80f2c871d19686216b82309231cfd3cb3d291" integrity sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA== @@ -9638,7 +9638,7 @@ iconv-lite@0.4.24, iconv-lite@^0.4.24: dependencies: safer-buffer ">= 2.1.2 < 3" -iconv-lite@^0.6.2: +iconv-lite@^0.6.2, iconv-lite@^0.6.3: version "0.6.3" resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501" integrity sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw== @@ -15722,17 +15722,14 @@ source-map-js@^1.0.1, source-map-js@^1.0.2: resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c" integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw== -source-map-loader@^1.0.0: - version "1.1.3" - resolved "https://registry.yarnpkg.com/source-map-loader/-/source-map-loader-1.1.3.tgz#7dbc2fe7ea09d3e43c51fd9fc478b7f016c1f820" - integrity sha512-6YHeF+XzDOrT/ycFJNI53cgEsp/tHTMl37hi7uVyqFAlTXW109JazaQCkbc+jjoL2637qkH1amLi+JzrIpt5lA== +source-map-loader@^4.0.1: + version "4.0.1" + resolved "https://registry.yarnpkg.com/source-map-loader/-/source-map-loader-4.0.1.tgz#72f00d05f5d1f90f80974eda781cbd7107c125f2" + integrity sha512-oqXpzDIByKONVY8g1NUPOTQhe0UTU5bWUl32GSkqK2LjJj0HmwTMVKxcUip0RgAYhY1mqgOxjbQM48a0mmeNfA== dependencies: - abab "^2.0.5" - iconv-lite "^0.6.2" - loader-utils "^2.0.0" - schema-utils "^3.0.0" - source-map "^0.6.1" - whatwg-mimetype "^2.3.0" + abab "^2.0.6" + iconv-lite "^0.6.3" + source-map-js "^1.0.2" source-map-resolve@^0.5.0: version "0.5.3" @@ -17506,11 +17503,6 @@ well-known-symbols@^2.0.0: resolved "https://registry.yarnpkg.com/well-known-symbols/-/well-known-symbols-2.0.0.tgz#e9c7c07dbd132b7b84212c8174391ec1f9871ba5" integrity sha512-ZMjC3ho+KXo0BfJb7JgtQ5IBuvnShdlACNkKkdsqBmYw3bPAaJfPeYUo6tLUaT5tG/Gkh7xkpBhKRQ9e7pyg9Q== -whatwg-mimetype@^2.3.0: - version "2.3.0" - resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz#3d4b1e0312d2079879f826aff18dbeeca5960fbf" - integrity sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g== - whatwg-url@^5.0.0: version "5.0.0" resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-5.0.0.tgz#966454e8765462e37644d3626f6742ce8b70965d"