Do not use require() to import the PostCSS Plugins. Basically, you need both gulp-postcss and postcss plugins in your dependencies for this to work correctly. In our code we used some mixins in the src/components/comp1.css file. Hello Guys, How are you all? Works for me - was not able to add "post-css" package via terminal but after adding the line manually into package.json and reinstalling everything was fine. npm install postcss-flexbugs-fixes postcss-preset-env. Install this addon by adding the @storybook/addon-postcss dependency:. Duress at instant speed in response to Counterspell, Ackermann Function without Recursion or Stack. How can I explain to my manager that a project he wishes to undertake cannot be performed by the team? freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. What tool to use for the online analogue of "writing lecture notes on a blackboard"? Here we will only cover the "rules" option which lets you define are the rules that the linter should looks for and gives errors when they are not followed. Some parts will be altered to reduce the size as much as possible, like removing unnecessary spaces, new lines, renaming values and variables, selectors merged together, and so on. Gatsby is powered by the amazing Gatsby community and Gatsby, the company. The problem was related to postcss-inline-svg, there are dependencies not working with node version 16.14 related to node-sass and grunt-sass. I tried a couple of fixes but none of them work for me. If you use autoprefixer 10 you might stumble upon that problem again, there is a github issue related to that with some links and explanations: https://github.com/postcss/autoprefixer/issues/1358. "@tailwindcss/postcss7-compat": "^2.2.4", "autoprefixer": "^9.8.6", "postcss": "^7.0.35", use these combination. You can navigate through the plugins using the plugin directory on the official PostCSS GitHub page, or using this searchable catalog of PostCSS plugins. If you would prefer to add additional postprocessing to your PostCSS output you can specify plugins in the plugin options: Alternatively, you can use postcss.config.js to specify your particular PostCSS configuration: If you need to override the default options passed into css-loader. Note: Gatsby is using css-loader@^5. npm uninstall tailwindcss @tailwindcss/postcss7-compat "postcss-flexbugs-fixes": "4.2.1", and rerunning yarn. Connect and share knowledge within a single location that is structured and easy to search. Launching the CI/CD and R Collectives and community editing features for object Object is not a PostCSS plugin - error while building nrwl library project. If you're using tailwindcss@2 there's no need to keep this module, tw2 dropped IE support anyways. I'm still getting this error. I am using rollup-plugin-postcss to run my plugin. Is it ethical to cite a paper without fully understanding the math/methods, if the math is not relevant to why I am citing it? IDE: viscode Economy picking exercise that uses two consecutive upstrokes on the same string, The number of distinct words in a sentence. You use it to parse and add vendor prefixes like -webkit, -moz, and -ms to CSS rules using values from the Can I Use website. If you want, you can write your own custom plugins. Do EMC test houses typically accept copper foil in EUT? Find centralized, trusted content and collaborate around the technologies you use most. You may have already been using PostCSS without knowing it. But until then, you may need to downgrade some PostCSS plugins to avoid errors. In this example css-loader is configured to output classnames as is, instead of converting them to camel case. As our project gets bigger, we are more likely to add more plugins. Sign in Why does Jesus turn to the Father to forgive in Luke 23:34? Then we need to install a specific plugin @lodder/grunt-postcss to let us run PostCSS using Grunt through the following command: Inside the initCnfig function we set up our PostCSS configuration. Therefore, you'll want to use it with a PostCSS runner that prints warnings or another PostCSS plugin whose purpose is to format and print warnings (e.g. Type: type esModule = boolean; Default: true. Update PostCSS or downgrade this plugin. We use the Can I Use website to see which browsers support a CSS feature with their versions. Thank you. @sfmskywalker Thank you! Storybook Addon PostCSS. How To Solve Error: PostCSS plugin tailwindcss requires PostCSS 8 ? By clicking Post Your Answer, you agree to our terms of service, privacy policy and cookie policy. Ok, to me was fixed removing package-lock.json and installing: Dependecies object and version can be modified directly in the package.json file and it work, These steps worked for me. Ask your environment to update PostCSS or downgrade plugins. Find centralized, trusted content and collaborate around the technologies you use most. Simply prepend .module to the extension. What are some tools or methods I can purchase to trace a water leak? How does a fan in a turbofan engine suck air in? Sign up for a free GitHub account to open an issue and contact its maintainers and the community. If you need to pass options to PostCSS use the plugins options; see postcss-loader for all available options.. PostCSS is a Node.js tool that transforms your styles using JavaScript plugins.It generates more downloads per week on NPM than other CSS preprocessors like Sass, Less, and Stylus combined. Is the Dragonborn's Breath Weapon from Fizban's Treasury of Dragons an attack? in April 2021, this was the only combination working for me without error in a react-tailwind setup, probably due to the tailwind-compat-build. Browse other questions tagged, Where developers & technologists share private knowledge with coworkers, Reach developers & technologists worldwide. I am getting this error whenever I run npm start. if(typeof ez_ad_units!='undefined'){ez_ad_units.push([[580,400],'exerror_com-box-4','ezslot_3',109,'0','0'])};__ez_fad_position('div-gpt-ad-exerror_com-box-4-0');Just uninstall Tailwind and re-install using the compatibility build instead: The compatibility build is identical to the main build in every way, so you arent missing out on any features or anything like that. Example in my case for a project based on webpack need just to update those dependencies: So you do not need to downgrade autoprefixer :), Using the official solution fix for PostCSS 7 compatibility build. Browser: chrome latest Note: It is very important to add the postcss-import plugin at the top of our list since it is required by the documentation. Also, the preset-env plugin includes by default the Autoprefixer plugin and the browsers option will be passed to it automatically. If you read this far, tweet to the author to show them you care. Add any other context about the problem here. You also need to install any plugins included in your custom configuration manually, i.e. with customizable configuration. Well occasionally send you account related emails. Create a PostCSS Configuration File The postcss command will become long and. Here is the Gruntfile.js task: Here is the package.json 's devDependencies: I tried reverting to an earlier version of autoprefixer, or moving the postcss to a peerDependency, but these possible fixes I found did not work. In order to use the arbitrary value syntax (with the square brackets), you need to enable JIT mode and ensure you are on Tailwind 2.1 or greater. Thanks! To subscribe to this RSS feed, copy and paste this URL into your RSS reader. PostCSS can now be run using a shorter command: npx postcss ./src/scss/main.scss \ --output ./build/css/main.css \ --env development \ --verbose. esModule. Help me understand the context behind the "It's okay to be white" question in a recent Rasmussen Poll, and what if anything might these results show? To turn this off, setinlineCritical to false. Have a question about this project? webpack 4 mini-css-extract-plugin See my current setup below, so you can see what I'm trying to do. PostCSS is also used by other technologies like Vite and Next.js, as well as the CSS framework TailwindCSS which is a PostCSS plugin. To customize browserslist, create a browserslist key in your package.json like so: You can use the browsersl.ist tool to visualize what browsers you are targeting. First, we need to install grunt locally into the dev dependencies: Now we need to create a file in the root of our project and name it Gruntfile.js. How to properly visualize the change of variance of a bivariate Gaussian distribution cut sliced along a fixed variable? Asking for help, clarification, or responding to other answers. See the Tailwind docs for more info on JIT mode. It happens if you use PostCSS 7 with PostCSS 8 plugins. Asking for help, clarification, or responding to other answers. Note: Gatsby is using css-loader@^5.0.0. npm install postcss-flexbugs-fixes postcss-preset-env. Gulp error: The following tasks did not complete: Did you forget to signal async completion? Thank You For Your Valuable words. When you use it and how (stand-alone or in conjunction) depends on your project needs. PTIJ Should we be afraid of Artificial Intelligence? I have an issue while building a project, this error keeps popping up: So at the moment, removing that plugin is the only solution. SyntaxError: invalid syntax to repo init in the AOSP code, [Solved] Fix the upstream dependency conflict installing NPM packages, [Solved] (node:9374) Warning: To load an ES module, set type: module. This has been haunting me for what feels like years. To Solve Error: PostCSS plugin tailwindcss requires PostCSS 8 Just uninstall Tailwind and re-install using the compatibility build instead. We first define the mixin using the keyword @defin-mixin followed by the mixin name. If you need to override the default options passed into css-loader. This helps us determine whether we need to add a prefix or not. To learn more, see our tips on writing great answers. You signed in with another tab or window. We can configure our command to run in PostCSS CLI with different options to get our desired result. yarn add -D @storybook/addon-postcss as in example? Version 8.3.0. For example: In the following configuration the plugin postcss-preset-env is used, which is not installed by default. To finish our configuration, we need to load our plugin using the grunt.loadNpmTasks method. If we want only to use the nesting feature, then this plugin is the perfect choice as it produce the same result as the previous plugin. It contains nice detail about how the error occurred, and the solution is quite simple. I had a similar error on building a Grafana plugin, but the dependencies are internal to the plugin (I cant update them).However, it worked for me just by using **yarn** instead of **npm**. Browse other questions tagged, Where developers & technologists share private knowledge with coworkers, Reach developers & technologists worldwide. If you are running into a similar issue, please create a new issue with the steps to reproduce. To enable CSS Modules for a file, rename the file to have the extension .module.css. You also need to install any plugins included in your custom configuration manually, i.e. Connect and share knowledge within a single location that is structured and easy to search. PostCSS plugin that helps you protect your CSS code by obfuscating class names and divs. This actually worked. Why do we kill some animals but not others? What tool to use for the online analogue of "writing lecture notes on a blackboard"? This is a minifier used to reduce the final CSS file size as much as possible so your code is ready for a production environment. What factors changed the Ukrainians' belief in the possibility of a full-scale invasion between Dec 2021 and Feb 2022? The solution is simply to remove the ,'s: Postcss-sass-color-functions is no longer maintained as mentioned in their repository. Okay so as per postcss-custom-media CHANGELOG importFrom was added only in 7.0.0 while my cssnext uses 6.0.0. All Rights Reserved. Tweet a thanks, Learn to code for free. I am not sure about this but can you try installing postcss as a dependency? You must explicitly configure each rule to turn it on. See PR #20096 and the Style preprocessoroptions section of Angular workspace configuration. If you did the latter, what you can do is deleting the installed dependency and install the correct one. Downgrade autoprefix (has a postcss-related bug documented here: https://tailwindcss.com/docs/installation#post-css-7-compatibility-build, Click on 'clone repository or download zip'. Then in onceExit event I get the resultant CSS using root.toResult ().css. in your entire project by configuring autoprefixer with the configuration shown below (collapsed). It also produces fast build times compared with other preprocessors. Partner is not responding when their writing is needed in European project application. Why did the Soviets not shoot down US spy satellites during the Cold War? Following TailwindCSS' guide fixed the issue for me: https://tailwindcss.com/docs/installation#post-css-7-compatibility-build. To Solve Error: PostCSS plugin tailwindcss requires PostCSS 8 Just uninstall Tailwind and re-install using the compatibility build instead. In the root directory of your project, create a file and name it postcss.config.js. Autoprefixer uses Browserslist, so you can specify the browsers you want to target in your project with queries. Connect and share knowledge within a single location that is structured and easy to search. Extreme forensic Googling lead us to this GitHub post here: https://github.com/jgthms/bulma/issues/1190#issuecomment-356672849. You can see that it is very similar to the way that we use the @import method in Sass. Donations to freeCodeCamp go toward our education initiatives, and help pay for servers, services, and staff. As CSSNext is deprecated I will switch to postcss-preset-env. Does Cast a Spell make you a spellcaster? 542), How Intuit democratizes AI development across teams through reusability, We've added a "Necessary cookies only" option to the cookie consent popup. The second solution worked out perfectly. Its all Aboutthis issue. Whenever there is an error, like importing file that does not exist (wrong path), I get this error . I think that one of your other packages is not compatible with PostCSS v8 - it probably requires PostCSS v7. To subscribe to this RSS feed, copy and paste this URL into your RSS reader. It also produces fast build times compared with other preprocessors. This plugin depends on the values you provides for the "browserslist" to show the correct styles for the HTML elements. The --watch option watches the files for any changes and recompiles them. By clicking Accept all cookies, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy. Exit status 1, sh: 1: tailwind: not found when run npm start. Suppress the build warning in your Nuxt config; We recommend suppressing the build warning in your Nuxt config because it allows variable-columns to still work, and this option is good unless you require to support old browsers that don't support scoped CSS variables. rev2023.3.1.43269. And that's it.Thank you for sticking with me through here and also check tailwindcss.com doc for more concepts. Have to run gulp more than once to get Style changes, Stylesheet not loaded because of MIME type, How to fix "ReferenceError: primordials is not defined" in Node.js, Gulp stopped working after over a year of working fine, now gives "The term 'gulp' is not recognized" error in command line, Error: PostCSS plugin autoprefixer requires PostCSS 8. Happy Coding :). What factors changed the Ukrainians' belief in the possibility of a full-scale invasion between Dec 2021 and Feb 2022? Setting up the source file and destination file in the. It has an ecosystem of 356 plugins (as of writing this article). 1 Answer Sorted by: 0 The problem was related to postcss-inline-svg, there are dependencies not working with node version 16.14 related to node-sass and grunt-sass. Nuxt.js official website has recommended use of create-nuXT-app command to create a nuXT project, Windows, please recommend using CMD, do not use Git Bash (because some needless direction keys when using git bash, you can't see you now. We can configure our Browserslist in the package.json file using a browserslist key: The defaults query above is a short version of: Or we can use a .browserslistrc file in the root directory, and inside it we type our configurations. to your account, Environment: Note: No rules are turned on by default and there are no default values. Instead you can change inlineCritical to false which you can do by setting something like this. Making statements based on opinion; back them up with references or personal experience. Node node-sass cmdnpm rebuild node-sass 1Node webstormNodeBUG 9 - 1.4.1 - a CSS package on npm - Li. Did the residents of Aneyoshi survive the 2011 tsunami thanks to the warnings of a stone marker? By clicking Post Your Answer, you agree to our terms of service, privacy policy and cookie policy. Open a URL in a new tab (and not a new window). Now what script should I write in the next.config.js to build this page. By clicking Sign up for GitHub, you agree to our terms of service and This was from github. Mixins allow you to define styles that can be re-used throughout your code. The solution is simply to remove the ,'s: & a How To Properly Install Python Libraries. Add marketing analytics without the performance hit: join us Thursday, npm install postcss gatsby-plugin-postcss. Removing the package-lock did it for me. The text was updated successfully, but these errors were encountered: autoprefixer@10.0.0 breaks next's postcss loader on start, I rolled back to autoprefixer@9.8.6 and the issue was resolved, Maybe related: webpack-contrib/postcss-loader#482, To fix this issue Next.js need to update PostCSS 7 to 8, I created a separated issue about updating to PostCSS 8 #17242. For every plugin used, we need to write its name down after the --use keyword in the command above which makes it incredibly long and not a good practice. You can learn more about Next.js' CSS Module support here. Thanks for contributing an answer to Stack Overflow! Update PostCSS or downgrade this plugin, Error: PostCSS plugin tailwindcss requires PostCSS 8, Am I being scammed after paying almost $10,000 to a tree company not being able to withdraw my profit without paying a fee. PostCSS Features and Benefits. Thank you! The Storybook PostCSS addon can be used to run the PostCSS preprocessor against your stories in Storybook.. Getting Started. Ackermann Function without Recursion or Stack. privacy statement. Move the plugin code to the Once method. To test this plugin, we have added some CSS rules that need some prefixes in the src/components/comp2.css file: Based on our previous "browserslist" settings, the final output will be: This plugin enables us to use modern CSS (like nesting and custom media queries) in our code, by converting it to Vanilla CSS which can be understood by browsers. Plugins must be provided as strings. Do one thing, and do it well. That finally fixed the issue for me. PostCSS has been out there since 2015, and it is very popular among CSS preprocessors. When running yarn dev it returns the following error: I have tried using .json instead of .js, that did not resolve the issue. You need to install the autoprefixer package and do this: For anyone facing the above issue while setting up a react project with tailwindcss, running npm i postcss -D worked for me. Have a question about this project? PostCSS is also used by other technologies like Vite and Next.js, as well as the CSS framework TailwindCSS which is a PostCSS plugin. Box-Sizing: Border-Box Doesn't Fix, About Us | Contact Us | Privacy Policy | Free Tutorials. Share Improve this answer Follow Designed by Colorlib. Update PostCSS or downgrade this plugin, https://tailwindcss.com/docs/installation#post-css-7-compatibility-build, github.com/tailwindlabs/tailwindcss/discussions/3575, The open-source game engine youve been waiting for: Godot (Ep. Here are some things to note: --verbose is . Inside the package.json file in the "scripts", we need to type the following: The above command will create a new directory called 'public' which contains our final Vanilla CSS file, which has the same name as the source file (style.css). extra benefit: now you can suddenly use parameters inside your autoprefixer: ` .pipe(postcss([ autoprefixer({browsers: ['iOS ']}) ]))`, PostCSS error: [object Object] is not a PostCSS plugin, https://github.com/postcss/autoprefixer/issues/1358, The open-source game engine youve been waiting for: Godot (Ep. Return an object with postcssPlugin property containing a plugin name and the Once method. Does anyone have an idea when we might be able to move off the compatibility build? Making statements based on opinion; back them up with references or personal experience. Before starting with the code, I highly recommend that you follow these steps: One of the basic and most important plugins to use is postcss-import. , please create a file, rename the file to have the extension.module.css is very similar to warnings... -- watch option watches the files for any changes and recompiles them with me through and! Of a bivariate Gaussian distribution cut sliced along a fixed variable me for what feels like.! To load our plugin using the compatibility build instead content and collaborate around the technologies you most... This far, tweet to the tailwind-compat-build problem was related to node-sass and grunt-sass downgrade... Purchase to trace a water leak with coworkers, Reach developers & technologists worldwide full-scale between. The problem was related to postcss-inline-svg, there are dependencies not working with version! Window ) see our tips on writing great answers feels like years so as postcss-custom-media... The compatibility build Next.js, as well as the CSS framework tailwindcss which is PostCSS. 'S no need to downgrade some PostCSS plugins to avoid errors Tailwind for... Policy | free Tutorials custom plugins, I get the resultant CSS root.toResult. A fan in a new tab ( and not a new tab ( and a! To open an issue and contact its maintainers and the community browsers option will be passed to automatically! Can learn more about Next.js ' CSS module support here as our project gets bigger, we more. Technologies you use PostCSS 7 with PostCSS 8 2011 tsunami thanks to the way that we use can! This GitHub Post here: https: //github.com/jgthms/bulma/issues/1190 # issuecomment-356672849 ; m trying to do 're using tailwindcss @ ``... About this but can you try installing PostCSS as a dependency v8 - it probably requires PostCSS Just.: & amp ; a how to Solve error: the following the... And re-install using the grunt.loadNpmTasks method service and this was the only combination working for me error. Our project gets bigger, we are more likely to add a prefix or not has. As a dependency or download zip ' how does a fan in a react-tailwind setup, probably due the... Below ( collapsed ) responding to other answers is needed in European project.! Storybook PostCSS addon can error: true is not a postcss plugin used to run in PostCSS CLI with different options to our! The solution is quite simple was the only combination working for me error. I can purchase to trace a water leak and PostCSS plugins to work correctly number. Root.Toresult ( ).css PostCSS 8 you forget to signal async completion working with node version 16.14 related node-sass... Project needs PostCSS has been haunting me for what feels like years in Storybook.. getting Started community and,! Performed by the mixin name on npm - Li due to the Father to forgive Luke. ) depends on the same string, the preset-env plugin includes by the... By configuring autoprefixer with the configuration shown below ( collapsed ) get jobs as developers Vite and Next.js as! Distinct words in a new tab ( and not a new window ) ; default true! For servers, services, and it is very popular among CSS preprocessors configuration, we are more to! Browse other questions tagged, Where developers & technologists worldwide account to open an issue and its! Us | contact us | contact us | privacy policy | free Tutorials agree.: the following configuration the plugin postcss-preset-env is used, which is a PostCSS plugin tailwindcss PostCSS! Prefix or not must explicitly configure each rule to turn it on be to! About how the error occurred, and staff notes on a blackboard '' complete: did you forget to async... Cookie policy find centralized, trusted content and collaborate around the technologies you use and... Instead you can do is deleting the installed dependency and install the correct styles the! Am not sure about this but can you try installing PostCSS as a dependency PostCSS v8 - probably. Doc for more concepts gulp error: PostCSS plugin not working with node version 16.14 related to,. 'S no need to install any plugins included in your entire project by configuring autoprefixer with the steps to.! Without error in a new issue with the steps to reproduce for free tsunami thanks the... And also check tailwindcss.com doc for more info on JIT mode them camel... Type: type esModule = boolean ; default: true by the?... File the PostCSS preprocessor against your stories in Storybook.. getting Started when run npm start answers. Run npm start # issuecomment-356672849: type esModule = boolean ; default: true and. Solve error: the following tasks did not complete: did you forget to async! Googling lead us to this GitHub Post here: https: //github.com/jgthms/bulma/issues/1190 # issuecomment-356672849 inlineCritical... Trusted content and collaborate around the technologies you use PostCSS 7 with PostCSS 8 uninstall. Root.Toresult ( ).css Recursion or Stack add more plugins run the PostCSS command will long. And re-install using the keyword @ defin-mixin followed by the mixin name I use to! Why did the latter, what you can see what I & # x27 ; s &! Be passed to it automatically more plugins to signal async completion options passed css-loader. A blackboard '' ; a how to Solve error: the following tasks did complete! Depends on the values you provides for the online analogue of `` writing lecture notes on blackboard... I explain to my manager that a project he wishes to undertake can not be performed by team... Tailwindcss which is not installed by default type: type esModule = boolean ; default: true running... We are more likely to add more plugins to run in PostCSS CLI with options... Us to this RSS feed, copy and paste this URL into your reader. Plugin includes by default and there are no default values as is, instead of converting to... And cookie policy the Once method see that it is very similar to the way we. I get the resultant CSS using root.toResult ( ).css error: true is not a postcss plugin Border-Box does Fix! On the values you provides for the online analogue of `` writing notes. Next.Js ' CSS module support here source file and destination file in the possibility of a full-scale invasion Dec... Us spy satellites during the Cold War build times compared with other.. Statements based on opinion ; back them up with references or personal experience variable. By other technologies like Vite and Next.js, as well as the CSS framework tailwindcss which not. Is quite simple maintained as mentioned in their repository PostCSS 8 install Python Libraries: no rules turned! Technologists share private knowledge with coworkers, Reach developers & technologists worldwide installing PostCSS a. Is the Dragonborn 's Breath Weapon from Fizban 's Treasury of Dragons an?. Kill some animals but not others rule to turn it on whenever there is an error like... Enable CSS Modules for a file, rename the file to have the extension.module.css and error: true is not a postcss plugin, number! Not installed by default in European project application load our plugin using the compatibility build not shoot us. File the PostCSS preprocessor against your stories in Storybook.. getting Started ; a to! What feels like years a fixed variable a blackboard '' 1.4.1 - CSS. As our project gets bigger, we need to install any plugins included in entire. Performance hit: join us Thursday, npm install PostCSS gatsby-plugin-postcss need both and! Script should I write in the possibility of a stone marker is powered by team. Your RSS reader define styles that can be used to run in PostCSS CLI different... And install the correct styles for the online analogue of `` writing lecture on... And this was from GitHub 1Node webstormNodeBUG 9 - 1.4.1 - a CSS package on npm - Li a! Plugins included in your entire project by configuring autoprefixer with the configuration shown below ( ). -- verbose is `` writing lecture notes on a blackboard '', instead of them... Writing is needed in European project application please create a PostCSS plugin without Recursion or.! And re-install using the compatibility build without error in a new tab ( and not a new with. Example css-loader is configured to output classnames as is, instead of them! Npm - Li them work for me without error in a new with... This URL into your RSS reader node-sass 1Node webstormNodeBUG 9 - 1.4.1 - a CSS package npm! @ defin-mixin followed by the mixin name this article ) the @ storybook/addon-postcss dependency: stories in... With PostCSS 8 Just uninstall Tailwind and re-install using the grunt.loadNpmTasks method the problem related. Error whenever I run npm start, tw2 dropped IE support anyways of Dragons an attack the Storybook addon. Section of Angular workspace configuration install PostCSS gatsby-plugin-postcss I explain to my manager a... When run npm start Aneyoshi survive the 2011 tsunami thanks to the author to show the correct styles for online! Am getting this error, you agree to our terms of service, privacy policy and policy! Not be performed by the team suck air in to undertake can not be performed by the team a... Configuration shown below ( collapsed ) URL into your RSS reader me through and! Also used by other technologies like Vite and Next.js, as well as the CSS framework tailwindcss is... Workspace configuration the source file and name it postcss.config.js amazing Gatsby community and Gatsby, the company long.... Error: PostCSS plugin not sure about this but can you try PostCSS...