How do we import plugins in PostCSS? Most of the articles I found online is using the following syntax:
module.exports = {
plugins: [
require('<plugin_1>'),
require('<plugin_2>')
]
}
But, in some articles like in Tailwind 3 setup guide, the syntax they uses is something like this:
module.exports = {
plugins: {
<plugin_1>: {},
<plugin_2>: {},
}
}
So, as a beginner, I'm confused! Which one should I use? Moreover, if you have any articles explaining how PostCSS is configured, Can you share the link with me!
Related
Error:
ParseError: /node_modules/preact/compat/dist/compat.module.js/jsx-runtime.js
Error: ENOTDIR: not a directory, open 'node_modules/preact/compat/dist/compat.module.js/jsx-runtime.js'
Issue: When I tried to migrate my react app from react-bootstrap v1 to react-bootstrap v2, I am getting the above error.
root cause: I guess the reason could be because of the aliasing method I use in the rollup.config.js file below. My objective in the below code is to alias react to preact which is working fine till react-bootstrap 1.6.4 but the error arises when I try to update/migrate the existing react-bootstrap 1.6.4 to it's latest version 2.2.3
Code:
`` alias({
entries: [
...['react', 'react-dom'].map(find => (
{ find, replacement: path.resolve(__dirname,'./node_modules/preact/compat/dist/compat.module.js') }
))
]
}), ``
Workaround: tried many workarounds for aliasing react to preact(rollup, webpack etc., from the official documentation provided in preact, but nothing seems to be working. The current preact version I am using is 10.x
My query: Is there a way to resolve this issue? I didn't make any code changes during the migration but the existing rollup config aliasing is breaking. Thanks in advance
You're aliasing incorrectly. The newer version of react-boostrap must use the new(-er) JSX runtime, and your alias is creating a junk path.
Take the following:
import { jsx } from 'react/jsx-runtime';
Your alias sees "react", and converts it to your alias:
import { jsx } from './node_modules/preact/compat/dist/compat.module.js/jsx-runtime';
Which is clearly not right.
You want to use the alias listed on our docs site:
import alias from '#rollup/plugin-alias';
module.exports = {
plugins: [
alias({
entries: [
{ find: 'react', replacement: 'preact/compat' },
{ find: 'react-dom/test-utils', replacement: 'preact/test-utils' },
{ find: 'react-dom', replacement: 'preact/compat' },
{ find: 'react/jsx-runtime', replacement: 'preact/jsx-runtime' }
]
})
]
};
I was starting to work with a web application built with TypeScript/React/Storybook. I noticed when I write a class:
class MyClass {
constructor(public a) { }
}
console.log(MyClass);
and run the unit tests with jest, or using tsc to emit code, it generates the expected JS code like:
function MyClass(a) {
this.a = a;
}
But when I run it in a Storybook app with development server, it prints out the JS code like:
function MyClass(a) {
_classCallCheck(this, MyClass);
}
I'm thinking if it's related to the TypeScript compiler version picked by ts-loader, but cannot figure it out. I checked the TypeScript version installed to my node_modules folder, and it's v4.1.2, which looks nothing wrong with me.
Also I mentioned Playbook here (and left "playbook" in the tags) only because my app is with it. It might not be directly related to this issue.
Seems like an issue with recent versions #babel/preset-typescript if you are using it. You can change your babel configuration to use "#babel/plugin-transform-typescript" plugin instead of #babel/preset-typescript preset.
More info: https://www.gitmemory.com/issue/babel/babel/8752/486541662
If generated by storybook, your babel config probably looks like:
module.exports = {
presets: [
["#babel/preset-env", { targets: { node: "current" } }],
"#babel/preset-typescript",
],
};
Then change it to:
module.exports = {
presets: [["#babel/preset-env", { targets: { node: "current" } }]],
plugins: ["#babel/plugin-transform-typescript"],
};
I'm trying to format code blocks in markdown files for posts to a website with Gatsby.
I would like the code blocks to be displayed in one of VSCode's color themes (Dark +, for instance). I have npm installed gatsby-remark-vscode, and put the plugin in my gatsby-config.js file:
plugins: [
{
resolve: 'gatsby-transformer-remark',
options: {
plugins: [{
resolve: 'gatsby-remark-vscode',
options: {
colorTheme: 'Dark+ (default dark)',
injectStyles: true,
extensions: [{
identifier: 'sdras.night-owl',
version: '1.1.3'
}],
extensionDataDirectory:
path.resolve('extensions'),
logLevel: 'error'
}
}]
}
},
]
I have required 'path' at the top of my gatsby-config.js file:
const path = require('path');
I have imported the stylesheet in my gatsby-browser.js file:
import 'gatsby-remark-vscode/styles.css';
I have used back-ticks to format in my markdown file (the file that contains the blog post) like this:
```js
(CODE EXAMPLE)
```
When I npm run develop, I do not see the correct VSCode formatting for the code block, just a code block similar to what we see on StackOverflow code blocks. I would greatly appreciate any advice on how to render the correct theme in my code blocks.
Oops - looks like I was using a previous version of gatsby-remark-vscode. Updating the version and following the config instructions in the README solved this.
I'm pretty new in React, coming from Angular. I'm writing some tests for the code that's going to send request to an external endpoint. Obviously, I don't want to hardcode a real host in production code so I thought I could use webpack's DefinePlugin to keep this in a constant.
How to configure Webpack and Jest together to use Webpack's capabilities?
It's just like that in your package.json or jest.config.js :
"jest": {
"globals": {
"__DEV__": true
}
}
If you still have any problems, please check the jest offical docs here:
globals-object
As explained in comments:
/globals.js
module.exports = {
__DEV__: true
}
/webpack.config.js
const globals = require('./globals.js')
// ...
plugins: [
new webpack.DefinePlugin(globals)
]
/jest.config.js
const globals = require('./globals.js')
module.exports = {
// ...
globals,
}
I've tried to go through a dozen or so different searches and read the docs on css-loader but I believe they aren't up to date.
I'm also trying to learn our react code and conventions coming from front end javascript / jquery so this is new for me.
What I want to do is take our css and minimize it using css-loader but I don't know how to do this from what I've read.
A piece of our current code looks like this - prod.config.js :
import webpack from 'webpack';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import PurifyCSSPlugin from 'purifycss-webpack-plugin';
import baseConfig from './base.config';
const PUBLIC_PATH = '//d1yepz0pwej23y.cloudfront.net/assets/' + process.env.TRAVIS_BUILD_NUMBER + '/';
export default {
...baseConfig,
output: {...baseConfig.output, publicPath: PUBLIC_PATH },
module: {
loaders: [
...baseConfig.module.loaders, {
test: /\.(woff|woff2|eot|ttf|otf|svg)(\?v=[0-9].[0-9].[0-9])?$/,
loader: 'file?name=[sha512:hash:base64:7].[ext]',
exclude: /node_modules\/(?!font-awesome)/
}, {
test: /\.(jpe?g|png|gif|svg)$/,
loader: 'file?name=[sha512:hash:base64:7].[ext]!image?optimizationLevel=7&progressive&interlaced',
exclude: /node_modules\/(?!font-awesome)/
}, {
test: /\.css$/,
loader: ExtractTextPlugin.extract('style', 'css?sourceMap!postcss'),
exclude: /node_modules/
}
]
},
plugins: [
// extract css
new ExtractTextPlugin('[name]-[chunkhash].css'),
// set env
new webpack.DefinePlugin({
'process.env': {
BROWSER: JSON.stringify(true),
NODE_ENV: JSON.stringify('production')
}
}), ...
...baseConfig.plugins
]
};
Is this enough to give me a suggestion on how to make this work? Or suggest where i can get some more info?
The docs say that I should require the css like this:
require("css-loader?minimize!./file.css")
but I'm not sure how to implement.
Thanks!
Update:
So after trying out what #Brandon mentioned, I actually saw code in our entry already that require's the css file.
if (process.env.BROWSER) {
require('styles/app.css');
}
I updated that to:
require('css-loader?minimize!styles/app.css');
but ended up with this error:
ERROR in ./~/css-loader?minimize!./app/styles/app.css
Module build failed: CssSyntaxError: /css-loader!/Users/homeImac/workspace/node_modules/style-loader/index.js!/Users/homeImac/workspace/node_modules/css-loader/index.js?sourceMap!/Users/homeImac/workspace/node_modules/postcss-loader/index.js!/Users/homeImac/workspace/app/styles/app.css:5:1: Unknown word
but that word is #import, does this make sense? If you guys can enlighten me on why this error is appearing, I'd appreciate it.
Thanks again!
So after trying to find solutions that solve the problem with loaders, I decided to look for another solution. A plugin called Purify CSS Plugin ended up being the answer.
new PurifyCSSPlugin({
purifyOptions: { info: true, minify: true }
})
Using the loader brought on a 'unknown word' error. Everything I tried either shifted the unknown word or did nothing to change the situation. All the folks online seemed to not be able to overcome this issue either.
Just proves the fact that there is usually more than one way to fix a problem.
put that require statement in one of your app's JavaScript source files. If it is a "global" css file, then your app's main entry JS file is a good candidate.
e.g. in app.js:
require("css-loader?minimize!./file.css"); // tell webpack about your css dependency so it can load and minimize it