# @sumotto/wordpress-js-css-dependency-extraction-webpack-plugin

> WordPress CSS & JS Dependency Extraction Webpack Plugin

Latest version **1.0.1** (published 2022-01-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install @sumotto/wordpress-js-css-dependency-extraction-webpack-plugin
pnpm add @sumotto/wordpress-js-css-dependency-extraction-webpack-plugin
yarn add @sumotto/wordpress-js-css-dependency-extraction-webpack-plugin
bun add @sumotto/wordpress-js-css-dependency-extraction-webpack-plugin
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2022-01-16 |
| First published | 2021-12-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 9.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Sigalin Kirill |
| Maintainers | sumotto |
| Keywords | wordpress, css, js, dependency, extraction, webpack, plugin |

## Links

- npm: https://www.npmjs.com/package/@sumotto/wordpress-js-css-dependency-extraction-webpack-plugin
- Repository: https://github.com/SumoTTo/wordpress-js-css-dependency-extraction-webpack-plugin
- Homepage: https://github.com/SumoTTo/wordpress-js-css-dependency-extraction-webpack-plugin#readme
- Issues: https://github.com/SumoTTo/wordpress-js-css-dependency-extraction-webpack-plugin/issues
- Funding: https://ko-fi.com/SumoTTo
- npm.io page: https://npm.io/package/@sumotto/wordpress-js-css-dependency-extraction-webpack-plugin

## Dependencies (1)

- [json2php](https://npm.io/package/json2php.md) *

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 1.0.1 (latest) — 2022-01-16
- 1.0.0 — 2021-12-05

## README

# WordPress CSS & JS Dependency Extraction Webpack Plugin

This plugin is based
on [WordPress Dependency Extraction Webpack Plugin](https://www.npmjs.com/package/@wordpress/dependency-extraction-webpack-plugin)

But it's different enough from him:

1) Removed settings, this is how they relate to this plugin:

- **outputFormat** - always generates PHP
- **combineAssets** - always combines dependencies
- **combinedOutputFile** - creates assets.php in the folder from webpack `output.path` settings
- **useDefaults** - always true
- **requestToExternal** - not supported
- **requestToHandle** - not supported

2) CSS files have been added to the assets output.

3) The format of assets output has been changed:

```injectablephp
<?php
return array(
	'js'  => array(
		'main' => array(
			'src'       => 'js/main-e365333869a288cf482d.js',
			'deps'      => array( 'wp-polyfill' ), // if option injectPolyfill true
			'ver'       => 'e365333869a288cf482d', // content hash
			'gzip_size' => 12345,
			'in_footer' => true, // always true
		),
	),
	'css' => array(
		'main' => array(
			'src'   => 'css/main-498365b8a8869c337582.css',
			'deps'  => array(), // always empty array for css 
			'ver'   => '498365b8a8869c337582', // chunk hash
			'gzip_size' => 12345,
			'media' => 'all', // always 'all'
		),
	),
);

```

4) In default request and default script handle transformation added `@wordpress/password-strength-meter`

## Installation

You can install the package as follows:

```sh
npm install @sumotto/wordpress-js-css-dependency-extraction-webpack-plugin --save-dev

# or

yarn add @sumotto/wordpress-js-css-dependency-extraction-webpack-plugin --dev
```

## Usage

Require the plugin in your Webpack config:

```js
const WordpressJsCssDependencyExtractionWebpackPlugin = require( '@sumotto/wordpress-js-css-dependency-extraction-webpack-plugin' );

// or

import WordpressJsCssDependencyExtractionWebpackPlugin from '@sumotto/wordpress-js-css-dependency-extraction-webpack-plugin';
```

Add the plugin to your webpack configuration's `plugins` array. As a rule, it should be the last plugin, or rather after
those plugins that generate dependencies.

```js
module.exports = {
	plugins: [
		new WordpressJsCssDependencyExtractionWebpackPlugin( { injectPolyfill: true /* default false */ } ),
	],
}
```

You can include dependencies for example in functions.php of your theme or in your plugin:

```injectablephp
<?php
define( 'THEME_OR_PLUGIN_DIST_PATH', plugin_dir_path( __FILE__ ) . 'dist/' );
define( 'THEME_OR_PLUGIN_DIST_URL', plugin_dir_url( __FILE__ ) . 'dist/' );

// or

define( 'THEME_OR_PLUGIN_DIST_PATH', get_stylesheet_directory() . '/dist/' );
define( 'THEME_OR_PLUGIN_DIST_URL', get_stylesheet_directory_uri() . '/dist/' );

add_action(
	'wp_enqueue_scripts',
	static function () {
		$assets_path = THEME_OR_PLUGIN_DIST_PATH . 'assets.php';
		if ( file_exists( $assets_path ) ) {
			$all_assets = include $assets_path;
			foreach ( $all_assets as $type => $assets ) {
				foreach ( $assets as $handle => $asset ) {
					if ( 'js' === $type ) {
						wp_enqueue_script(
							$handle,
							THEME_OR_PLUGIN_DIST_URL . $asset['src'],
							$asset['deps'],
							$asset['ver'],
							$asset['in_footer']
						);
					} else {
						if ( 14950 < $asset['gzip_size'] ) {
							wp_enqueue_style(
								$handle,
								THEME_OR_PLUGIN_DIST_URL . $asset['src'],
								$asset['deps'],
								$asset['ver'],
								$asset['media']
							);
						} else {
							// This is where we output styles, I don't know if we can properly escape them.
							// phpcs:disabled WordPress.Security.EscapeOutput.OutputNotEscaped
							printf(
								'<style id="%s" media="%s">%s</style>',
								$handle,
								$asset['media'],
								file_get_contents( THEME_OR_PLUGIN_DIST_PATH . $asset['src'] )
							);
							// phpcs:enabled WordPress.Security.EscapeOutput.OutputNotEscaped
						}
					}
				}
			}
		}
	}
);

```

## License

MIT License

---
_Source: https://npm.io/package/@sumotto/wordpress-js-css-dependency-extraction-webpack-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._