FullHuman / postcss-purgecss

PostCSS plugin for purgecss

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Removal of used css more specifically textarea styles

Nathan6969 opened this issue · comments

Purge css is removing textarea styles but all others seem to work

Package.json

{
	"name": "spike-starter-theme",
	"version": "1.0.0",
	"description": "Starter theme for WordPress made for Northern Media Developers to improve site speed, development and ease of editing.",
	"main": "index.js",
	"scripts": {
		"start": "webpack --config webpack.dev.js --watch",
		"build": "webpack --config webpack.prod.js"
	},
	"repository": {
		"type": "git",
		"url": "git+ssh://git@gitlab.com/northern-media/spike.git"
	},
	"author": "Northern Media Devs",
	"license": "ISC",
	"bugs": {
		"url": "https://gitlab.com/northern-media/spike/issues"
	},
	"homepage": "https://gitlab.com/northern-media/spike#README",
	"dependencies": {
		"animejs": "^3.1.0",
		"aos": "^3.0.0-beta.6",
		"browser-sync": "^2.26.7",
		"glob": "^7.1.6",
		"jquery": "^3.4.1",
		"postcss-reporter": "^6.0.1",
		"swiper": "^4.5.0",
		"swup": "^2.0.8",
		"tailwindcss": "^1.1.0",
		"vanilla-lazyload": "^12.0.0",
		"webfontloader": "^1.6.28"
	},
	"devDependencies": {
		"@fortawesome/fontawesome-free": "^5.11.2",
		"@fullhuman/postcss-purgecss": "^1.2.0",
		"autoprefixer": "^9.6.1",
		"browser-sync-webpack-plugin": "^2.2.2",
		"clean-webpack-plugin": "^3.0.0",
		"css-loader": "^2.1.0",
		"cssnano": "^4.1.10",
		"extract-text-webpack-plugin": "^3.0.2",
		"mini-css-extract-plugin": "^0.8.0",
		"node-sass": "^4.12.0",
		"postcss-import": "^12.0.1",
		"postcss-loader": "^3.0.0",
		"postcss-purgecss": "^1.0.0",
		"postcss-scss": "^2.0.0",
		"precss": "^4.0.0",
		"purgecss": "^1.3.0",
		"purgecss-webpack-plugin": "^1.5.0",
		"sass-loader": "^7.1.0",
		"style-loader": "^0.23.1",
		"webpack": "^4.38.0",
		"webpack-cli": "^3.3.10",
		"webpack-dev-server": "^3.7.2",
		"webpack-merge": "^4.2.1",
		"write-file-webpack-plugin": "^4.5.1"
	}
}

webpack.common.js

const path = require("path");

module.exports = {
	entry: "./resources/js/main.js"
};

webpack.prod.js

const path = require("path"); //Used to resolve path
const common = require("./webpack.common"); //Used to take influence from base file
const merge = require("webpack-merge"); //Used to merge common base file
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); //Used to write the style.css file
const TailwindExtractor = require("./util/TailwindExtractor");

module.exports = merge(common, {
	mode: "production",
	output: {
		filename: "theme.js",
		path: path.resolve(__dirname, "public/js/")
	},
	plugins: [
		// Writes the styles to style.css
		new MiniCssExtractPlugin({
			filename: "../../style.css"
		})
	],
	module: {
		rules: [
			{
				test: /\.scss$/,
				use: [
					{ loader: MiniCssExtractPlugin.loader }, //Exports the CSS inside theme.js into style.css
					{ loader: "css-loader" }, // Used for the @import in the js file
					{
						loader: "postcss-loader", //Multiple css options to optimise the code
						options: {
							plugins: [
								require("precss"), //Lets you use Sass-like markup and staged CSS features in CSS
								require("tailwindcss"), //Adds Tailwind
								require("autoprefixer"), //Parse CSS and add vendor prefixes to CSS
								require("postcss-import")(), //Allows @ import
								require("cssnano"), //Minify
								require("@fullhuman/postcss-purgecss")({
									content: ["**/*.php"],
									extractors: [
										{
										  extractor: TailwindExtractor,
										  extensions: ['html', 'php']
										}
									],
									rejected: true
								}), //Removes unused css classes
								require("postcss-reporter")({ clearReportedMessages: true })

							]
						}
					},
					{ loader: "sass-loader" } //Compiles SASS to CSS
				]
			}
		]
	}
});

main.scss

@import "base/form";

form.scss

textarea {
    height: 75px;
}

textarea,
input {
    @apply border border-solid border-black py-3 px-4 w-full text-black;
}