All threads / Webpack and Purge CSS

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

Join the discussion

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

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

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

    logo Created with Sketch.

    Ruby on Rails tutorials, guides, and screencasts for web developers learning Ruby, Rails, Javascript, Turbolinks, Stimulus.js, Vue.js, and more. Icons by Icons8

    © 2021 GoRails, LLC. All rights reserved.