I'm trying to add Stylelint to a brand new NextJS Typescript project with EmotionJS and almost no rules works on my styles files, the only error that I manage to see was Unknown word CssSyntaxError.
This Unknown word error happens because I'm using CSS in JS syntax and was fixed adding this line on .eslintrc as I figure out here
{
...
"customSyntax": "#stylelint/postcss-css-in-js",
...
}
But after this error no rules works on my style files, I've tried to extends other standards, remove the eslint and prettier, add a simple rule and also the blog post mentioned on this thread, but neither of these works.
Thats my EmotionJS test file:
Sim.styles.ts
import { css } from '#emotion/react';
export const container = (color: string) => css`
background-color: #000;
padding: 32px;
border-radius: 4px;
font-size: 24tz;
batata: sim;
content: 'sssm';
.umaCOi0-sim {
color: red;
}
&:holver {
color: ${color};
}
`;
As we can see there's a lot of errors on this styles but when I run npx stylelint "**/*.styles.ts" it returns no errors on console
Thats the .stylelintrc.json
{
"extends": ["stylelint-config-standard"],
"customSyntax": "#stylelint/postcss-css-in-js",
"rules": {
"string-quotes": "double"
}
}
I also notice that the config file is being read, if I remove the "customSyntax": "#stylelint/postcss-css-in-js" it start to throw the error previously mentioned.
So, how can I properly config this to work as expected?
Versions:
{
"#emotion/react": "^11.8.2"
"next": "12.1.0"
"react": "17.0.2"
"stylelint": "^14.6.0"
"typescript": "4.6.2"
"#stylelint/postcss-css-in-js": "^0.37.2"
"postcss-syntax": "^0.36.2"
}
I tried to reach the core projects of this questions.
Unfortunately for EmotionJS its needed to create a EmotionJS Stylelint Custom Syntax. For further information read the discussion: https://github.com/emotion-js/emotion/discussions/2694
Related
I am trying to get this code working in a Next.js build, however the game does not load on the page and I get no errors in the console So I am just at a loss on why the game won't load.
I am using
unity: 2021.3.16f1, (to export game)
"next": "^13.1.6",
"react": "^18.2.0",
"react-unity-webgl": "^9.4.0"
here is the code:
import { Unity, useUnityContext } from 'react-unity-webgl';
export default function GamesPage() {
const { unityProvider } = useUnityContext({
loaderUrl: '/testBuildThree/Build/testBuildThree.loader.js',
dataUrl: '/testBuildThree/Build/testBuildThree.data',
frameworkUrl: '/testBuildThree/Build/testBuildThree.framework.js',
codeUrl: '/testBuildThree/Build/testBuildThree.wasm',
});
return (
<div>
<p>Game</p>
<Unity
unityProvider={unityProvider}
style={{ width: 800, height: 600, border: 'solid black 1px' }}
/>
</div>
);
}
and here is a screen shot of my folder build in my static folder
Here is a screenshot of what the page does load.
So I think this had something to do with my previous build I started a fresh build from next.js using the create-next-app command npx create-next-app#latest --typescript and it works just fine.
I want to add an local font to the project.
I'm using next.js and globalStyles from styled-components.
Here is what I've done so far
import regularFont from "../public/fonts/IRANYekanRegular.ttf";
const GlobalStyle = createGlobalStyle<{ lang?: Languages_type | string }>`
#font-face {
font-family: "ir";
src: local("ir"), url(${regularFont}) format("truetype");
}
body,
html {
margin: 0;
font-family:"ir ";
}
`;
But with the above code it throws and error that says
./public/fonts/IRANYekanRegular.ttf Module parse failed: Unexpected
character '' (1:0) You may need an appropriate loader to handle this
file type, currently no loaders are configured to process this file.
See https://webpack.js.org/concepts#loaders (Source code omitted for
this binary file)
What am I missing?
In Next.js and React applications you can access public files with the absolute route.
So, in your CSS you can do something like:
const GlobalStyle = createGlobalStyle<{ lang?: Languages_type | string }>`
#font-face {
font-family: "ir";
src: local("ir"), url('/fonts/IRANYekanRegular.ttf') format("truetype");
}
body,
html {
margin: 0;
font-family:"ir";
}
`;
Notice 2 things:
I'm not importing the file
I'm using the route after public
Not sure if we can use codesanbox for next, so,
I created on Repo (you can check the commits): https://github.com/joseglego/font-test - The definition is: https://github.com/joseglego/font-test/blob/main/pages/index.js
Deploy on netlify: https://eager-ardinghelli-b3d680.netlify.app/
I keep get this error no matter what I try:
SassError: Undefined variable: "$bg-color".
on line 2 of src/scss/box.scss
>> background: $bg-color;
To reproduce issue, type npx create-react-app blahblah then npm install --save-dev node-sass.
Here are the files I have
// ./src/App.js
import './scss/app.scss';
import Box from './Box';
const App = () => <Box />;
export default App;
// ./src/Box.js
import './scss/box.scss';
const Box = () => <div className="box"></div>;
export default Box;
// ./src/scss/app.scss
#import './_variables.scss';
// ./src/scss/_variables.scss
$bg-color: red;
// ./src/scss/box.scss
.box {
background: $bg-color;
}
Then type npm start to see the error.
I've tried preceding all my scss file with underscores, no underscores, some have underscores and others do not etc....no matter what combination I use, i still get the undefined variable error.
What am I doing wrong?
If you want a variable to be available in a SCSS file, it needs to be either local, or directly imported.
Otherwise, and if you have global scope variable anyway, you could use CSS variables in the first place, to avoid imports.
In app.scss:
body {
--bg-color: red;
}
In other files
.box {
background-color: var(--bg-color);
}
Everything was working fine and then all of the sudden a bunch of error appeared on the terminal, saying that I needed to install node-sass module. So that's what I did to fix all those errors, but now I get this error:
SassError: Undefined variable: "$text-weight".
I don't get why react is even detecting my sass files, I'm only importing the compiled vanilla css and sass is also compiled successfully with no errors.
_variables.scss is imported at the top using #import syntax.
index.scss file:
#import './variables';
body {
margin: 0;
}
:root {
font-family: acumin-pro, sans-serif;
font-style: normal;
box-sizing: border-box;
}
.App {
display: grid;
grid-template-columns: 0.1fr 10fr 0.1fr;
min-height: 100vh;
}
#import './navbar';
#import './carousel';
#import './user';
If you have defined your $text-weight variable in another file you should import it to the file that you are using it
You will have to use #import syntax to import the file where you define your variable $text-weight.
If you are importing .scss file or .sass file somewhere in your React app, it will require you to setup node-sass to compile sass syntax into vanilla css.
Normally, people will do that in index.js or App.js where the main react component resides.
Not only React, most of the framework such as Angular will also need to setup in the boilerplate for scss or sass support.
I want to modify ant design default.less variables in my application that has been setup using create-react-app. I did not eject, but used react-app-rewired to modify inject custom webpack configurations. I am able to override most of the variable by following the link. I have the following directory structure:
--App
|--config-overrides.js
|--src
|--styles
|--styles.css
|--(maybe include a .less file to achieve the purpose)
config-overrides.js
const { injectBabelPlugin } = require('react-app-rewired');
const { compose } = require('react-app-rewired');
const rewireLess = require('react-app-rewire-less');
module.exports = function override(config, env) {
config = injectBabelPlugin(
['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }],
config,
);
config = rewireLess.withLoaderOptions({
modifyVars: {
'#ant-prefix' : 'ant',
'#primary-color': '#006778', //works
'#text-color': '#505050', //works
//Not able to inject styles this way.
"#{ant-prefix}-divider-vertical { height: unset; }" //doesn't work
},
javascriptEnabled: true,
})(config, env);
The app won't start with above when I add the last line in modifyVars object. I want to be able to override the antd classes like this.
eg:
.#{ant-prefix}-btn-primary {
&:hover,
&:focus {
background: #primary-color;
color: #fff;
}
}
modifyVars is only used to do exactly that. Modify variables. More specifically the variables in default.less.
You can't use it to inject CSS like that. This you will have to do in your own .css (or .less) file that you import into the app with a normal import command. (Import CSS in a react app)