I am trying to update my postcss.config.js file to support two plugins: postcss-nested and postcss-mixins. Tech used: react project, using webpack and npm.
From PostCSS documentation, it says i need to add the plugins as an array and in this StackOverflow post, it similarly says 'the export in the postcss.config.js needs to be an object with a plugins property that holds an array of your plugins.' When i try that, i'm getting linting erros and it seems wrong. Any suggestions welcome.
Old postcss.config.js
module.exports = {
parser: 'postcss-scss',
plugins: {
'precss': {
'import': {
extension: 'pcss',
prefix: '_',
},
},
'postcss-calc': {
mediaQueries: true,
},
},
};
New postcss.config.js
module.exports = {
parser: 'postcss-scss',
plugins: [
require('postcss-mixins'),
require('postcss-nested'),
],
'precss': {
'import': {
extension: 'pcss',
prefix: '_',
},
},
'postcss-calc': {
mediaQueries: true,
},
};
};
One other question: will any of my postcss plugins work if i don't include them in my postcss.config.js file? I am looking at our codebase and seeing many postcss plugins installed (such as autoprefixer) and they are not in the config file...so not sure if that was ever working for us.
Related
I wanted to create a custom plugin for a local databaase in Nuxt.js, after I was done with the code I registered it in nuxt.config.js and it didn't work. So I've tried the example code on docs to see what I was doing wrong, and the thing is, example code didn't work too. Here is how I registered it:
plugins/hello.js
export default ({ app }, inject) => {
inject("hello", msg => console.log(`Hello ${msg}!`));
};
nuxt.config.js
module.exports = {
ssr: false,
target: "static",
head: {
title: "project-title",
meta: [{ charset: "utf-8" }],
},
loading: false,
plugins: [{ ssr: true, src: "#/plugins/icons.js" }, "#/plugins/hello.js"],
modules: ["#nuxtjs/axios", "#nuxtjs/auth-next"],
}
Whenever I try to use this.$hello("something"), Nuxt returns this.$hello is not a function
Hmm, got it. After deleting and reinstalling node_modules it's resolved, then I tried changing the name of the plugin file, after then build failed from ./node_modules/#nuxt/webpack/node_modules/babel-loader/lib/index.js. After reinstalling packages again (deleted .nuxt, node_modules and lock file) issue is resolved.
I am trying to get my first Jest Test to pass with React and Babel.
I am getting the following error:
SyntaxError: /Users/manueldupont/test/avid-sibelius-publishing-viewer/src/components/TransportButton/TransportButton.less: Unexpected token
> 7 | #import '../variables.css';
| ^
My package.json config for jest look like this:
"babel": {
"presets": [
"es2015",
"react"
],
"plugins": [
"syntax-class-properties",
"transform-class-properties"
]
},
"jest": {
"moduleNameMapper": {
"^image![a-zA-Z0-9$_-]+$": "GlobalImageStub",
"^[./a-zA-Z0-9$_-]+\\.png$": "RelativeImageStub"
},
"testPathIgnorePatterns": [
"/node_modules/"
],
"collectCoverage": true,
"verbose": true,
"modulePathIgnorePatterns": [
"rpmbuild"
],
"unmockedModulePathPatterns": [
"<rootDir>/node_modules/react/",
"<rootDir>/node_modules/react-dom/",
"<rootDir>/node_modules/react-addons-test-utils/",
"<rootDir>/node_modules/fbjs",
"<rootDir>/node_modules/core-js"
]
},
So what am I missing?
moduleNameMapper is the setting that tells Jest how to interpret files with different extension. You need to tell it how to handle Less files.
Create a file like this in your project (you can use a different name or path if you’d like):
config/CSSStub.js
module.exports = {};
This stub is the module we will tell Jest to use instead of CSS or Less files. Then change moduleNameMapper setting and add this line to its object to use it:
'^.+\\.(css|less)$': '<rootDir>/config/CSSStub.js'
Now Jest will treat any CSS or Less file as a module exporting an empty object. You can do something else too—for example, if you use CSS Modules, you can use a Proxy so every import returns the imported property name.
Read more in this guide.
I solved this by using the moduleNameMapper key in the jest configurations in the package.json file
{
"jest":{
"moduleNameMapper":{
"\\.(css|less|sass|scss)$": "<rootDir>/__mocks__/styleMock.js",
"\\.(gif|ttf|eot|svg)$": "<rootDir>/__mocks__/fileMock.js"
}
}
}
After this you will need to create the two files as described below
__mocks__/styleMock.js
module.exports = {};
__mocks__/fileMock.js
module.exports = 'test-file-stub';
If you are using CSS Modules then it's better to mock a proxy to enable className lookups.
hence your configurations will change to:
{
"jest":{
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
"\\.(css|less|scss|sass)$": "identity-obj-proxy"
},
}
}
But you will need to install identity-obj-proxy package as a dev dependancy i.e.
yarn add identity-obj-proxy -D
For more information. You can refer to the jest docs
UPDATE who use create-react-app from feb 2018.
You cannot override the moduleNameMapper in package.json but in jest.config.js it works, unfortunately i havent found any docs about this why it does.
So my jest.config.js look like this:
module.exports = {
...,
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
"\\.(scss|sass|css)$": "identity-obj-proxy"
}
}
and it skips scss files and #import quite well.
Backing my answer i followed jest webpack
Similar situation, installing identity-object-proxy and adding it to my jest config for CSS is what worked for me.
//jest.config.js
module.exports = {
moduleNameMapper: {
"\\.(css|sass)$": "identity-obj-proxy",
},
};
The specific error I was seeing:
Jest encountered an unexpected token
/Users/foo/projects/crepl/components/atoms/button/styles.css:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){.button { }
^
SyntaxError: Unexpected token .
1 | import React from 'react';
> 2 | import styles from './styles.css';
If you're using ts-jest, none of the solutions above will work! You'll need to mock transform.
jest.config.js
module.exports = {
preset: 'ts-jest',
testEnvironment: 'jsdom',
roots: [
"<rootDir>/src"
],
transform: {
".(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/jest-config/file-mock.js",
'.(css|less)$': '<rootDir>/jest-config/style-mock.js'
},
};
file-mock.js
module.exports = {
process() {
return `module.exports = 'test-file-stub'`;
},
};
style-mock.js
module.exports = {
process() {
return 'module.exports = {};';
}
};
I found this working example if you want more details.
Solution of #import Unexpected token=:)
Install package:
npm i --save-dev identity-obj-proxy
Add in jest.config.js
module.exports = {
"moduleNameMapper": {
"\\.(css|less|scss)$": "identity-obj-proxy"
}
}
Update: Aug 2021
If you are using Next JS with TypeScript. Simply follow the examples repo.
Else you will be wasting days configuring the environment.
https://github.com/vercel/next.js/tree/canary/examples/with-jest
I added moduleNameMapper at the bottom of my package.json where I configured my jest just like this:
"jest": {
"verbose": true,
"moduleNameMapper": {
"\\.(scss|less)$": "<rootDir>/config/CSSStub.js"
}
}
Now I hava a vuepress project,
I am trying to use google analytic to track the flow of it.
But it seems there are some problem between my project and google analytic
I already follow the Document Guide(
https://vuepress.vuejs.org/plugin/official/plugin-google-analytics.html)
to use yarn add -D #vuepress/plugin-google-analytics
rather than npm install -D #vuepress/plugin-google-analytics
and also add the plugin to my config
plugins: [
'vuepress-plugin-mathjax',
{
target: 'svg',
macros: {
'*': '\\times',
},
},
'latex',
'#vuepress/google-analytics',
{
'ga': 'UA-157347770-2',
}
],
But it still nothing catch by google analytics.
Is there anyone has the same problem or similiar one before?
Thanks for anyone read
The declaration of plugin is wrong.
You have two options to declare the plugin: Babel Style or Object Style.
Babel style:
module.exports = {
plugins: [
['#vuepress/plugin-google-analytics', { ga: 'XX-000000000-0' }],
],
};
Object style:
module.exports = {
plugins: {
'#vuepress/plugin-google-analytics': {
ga: 'XX-000000000-0',
},
},
};
For more details, please see the documentation: https://vuepress.vuejs.org/plugin/using-a-plugin.html#babel-style
I have a class where I use some static properties like this:
class Entity {
static LIMIT = 10;
}
So, i can do:
Entity.LIMIT
In order to do that I'm using babel plugin-proposal-class-properties and in my .babelrc I have:
{
"presets": ["#babel/preset-env"],
"plugins": [
["#babel/plugin-proposal-class-properties", { "loose": true }]
]
}
I'm using jest and my test passes using that config. Now I need to use funcionality of Entity class inside a vuejs component. But I got the error:
Module parse failed: Unexpected token. You may need an appropriate loader to handle this file type
I also tried a babel config file in my project root: babel.config.js
module.exports = {
presets: ["#babel/preset-env"],
plugins: [
["#babel/plugin-proposal-class-properties", { "loose": true }]
]
};
But didn't work.
How can i configure vuejs, to make work this babel plugin?
I'm using vue2.6.11 and vue-cli 3
I got this exact same issue when trying to use "importabular" with vuejs (vuejs 2, vue-cli-3). Importabular uses class properties, after some research I found this babel plugins (plugin-proposal-class-properties), I installed it and added it in vue.config.js.
To finally make it work, I had to add "importabular" (or the nested path) in the transpileDependencies: option. Why that? Because, by default, Babel ignores whatever is in node_module, so you have to tell Babel to not ignore this specific folder.
So, if you want to use babel or some babel plugins with some node_module with vue you should modify the vue.config.js as follow :
module.exports = {
transpileDependencies: [
'path/in/node_module',
],
}
and change the babel.config.js as follow:
module.exports = {
"presets": [
"#vue/cli-plugin-babel/preset"
],
"plugins": [
["#babel/plugin-proposal-class-properties"],
]
}
I need to configure Uglify options in a vue cli project.
What I need is to mantain certain comments, so I've tried to set up this in vue cli, without success.
configureWebpack: {
plugins: [
new UglifyJsPlugin({
uglifyOptions: {
output: {
comments: /\<\/?fs_premium_only\>/i
}
}
})
]
},
Is something I'm doing wrong? if I inspect the vue config I see that the options is there, but my comment are stripped out.
Is there any way to preserve those comments?
It came ot I must use this syntax:
chainWebpack: config => config.optimization.minimizer([new UglifyJsPlugin({
uglifyOptions: {
output: {
comments: /\<\/?fs_premium_only\>/i,
}
}
})])