diff --git a/.eslintrc b/.eslintrc index 8b38a1559d..f239b6052d 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 0000000000..0ad7d5252b --- /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 8493422694..bf7fce5a54 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 0666204622..f905d77b12 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 f69e68d80b..164970fe2d 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 93a3a63cd3..caf6162c2c 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 9e1ef4dcf7..f9f5367886 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 f434775a37..7445bf11d1 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 ab6d326449..4455788a01 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 0000000000..1c46a77138 --- /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 3f73f3accf..661d11ce12 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 bf69736bd9..ec3661df50 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 a4d581648e..c8b0df8eb3 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 d8fadc8922..0532ed87ab 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 afe3c3156f..7fa85476b2 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 d458530c1e..f177fda4b8 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 a8b3aec5c2..7a378c930f 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 31cb7a6d8b..2aeaa8c50b 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 b184e61be5..22a10d315e 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 6ad183da91..57526d4f72 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 e391d5f73d..c1f9448066 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 2a2decd6b5..17e80ceac0 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 e0538b8084..b1127530bd 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 c4af253dd1..beff8edd88 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 63291c9c20..e69161185e 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 2c8f48f570..b49dc5e084 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 debee7daf2..39bda2673a 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 7ec8cd9b44..f3f4d75a84 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 ea285da62c..aa70d482c5 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 3eba923aa6..7b6ce9b4d1 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 6fb197a202..f0254cfc21 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 edd69f8d29..688056f46e 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 1f8cb510b9..e09ebc5a16 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 8ba5576ac8..90625808f4 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 19232fef70..510d4f50e4 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 ab9816d8f2..7bbac2424d 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 0ec87a98a5..0f1a97493c 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 41193addb1..2178cbf712 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 9f28226e4c..5e37d905f2 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 195c82b1f1..01111189cf 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 496553a472..80e825421f 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 5234f9ba82..0b70950829 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 83a848bfa9..f49a1d91fe 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 976ea08cbf..ced0858e4e 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 063e61f1f6..c5d53420d0 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 3e848b0fa2..5da8cf10f2 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 af85416db2..21ccc7512f 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 3f8cf8c85e..f80e2dbd59 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 1d7a385b60..3ec1e653ce 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 d16452419b..8aad88620a 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 323292d7ca..f6f50ba941 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 72f53fafcd..819b5f9f6b 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 a484a394d6..45c41c439b 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 3ac5b8bfa0..770a637a43 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 1cf0cec396..697897b429 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 2720330081..a175deb9c0 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 f287321e81..c33e08f68b 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 6bbaa5fffd..9c8c050623 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 a06cf03b89..6661630edf 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 ad6476b2bc..1109668dcf 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 c08f088fb4..caa73b6cd0 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 6f0a05539e..cc86fda314 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 12946e882c..b90e1c8112 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 6b5cdd5008..246258c972 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 b0925b7d84..1785e7d008 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 8262feab84..3a40f132c4 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 45da1f0a49..8e339837c0 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 8d1a09797c..4e5bc13d95 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 a3dde483c4..f02c6cbf2f 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 a9666c22fb..3a01e724a0 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 0592ab359a..ff268530fe 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 0daeaf113c..99dc0ec534 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 28b2c8d62b..8d0bc25199 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 92720354dd..8cd5420daa 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 8df887dbd2..bd3e0a4131 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 7f2e5b62c7..4b6d7431e2 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 c3862be2dd..c29644d51e 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 a93c6f1835..b8310bb4ee 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 a88c1e8a0b..7eb1a8f0eb 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 b342d3b04e..56e6b086e7 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 b5396f73a1..56b4a050df 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 80cbdfba9d..80bd2b8e51 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 deed685189..5897ca7042 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 781e537cd6..8a432e25a0 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 61cf0e3dc0..02647242fe 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 1f7be5d697..c3a9a2d976 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 39663cc76e..9fb2a7d894 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 bb9607708e..41e4ca5ad8 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 2d89725562..f06da135b4 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 c48d3de90e..a88a429c8b 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 2539d2f062..800022cab9 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 a83cbba25c..af526c1583 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 3916f165c0..ddee9f854a 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 70ced45fa7..fdf78d4bf4 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 899d8b756d..90a14f11b9 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 34ab10dd7a..3b6d1aa712 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 6706c9a35a..06654b32f3 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 b6c30fc1a1..22936b0949 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 3c50661b1f..f58b363ee9 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 1446597fe3..6de6b10aa0 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 a88249a7ea..0a6f2e1499 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 66aa8eff24..8c5b3c964c 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 6fea03a8c0..ed79ae7b3d 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 e40da4be24..c842bdff2c 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 b281af95ce..c56f6ea6e3 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 496f5cce97..44723d751f 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 bea71737e2..ba986359ed 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 1a66afa6b4..19bec0fb7c 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 c931c5e5c0..f7e47437dc 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 8126ffeb38..da12bfa58b 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"