style(eleventy-plugin-styles): formatted code

docs(eleventy-plugin-styles): updated README.md and CHANGELOG.md

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] - 2021-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/compile.ts

@@ -2,8 +2,8 @@ import { readFile } from 'fs/promises';
 import { resolve as resolvePath, normalize, sep } from 'path';
 
 import { render } from 'less';
-import { pipe, tryExecute } from '@fluss/core';
 import { compile, Options } from 'sass';
+import { pipe, tryExecute } from '@fluss/core';
 import {
 	oops,
 	resolve,

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

@@ -1,7 +1,7 @@
 import cssnano from 'cssnano';
-import purgecss from '@fullhuman/postcss-purgecss';
 import autoprefixer from 'autoprefixer';
 import postcss, { AcceptedPlugin } from 'postcss';
+import purgecss from '@fullhuman/postcss-purgecss';
 
 import { StylesPluginOptions, PluginState } from './types';
 

packages/eleventy-plugin-styles/test/bundle.spec.ts

@@ -4,14 +4,14 @@ import mockFs from 'mock-fs';
 
 import { linker } from '@eleventy-packages/common';
 
+import { PluginState } from '../src/types';
 import {
 	findStyles,
 	writeStyleFile,
 	createFileBundler,
 	bindLinkerWithStyles,
 	createPublicUrlInjector,
 } from '../src/bundle';
-import { PluginState } from '../src/types';
 
 const mockDataLinkerOptions = {
 	outputPath: `_site${sep}index.html`,