Ask A Question

Notifications

You’re not receiving notifications from this thread.

Webpack and Purge CSS

Stephen Sizer asked in Javascript

Hi All,

I am trying to purge my css as I am using tailwind as outlined in the video Chris did. I'm getting an error.

postcss.config.js
let environment = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
require('postcss-import'),
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009'
},
stage: 3
}),
require('@fullhuman/postcss-purgecss')({
content: [
'./app//*.html.erb',
'./app/helpers/
/.rb',
'./app/javascript/
/.js',
'./app/javascript//*.vue',
'./app/javascript/
/*.jsx',
],
defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
})
]
}

module.exports = environment

tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
purge: [],
theme: {
extend: {
colors: {
blue: {
'100': '#D8F0F9',
'200': '#B1E1F4',
'300': '#8AD2EF',
'400': '#63C3EA',
default: '#3CB5E5',
'600': '#36A2CE',
'700': '#3090B7',
'800': '#2A7EA0',
'900': '#246C89',
},
},
},
},
variants: {
textColor: ['responsive', 'hover', 'focus', 'visited', 'disabled'],
backgroundColor: ['responsive', 'hover', 'focus', 'active', 'disabled'],
borderColor: ['responsive', 'hover', 'focus', 'active', 'disabled'],
},
plugins: [],
}

Error:

ERROR in ./node_modules/emoji-mart/css/emoji-mart.css (./node_modules/css-loader/dist/cjs.js??ref--6-1!./node_modules/postcss-loader/src??ref--6-2!./node_modules/emoji-mart/css/emoji-mart.css)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
TypeError: Invalid PostCSS Plugin found at: plugins[5]

(@/Users/stephensizer/Workspace/coach-rx/postcss.config.js)
at /Users/stephensizer/Workspace/coach-rx/node_modules/postcss-load-config/src/plugins.js:72:15
at Array.forEach ()
at plugins (/Users/stephensizer/Workspace/coach-rx/node_modules/postcss-load-config/src/plugins.js:58:13)
at processResult (/Users/stephensizer/Workspace/coach-rx/node_modules/postcss-load-config/src/index.js:33:14)
at /Users/stephensizer/Workspace/coach-rx/node_modules/postcss-load-config/src/index.js:94:14
@ ./node_modules/emoji-mart/css/emoji-mart.css 2:26-138
@ ./app/javascript/src/components/Conversations/Conversation/Conversation.js
@ ./app/javascript/src/store/reducers/conversations.js
@ ./app/javascript/packs/index.jsx

ERROR in ./node_modules/react-dates/lib/css/_datepicker.css (./node_modules/css-loader/dist/cjs.js??ref--6-1!./node_modules/postcss-loader/src??ref--6-2!./node_modules/react-dates/lib/css/_datepicker.css)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
TypeError: Invalid PostCSS Plugin found at: plugins[5]

(@/Users/stephensizer/Workspace/coach-rx/postcss.config.js)
at /Users/stephensizer/Workspace/coach-rx/node_modules/postcss-load-config/src/plugins.js:72:15
at Array.forEach ()
at plugins (/Users/stephensizer/Workspace/coach-rx/node_modules/postcss-load-config/src/plugins.js:58:13)
at processResult (/Users/stephensizer/Workspace/coach-rx/node_modules/postcss-load-config/src/index.js:33:14)
at /Users/stephensizer/Workspace/coach-rx/node_modules/postcss-load-config/src/index.js:94:14
@ ./node_modules/react-dates/lib/css/_datepicker.css 2:26-145
@ ./app/javascript/src/components/Planning/ShortTermPlanForm/ShortTermPlanForm.js
@ ./app/javascript/src/components/Planning/Planning.js
@ ./app/javascript/src/router/Index.js
@ ./app/javascript/src/components/App.js
@ ./app/javascript/packs/index.jsx

ERROR in ./node_modules/tippy.js/dist/tippy.css (./node_modules/css-loader/dist/cjs.js??ref--6-1!./node_modules/postcss-loader/src??ref--6-2!./node_modules/tippy.js/dist/tippy.css)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
TypeError: Invalid PostCSS Plugin found at: plugins[5]

(@/Users/stephensizer/Workspace/coach-rx/postcss.config.js)
at /Users/stephensizer/Workspace/coach-rx/node_modules/postcss-load-config/src/plugins.js:72:15
at Array.forEach ()
at plugins (/Users/stephensizer/Workspace/coach-rx/node_modules/postcss-load-config/src/plugins.js:58:13)
at processResult (/Users/stephensizer/Workspace/coach-rx/node_modules/postcss-load-config/src/index.js:33:14)
at /Users/stephensizer/Workspace/coach-rx/node_modules/postcss-load-config/src/index.js:94:14
@ ./node_modules/tippy.js/dist/tippy.css 2:26-133
@ ./app/javascript/src/components/Client/ClientSidebar/ClientSidebar.js
@ ./app/javascript/src/hoc/coach_layouts/ClientLayout/ClientLayout.js
@ ./app/javascript/src/router/Index.js
@ ./app/javascript/src/components/App.js
@ ./app/javascript/packs/index.jsx

ERROR in ./node_modules/react-images-upload/index.css (./node_modules/css-loader/dist/cjs.js??ref--6-1!./node_modules/postcss-loader/src??ref--6-2!./node_modules/react-images-upload/index.css)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
TypeError: Invalid PostCSS Plugin found at: plugins[5]

(@/Users/stephensizer/Workspace/coach-rx/postcss.config.js)
at /Users/stephensizer/Workspace/coach-rx/node_modules/postcss-load-config/src/plugins.js:72:15
at Array.forEach ()
at plugins (/Users/stephensizer/Workspace/coach-rx/node_modules/postcss-load-config/src/plugins.js:58:13)
at processResult (/Users/stephensizer/Workspace/coach-rx/node_modules/postcss-load-config/src/index.js:33:14)
at /Users/stephensizer/Workspace/coach-rx/node_modules/postcss-load-config/src/index.js:94:14
@ ./node_modules/react-images-upload/index.css 2:26-127
@ ./node_modules/react-images-upload/compiled.js
@ ./app/javascript/src/components/Account/Info/Info.js
@ ./app/javascript/src/components/Account/Account.js
@ ./app/javascript/src/router/Index.js
@ ./app/javascript/src/components/App.js
@ ./app/javascript/packs/index.jsx

ERROR in ./app/javascript/stylesheets/application.scss (./node_modules/css-loader/dist/cjs.js??ref--7-1!./node_modules/postcss-loader/src??ref--7-2!./node_modules/sass-loader/dist/cjs.js??ref--7-3!./app/javascript/stylesheets/application.scss)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
TypeError: Invalid PostCSS Plugin found at: plugins[5]

(@/Users/stephensizer/Workspace/coach-rx/postcss.config.js)
at /Users/stephensizer/Workspace/coach-rx/node_modules/postcss-load-config/src/plugins.js:72:15
at Array.forEach ()
at plugins (/Users/stephensizer/Workspace/coach-rx/node_modules/postcss-load-config/src/plugins.js:58:13)
at processResult (/Users/stephensizer/Workspace/coach-rx/node_modules/postcss-load-config/src/index.js:33:14)
at /Users/stephensizer/Workspace/coach-rx/node_modules/postcss-load-config/src/index.js:94:14
@ ./app/javascript/stylesheets/application.scss 2:26-228
@ ./app/javascript/packs/application.js

Reply
Join the discussion
Create an account Log in

Want to stay up-to-date with Ruby on Rails?

Join 84,387+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.