Skip to content

Commit

Permalink
Upgrade npm dependencies, update readme
Browse files Browse the repository at this point in the history
  • Loading branch information
pavelloz committed Jan 12, 2024
1 parent 683c501 commit 8c0dacb
Show file tree
Hide file tree
Showing 4 changed files with 214 additions and 165 deletions.
107 changes: 63 additions & 44 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,71 +1,90 @@
## 12 January 2024

- Update Readme to reflect pnpm migration
- Upgrade all npm dependencies

## 23 Oct 2023
* Fix async chunk names
* Remove unnecessary dependencies
* Cleanup npm tasks

- Fix async chunk names
- Remove unnecessary dependencies
- Cleanup npm tasks

## 22 Oct 2023
* Add HTML minification in production mode

- Add HTML minification in production mode

## 20 Oct 2023
* [BREAKING] Migrated from `html-webpack-plugin` and its plugins to `html-bundler-webpack-plugin` - Credits: @webdiscus
* CSS is now inlined in production mode. Configurable in webpack.config.js
* Main JS is now inlined in production mode. To load asynchronously make sure to use dynamic import.
* Added second dynamic chunk example - without prefetching

- [BREAKING] Migrated from `html-webpack-plugin` and its plugins to `html-bundler-webpack-plugin` - Credits: @webdiscus
- CSS is now inlined in production mode. Configurable in webpack.config.js
- Main JS is now inlined in production mode. To load asynchronously make sure to use dynamic import.
- Added second dynamic chunk example - without prefetching

## 24 June 2023
* [BREAKING] Removed support for node 14
* [BREAKING] Migrated to pnpm
* [BREAKING] Installed missing optional dependencies (rimraf, cross-env), and changed npm tasks to use them directly instead of npx/pnpx
* [BREAKING] Changed very conservative browserslist string from `last 3 years` to `last 2 versions and >1%`. It will generate more modern build, hopefully smaller and faster. To verify if it satisfies your requirements run `pnpx browserslist "last 2 versions and >1%"` in your terminal and check if browsers you support are there.
* [CI] Sped up Github Actions by caching node_modules
* Upgraded npm dependencies

- [BREAKING] Removed support for node 14
- [BREAKING] Migrated to pnpm
- [BREAKING] Installed missing optional dependencies (rimraf, cross-env), and changed npm tasks to use them directly instead of npx/pnpx
- [BREAKING] Changed very conservative browserslist string from `last 3 years` to `last 2 versions and >1%`. It will generate more modern build, hopefully smaller and faster. To verify if it satisfies your requirements run `pnpx browserslist "last 2 versions and >1%"` in your terminal and check if browsers you support are there.
- [CI] Sped up Github Actions by caching node_modules
- Upgraded npm dependencies

## 12 April 2023
* Upgraded npm dependencies
* Updated kitchen sink
* [CI] Upgraded Github Actions
* [CI] Added Node 18 to the CI build
* [CI] Made github pages publish only on successful builds

- Upgraded npm dependencies
- Updated kitchen sink
- [CI] Upgraded Github Actions
- [CI] Added Node 18 to the CI build
- [CI] Made github pages publish only on successful builds

## 26 May 2022
* Added preview on github pages
* Updates readme to describe TailwindCSS examples in the config
* Upgraded npm dependencies

- Added preview on github pages
- Updates readme to describe TailwindCSS examples in the config
- Upgraded npm dependencies

## 14 April 2022
* Add CSS inlining into html file using webpack plugin - only in production mode
* Small refactor of webpack config

- Add CSS inlining into html file using webpack plugin - only in production mode
- Small refactor of webpack config

## 28 March 2022
* Change build directory from `app` to `dist`
* Do not minify css in `dev` mode
* Do not compile js/css from `node_modules` directory
* Add `src/static` directory for assets not parsed by Webpack loaders
* Add favicon as an example of static file

- Change build directory from `app` to `dist`
- Do not minify css in `dev` mode
- Do not compile js/css from `node_modules` directory
- Add `src/static` directory for assets not parsed by Webpack loaders
- Add favicon as an example of static file

## 18 February 2022
* Remove `mode: 'jit'` setting
* Remove prefix from classes, so it is now default - less friction when using

