How is it possible to get postcss-nesting and a #vue/cli v3 project built with the PWA plugin working?
So far I've tried
npm install postcss-nesting
I then created a src/main.css which contains
body {
h1 {
color: green;
}
}
Inside the main.js file I import the css import './main.css';
Then inside the postcss.config.js I've added it to the plugins (with others that work) e.g.
module.exports = {
plugins: {
'postcss-import': {},
'postcss-nesting': {},
}
}
When I then run npm run serve the CSS does not transform into body h1 as you can see
What would be the correct way to get this working?
Thanks
Nesting should be enabled inside package.json since vue-cli does not read the configuration from postcss.config.js or .postcssrc.js as mentioned here.
"postcss": {
"plugins": {
"autoprefixer": {},
"postcss-preset-env": {
"browsers": "last 2 versions",
"features": {
"nesting-rules": true,
"custom-media-queries": true,
"color-mod-function": true
}
}
}
},
Working example on this repository: https://github.com/dobladov/vue-cli-example-postcss
Also for the nesting is important to use the symbol &
<style>
body {
background-color: tomato;
& .foo {
color: purple;
}
}
</style>
Related
I am trying to create a react website using
npx create-react-app myapp
cd my app
later i followed the steps as per mentioned on tailwind css that are as followed:
npm install -D tailwindcss postcss autoprefixer
and then
npx tailwindcss init -p
followed by this i added the following statement to tailwindconfig:
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
later added the following to index .css
#tailwind base;
#tailwind components;
#tailwind utilities;
my app.js looked like following:
import './index.css'
function App() {
return (
<div className="App">
<h1 className='text-orange-500' >Navbar</h1>
</div>
);
}
export default App;
still the tailwind is not taking any affect please help
folder structure is as followed;
the browser displays as it is
I have found the issue the issue was in tailwind config and along with that i deleted the postcss file. The new tailwind config:
module.exports = {
content: ['./src/**/*.{js,jsx,ts,tsx}'],
theme: {
screens: {
sm: '640px',
// => #media (min-width: 640px) { ... }
md: '768px',
// => #media (min-width: 768px) { ... }
lg: '1024px',
// => #media (min-width: 1024px) { ... }
xl: '1280px',
// => #media (min-width: 1280px) { ... }
'2xl': '1536px',
// => #media (min-width: 1536px) { ... }
},
},
plugins: [],
};
this worked for me still i am confused over the fact why it happened but anyways its working now
You might be having issue with tailwind.config.js can you try the below tailwind.config.js, In Create React App, the components are stored in src directory and you are targeting specific to pages and components directory, so going with .src/pages//, .src/pages/, .src/components//, .src/components/, may work you, Give it a try.
module.exports = {
content: [
".src/pages/**/*.{js,ts,jsx,tsx}",
".src/components/**/*.{js,ts,jsx,tsx}",
".src/components/*.{js,ts,jsx,tsx}",
".src/pages/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
I am attempting to install tailwind (Which I have done many times before with no issue). Please help me with what I am missing this time around.
tailwind.config.js
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
Package.json
....
"devDependencies": {
.....
"autoprefixer": "^10.4.2",
"postcss": "^8.4.6",
"tailwindcss": "^3.0.23"
},
....
index.js
import './index.css'
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
ReactDOM.render(<App />, document.getElementById('root'))
app.js
const App = () => {
return <div className='bg-blue-300'>
cool
</div>
}
And lastly (where I believe my problem is)
index.css
#tailwind base;
#tailwind components;
#tailwind utilities;
body{
background-color: red; /* I WORK FYI! */
}
(EDIT) A bit more info: This app is the 'example-app' generated after running using create-react-library. I just created a brand new react app, installed TW, and had no problems. I also installed another package into my example-app (react-icons) just to test that wasn't the issue but that works as expected.
Do you start the Tailwind CLI build process?
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
I'm using Ant-design with styled-components and want to theming my app by css-variables.
package.json:
"dependencies": {
...
"antd": "^3.19.1",
"styled-components": "^4.2.1",
...
}
..."webpack": "^4.29.6",
"babel-plugin-styled-components": "^1.10.0",
...
.babelrc:
{
"plugins": [
[
"#babel/plugin-proposal-class-properties",
{
"loose": true
}
],
["styled-components", {
"minify": false,
"ssr": false,
"pure": true
}]
],
"presets": ["#babel/preset-env", "#babel/preset-react"]
}
import { Input } from "antd";
import styled from "styled-components";
const StyledInput = styled(Input)`
&& {
background-color: var(--primaryColor, #fff);
}
`;
When i run my app in "development" webpack mode - everything ok, result is:
.ijJGje.ijJGje {
background-color: var(--primaryColor,#fff);
}
then i changing webpack mode to "production", and result is:
.ijJGje.ijJGje {
background-color: #fff;
}
I tried different settings of styled-components in .babelrc file.
It doesn't help me.
P.S. It turns out the problem is more serious. I can't pass most of css parameters(border for example) with css-variables at all, in this context. With default value or without.
How can i fix it?
I am trying to add Jest and Enzyme to a React webpack project.
Everything is working, until I add tests to a component, with a style sheet importing google fonts.
The error I get is:
● Test suite failed to run
/Users/dev/Code/Git/react-redux-webpack/src/App.sass:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){#import url('https://fonts.googleapis.com/css?family=Barlow+Condensed')
^
SyntaxError: Invalid or unexpected token
The sass file looks like:
#import url('https://fonts.googleapis.com/css?family=Barlow+Condensed')
body
background: #f9f9f9
color: #444444
font-family: 'Barlow Condensed', sans-serif
text-align: center
.container
width: 100%
max-width: 960px
margin: 0 auto
.container__logo--image
position: absolute
top: 50%
left: 50%
margin-left: -75px
margin-top: -75px
My .babelrc:
{
"presets": [
"react",
"stage-0",
[
"env",
{
"targets": {
"node": "6.10",
"browsers": ["last 2 versions", "safari >= 7"]
}
}
]
],
"plugins": ["transform-class-properties"]
}
I have all the required loaders in webpack, I can build and serve the sass all day with no issues. It is the introduction of Jest I am struggling with.
I have pushed a branch with the current state of code here https://github.com/nombienombie/react-redux-webpack/tree/feature/jest-unit-tests
I added the following to my package.json:
"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|sass)$": "<rootDir>/__mocks__/styleMock.js"
}
},
and added the following in a mocks folder:
fileMock.js
module.exports = 'test-file-stub';
styleMock.js
module.exports = {}
Since they are not compiled by Webpack, static assets imported by tests should be handled somehow.
The typical approach consists of mocking them out since not relevant for testing purpose. Jest expose a moduleNameMapper option to easily mock/proxy them.
One more thing to add on the answer given by #Harry,
if you are using jest.config.js file then add on it instead of package.json
moduleNameMapper: {
'\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
'<rootDir>/src/__mock__/fileMock.js',
'\\.(css|less)$': '<rootDir>/src/__mock__/styleMock.js',
},
I have a universal react app where server side is built in babel and the client bundle is built in webpack. I have read preact-compact docs and it suggests to adding this in .babelrc for building using babel:
{
"plugins": [
[
"transform-react-jsx",
{
"pragma": "h"
}
],
[
"module-resolver",
{
"root": [
"."
],
"alias": {
"react": "preact-compat",
"react-dom": "preact-compat"
}
}
]
],
"presets": [
"react"
]
}
And for webpack:
{
"resolve": {
"alias": {
"react": "preact-compat",
"react-dom": "preact-compat"
}
}
}
But after building I get an error h is not defined
How to migrate to preact for a universal react app
But after building i get an error "h is not defined"
You added the transform-react-jsx plugin to your babel config.
["transform-react-jsx", { "pragma":"h" }]
This tells babel how to transpile your JSX code. For that to work, the function h needs to be in scope, that means you need to import it in every file you use JSX.
import { h } from 'preact';
Instead of having to change all your code that uses React, you can use preact-compat and alias both react and react-dom to preact-compat, as you did correctly, either with babel-plugin-module-resolver or with webpack. With that you can use react and react-dom in your code and preact-compat does the rest for you.
In order to make it work you have to remove ["transform-react-jsx", { "pragma":"h" }] from your babel config.