wordpress / css-audit Goto Github PK

Home Page: https://wordpress.github.io/css-audit/public/wp-admin

JavaScript 82.57% CSS 10.17% Twig 7.26%

css-audit's Introduction

<!DOCTYPE html>
<html lang="en">
<head>
	<meta name="viewport" content="width=device-width" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>WordPress &#8250; ReadMe</title>
	<link rel="stylesheet" href="wp-admin/css/install.css?ver=20100228" type="text/css" />
</head>
<body>
<h1 id="logo">
	<a href="https://wordpress.org/"><img alt="WordPress" src="wp-admin/images/wordpress-logo.png" /></a>
</h1>
<p style="text-align: center">Semantic Personal Publishing Platform</p>

<h2>First Things First</h2>
<p>Welcome. WordPress is a very special project to me. Every developer and contributor adds something unique to the mix, and together we create something beautiful that I am proud to be a part of. Thousands of hours have gone into WordPress, and we are dedicated to making it better every day. Thank you for making it part of your world.</p>
<p style="text-align: right">&#8212; Matt Mullenweg</p>

<h2>Installation: Famous 5-minute install</h2>
<ol>
	<li>Unzip the package in an empty directory and upload everything.</li>
	<li>Open <span class="file"><a href="wp-admin/install.php">wp-admin/install.php</a></span> in your browser. It will take you through the process to set up a <code>wp-config.php</code> file with your database connection details.
		<ol>
			<li>If for some reason this does not work, do not worry. It may not work on all web hosts. Open up <code>wp-config-sample.php</code> with a text editor like WordPad or similar and fill in your database connection details.</li>
			<li>Save the file as <code>wp-config.php</code> and upload it.</li>
			<li>Open <span class="file"><a href="wp-admin/install.php">wp-admin/install.php</a></span> in your browser.</li>
		</ol>
	</li>
	<li>Once the configuration file is set up, the installer will set up the tables needed for your site. If there is an error, double check your <code>wp-config.php</code> file, and try again. If it fails again, please go to the <a href="https://wordpress.org/support/forums/">WordPress support forums</a> with as much data as you can gather.</li>
	<li><strong>If you did not enter a password, note the password given to you.</strong> If you did not provide a username, it will be <code>admin</code>.</li>
	<li>The installer should then send you to the <a href="wp-login.php">login page</a>. Sign in with the username and password you chose during the installation. If a password was generated for you, you can then click on &#8220;Profile&#8221; to change the password.</li>
</ol>

<h2>Updating</h2>
<h3>Using the Automatic Updater</h3>
<ol>
	<li>Open <span class="file"><a href="wp-admin/update-core.php">wp-admin/update-core.php</a></span> in your browser and follow the instructions.</li>
	<li>You wanted more, perhaps? That&#8217;s it!</li>
</ol>

<h3>Updating Manually</h3>
<ol>
	<li>Before you update anything, make sure you have backup copies of any files you may have modified such as <code>index.php</code>.</li>
	<li>Delete your old WordPress files, saving ones you&#8217;ve modified.</li>
	<li>Upload the new files.</li>
	<li>Point your browser to <span class="file"><a href="wp-admin/upgrade.php">/wp-admin/upgrade.php</a>.</span></li>
</ol>

<h2>Migrating from other systems</h2>
<p>WordPress can <a href="https://developer.wordpress.org/advanced-administration/wordpress/import/">import from a number of systems</a>. First you need to get WordPress installed and working as described above, before using <a href="wp-admin/import.php">our import tools</a>.</p>

<h2>System Requirements</h2>
<ul>
	<li><a href="https://www.php.net/">PHP</a> version <strong>7.2.24</strong> or greater.</li>
	<li><a href="https://www.mysql.com/">MySQL</a> version <strong>5.5.5</strong> or greater.</li>
</ul>

<h3>Recommendations</h3>
<ul>
	<li><a href="https://www.php.net/">PHP</a> version <strong>7.4</strong> or greater.</li>
	<li><a href="https://www.mysql.com/">MySQL</a> version <strong>8.0</strong> or greater OR <a href="https://mariadb.org/">MariaDB</a> version <strong>10.4</strong> or greater.</li>
	<li>The <a href="https://httpd.apache.org/docs/2.2/mod/mod_rewrite.html">mod_rewrite</a> Apache module.</li>
	<li><a href="https://wordpress.org/news/2016/12/moving-toward-ssl/">HTTPS</a> support.</li>
	<li>A link to <a href="https://wordpress.org/">wordpress.org</a> on your site.</li>