- Remove `mode: 'jit'` setting
- Remove prefix from classes, so it is now default - less friction when using

## 14 February 2022
* Migrate from `@tailwindcss/custom-forms` to official `@tailwindcss/forms`.
* Include full @tailwindcss/forms demo page as index.html for better debugging and showcase.
* Fix missing index.html in git.
* Migrate to `html-webpack-plugin` to have more options.
* Migrate from livereload to `webpack-dev-server` for speed and convenience.
* Remove postcss-fixes.

- Migrate from `@tailwindcss/custom-forms` to official `@tailwindcss/forms`.
- Include full @tailwindcss/forms demo page as index.html for better debugging and showcase.
- Fix missing index.html in git.
- Migrate to `html-webpack-plugin` to have more options.
- Migrate from livereload to `webpack-dev-server` for speed and convenience.
- Remove postcss-fixes.

## 30 January 2022
* Add index.html to make testing easier. Update tailwind config file to 3.x format. Upgrade all npm dependencies.

- Add index.html to make testing easier. Update tailwind config file to 3.x format. Upgrade all npm dependencies.

## 15 December 2021
* Update to [TailwindCSS 3.0.2](https://github.com/tailwindcss/tailwindcss/releases/tag/v3.0.0)

- Update to [TailwindCSS 3.0.2](https://github.com/tailwindcss/tailwindcss/releases/tag/v3.0.0)

## 7 February 2020
* Update [TailwindCSS to 1.2.0](https://github.com/tailwindcss/tailwindcss/releases/tag/v1.2.0)

- Update [TailwindCSS to 1.2.0](https://github.com/tailwindcss/tailwindcss/releases/tag/v1.2.0)

## 23 January 2020
* Add [Windows support](https://github.com/pavelloz/webpack-tailwindcss-purgecss/commit/83391b03abeb64e9e1c9e4ccc8bf118fe84c788d)
* Add macos and windows to CI
* Remove Node 8 from CI
* Add cross-env and del-cli to fix windows builds

- Add [Windows support](https://github.com/pavelloz/webpack-tailwindcss-purgecss/commit/83391b03abeb64e9e1c9e4ccc8bf118fe84c788d)
- Add macos and windows to CI
- Remove Node 8 from CI
- Add cross-env and del-cli to fix windows builds
67 changes: 36 additions & 31 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,45 +7,50 @@ Build preview is available at: https://pavelloz.github.io/webpack-tailwindcss/

## Usage

1) To use this template, click "Use this template" green button in the top right.
2) Clone the repository to your computer
3) Install dependencies - `npm ci`
4) Configure where your views are in [tailwind.config.js](https://github.com/pavelloz/webpack-tailwindcss-purgecss/blob/master/tailwind.config.js).
1. To use this template, click "Use this template" green button in the top right.
2. Clone the repository to your computer
3. Install dependencies - `pnpm i`
4. Configure where your views are in [tailwind.config.js](https://github.com/pavelloz/webpack-tailwindcss-purgecss/blob/master/tailwind.config.js).

### npm tasks
* `npm start` - runs dev server on `http://localhost:8888` and reloads the browser on changes
* `npm run build` - build assets in production mode, ready to deploy
### npm/pnpm tasks

- `pnpm start` - runs dev server on `http://localhost:8888` and reloads the browser on changes
- `pnpm build` - build assets in production mode, ready to deploy

## Webpack setup includes
* JS and CSS transpilation and minification done by ESBuild (FAST)
* CSS extraction using `mini-css-extract-plugin`
* HTML generation using `html-webpack-plugin`
* Examples:
* Prefetched chunk, if you want to load faster critical parts of your build
* Asynchronously loaded chunks, to block page rendering when loading/parsing/executing
* Named chunks if you dont want your chunks to look like `2aae6c35c94fcfb415dbe95f408b9ce91ee846ed.js`

- JS and CSS transpilation and minification done by ESBuild (FAST)
- CSS extraction using `mini-css-extract-plugin`
- HTML generation using `html-webpack-plugin`
- Examples:
- Prefetched chunk, if you want to load faster critical parts of your build
- Asynchronously loaded chunks, to block page rendering when loading/parsing/executing
- Named chunks if you dont want your chunks to look like `2aae6c35c94fcfb415dbe95f408b9ce91ee846ed.js`

## PostCSS setup includes
* [autoprefixer](https://github.com/postcss/autoprefixer) - Adding vendor prefixes, just in case. See package.json for `browserslist` config
* [postcss-import](https://github.com/postcss/postcss-import) - Support for @imports - just like in SASS

- [autoprefixer](https://github.com/postcss/autoprefixer) - Adding vendor prefixes, just in case. See package.json for `browserslist` config
- [postcss-import](https://github.com/postcss/postcss-import) - Support for @imports - just like in SASS

## TailwindCSS setup includes
* Official [TailwindCSS forms](https://tailwindcss.com/docs/plugins#forms) plugin loaded
* Examples:
* Extending default color palette
* Setting custom font as first in font family declaration
* Custom (`xxl`) breakpoint for responsive purposes
* Custom variant for border width property

- Official [TailwindCSS forms](https://tailwindcss.com/docs/plugins#forms) plugin loaded
- Examples:
- Extending default color palette
- Setting custom font as first in font family declaration
- Custom (`xxl`) breakpoint for responsive purposes
- Custom variant for border width property

## Notes
* Before every build, build directory (`dist`) is deleted to avoid deploying old assets

- Before every build, build directory (`dist`) is deleted to avoid deploying old assets

## Additional resources

* [Tailwind.run](https://tailwind.run/new) - sandbox for quickly mocking/debugging components in isolation
* [TailwindCSS Cheat Sheet](https://nerdcave.com/tailwind-cheat-sheet) - with search. Hopefully will be updated to the latest TailwindCSS version soon
* [VSCode IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) - Custom config aware autocomplete for TailwindCSS
* [Webpack dynamic imports](https://medium.com/front-end-weekly/webpack-and-dynamic-imports-doing-it-right-72549ff49234) - How and why do the dynamic imports. See [`js/app.js`](src/js/app.js) for example.
- [Tailwind.run](https://tailwind.run/new) - sandbox for quickly mocking/debugging components in isolation
- [TailwindCSS Cheat Sheet](https://nerdcave.com/tailwind-cheat-sheet) - with search. Hopefully will be updated to the latest TailwindCSS version soon
- [VSCode IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) - Custom config aware autocomplete for TailwindCSS
- [Webpack dynamic imports](https://medium.com/front-end-weekly/webpack-and-dynamic-imports-doing-it-right-72549ff49234) - How and why do the dynamic imports. See [`js/app.js`](src/js/app.js) for example.

## Github Actions

Expand All @@ -59,7 +64,7 @@ TODO

## TODO

* Migrate to pnpm
* Add node_modules caching in GHA to speed up builds
* Write simple cypress test run on the example, after the deployment
* Split webpack configs into common + dev/prod to avoid pushing to plugins array
- Migrate to pnpm
- Add node_modules caching in GHA to speed up builds
- Write simple cypress test run on the example, after the deployment
- Split webpack configs into common + dev/prod to avoid pushing to plugins array
14 changes: 7 additions & 7 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,16 @@
"build:dev": "cross-env NODE_ENV=development webpack-cli"
},
"devDependencies": {
"@tailwindcss/forms": "^0.5.6",
"@tailwindcss/forms": "^0.5.7",
"autoprefixer": "^10.4.16",
"cross-env": "^7.0.3",
"css-loader": "^6.8.1",
"css-loader": "^6.9.0",
"esbuild-loader": "^4.0.2",
"html-bundler-webpack-plugin": "^2.15.0",
"postcss": "^8.4.31",
"postcss-import": "^15.1.0",
"postcss-loader": "^7.3.3",
"tailwindcss": "^3.3.3",
"html-bundler-webpack-plugin": "^3.4.7",
"postcss": "^8.4.33",
"postcss-import": "^16.0.0",
"postcss-loader": "^7.3.4",
"tailwindcss": "^3.4.1",
"webpack": "^5.89.0",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^4.15.1"
Expand Down
Loading

0 comments on commit 8c0dacb

Please sign in to comment.