fix/style-handling

.github/workflows/test.yml

@@ -1,16 +1,15 @@
 name: 'Test'
 
-on: [ 'pull_request', 'push' ]
+on: ['pull_request', 'push']
 
 jobs:
   test:
-
     runs-on: ${{ matrix.os }}
-    
+
     strategy:
       matrix:
-        os: [ 'ubuntu-latest', 'macos-latest', 'windows-latest' ]
-        node-version: [ '16.x' ]
+        os: ['ubuntu-latest', 'macos-latest', 'windows-latest']
+        node-version: ['16.x']
 
     steps:
       - name: 'Checkout repository'

package.json

@@ -54,7 +54,7 @@
 		"debug": "^4.3.4",
 		"husky": "^7.0.4",
 		"jest": "^28.1.3",
-		"mock-fs": "^5.1.4",
+		"mock-fs": "^5.2.0",
 		"prettier": "^2.7.1",
 		"rimraf": "^3.0.2",
 		"rollup": "^2.77.2",

packages/common/src/linker.ts

@@ -69,7 +69,7 @@ export const linker = <Options>({
 				sourcePath: resolve(baseDirectory, normalizedSourceUrl),
 				outputPath: resolve(outputDirectory, publicUrl.slice(1)),
 				originalUrl: sourceUrl,
-				isEdit: true
+				isEdit: true,
 			},
 		};
 	};

packages/eleventy-plugin-cloudflare-image-resizing/README.md

@@ -23,7 +23,7 @@ module.exports = (config) => {
 			mode: 'img', // optional, default
 			directory: 'cloudflare-images', // optional, default
 			bypass: () => process.env.NODE_ENV !== 'production', // optional, default
-			cloudflareURL: () => zone + '/' + 'image' + originalURL // optional, usage example
+			cloudflareURL: () => zone + '/' + 'image' + originalURL, // optional, usage example
 		}),
 	);
 };
