fullhuman / postcss-purgecss Goto Github PK
View Code? Open in Web Editor NEWPostCSS plugin for purgecss
License: MIT License
PostCSS plugin for purgecss
License: MIT License
Hi all
Got a very strange one here - when I run PurgeCSS, I am seeing more CSS classes being removed then I expect.
I currently have a set up using Tailwind CSS and PurgeCSS. I would put together a demo repo, however the project I am using it in uses the Vue Storefront framework, so it's a bit tricky for me to get it setup sorry, hopefully I will be able to explain the scenario clearly though:
I have the following code in a template - this isn't being called as an additional component and is just coded into a page file:
<section class="intro text-center pt-4 pb-7">
<header-group :level="1" class="text-text-primary">
<template #supertitle>
<span class="text-text-secondary">Your Local</span>
</template>
Fencing & Decking Specialists
</header-group>
</section>
When this is run through PurgeCSS, all classes remain except for the .pt-4
class - in fact a majority of any of my .pt-*
classes seem to be stripped, despite being used on several elements. I have also noticed that I am losing responsive classes too, which Tailwind css defines as i.e. md: bg-blue lg:bg-red
I am currently using ^1.3.0
of the @fullhuman/postcss-purgecss
plugin. My webpack configuration for PurgeCSS is currently:
const purgecss = require('@fullhuman/postcss-purgecss')({
content: [
path.join(themeRoot, '/components/theme/*.vue'),
path.join(themeRoot, '/components/theme/**/*.vue')
],
defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
})
const postcssConfig = {
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: loader => [
require('tailwindcss')(path.join(themeRoot, 'tailwind.config.js')),
require('postcss-flexbugs-fixes'),
require('autoprefixer')({
flexbox: 'no-2009'
}),
...(process.env.NODE_ENV === 'production' ? [purgecss] : [])
]
}
}
This is based on the recommendation from the Tailwind CSS docs.
I understand that there are a few more variables in the way rather then a standard setup, but if anybody has any pointers for me on either of my issues I would be very grateful
Thanks all
This is my postcss.config.js which is used with webpack.
const glob = require('glob-all');
const cssnanoConfig = {
preset: ['default', { discardComments: { removeAll: true } }]
};
module.exports = ({ file, options }) => {
return {
parser: options.enabled.optimize ? 'postcss-safe-parser' : undefined,
plugins: {
autoprefixer: true,
purgecss: {
content: glob.sync([
'app/**/*.php',
'resources/views/**/*.php',
'resources/assets/scripts/**/*.js',
]),
whitelistPatterns: [/^slick/],
},
cssnano: options.enabled.optimize ? cssnanoConfig : false,
},
};
};
But upon building I get this error:
Module build failed: ModuleBuildError: Module build failed: Error: Loading PostCSS Plugin failed: Cannot call a class as a function
Do you know what the problem is?
Many thanks
1.27.6
to 1.27.7
.π¨ View failing branch.
This version is covered by your current version range and after updating it in your project the build failed.
rollup is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
2019-12-01
The new version differs by 4 commits.
c753a7f
1.27.7
1b8a3de
Update changelog
d5651be
Fix incomplete computed property deoptimization (#3267)
d7e3993
Update changelog
See the full diff
There is a collection of frequently asked questions. If those donβt help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot π΄
devDependency
@babel/core was updated from 7.6.4
to 7.7.0
.devDependency
@babel/plugin-proposal-class-properties was updated from 7.5.5
to 7.7.0
.devDependency
@babel/preset-env was updated from 7.6.3
to 7.7.0
.π¨ View failing branch.
This version is covered by your current version range and after updating it in your project the build failed.
This monorepo update includes releases of one or more dependencies which all belong to the babel7 group definition.
babel7 is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
There is a collection of frequently asked questions. If those donβt help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot π΄
1.18.2
to 1.19.0
.π¨ View failing branch.
This version is covered by your current version range and after updating it in your project the build failed.
prettier is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
π Release Notes
There is a collection of frequently asked questions. If those donβt help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot π΄
3.5.1
to 3.6.0
.π¨ View failing branch.
This version is covered by your current version range and after updating it in your project the build failed.
eslint-plugin-flowtype is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
The new version differs by 1 commits.
52b0c00
feat: add rule to make sure that object type that is spread has exact type (#391)
See the full diff
There is a collection of frequently asked questions. If those donβt help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot π΄
Hey guys,
I'm trying to use purgecss with my Webpack by using postcss but nothing's happening.
I'm sure though that postcss is working fine since I tried other plugins like nanocss and autoprefixer and they're working perfectly.
You can have a look at the simple zip project if you'd like.
Don't forget to:
$ npm i
.
postcss.zip
OR
have a look at my config files here.
webpack.config.js
const glob = require("glob");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require("path");
const HtmlWebPackPlugin = require("html-webpack-plugin");
const PATHS = {
src: path.join(__dirname, 'src')
}
module.exports = {
entry: path.join(__dirname, "src", "main.js"),
output: {
filename: "main_bundle.js",
path: path.join(__dirname, "dist")
},
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: "babel-loader"
},
{
test: /\.(svg|jpeg|jpg|gif)$/,
exclude: /node_modules/,
use: {
loader: "file-loader",
options: {
name: "[name].[ext]",
outputPath: "assets"
}
}
},
{
test: /\.(woff|woff2|eot|ttf|png|ico)$/,
loader: 'url-loader?limit=100000'
},
{
test: /\.(sc|c)ss$/,
exclude: /node_modules/,
use: [{
loader: MiniCssExtractPlugin.loader
}, "css-loader", "postcss-loader", "sass-loader", ]
},
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'main.css'
}),
new HtmlWebPackPlugin({
template: "./src/html-template.html",
filename: "./index.html"
})
]
}
postcss.config.js
module.exports = {
plugins: [
require('autoprefixer'),
require("@fullhuman/postcss-purgecss")({
content: ["./src/*.html", "./src/main.js", "./src/main.scss"],
defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+(::)/g) || []
})
// require('cssnano')({
// preset: 'default',
// })
]
}
package.json
{
"name": "tanmiya",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --mode production",
"start": "webpack-dev-server --mode development --open --hot"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.5.5",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/preset-env": "^7.5.5",
"@babel/preset-es2015": "^7.0.0-beta.53",
"@fullhuman/postcss-purgecss": "^1.2.0",
"autoprefixer": "^9.6.1",
"babel-loader": "^8.0.6",
"css-loader": "^3.1.0",
"exports-loader": "^0.7.0",
"file-loader": "^4.1.0",
"glob": "^7.1.4",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"imagemin-gifsicle": "^6.0.1",
"imagemin-jpegtran": "^6.0.0",
"imagemin-optipng": "^7.0.0",
"imagemin-svgo": "^7.0.0",
"imagemin-webpack": "^5.1.0",
"mini-css-extract-plugin": "^0.8.0",
"node-sass": "^4.12.0",
"purgecss-webpack-plugin": "^1.5.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"url-loader": "^2.1.0",
"webpack": "^4.38.0",
"webpack-cli": "^3.3.6",
"webpack-dev-server": "^3.7.2"
},
"dependencies": {
"bootstrap": "^4.3.1",
"compass-mixins": "^0.12.10",
"cssnano": "^4.1.10",
"imagemin-mozjpeg": "^8.0.0",
"jquery": "^3.4.1",
"popper.js": "^1.15.0",
"postcss-loader": "^3.0.0",
"tailwindcss": "^1.1.1"
}
}
I want CSS tree shaking.
Without using VUE it works well by using purgecss-webpack-plugin.
But i want VUE supporting CSS tree shaking,so I choose postcss-purgecss.But STILL DON'T WORK
here is my postcss.config.js
const path = require("path");
module.exports = {
plugins: [
require("@fullhuman/postcss-purgecss")({
content: [
path.join(__dirname, './src/views/*.vue'),
],
}),
....
]
};
Purge css is removing textarea styles but all others seem to work
{
"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://[email protected]/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"
}
}
const path = require("path");
module.exports = {
entry: "./resources/js/main.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
]
}
]
}
});
@import "base/form";
textarea {
height: 75px;
}
textarea,
input {
@apply border border-solid border-black py-3 px-4 w-full text-black;
}
4.3.0
to 4.3.1
.π¨ View failing branch.
This version is covered by your current version range and after updating it in your project the build failed.
eslint-plugin-flowtype is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
The new version differs by 2 commits.
da05064
fix: no-dedupe with setters or getters (#435)
6f71442
docs: Add missing comma in object declaration (#432)
See the full diff
There is a collection of frequently asked questions. If those donβt help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot π΄
Before you open an issue, please check if a similar issue already exists or has been closed before.
Describe the bug
Building a site with Gatsby. Using PurgeCSS as a PostCSS plugin after Tailwind. When PurgeCSS is active, the body
tag is stripped of all styling, and the user-agent (browser) defaults to an 8px margin on all sides.
This despite having
body {
@apply m-0 bg-gray-300 /* tailwind syntax */
}
in my global.css file. As soon as I remove PurgeCSS from the build, everything works fine, the body
margins go to zero and the background is grey.
To Reproduce
module.exports = {
plugins: [
require('tailwindcss'),
require('postcss-nesting'),
require('autoprefixer'),
...process.env.NODE_ENV === 'production' ? [purgecss] : []
],
}
gatsby build
gatsby serve
body
styling. other styles are fine!Expected behavior
Everything else related to PurgeCSS works great. It stripped 600kb out of my bundle. But it appears the body
tag is immune or incompatible or something.
Desktop (please complete the following information):
Additional context
1.14.2
to 1.14.3
.π¨ View failing branch.
This version is covered by your current version range and after updating it in your project the build failed.
prettier is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
π Changelog
There is a collection of frequently asked questions. If those donβt help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot π΄
there is a mono repo now in place, this one is found here:
https://github.com/FullHuman/purgecss/tree/master/packages/postcss-purgecss
I just got confused about this a little bit, would be helpful to close this repo and reference to the new one.
6.5.1
to 6.6.0
.π¨ View failing branch.
This version is covered by your current version range and after updating it in your project the build failed.
eslint is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
39dfe08
Update: false positives in function-call-argument-newline (fixes #12123) (#12280) (Scott O'Hara)4d84210
Update: improve report location for no-trailing-spaces (fixes #12315) (#12477) (Milos Djermanovic)c6a7745
Update: no-trailing-spaces false negatives after comments (fixes #12479) (#12480) (Milos Djermanovic)0bffe95
Fix: no-misleading-character-class crash on invalid regex (fixes #12169) (#12347) (Milos Djermanovic)c6a9a3b
Update: Add enforceForIndexOf option to use-isnan (fixes #12207) (#12379) (Milos Djermanovic)364877b
Update: measure plugin loading time and output in debug message (#12395) (Victor Homyakov)1744fab
Fix: operator-assignment removes and duplicates comments (#12485) (Milos Djermanovic)52ca11a
Fix: operator-assignment invalid autofix with adjacent tokens (#12483) (Milos Djermanovic)0f6d0dc
Fix: CLIEngine#addPlugin reset lastConfigArrays (fixes #12425) (#12468) (Toru Nagashima)923a8cb
Chore: Fix lint failure in JSDoc comment (#12489) (Brandon Mills)aac3be4
Update: Add ignored prop regex no-param-reassign (#11275) (Luke Bennett)e5382d6
Chore: Remove unused parameter in dot-location (#12464) (Milos Djermanovic)49faefb
Fix: no-obj-calls false positive (fixes #12437) (#12467) (Toru Nagashima)b3dbd96
Fix: problematic installation issue (fixes #11018) (#12309) (Toru Nagashima)cd7c29b
Sponsors: Sync README with website (ESLint Jenkins)8233873
Docs: Add note about Node.js requiring SSL support (fixes #11413) (#12475) (Nicholas C. Zakas)89e8aaf
Fix: improve report location for no-tabs (#12471) (Milos Djermanovic)7dffe48
Update: Enable function string option in comma-dangle (fixes #12058) (#12462) (YeonJuan)e15e1f9
Docs: fix doc for no-unneeded-ternary rule (fixes #12098) (#12410) (Sam Rae)b1dc58f
Sponsors: Sync README with website (ESLint Jenkins)61749c9
Chore: Provide debug log for parser errors (#12474) (Brad Zacher)7c8bbe0
Update: enforceForOrderingRelations no-unsafe-negation (fixes #12163) (#12414) (Sam Rae)349ed67
Update: improve report location for no-mixed-operators (#12328) (Chiawen Chen)a102eaa
Fix: prefer-numeric-literals invalid autofix with adjacent tokens (#12387) (Milos Djermanovic)6e7c18d
Update: enforceForNewInMemberExpressions no-extra-parens (fixes #12428) (#12436) (Milos Djermanovic)51fbbd7
Fix: array-bracket-newline consistent error with comments (fixes #12416) (#12441) (Milos Djermanovic)e657d4c
Fix: report full dot location in dot-location (#12452) (Milos Djermanovic)2d6e345
Update: make isSpaceBetweenTokens() ignore newline in comments (#12407) (YeonJuan)84f71de
Update: remove default overrides in keyword-spacing (fixes #12369) (#12411) (YeonJuan)18a0b0e
Update: improve report location for no-space-in-parens (#12364) (Chiawen Chen)d61c8a5
Update: improve report location for no-multi-spaces (#12329) (Chiawen Chen)561093f
Upgrade: bump inquirer to ^7.0.0 (#12440) (Joe Graham)fb633b2
Chore: Add a script for testing with more control (#12444) (Eric Wang)012ec51
Sponsors: Sync README with website (ESLint Jenkins)874fe16
New: pass cwd from cli engine (#12389) (Eric Wang)b962775
Update: no-self-assign should detect member expression with this (#12279) (Tibor Blenessy)02977f2
Docs: Clarify eslint:recommended
semver policy (#12429) (Kevin Partington)97045ae
Docs: Fixes object type for rules
in "Use a Plugin" (#12409) (Daisy Develops)24ca088
Docs: Fix typo in v6 migration guide (#12412) (Benjamim Sonntag)b094008
Chore: update version parameter name (#12402) (Toru Nagashima)e5637ba
Chore: enable jsdoc/require-description (#12365) (Kai Cataldo)d31f337
Sponsors: Sync README with website (ESLint Jenkins)7ffb22f
Chore: Clean up inline directive parsing (#12375) (Jordan Eldredge)84467c0
Docs: fix wrong max-depth example (fixes #11991) (#12358) (Gabriel R Sezefredo)3642342
Docs: Fix minor formatting/grammar errors (#12371) (cherryblossom000)c47fa0d
Docs: Fix missing word in sentence (#12361) (Dan Boulet)8108f49
Chore: enable additional eslint-plugin-jsdoc rules (#12336) (Kai Cataldo)b718d2e
Chore: update issue template with --eslint-fix flag (#12352) (James George)20ba14d
Sponsors: Sync README with website (ESLint Jenkins)566a947
Sponsors: Sync README with website (ESLint Jenkins)070cbd0
Sponsors: Sync README with website (ESLint Jenkins)The new version differs by 53 commits.
879c373
6.6.0
c8ba30a
Build: changelog update for 6.6.0
39dfe08
Update: false positives in function-call-argument-newline (fixes #12123) (#12280)
4d84210
Update: improve report location for no-trailing-spaces (fixes #12315) (#12477)
c6a7745
Update: no-trailing-spaces false negatives after comments (fixes #12479) (#12480)
0bffe95
Fix: no-misleading-character-class crash on invalid regex (fixes #12169) (#12347)
c6a9a3b
Update: Add enforceForIndexOf option to use-isnan (fixes #12207) (#12379)
364877b
Update: measure plugin loading time and output in debug message (#12395)
1744fab
Fix: operator-assignment removes and duplicates comments (#12485)
52ca11a
Fix: operator-assignment invalid autofix with adjacent tokens (#12483)
0f6d0dc
Fix: CLIEngine#addPlugin reset lastConfigArrays (fixes #12425) (#12468)
923a8cb
Chore: Fix lint failure in JSDoc comment (#12489)
aac3be4
Update: Add ignored prop regex no-param-reassign (#11275)
e5382d6
Chore: Remove unused parameter in dot-location (#12464)
49faefb
Fix: no-obj-calls false positive (fixes #12437) (#12467)
There are 53 commits in total.
See the full diff
There is a collection of frequently asked questions. If those donβt help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot π΄
Get an error with the PurgeCss Version 2.0.5 and gulp-postcss
events.js:187 throw er; // Unhandled 'error' event ^ PluginError [TypeError]: Class constructor extractor cannot be invoked without 'new' at extractSelectors (/node_modules/purgecss/lib/purgecss.js:1:2358)
Full Error
at Transform.emit (events.js:210:5) at errorOrDestroy (internal/streams/destroy.js:107:12) at onwriteError (_stream_writable.js:452:5) at onwrite (_stream_writable.js:473:5) at Transform.afterTransform (_stream_transform.js:96:3) at Immediate.<anonymous> (.../node_modules/gulp-postcss/index.js:93:9) at processImmediate (internal/timers.js:439:21) { message: "Class constructor extractor cannot be invoked without 'new'", name: 'TypeError', stack: "TypeError: Class constructor extractor cannot be invoked without 'new'\n" + ' at extractSelectors (.../node_modules/purgecss/lib/purgecss.js:1:2358)\n' + ' at PurgeCSS.extractSelectorsFromFiles (.../node_modules/purgecss/lib/purgecss.js:1:5802)\n' + ' at async .../node_modules/@fullhuman/postcss-purgecss/lib/postcss-purgecss.js:1:501\n' + "Emitted 'error' event on Transform instance at:\n" + ' at Transform.onerror (.../node_modules/readable-stream/lib/_stream_readable.js:640:52)\n' + ' at Transform.emit (events.js:210:5)\n' + ' at errorOrDestroy (internal/streams/destroy.js:107:12)\n' + ' at onwriteError (_stream_writable.js:452:5)\n' + ' at onwrite (_stream_writable.js:473:5)\n' + ' at Transform.afterTransform (_stream_transform.js:96:3)\n' + ' at Immediate.<anonymous> (.../node_modules/gulp-postcss/index.js:93:9)\n' + ' at processImmediate (internal/timers.js:439:21)', __safety: undefined, _stack: undefined, plugin: 'gulp-postcss', showProperties: true, showStack: true, fileName: '.../src/assets/Scss/styles.css'
Hi,
is there some example of how to output rejected to file.
Thanks.
Branch | Build failing π¨ |
---|---|
Dependency | prettier |
Current Version | 1.13.7 |
Type | devDependency |
This version is covered by your current version range and after updating it in your project the build failed.
prettier is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
There is a collection of frequently asked questions. If those donβt help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot π΄
Hi, in my code I use some classes like this:
<li className={`cols-${headers.length}`}>Hello</li>
which I defined for cols-1
, cols-2
, ..., cols-5
.
Purgecss cannot infer this and removes all of these classes from the output.
I'm not sure how purgecss works internally and how feasible it is to detect classes that depend on JS variables.
1.25.2
to 1.26.0
.π¨ View failing branch.
This version is covered by your current version range and after updating it in your project the build failed.
rollup is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
2019-10-27
The new version differs by 5 commits.
53fb6fe
1.26.0
1fad958
Update changelog
1e1a111
Add support for "export * as name from β¦" (#3193)
2f7e064
Remove the need to provide an output name for IIFE bundles (#3181)
b4c8b43
[feat] Adds support for large assets (> 100 MB) (#3194)
See the full diff
There is a collection of frequently asked questions. If those donβt help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot π΄
3.9.0
to 3.9.1
.π¨ View failing branch.
This version is covered by your current version range and after updating it in your project the build failed.
eslint-plugin-flowtype is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
The new version differs by 1 commits.
712d840
fix: requireReadOnlyReactProps (#406)
See the full diff
There is a collection of frequently asked questions. If those donβt help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot π΄
Hi,
I have a problem with preload fonts in a nuxt project.
As result, I would like to have something like that :
<link rel="preload" href="/_nuxt/fonts/5b23eeb.woff2" as="font" type="font/woff2" crossorigin>
..from my nuxt.config.js:
....
css: [
'~assets/css/tailwind.css',
'~assets/fonts/Ubuntu/index.css',
],
...
...
render: {
bundleRenderer: {
shouldPreload: (file, type) => {
if (type === 'font') return /.woff2/.test(file)
return ['script', 'style'].includes(type)
}
}
},
...
Can you help please? THANKS
I see that there was a PR that was merged into master:
Ensure classes beginning with numbers are properly purged #185
However, there is no easy way to install this fix and start using through NPM. Could you release this new version?
Thanks!!
1.14.2
to 1.14.3
.π¨ View failing branch.
This version is covered by your current version range and after updating it in your project the build failed.
rollup is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
2019-06-06
The new version differs by 4 commits.
c68bd95
1.14.3
d79aa57
Update changelog
7179390
Use browser relative path algorithm for chunks (#2902)
b1df517
Add funding button
See the full diff
There is a collection of frequently asked questions. If those donβt help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot π΄
Using Tailwind and Vue webpack starter
class TailwindExtractor {
static extract(content) {
return content.match(/[A-z0-9-:\/]+/g) || [];
}
}
module.exports = {
plugins: [
tailwindcss('./tailwind.js'),
require('autoprefixer')(),
purgecss({
content: [
'./src/**/*.html',
'./src/**/*.vue',
'./src/**/*.styl'
],
extractors: [
{
extractor: TailwindExtractor,
extensions: ["html", "js", "vue"]
}
]
})
]
}
What's the problem?
Hello,
Im using purgecss
(in webpack
, via postcss-loader
) in a big project that has 3 different layouts: old
, transition
and new
.
Old
and transition
i would like to keep intact, and new
one is using tailwindcss
, so obviously i would like to put it through purgecss
.
I know i can do two webpack
configs, but is it possible to do it natively with postcss-purgecss
, or are there any plans in introducing such a feature?
Note: Temporairly ill try to use ignore comments in all the files i want to exclude, but i must say, it would be more convenient to filter them out on a config level. :)
Currently you can only supply options to the plugin with an object. It would be useful if you could also pass a function and call the given setPurgeCssOptions
callback to set the options.
require('@fullhuman/postcss-purgecss')(function(setPurgeCssOptions) {
exec_command('git ls-files js/*.js', function(gitFiles) {
setPurgeCssOptions({
content: toArray(gitFiles),
});
});
});
Our particular use case is we want to build up a list of content files for PurgeCSS to consider but only if it's part of git/version control - as we are calling an async process we need to build the options up asynchronously. It's possible we could do this by creating our own plugin and then hooking into that, but I just thought I'd make this suggestion as it would provide an easier API.
When using pnpm to install my project's dependencies I'm getting the following error:
internal/modules/cjs/loader.js:651
throw err;
^
Error: Cannot find module 'postcss'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:649:15)
at Function.Module._load (internal/modules/cjs/loader.js:575:25)
at Module.require (internal/modules/cjs/loader.js:705:19)
at require (internal/modules/cjs/helpers.js:14:16)
at Object.<anonymous> (/Users/nestor/my-project/node_modules/.registry.npmjs.org/@fullhuman/postcss-purgecss/1.1.0/node_modules/@fullhuman/postcss-purgecss/lib/postcss-purgecss.js:6:31)
at Module._compile (internal/modules/cjs/loader.js:799:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:810:10)
at Module.load (internal/modules/cjs/loader.js:666:32)
at tryModuleLoad (internal/modules/cjs/loader.js:606:12)
at Function.Module._load (internal/modules/cjs/loader.js:598:3)
Installing postcss
manually solves the issue but I'm guessing it's due it not being listed a one of the project's dependencies:
Line 4 in 1a6efc9
The description of this repository should read:
PostCSS plugin for PurgeCSS
not
Purgecss plugin for purgecss
:)
Hello. I have settings
module.exports = {
plugins: [
tailwindcss('./tailwind.js'),
require('autoprefixer')(),
purgecss({
content: [
'./src/components/**/*.vue',
'./src/pages/**/*.vue'
]
})
]
}
After I add purgecss
Tailwind stops working. Using Vue.js webpack starter.
Describe the bug
whitelistPatterns
/whitelistPatternsChildren
defined inside of package.json
files don't work, probably because they are strings, not regexes. The following error is thrown while building:
TypeError: v.test is not a function
To Reproduce
whitelistPatternsChildren
option in package.json via postcss-load-config
.Expected behavior
Strings found inside whitelistPatterns
/whitelistPatternsChildren
should be converted into regexes.
Screenshots
package.json
"postcss": {
"plugins": {
"tailwindcss": "./tailwind.config.js",
"vue-cli-plugin-tailwind/purgecss": {
"whitelistPatternsChildren": ["/^el-/"],
},
"autoprefixer": {}
}
},
Desktop (please complete the following information):
"@fullhuman/postcss-purgecss": "^1.1.0"
1.4.0
to 1.4.1
.π¨ View failing branch.
This version is covered by your current version range and after updating it in your project the build failed.
purgecss is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.
The new version differs by 16 commits.
ed6049b
fix: update node version circleci config
35463d8
fix eslint version
09ba8a5
build v1.4.0
518ada0
1.4.1
4845d5e
Update npmpublish.yml
7bb9a85
Merge pull request #228 from FullHuman/greenkeeper/flow-bin-0.110.0
3c850de
Merge pull request #229 from AlexanderOpran/windows-config-path--fix
08f2199
Replaced path.resolve with path.join in config loading.
8d6a028
Fix the config file path of windows while still using path.resolve.
66385f3
chore(package): update flow-bin to version 0.110.0
a02058d
Merge pull request #221 from FullHuman/greenkeeper/flow-bin-0.107.0
d08ca7e
Merge pull request #210 from n1kk/master
16d0730
Merge remote-tracking branch 'upstream/master'
a8f95ad
chore(package): update flow-bin to version 0.107.0
0a0b921
Update CHANGELOG.md
There are 16 commits in total.
See the full diff
There is a collection of frequently asked questions. If those donβt help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot π΄
It would be helpful to get a list of the selectors that have been purged. This information is available in purgecss.selectorsRemoved. Perhaps, it can be logged to the console?
7.0.21
to 7.0.22
.π¨ View failing branch.
This version is covered by your current version range and after updating it in your project the build failed.
postcss is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.
npm fund
.There is a collection of frequently asked questions. If those donβt help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot π΄
I was just wondering if there has been any thought put into compatibility with the --watch
mode in PostCSS-CLI?
I can't say that I really understand the architecture of PostCSS, having only used it for the last 12 hours, but might it all start working if we push messages for each scanned content file? postcss-import
does it here for example: https://github.com/postcss/postcss-import/blob/master/index.js#L198.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.