I have a Wordpress project where Webpack and the StyleLint plugin are being used.
The problem is when compiling sass, it shows this error where it says it doesn't recognize the 'aspect-ratio' property that I'm using in my styles:
Unexpected unknown property "aspect-ratio" property-no-unknown
I tried adding 'ignoreProperties' to the config in the .stylelintrc.js file but it didn't work and it kept showing the error.
module.exports = {
'extends': 'stylelint-config-standard',
'rules': {
'no-empty-source': null,
'string-quotes': 'double',
'at-rule-no-unknown': [
true,
{
'ignoreProperties': [
'aspect-ratio'
]
},
{
'ignoreAtRules': [
'extend',
'at-root',
],
},
],
},
};
How could I fix it? (I'm not very knowledgeable in StyleLint and this project was started by someone else.)
aspect-ratio is a known property in the latest version of Stylelint. You should update your copy of Stylelint to the latest version using:
npm install -D stylelint#latest
Alternatively, you can use the ignoreProperties secondary option, but you should use it on the property-no-unknown rule rather than the at-rule-no-unknown one as it's a property, not an at-rule:
module.exports = {
'extends': 'stylelint-config-standard',
'rules': {
'no-empty-source': null,
'string-quotes': 'double',
'at-rule-no-unknown': [
true,
{
'ignoreAtRules': [
'extend',
'at-root',
],
},
],
},
'property-no-unknown': [
true,
{
'ignoreProperties': [
'aspect-ratio'
]
},
]
};
Related
If you're using styled components and keep getting errors in development mode use the settings below to fix
Create a .babelrc file in your root folder and add the following:
{ "presets": [ "next/babel" ], "plugins": [ [ "styled-components", { "ssr": true } ] ] }
I am starting my first project with React.
To start with, I just have a single component LikeButton.tsx, which is injected into the body. I am trying to apply some styles to this button:
import './LikeButton.css';
LikeButton.css:
button {
color: red;
}
Here is my webpack.config.ts:
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx|tsx|ts)$/,
exclude: /(node_modules|dist)/,
use: 'babel-loader'
}, {
test: /\.css$/i,
use: [
'style-loader', 'css-loader'
]
}
]
},
...
};
When I run webpack, I end up with the following error:
ERROR in src/components/LikeButton.css:1:7
[unknown]: Parsing error: ';' expected.
> 1 | button {
| ^
2 | color: red;
3 | }
The css syntax is correct, so I am guessing the css is being interpreted as javascript/typescript somewhere, but I cannot see where due to the [unknown]-part in the error message.
The loader
What is happening here?
Instead of removing ForkTsCheckerWebpackPlugin which of course you may need for typescript / React combination to work properly, specify the files that you want eslint to check
eslint: {
files: './src/**/*.{ts,tsx,js,jsx}',
},
this tells eslint to check javascript and typescript files only, thus removing the css error.
It was the Fork TS Checker Webpack Plugin that caused the issue. By removing it from module.exports.plugins in webpack.config.ts, the error disappeared:
module.exports = {
...
plugins: [
new ForkTsCheckerWebpackPlugin({
async: false,
eslint: {
files: "./src/**/*",
},
}),
new MiniCssExtractPlugin(),
],
}
...
Tailwind version: v9.3.5
PostCSS Config:
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
...(process.env.NODE_ENV === 'production'
? {
'#fullhuman/postcss-purgecss': {
content: ['./components/**/*.js', './pages/**/*.js'],
defaultExtractor: content =>
content.match(/[\w-/:]+(?<!:)/g) || [],
},
}
: {}),
},
}
Tailwind Config:
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
tint: 'rgba(0,0,0,0.3)',
},
},
},
variants: {},
plugins: [],
}
Styles work perfectly in development but in production only some styling is working. Upon checking the CSS file in build folder, looks like some of the CSS classes are not being extracted or possibly purged therefore resulting in partial styling of the app.
EDIT : PurgeCSS version 3.0 add safelist option, replace whitelist
I faced the same problem when i dynamically inject name of some classes into my html template.
I am using nuxt.js/tailwindcss so you need to read the documentary first to solve your problem.
Problem
here's the code who generate the classes missing in production
computed: {
axeY() {
return this.y < 0 ? `-translate-y${this.y}` + ' ' : `translate-y-1` + ' '
},
axeX() {
return this.x < 0 ? `-translate-x${this.x}` : `translate-x-${this.x}`
},
PostCSS will analyse all files into the content table (declaring in the config file), noted that my files doesn't include classes with translate prefix
as you can see, my missing classes are: [translate-x-1,-translate-x-1, translate-y-1, -translate-y-1] ... the number 1 is a variable.
Solution
I need to tell purgecss to not delete those classes by adding them into a whitelist
Or you can use them into your files, for example by creating an unless file (a file analyzed by PostCSS)
You can specify content that should be analyzed by PurgeCSS with an array of filenames
Maintain your config file of TailWindCSS by specifying all cores plugins that you're using
In a complicated case you can use a regular expression in the config file.
in my case, i can directly config purge in the config file of TailWindCSS, by passing the whitelist in the options variable, and here is my config file when i use the first solution :
/*
** TailwindCSS Configuration File
**
** Docs: https://tailwindcss.com/docs/configuration
** Default: https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js
*/
const num = [1, 2, 3, 4, 5, 6, 8, 10, 12]
const whitelist = []
num.map((x) => {
whitelist.push('translate-x-' + x)
whitelist.push('-translate-x-' + x)
whitelist.push('translate-y-' + x)
whitelist.push('-translate-y-' + x)
})
module.exports = {
future: {
removeDeprecatedGapUtilities: true,
},
theme: {},
variants: {
backgroundColor: ['hover', 'focus', 'active'],
},
plugins: [],
purge: {
// Learn more on https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css
enabled: process.env.NODE_ENV === 'production',
content: [
'components/**/*.vue',
'layouts/**/*.vue',
'pages/**/*.vue',
'plugins/**/*.js',
'nuxt.config.js',
],
options: {
whitelist,
},
},
}
Found the issue, postcss config was missing sections folder in content array and also since my js files had jsx, i need to add that as well.
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
...(process.env.NODE_ENV === 'production'
? {
'#fullhuman/postcss-purgecss': {
// added sections folder and changed extension to jsx
content: ['./components/**/*.jsx', './pages/**/*.js', './sections/**/**/*.jsx'],
defaultExtractor: content =>
content.match(/[\w-/:]+(?<!:)/g) || [],
},
}
: {}),
},
}
I struggled with this same issue. Tailwind will purge classes created with string concatenation.
One solve is to save class names as variables.
n = ‘row-start-2’;
className={n}
For my use case I couldn't do this. Instead, I used the safelist greedy option.
In tailwind config file:
module.exports = {
purge: {
content: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
options: {
safelist: {
greedy: ["/safe$/"],
},
},
},
Then I added the "safe" class to all elements where I'm using string concatenation to create classes.
className={`safe sm:grid-cols-${smCols} sm:grid-rows-${smRows} md:grid-cols-${mdCols} md:grid-rows-${mdRows}
I just updated Babel6 to Babel7 with all of the necessary packages but can't resolve how to make babel.config.js correctly getting one or another error depending on the specified Babel7 plugins. Here is how my babel.config.js looks like:
module.exports = {
"env": {
"test": {
"presets": [
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": [
"#babel/plugin-proposal-class-properties",
"#babel/plugin-transform-modules-commonjs",
"#babel/plugin-syntax-dynamic-import",
"babel-plugin-dynamic-import-node",
"#babel/plugin-proposal-export-default-from"
]
}
},
"plugins": [
"#babel/plugin-transform-modules-commonjs",
"#babel/plugin-proposal-export-default-from",
"babel-plugin-dynamic-import-node",
"#babel/plugin-transform-runtime",
"#babel/plugin-transform-regenerator",
"#babel/plugin-syntax-dynamic-import",
[
"#babel/plugin-proposal-decorators",
{
"legacy": true
}
],
"#babel/plugin-proposal-object-rest-spread",
"#babel/plugin-proposal-class-properties",
[
"babel-plugin-styled-components",
{
"displayName": true
}
],
[
"babel-plugin-module-resolver",
{
"root": [
"./"
],
"extensions": [
".js",
".jsx",
".css"
],
"alias": {
"shared": "./shared/",
"pages": "./pages/",
"gtex-d3": "./node_modules/gtex-d3/"
}
}
]
],
"presets": [
"#babel/preset-react",
[
"#babel/preset-env",
{
"modules": false
}
]
]
}
So, with such configs I am getting the error:
TypeError: (0 , _typeof2.default) is not a function
Here I found a probable solution:
https://github.com/zeit/next.js/issues/6879
Remove "#babel/preset-env". So, after removing it I am getting an error in one of the node_modules package (which may mean that #babel/preset-env is needed to avoid that...):
./node_modules/igv/dist/igv.esm.js
Module build failed: TypeError: /Users/vlasenkona/Desktop/gris-seqr2/ui/node_modules/igv/dist/igv.esm.js: Property name expected type of string but got null
at Array.forEach ()
If I remove "#babel/plugin-transform-modules-commonjs" instead I will get another error:
./node_modules/semantic-ui-react/dist/es/modules/Dropdown/Dropdown.js
1002:14-23 "export 'default' (imported as 'PropTypes') was not found in 'prop-types'
Which is happening because the removed #babel/plugin-transform-modules-commonjs is needed for that. So, from these 3 errors it seems to me that the second should be fixed and there is a thread:
https://github.com/alanbsmith/babel-plugin-react-add-property/issues/3
And it is not solved, so I am stuck. Any suggestions would be greatly appreciated.
npm install --save-dev #babel/plugin-transform-destructuring
. babelrc
{ "plugins": [ ["#babel/plugin-transform-destructuring", { "useBuiltIns": true }] ] }
So I followed the instructions at guide.meteor.com to set up my package.json eslintConfig.
"eslintConfig": {
"plugins": [
"meteor"
],
"extends": [
"airbnb/base",
"plugin:meteor/recommended"
],
"rules": {
"meteor/eventmap-params": [
2,
{
"templateInstanceParamName": "instance"
}
],
"import/no-unresolved": [
2,
{
"ignore": [
"^meteor/"
]
}
],
"semi": [
"error",
"never"
]
}
}
It works fine until I try and use React.
main.js:
Meteor.startup(() => {
render(<App />, document.getElementById('render-target'))
})
That throws the error: [eslint] Parsing error: Unexpected token <
I have the react plugin:
"devDependencies": {
"eslint": "^2.9.0",
"eslint-config-airbnb": "^8.0.0",
"eslint-plugin-import": "^1.6.1",
"eslint-plugin-jsx-a11y": "^1.0.4",
"eslint-plugin-meteor": "^3.5.2",
"eslint-plugin-react": "^5.0.1"
}
I've tried following examples from Google but none of them helped. I've tried adding 'react' and 'eslint-plugin-react' to the plugins bit and nothing changed. I'm gobsmacked the solution wasn't provided in the ESLint section of the meteor guide. Any assistance would be appreciated.
Install babel-eslint and to your .eslintrc add "parser": "babel-eslint". You're missing the ES6 transpiling so eslint just crashes.
You don't need to install babel-eslint. Espree (native ESLint parser) fully supports ES6, ES7 and Object Rest/Spread.
The reason ESLint stopped parsing your file is because you haven't enabled jsx, so it will consider it as an incorrect syntax.
{
"ecmaFeatures": {
"ecmaVersion": 6,
"sourceType": "module",
"jsx": true
}
}
Add the above snippet to your config file and it should start working. For more information, you can read Specifying Parser Options