Removal of used css more specifically textarea styles
Nathan6969 opened this issue · comments
Nathan6969 commented
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;
}