Skip to content

Commit

Permalink
feat!: postcss config build and script; remove gulp (#2466)
Browse files Browse the repository at this point in the history 
BREAKING CHANGE:
- Removes component-builder & component-builder-simple for script leveraging postcss
- Imports added to index.css and themes/express.css
  • Loading branch information
@castastrophe
castastrophe committed Mar 22, 2024
1 parent acebc16 commit b0f337b
Show file tree
Hide file tree
Showing 534 changed files with 5,216 additions and 11,108 deletions.
5 changes: 3 additions & 2 deletions .eslintrc
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
{
"env": {
"browser": true,
"node": true,
"es2020": true
},
Expand All @@ -10,10 +11,10 @@
"rules": {
"brace-style": ["warn", "stroustrup", { "allowSingleLine": true }],
"func-call-spacing": ["warn", "never"],
"indent": ["warn", 2],
"indent": ["warn", "tab", { "ignoredNodes": ["TemplateLiteral *"] }],
"linebreak-style": ["warn", "unix"],
"no-console": 0,
"quotes": ["warn", "single"],
"quotes": ["warn", "double"],
"semi": ["warn", "always"],
"space-before-blocks": ["warn", "always"]
},
Expand Down
75 changes: 54 additions & 21 deletions .github/actions/file-diff/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ async function run() {
* and not just reporting on the overall size of the compiled assets
* @type boolean
*/
const hasDiff = baseOutput.size > 0;
const hasBase = baseOutput.size > 0;
// --------------- End evaluation ---------------

/** Split the data by component package */
Expand All @@ -66,7 +66,7 @@ async function run() {
);

/** Calculate the overall size of the base branch's assets */
const overallBaseSize = hasDiff
const overallBaseSize = hasBase
? [...baseOutput.values()].reduce((acc, size) => acc + size, 0)
: undefined;

Expand Down Expand Up @@ -95,29 +95,35 @@ async function run() {
* PR - base / base = change
*/
let changeSummary = "";
if (baseOutput.size > 0 && hasDiff && hasChange) {
if (baseOutput.size > 0 && hasBase && hasChange) {
changeSummary = `**Total change (Δ)**: ${printChange(overallHeadSize, overallBaseSize)} (${printPercentChange(overallHeadSize, overallBaseSize)})`;
} else if (baseOutput.size > 0 && hasDiff && !hasChange) {
} else if (baseOutput.size > 0 && hasBase && !hasChange) {
changeSummary = `No change in file sizes`;
}

if (changeSummary !== "") {
summary.push(...[
summary.push(
changeSummary,
"<small><em>Table reports on changes to a package's main file. Other changes can be found in the collapsed \"Details\" below.</em></small>",
"",
"<small><em>Table reports on changes to a package's main file. Other changes can be found in the collapsed <a href=\"#details\">Details</a> section below.</em></small>",
""
]);
);
}

markdown.push(`<details>`, `<summary><b>Details</b></summary>`, "");
markdown.push(
"<a name=\"details\"></a>",
`<details>`,
`<summary><b>Details</b></summary>`,
""
);

sections.map(({ name, filePath, headMainSize, baseMainSize, hasChange, mainFile, fileMap }) => {
if (!hasChange) return;

const data = [];

/** We only evaluate changes if there is a diff branch being used and this is the main file for the package */
if (hasDiff) {
if (hasBase) {
/**
* If: the component folder exists in the original branch but not the PR
* Or: the pull request file size is 0 or empty but the original branch has a size
Expand Down Expand Up @@ -155,8 +161,8 @@ async function run() {
const md = ["", `#### ${name}`, ""];
md.push(
...[
["File", "Head", ...(hasDiff ? ["Base", "Δ"] : [])],
[" - ", " - ", ...(hasDiff ? [" - ", " - "] : [])],
["File", "Head", ...(hasBase ? ["Base", "Δ"] : [])],
[" - ", " - ", ...(hasBase ? [" - ", " - "] : [])],
].map((row) => `| ${row.join(" | ")} |`),
...[...fileMap.entries()]
.reduce(
Expand All @@ -170,10 +176,11 @@ async function run() {
...table,
[
readableFilename === mainFile ? `**${readableFilename}**` : readableFilename,
isRemoved(headByteSize, baseByteSize) ? "**removed**" : isNew(headByteSize, baseByteSize) ? "**new**" : bytesToSize(headByteSize),
...(hasDiff ? [
// If the file was removed, note it's absense with a dash; otherwise, note it's size
isRemoved(headByteSize, baseByteSize) ? " - " : bytesToSize(headByteSize),
...(hasBase ? [
bytesToSize(baseByteSize),
`${printChange(headByteSize, baseByteSize)}${difference(headByteSize, baseByteSize) !== 0 ? ` (${printPercentChange(headByteSize , baseByteSize)})` : ""}`,
isRemoved(headByteSize, baseByteSize) ? "🚨 deleted, moved, or renamed" : isNew(headByteSize, baseByteSize) ? "🎉 **new**" : `${printChange(headByteSize, baseByteSize)}${difference(headByteSize, baseByteSize) !== 0 ? ` (${printPercentChange(headByteSize , baseByteSize)})` : ""}`,
] : []),
]
];
Expand All @@ -192,8 +199,8 @@ async function run() {
if (summaryTable.length > 0) {
// Add the headings to the summary table if it contains data
summaryTable = [
["Package", "Size", ...(hasDiff ? ["Δ"] : [])],
["-", "-", ...(hasDiff ? ["-"] : [])],
["Package", "Size", ...(hasBase ? ["Δ"] : [])],
["-", "-", ...(hasBase ? ["-"] : [])],
...summaryTable,
];

Expand Down Expand Up @@ -237,15 +244,15 @@ async function run() {
);
core.setOutput("total-size", headMainSize);

if (hasDiff) {
if (hasBase) {
const baseMainSize = [...baseOutput.entries()].reduce(
(acc, [_, size]) => acc + size,
0
);

core.setOutput(
"has-changed",
hasDiff && headMainSize !== baseMainSize ? "true" : "false"
hasBase && headMainSize !== baseMainSize ? "true" : "false"
);
}
} else {
Expand Down Expand Up @@ -379,11 +386,37 @@ const splitDataByPackage = function (dataMap, path, baseMap = new Map()) {

if (!fileMap.has(readableFilename)) {
fileMap.set(readableFilename, {
headByteSize: headByteSize,
headByteSize,
baseByteSize: baseMap.get(file),
});
} else {
throw new Error(`The file ${file} was found twice in the dataset`);
}

/** Update the component's table data */
PACKAGES.set(packageName, fileMap);
});

// Look for any base files not present in the head
[...baseMap.entries()].forEach(([file, baseByteSize]) => {
// Determine the name of the component
const parts = file.split(sep);
const componentIdx = parts.findIndex((part) => part === "dist") - 1;
const packageName = parts[componentIdx];

if (!filePath) {
filePath = `${file.replace(path, "")}/${parts.slice(componentIdx + 1, -1).join(sep)}`;
}

const readableFilename = file.replace(/^.*\/dist\//, "");

const fileMap = PACKAGES.has(packageName)
? PACKAGES.get(packageName)
: new Map();

if (!fileMap.has(readableFilename)) {
fileMap.set(readableFilename, {
headByteSize: dataMap.get(file),
baseByteSize,
});
}

/** Update the component's table data */
Expand Down
4 changes: 2 additions & 2 deletions .github/workflows/build.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,9 +118,9 @@ jobs:
run: yarn nx reset

## --- BUILD --- ##
- name: Build components
- name: Build components & ui-icons
shell: bash
run: yarn build
run: yarn ci

## --- UPLOAD (only ubuntu-latest at the moment) --- ##
- name: Upload compiled assets & NX performance profile
Expand Down
27 changes: 26 additions & 1 deletion .github/workflows/compare-results.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,31 @@ jobs:
ui-icons/dist/**
token: ${{ secrets.GITHUB_TOKEN }}

- name: Generate rich diff if changes detected
id: rich-diff
if: ${{ steps.compare.outputs.has-changed }}
shell: bash
run: yarn compare

- name: Upload changes
if: ${{ steps.compare.outputs.has-changed }}
uses: actions/upload-artifact@v4
with:
name: rich-diff
path: |
.diff-output/index.html
.diff-output/diffs/*/*.html
components/typography/dist/index.css
components/table/dist/index.css
components/badge/dist/index.css
components/button/dist/index.css
components/card/dist/index.css
components/icon/dist/index.css
components/sidenav/dist/index.css
tokens/dist/index.css
node_modules/diff2html/bundles/css/diff2html.min.css
node_modules/diff2html/bundles/js/diff2html.min.js
fetch-build-artifacts:
name: Fetch & validate build artifacts
strategy:
Expand Down Expand Up @@ -172,7 +197,7 @@ jobs:
- name: Build
if: ${{ steps.download.outcome != 'success' }}
shell: bash
run: yarn build
run: yarn ci

- name: Upload compiled assets
if: ${{ steps.download.outcome != 'success' }}
Expand Down
15 changes: 7 additions & 8 deletions .github/workflows/development.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,8 +86,8 @@ jobs:
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 }}
eslint_added_files: ${{ steps.changed-files.outputs.eslint_added_files }}
eslint_modified_files: ${{ steps.changed-files.outputs.eslint_modified_files }}
permissions:
pull-requests: read

Expand All @@ -101,23 +101,22 @@ jobs:
- components/*/index.css
- components/*/themes/spectrum.css
- components/*/themes/express.css
# eslint:
# - components/*/package.json
# - components/*/project.json
# - components/*/stories/*.js
eslint:
- components/*/stories/*.js
# -------------------------------------------------------------
# Lint pre-compiled assets for consistency
# -------------------------------------------------------------
lint:
name: Lint
if: ${{ contains(github.event.pull_request.labels.*.name, 'skip_lint') == false }}
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 }}
eslint_added_files: ${{ needs.changed_files.outputs.eslint_added_files }}
eslint_modified_files: ${{ needs.changed_files.outputs.eslint_modified_files }}
secrets: inherit

# -------------------------------------------------------------
Expand Down
46 changes: 23 additions & 23 deletions .github/workflows/lint.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand All @@ -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
Expand Down Expand Up @@ -80,18 +80,18 @@ jobs:
fail_on_error: true
level: error
reporter: github-pr-check
filter_mode: file
filter_mode: diff_context
# 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 != '' }}
# 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 }}"
- name: Run eslint on packages and stories
uses: reviewdog/action-eslint@v1.20.0
if: ${{ inputs.eslint_added_files != '' || inputs.eslint_modified_files != '' }}
with:
fail_on_error: true
level: error
reporter: github-pr-check
filter_mode: diff_context
# eslint_flags: "components/*/stories/*.js"
eslint_flags: "${{ inputs.eslint_added_files }} ${{ inputs.eslint_modified_files }}"
5 changes: 1 addition & 4 deletions .npmignore
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,8 @@
/src
/docs
/dist
/node_modules
/tasks
/temp
/gulpfile.js
npm-debug.log
/.github
/dist/docs/
/components
/tools
Loading

0 comments on commit b0f337b

Please sign in to comment.