FullHuman / postcss-purgecss

PostCSS plugin for purgecss
MIT License
91 stars 5 forks source link

Removal of used css more specifically textarea styles #48

Open Nathan6969 opened 4 years ago

Nathan6969 commented 4 years ago

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;
}