@@ -36,18 +36,18 @@ module.exports = (config) => {
    2. _url_ - shortcode outputs only final Cloudflare URL.
    3. _attributes_ - shortcode outputs `<img>` ready to use attributes as the object.
 3. _directory_ is the name of the directory under the _output_ which will contain referenced images.
-	 Plugin copies images from source to the _output_ directory by itself. **Don't use the _addPassthroughCopy_ option
-	 with images that are referenced by the plugin because you may end up with two copies.**
-4. _bypass_ is a function that determines which image URL should be returned either from the Cloudflare service (for 
-	 the production environment, by default) or from the local directory (see directory option). 
-   This function must return a boolean value. If true, a returned URL points to the Cloudflare service, otherwise - 
-	 the local directory.
+   Plugin copies images from source to the _output_ directory by itself. **Don't use the _addPassthroughCopy_ option
+   with images that are referenced by the plugin because you may end up with two copies.**
+4. _bypass_ is a function that determines which image URL should be returned either from the Cloudflare service (for
+   the production environment, by default) or from the local directory (see directory option).
+   This function must return a boolean value. If true, a returned URL points to the Cloudflare service, otherwise -
+   the local directory.
 5. _cloudflareURL_ is a function that allows you to customize your cloudflare URL.
-	 cloudflareURL must have the following arguments: 
-   * _zone_
-   * _domain_
-   * _options_ - cloudflare URL options like: format, quality, width, anim, etc.
-   * _originalURL_ - URL of your image
+   cloudflareURL must have the following arguments:
+   - _zone_
+   - _domain_
+   - _options_ - cloudflare URL options like: format, quality, width, anim, etc.
+   - _originalURL_ - URL of your image
 
 ### Shortcode has the following signature:
 
@@ -64,8 +64,8 @@ const result = cloudflareImage(url, options);
    4. _sizes_ - list of all required image widths for the _srcset_ attribute. (_densities_ shouldn't be defined)
    5. _attributes_ - a map of all additional `<img>` attributes.
    6. _domain_ is the domain that acts as a place from where images are taken.
-			It may be omitted, and in that case, it will be implying that images are hosted on the current domain (which serves
-			the whole website).
+      It may be omitted, and in that case, it will be implying that images are hosted on the current domain (which serves
+      the whole website).
 
 > _srcset_ attribute if defined in the _attributes_ is not used if _densities_ or _sizes_ is provided.
 

packages/eleventy-plugin-cloudflare-image-resizing/test/build_cloudflare_image.spec.ts

@@ -6,13 +6,14 @@ import {
 } from '../src/build_cloudflare_image';
 
 const mockDataCloudflare: Record<
-	'imageOptions' |
-	'imageOptionsWithCloudflareURL' |
-	'imageOptionsWithAttributes' |
-	'imageOptionsDifBypass' |
-	'imageOptionsWithPublicInternetUrl'|
-	'imageOptionsWithPublicInternetUrlDifBypass',
-	BuildCloudflareImageOptions> = {
+	| 'imageOptions'
+	| 'imageOptionsWithCloudflareURL'
+	| 'imageOptionsWithAttributes'
+	| 'imageOptionsDifBypass'
+	| 'imageOptionsWithPublicInternetUrl'
+	| 'imageOptionsWithPublicInternetUrlDifBypass',
+	BuildCloudflareImageOptions
+> = {
 	imageOptions: {
 		normalizedZone: 'https://test.com',
 		normalizedDomain: 'https://test.com/',
@@ -53,7 +54,7 @@ const mockDataCloudflare: Record<
 				.join(',') +
 			URL_DELIMITER +
 			(domain ? domain + URL_DELIMITER : '') +
-			originalURL
+			originalURL,
 	},
 	imageOptionsWithAttributes: {
 		normalizedZone: '',
@@ -130,14 +131,16 @@ const mockDataCloudflare: Record<
 			toHTML: true,
 			disabled: false,
 		},
-	}
+	},
 };
 
 const getQuery = (url: string): string => url.match(/\?([^"]*)/)?.[1] || '';
 
 describe('buildCloudflareImage', () => {
 	it('should return correct image url', () => {
-		const result = buildCloudflareImage(mockDataCloudflare.imageOptions) as string;
+		const result = buildCloudflareImage(
+			mockDataCloudflare.imageOptions,
+		) as string;
 		const query = getQuery(result);
 
 		expect(query).toHaveLength(11);
@@ -147,7 +150,9 @@ describe('buildCloudflareImage', () => {
 	});
 
 	it('should return correct image url (test with custom cloudflareURL)', () => {
-		const result = buildCloudflareImage(mockDataCloudflare.imageOptionsWithCloudflareURL);
+		const result = buildCloudflareImage(
+			mockDataCloudflare.imageOptionsWithCloudflareURL,
+		);
 
 		expect(result).toBe(
 			`<img src="http://localhost:8787/?image=https://test.com/cdn-cgi/image/anim=true,dpr=1,format=auto,quality=85/https://test.com/cloudflare-images/car.b62406a0fe1.jpg"   />`,

packages/eleventy-plugin-pwa-icons/src/update_manifest.ts

@@ -40,7 +40,7 @@ const updateManifest = async ({
 		.then((data) =>
 			promises.writeFile(pathToOutputManifest, data, { encoding: 'utf-8' }),
 		);
-}
+};
 
 export const handleManifest = once(
 	async (

packages/eleventy-plugin-scripts/src/bundle.ts

@@ -133,7 +133,8 @@ export const bundle = async (
 		.then(
 			(validUrls) => {
 				const htmlWithScripts = validUrls.reduce(
-					(text, { input, output }) => text.replace(input, `${output}?${uid()}`),
+					(text, { input, output }) =>
+						text.replace(input, `${output}?${uid()}`),
 					html,
 				);
 

packages/eleventy-plugin-styles/CHANGELOG.md

@@ -1,4 +1,34 @@
-# [1.4.1] - 2021-12-24
+## [1.5.4] - 2023-01-30
+
+### Changed
+
+- Changed the style compilation functionality. Now style files are created relative to the style path and without a hash in the name.
+
+### Fixed
+
+- Resolved the issue of deleting old style files.
+
+### Added
+
+- Added query hash to style URL.
+
+## [1.4.4] - 2022-08-17
+
+### Fixed
+
+- Resolved the path issue for non-English characters.
+
+### Added
+
+- Added testing for plugin functionality.
+
+## [1.4.2 - 1.4.3] - 2022-08-10
+
+### Fixed
+
+- Resolved the issue with folder/file path creation (also fixed for Windows). Closed issue [#9](https://github.com/Halo-Lab/eleventy-packages/issues/9).
+
+## [1.4.1] - 2021-12-24
 
 ### Fixed
 

packages/eleventy-plugin-styles/README.md

@@ -118,11 +118,11 @@ module.exports = (eleventyConfig) => {
 };
 ```
 
-Plugin will assume that path style file is `src/styles/style.scss` 🎉 And after all procedures will put compiled file to `_site/style-[hash].css` and link in HTML will be changed to:
+Plugin will assume that path style file is `src/styles/style.scss` 🎉 And after all procedures will put compiled file to `_site/style.css` and link in HTML will be changed to:
 
 ```html
 <!-- If HTML file is in the same directory if style.css -->
-<link rel="stylesheet" href="/style-[hash].css" />
+<link rel="stylesheet" href="/style.css?[hash]" />
 ```
 
 > `_site` is used just for example. Actually [name of the directory will be up to you](https://www.11ty.dev/docs/config/#output-directory) - plugin will know about it.
@@ -149,7 +149,7 @@ module.exports = (eleventyConfig) => {
 };
 ```
 
-Given above example, stylesheet file will be placed into `_site/styles` directory, and its public path will be `styles/style-[hash].css`.
+Given above example, stylesheet file will be placed into `_site/styles` directory, and its public path will be `styles/style.css`.
 
 Pretty convenient, yes? 🙂
 
@@ -254,8 +254,12 @@ module.exports = (eleventyConfig) => {
 };
 ```
 
+By default, the plugin is disabled, but if you provide options (or an empty object `{}`), the plugin will be applied to the styles.
+
 > Avoid overriding `content` property and `css`, because they are used internally and that may cause unexpected results.
 
+> Note: If multiple pages in your project can reference the same style, when applying `purgeCSS`, it will remove styles that are not used on the pages (depending on the order of page compilation).
+
 ### cssnanoOptions
 
 [cssnano](https://cssnano.co/) is included as a plugin to [PostCSS](https://postcss.org/).

packages/eleventy-plugin-styles/src/bundle.ts

@@ -1,3 +1,4 @@
+import { extname } from 'path';
 import { writeFile } from 'fs/promises';
 
 import { not, awaitedTap } from '@fluss/core';
@@ -21,9 +22,11 @@ export const createFileBundler = ({
 	file,
 	options,
 }: LinkerResult<
-	Omit<NormalizeStepOptions, 'url' | 'css' | 'html'> & GetCompilerOptions
+	Omit<NormalizeStepOptions, 'url' | 'css' | 'html'> &
+		Omit<GetCompilerOptions, 'extension'>
 >) => {
 	const compile = getCompiler({
+		extension: extname(file.sourcePath).substring(1),
 		sassOptions: options.sassOptions,
 		lessOptions: options.lessOptions,
 	});
@@ -62,8 +65,8 @@ export const createPublicUrlInjector =
 	(html: string): string =>
 		html.replace(originalUrl, `${publicUrl}?${uid()}`);
 
-export const findStyles = (html: string) =>
-	rip(html, STYLESHEET_LINK_REGEXP, not(isRemoteLink));
+export const findStyles = (html: string, regex = STYLESHEET_LINK_REGEXP) =>
+	rip(html, regex, not(isRemoteLink));
 
 export const bindLinkerWithStyles =
 	<Options>(linker: Linker<Options>) =>