</ul>

<h2>Online Resources</h2>
<p>If you have any questions that are not addressed in this document, please take advantage of WordPress&#8217; numerous online resources:</p>
<dl>
	<dt><a href="https://wordpress.org/documentation/">HelpHub</a></dt>
		<dd>HelpHub is the encyclopedia of all things WordPress. It is the most comprehensive source of information for WordPress available.</dd>
	<dt><a href="https://wordpress.org/news/">The WordPress Blog</a></dt>
		<dd>This is where you&#8217;ll find the latest updates and news related to WordPress. Recent WordPress news appears in your administrative dashboard by default.</dd>
	<dt><a href="https://planet.wordpress.org/">WordPress Planet</a></dt>
		<dd>The WordPress Planet is a news aggregator that brings together posts from WordPress blogs around the web.</dd>
	<dt><a href="https://wordpress.org/support/forums/">WordPress Support Forums</a></dt>
		<dd>If you&#8217;ve looked everywhere and still cannot find an answer, the support forums are very active and have a large community ready to help. To help them help you be sure to use a descriptive thread title and describe your question in as much detail as possible.</dd>
	<dt><a href="https://make.wordpress.org/support/handbook/appendix/other-support-locations/introduction-to-irc/">WordPress <abbr>IRC</abbr> (Internet Relay Chat) Channel</a></dt>
		<dd>There is an online chat channel that is used for discussion among people who use WordPress and occasionally support topics. The above wiki page should point you in the right direction. (<a href="https://web.libera.chat/#wordpress">irc.libera.chat #wordpress</a>)</dd>
</dl>

<h2>Final Notes</h2>
<ul>
	<li>If you have any suggestions, ideas, or comments, or if you (gasp!) found a bug, join us in the <a href="https://wordpress.org/support/forums/">Support Forums</a>.</li>
	<li>WordPress has a robust plugin <abbr>API</abbr> (Application Programming Interface) that makes extending the code easy. If you are a developer interested in utilizing this, see the <a href="https://developer.wordpress.org/plugins/">Plugin Developer Handbook</a>. You shouldn&#8217;t modify any of the core code.</li>
</ul>

<h2>Share the Love</h2>
<p>WordPress has no multi-million dollar marketing campaign or celebrity sponsors, but we do have something even better&#8212;you. If you enjoy WordPress please consider telling a friend, setting it up for someone less knowledgeable than yourself, or writing the author of a media article that overlooks us.</p>

<p>WordPress is the official continuation of <a href="https://cafelog.com/">b2/caf&#233;log</a>, which came from Michel V. The work has been continued by the <a href="https://wordpress.org/about/">WordPress developers</a>. If you would like to support WordPress, please consider <a href="https://wordpress.org/donate/">donating</a>.</p>

<h2>License</h2>
<p>WordPress is free software, and is released under the terms of the <abbr>GPL</abbr> (GNU General Public License) version 2 or (at your option) any later version. See <a href="license.txt">license.txt</a>.</p>

</body>
</html>

css-audit's People

Contributors

Stargazers

Watchers

Forkers

laras126 pbrocks danfarrow elizabeth-hw wenxuefeng3930 isabella232 dangerstudios dod92 jgomke fairhopeweb

css-audit's Issues

Automate WP core report generation

We'll want to keep the report up to date, so we should have some way of automatically regenerating the HTML report.

I'm assuming this will be a github action, but the trigger mechanism might need some thought. We'll want to update either on a fixed schedule, or after commits to WordPress/wordpress-develop, and after changes to this repo.

Past work committing back to the repo in a github action: https://github.com/WordPress/twentytwentyone/blob/trunk/.github/workflows/build.yml

Tests

Some tests to make sure the audits are counting things correctly would be good

Update README with WordPress-relevant information

Audit Idea: Detect repeated rules in the CSS

If we run this over a file, it should pull out any place where a property: value; repeats. For example, this should return [ 'border: 1px solid red' ].

.foo {
    padding: 20px;
    border: 1px solid red;
}
.bar {
    padding: 10px;
    border: 1px solid red;
}

Formatter: JSON output should return all counts

In most audits, it shows "Top 10 most used …". This was done to avoid overwhelming the CLI screen from too much information, given how large the results can be on core CSS (even just single reports, like colors).

For the new JSON output (--format=json), this does not need to be human readable, so we can return the full result set for all values.

This might need to change the way audits return report objects.

Use a config file to configure audit options

This came out of discussion around #7, but is a larger idea, hence new issue. The arguments we can pass via CLI are pretty long and generally not very clear. Instead, what if we had a config file (akin to webpack.config.js/eslintrc.js) to set up those rules? It could be a JS/JSON file that describes the desired report (format, audits, etc).

I'm thinking something like this for format, which kind of follows a babel-ish pattern for audits, where you can say the string name of the audit, or an array with the first item as the name, and second as arguments to the audit. This would also address the issue in #7 by allowing for repeating audits with different arguments.

Example:

{
	"format": "html",
	"filename": "wp-admin",
	"audits": [
		"colors",
		"important",
		"display-none",
		"selectors",
		"media-queries",
		[
			"property-values",
			{
				"options": [ "font-size" ]
			}
		],
		[
			"property-values",
			{
				"options": [
					"padding-top",
					"padding-bottom",
					"padding-left",
					"padding-right"
				]
			}
		]
	]
}

We could also allow for a simple file like this— though maybe we should rename all & recommended to preset:all & preset:recommended.

{
	"format": "cli-table",
	"audits": "recommended"
}

Audit update action is not updating the HTML report

Because trunk is protected now, the action bot can't commit to it.

Error: Error: Pushing to https://github.com/WordPress/css-audit
POST git-receive-pack (735 bytes)
remote: error: GH006: Protected branch update failed for refs/heads/trunk.        
remote: error: At least 1 approving review is required by reviewers with write access.        
error: failed to push some refs to 'https://github.com/WordPress/css-audit'

Store audit data on Github (this repo?)

We need get all of the counts again without the .css.orig files, and we could update the Google Doc with the new counts, but it seems like we would benefit from having this data on Github so it is more shareable and we can keep track of history – is that something that could be part of this repo?

In order to automate this vs. manually copy/pasting the data as in the GDoc, it could work something like this (starting to test this out in this WIP PR):

Refactor to return an object of the results that can be used in other scripts
Refactor to move the CLI-specific contents to a cli.js
Create a new CLI argument - css-audit ./wp-admin/* --all --generate-report=wp-admin
--generate-report will output the audit results to an .html file inside public/wp-admin.html

Then public/ can be deployed on Github pages. Thoughts?

Merge action name displaying incorrectly on GitHub actions page

On https://github.com/WordPress/css-audit/actions the merge action displays as a yaml filepath rather than the specified name value:

I think this is because the name value includes a reserved character:
name: Merge trunk -> report

New Audit: Media queries

Number of distinct media queries
Instance counts of each
[Maybe] Distinct sizes (ignoring if there's screen and …)
[Maybe] Flag any media queries that are the same except for screen?

Enable the merge action to be run manually

Add workflow_dispatch: to merge-trunk-to-report.yml

Colors Audit: Check that only colors in the palette are used

This is an idea to improve the colors audit. Core has a fixed color palette, so we could use that list to highlight colors that are not in the set (if any). The palette should work like an allowed-list, flagging anything not on the list.

For example: if #f00 is added, it will show up in the audit, but currently no indication that it shouldn't be there. There could be another section of the Colors report, which lists these non-allowed-list colors:

#f00 found in wordpress/src/wp-admin/css/admin-menu.css, line #33.

Enhancement: Add link back to Github repo in `public/wp-admin.html`

Consider adding a link back to the repo where the public/wp-admin.html is hosted. So users that may directly land on (and consequently Bookmark): https://wordpress.github.io/css-audit/public/wp-admin can find out where the project resides.

Pull request incoming. Thanks for creating this great tool!

Manually trigger the report builder

It's possible to manually trigger actions if they listen for a workflow_dispatch event.

Now that trunk merges don't trigger the report, it would be nice to be able to manually trigger a rebuild.

Audits: Ability to specify groups of properties for property-values audit

For generating the HTML report, we need a way to specify groups of property-values for the reports. This was accomplished with the CLI table by re-running the command with different values, but for the HTML report, we want to get the audit data for multiple groups at one time. One idea for accomplishing this is to specify an external JSON config file that contains the groups of properties to be audited, and that can be passed to the property-values option to process.

A related need is for a higher level grouping of the output of the --property-values audit. For example, we would want the output of these audits to be under a "Typography" heading in the HTML report:

--property-values=font-size
--property-values=line-height
--property-values=font-weight

And similarly, these we might want to have under "Spacing":

--property-values=padding,padding-top,padding-bottom,padding-left,padding-right
--property-values=margin,margin-top,margin-bottom,margin-left,margin-right

This could also be accomplished with the external config approach, but maybe there are other ideas!