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 81,149+ developers who get early access to new tutorials, screencasts, articles, and more.

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

    Screencast tutorials to help you learn Ruby on Rails, Javascript, Hotwire, Turbo, Stimulus.js, PostgreSQL, MySQL, Ubuntu, and more.

    © 2024 GoRails, LLC. All rights reserved.