-
Notifications
You must be signed in to change notification settings - Fork 213
Style: Replace Grunt with @wordpress/scripts and modernize the build #734
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. Weβll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: trunk
Are you sure you want to change the base?
Changes from all commits
e9212c0
491544c
08a799d
3cb0559
f3ab3ef
fb7b716
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| name: Static Analysis (Style JS/CSS) | ||
|
|
||
| on: | ||
| pull_request: | ||
| paths: | ||
| - 'wordpress.org/public_html/style/**.js' | ||
| - 'wordpress.org/public_html/style/**.css' | ||
| - 'wordpress.org/public_html/style/package.json' | ||
| - 'wordpress.org/public_html/style/package-lock.json' | ||
| - 'wordpress.org/public_html/style/.prettierignore' | ||
| - .github/workflows/style-lint.yml | ||
| push: | ||
| branches: [trunk] | ||
| paths: | ||
| - 'wordpress.org/public_html/style/**.js' | ||
| - 'wordpress.org/public_html/style/**.css' | ||
|
|
||
| concurrency: | ||
| group: ${{ github.workflow }}-${{ github.ref }} | ||
| cancel-in-progress: true | ||
|
|
||
| jobs: | ||
| lint: | ||
| name: Style Coding Standards | ||
| runs-on: ubuntu-latest | ||
|
|
||
| defaults: | ||
| run: | ||
| working-directory: wordpress.org/public_html/style | ||
|
|
||
| steps: | ||
| - uses: actions/checkout@v7 | ||
|
|
||
| - name: Set up Node.js | ||
| uses: actions/setup-node@v7 | ||
| with: | ||
| node-version-file: environments/.nvmrc | ||
| cache: npm | ||
| cache-dependency-path: wordpress.org/public_html/style/package-lock.json | ||
|
|
||
| - name: Install dependencies | ||
| run: npm ci | ||
|
|
||
| - name: Lint JavaScript | ||
| run: npm run lint:js | ||
|
|
||
| - name: Lint CSS | ||
| run: npm run lint:css | ||
|
|
||
| - name: Check formatting | ||
| run: npx prettier --check . | ||
|
|
||
| # Generated files (wp4-rtl.css, js/navigation.min.js) are committed, so a | ||
| # source edit without a rebuild ships stale output. Rebuild and fail on drift. | ||
| - name: Check generated files are up to date | ||
| run: | | ||
| npm run build | ||
| git diff --exit-code -- . | ||
This file was deleted.
This file was deleted.
| Original file line number | Diff line number | Diff line change | ||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| @@ -0,0 +1,4 @@ | ||||||||||||||||
| **/*.min.js | ||||||||||||||||
| *.css | ||||||||||||||||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. π Maintainability & Code Quality | π‘ Minor | β‘ Quick win Format the maintained CSS source. Line 2 excludes Proposed change-*.css
+wp4-rtl.css
+blog-wp4.css
+codex-wp4.css
+forum-ie7.css
+forum-wp4.css
+forum-wp4-rtl.cssAs per coding guidelines, π Committable suggestion
Suggested change
π€ Prompt for AI AgentsSource: Coding guidelines |
||||||||||||||||
| package-lock.json | ||||||||||||||||
| trac/common/ | ||||||||||||||||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| /** | ||
| * Prettier configuration. | ||
| * | ||
| * The default @wordpress/prettier-config, with a wider line length. | ||
| */ | ||
|
|
||
| const wpConfig = require( '@wordpress/prettier-config' ); | ||
|
|
||
| module.exports = { | ||
| ...wpConfig, | ||
| printWidth: 120, | ||
| }; |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| # Vendored copy of Trac's own assets. | ||
| trac/common/ | ||
|
|
||
| # Generated from wp4.css by `npm run build:css`. | ||
| wp4-rtl.css | ||
|
|
||
| # Frozen legacy stylesheets, kept byte-for-byte as served. | ||
| blog-wp4.css | ||
| codex-wp4.css | ||
| forum-ie7.css | ||
| forum-wp4.css | ||
| forum-wp4-rtl.css |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| module.exports = { | ||
| extends: [ '@wordpress/stylelint-config' ], | ||
| rules: { | ||
| /* | ||
| * The stylesheets style Trac's and WordPress.org's existing markup, whose | ||
| * ids and class names are not ours to rename, and they predate these | ||
| * rules β reordering or merging selectors to satisfy them would change | ||
| * the cascade, as would converting the em/rem line-heights. | ||
| */ | ||
| 'declaration-property-unit-allowed-list': null, | ||
| 'no-descending-specificity': null, | ||
| 'no-duplicate-selectors': null, | ||
| 'selector-class-pattern': null, | ||
| 'selector-id-pattern': null, | ||
| }, | ||
| }; |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| # Agent instructions β wordpress.org/public_html/style/ | ||
|
|
||
| Everything in this directory is served publicly, as-is, from `https://s.w.org/style/`. | ||
| Changes are committed to meta.svn and then deployed from a Dotorg sandbox β committing alone | ||
| does not make them live. See README.md for the full file inventory and development flow, and | ||
| trac/README.md for the Trac-specific workflow. | ||
|
|
||
| ## Commands | ||
|
|
||
| Run from this directory (`npm install` first): | ||
|
|
||
| - `npm run build` β rebuild all generated files | ||
| - `npm run build:css` β regenerate `wp4-rtl.css` from `wp4.css` | ||
| - `npm run build:js` β rebuild `js/navigation.min.js` | ||
| - `npm run format` β Prettier over all sources | ||
| - `npm run lint:js` β ESLint (stock `@wordpress/scripts` ruleset) over `js/` and `trac/` | ||
|
|
||
| ## Rules | ||
|
|
||
| - Never hand-edit generated files: `wp4-rtl.css`, `js/navigation.min.js`. Edit the source | ||
| (`wp4.css`, `js/navigation.js`), rebuild, and commit source and output together. | ||
| - Write any vendor prefix a property still needs by hand β supported browsers | ||
| (`@wordpress/browserslist-config`) rarely require them. After editing `wp4.css`, run | ||
| `npm run build:css` to keep `wp4-rtl.css` in sync. | ||
| - Never edit vendored files: `trac/common/`, `trac/jquery.atwho.min.js`, | ||
| `trac/jquery.caret.min.js`. They are excluded from linting and formatting. | ||
| - Code style is the stock `@wordpress/scripts` configuration with one override: | ||
| `printWidth: 120` (`.prettierrc.js`). Run `npm run format` and `npm run lint:js` before | ||
| committing; both must pass clean. | ||
| - The files in `trac/` run live on `*.trac.wordpress.org` with no build step. Once a change | ||
| to them is committed AND deployed from a Dotorg sandbox, `scripts_version` must be bumped | ||
| in BOTH `trac.wordpress.org/templates/site_head.html` and `site_footer.html` in a | ||
| follow-up commit, or browsers keep serving the cached old version. The bump itself is | ||
| picked up automatically by the hosts' SVN refreshes. Details in trac/README.md. |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| @AGENTS.md |
This file was deleted.
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| # WordPress.org Global Styles | ||
|
|
||
| Global stylesheets, scripts, and images for WordPress.org, served from | ||
| `https://s.w.org/style/`. Changes are committed to meta.svn and then deployed | ||
| from a Dotorg sandbox; see [Deployment](#deployment). | ||
|
|
||
| ## Files | ||
|
|
||
| | File | Description | | ||
| | -------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | | ||
| | `wp4.css` | The main WordPress.org stylesheet. Edited by hand; vendor prefixes are hand-written on the rare occasion a property still needs one. | | ||
| | `wp4-rtl.css` | RTL version of `wp4.css`. Generated β do not edit by hand. | | ||
| | `blog-wp4.css`, `codex-wp4.css`, `forum-wp4.css`, `forum-wp4-rtl.css`, `forum-ie7.css` | Standalone legacy stylesheets for individual properties. Edited by hand, not part of the build. | | ||
| | `js/navigation.js` | Navigation menu toggle and keyboard-navigation support. Source. | | ||
| | `js/navigation.min.js` | Minified build of `navigation.js`. Generated β do not edit by hand. | | ||
| | `images/`, `header-logo.png` | Static images. | | ||
| | `trac/` | Customizations for the `*.trac.wordpress.org` installs. See [trac/README.md](trac/README.md). | | ||
|
|
||
| ## Development | ||
|
|
||
| Tooling is based on [`@wordpress/scripts`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/). | ||
| Requires Node.js and npm. | ||
|
|
||
| ``` | ||
| npm install | ||
| ``` | ||
|
Comment on lines
+24
to
+26
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. π Maintainability & Code Quality | π‘ Minor | β‘ Quick win Add a language identifier to the fenced command block. The opening fence at Line 24 has no language tag. π§° Toolsπͺ markdownlint-cli2 (0.23.2)[warning] 24-24: Fenced code blocks should have a language specified (MD040, fenced-code-language) π€ Prompt for AI AgentsSource: Linters/SAST tools |
||
|
|
||
| | Command | Description | | ||
| | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | `npm run build` | Runs `build:css` and `build:js`. | | ||
| | `npm run build:css` | Regenerates `wp4-rtl.css` from `wp4.css` via `bin/build-rtl.js`. The RTL pass includes a plugin that swaps Dashicons left/right arrow glyphs, which RTLCSS cannot infer from the CSS itself. | | ||
| | `npm run build:js` | Builds `js/navigation.js` into `js/navigation.min.js` (webpack via `wp-scripts build`, see `webpack.config.js`). Transpilation targets come from the `browserslist` field in `package.json`, which extends the official `@wordpress/browserslist-config`. | | ||
| | `npm run format` | Formats the JavaScript, JSON, and Markdown sources with Prettier (`wp-scripts format`). Stylesheets are not Prettier-formatted β `.prettierignore` excludes `*.css`, since the CSS is hand-maintained and `wp4-rtl.css` is generated from it. | | ||
| | `npm run lint:css` | Lints the hand-edited stylesheets with Stylelint (`wp-scripts lint-style`), using `.stylelintrc.js`. Generated, frozen, and vendored stylesheets are excluded via `.stylelintignore`. | | ||
| | `npm run lint:js` | Lints all JavaScript, including `trac/`, with the stock `@wordpress/scripts` ESLint configuration. Vendored files (`*.min.js`, `trac/common/`) are excluded. | | ||
|
|
||
| Code in this directory adheres to the default `@wordpress/scripts` style, | ||
| with one local override: `.prettierrc.js` extends the stock | ||
| `@wordpress/prettier-config` with a line length of 120. Generated files | ||
| (`wp4-rtl.css`, `js/navigation.min.js`) are committed, since | ||
| the CDN serves this directory as-is; rebuild and commit them together with | ||
| their sources. | ||
|
|
||
| ## Deployment | ||
|
|
||
| Commit changes to the meta SVN repository as normal, then deploy the files | ||
| from a Dotorg sandbox β committing alone does not make them live on | ||
| `s.w.org`. Consumers reference these files with cache-busting query strings, | ||
| so a change to an existing file also needs the referencing version string | ||
| bumped once the file is deployed; the bump itself is picked up automatically | ||
| by the hosts' SVN refreshes. See [trac/README.md](trac/README.md) for how | ||
| that works for the Trac assets. | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
π Maintainability & Code Quality | π‘ Minor | β‘ Quick win
Trigger validation when Stylelint exclusions change.
The path filters omit
wordpress.org/public_html/style/.stylelintignore. A pull request that changes only this file skips lint, format, build, and generated-file drift checks. Add this path to both event filters. GitHub runs a path-filtered workflow only when a changed path matches an included pattern. (docs.github.com)Proposed change
pull_request: paths: + - 'wordpress.org/public_html/style/.stylelintignore' - 'wordpress.org/public_html/style/**.js' - 'wordpress.org/public_html/style/**.css' ... push: branches: [trunk] paths: + - 'wordpress.org/public_html/style/.stylelintignore' - 'wordpress.org/public_html/style/**.js' - 'wordpress.org/public_html/style/**.css'π Committable suggestion
π€ Prompt for AI Agents