I have this source file as src/mike.js
import '#ckeditor/ckeditor5-ui/theme/globals/globals.css'
export default function () {
console.log('Hello world');
}
#ckeditor/ckeditor5-ui/theme/globals/globals.css looks like this:
#import "./_hidden.css";
#import "./_reset.css";
#import "./_zindex.css";
And I have this rollup config:
import resolve from 'rollup-plugin-node-resolve';
import postcss from 'rollup-plugin-postcss'
export default {
input: 'src/mike.js',
output: {
file: 'public/bundle2.js',
format: 'cjs'
},
plugins: [resolve(), postcss({
plugins: []
})]
};
The rolled up public/bundle2.js looks like this:
'use strict';
function styleInject(css, ref) {
// plugin function, removed for clarity
}
var css = "/*\n * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.\n * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license\n */\n\n#import \"./_hidden.css\";\n#import \"./_reset.css\";\n#import \"./_zindex.css\";\n";
styleInject(css);
function mike () {
console.log('Hello world');
}
module.exports = mike;
So rollup-plugin-postcss did not follow the nested #import statements here.
How to make this work?
Alright, the answer is that PostCSS itself needs plugins to handle #import statements. So the rollup config you need is:
import resolve from 'rollup-plugin-node-resolve';
import postcss from 'rollup-plugin-postcss'
import postcssImport from 'postcss-import';
export default {
input: 'src/mike.js',
output: {
file: 'public/bundle2.js',
format: 'cjs'
},
plugins: [resolve(),
postcss({
plugins: [postcssImport()]
})]
};
Related
Currently when I try to use any sort of Zustand state, even from the docs, I get an error saying Missing "./react" export in "zustand" package. I am using Vite and TypeScript.
const bears = useBearStore((state) => state.bears);
useEffect(() => {
console.log(bears);
}, []);
Here is my vite.config.ts
import { defineConfig } from 'vite';
import react from '#vitejs/plugin-react';
import * as path from 'path';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
resolve: {
alias: [{ find: '#', replacement: path.resolve(__dirname, 'src') }],
},
});
Check your import. It should be:
import create from 'zustand';
I'm struggling to import SVG's when I'm using craco in my react app.
It's suggested to use #svgr/webpack but I'm not sure how to put it into my craco.config.js
My current setup as per this (I prob shouldn't follow someone's config that doesn't work and expect it to work tho) that does not work:
// craco.config.js
const CracoAlias = require("craco-alias");
module.exports = {
plugins: [
{
plugin: CracoAlias,
options: {
source: "tsconfig",
baseUrl: "./src",
tsConfigPath: "./tsconfig.paths.json"
}
},
],
webpack: {
configure: (config, { env, paths }) => {
config.module.rules.push({
test: /\.svg$/,
use: ["#svgr/webpack"]
});
return config;
}
}
};
The craco.config.js webpack documentation is here but it's so confusing to me without concrete examples.
Also to note:
Writing import {ReactComponent as mySvg} from "./mySvg.svg" doesn't work because it doesn't recognize it as a ReactComponent.
If I try importing directly via import mySvg from "./mySvg.svg" Typescript doesn't recognize the file.
What I'm currently doing is putting the svg into a React component and using that but it's a nightmare doing that every time. I also put this in #types/custom.d.ts, but it still doesn't work when put into <img src={mySvg} />
// #types/custom.d.ts
declare module "*.svg" {
const content: any;
export default content;
}
import {reactComponent as GoogleLogo} from "../assets/image/googlelogo.svg;
GoogleLogo is component and reactComponent is a required magic string
i find the fix your problem in Adding svgr to create-react-app via craco
Similar to this question - I want to be able to load svgs in my reactjs app using the following syntax below. I'm using craco so it doesn't work by default.
import {ReactComponent as MyLogo} from "./svg/MyLogo.svg";
// ...
return (
<MyLogo />
);
My craco.config.js is...
const CracoAlias = require("craco-alias");
module.exports = {
plugins: [
{
plugin: CracoAlias,
options: {
source: "tsconfig",
// baseUrl SHOULD be specified
// plugin does not take it from tsconfig
baseUrl: "./src",
/* tsConfigPath should point to the file where "baseUrl" and "paths"
are specified*/
tsConfigPath: "./tsconfig.paths.json"
}
},
],
webpack: {
configure: (config, { env, paths }) => {
config.module.rules.push({
test: /\.svg$/,
use: ["#svgr/webpack"]
});
return config;
}
}
};
Not sure if this is the right way to hook up #svgr/webpack to my craco config.
Currently, it doesn't work and errors with this...
import {ReactComponent as MyLogo} from "./MyLogo.svg";
// Error Module '"*.svg"' has no exported member 'ReactComponent'.
// Did you mean to use 'import ReactComponent from "*.svg"' instead?
How can I make this work properly using craco?
Here is my rollup config
// rollup.config.js
const postcss = require('rollup-plugin-postcss');
const autoprefixer = require('autoprefixer');
module.exports = {
rollup(config, _options) {
config.plugins.push(
postcss({
plugins: [
autoprefixer(),
],
extensions: ['.css'],
modules: false,
extract: false,
}),
);
return config;
},
};
So if I import css file local from a relative path, it gets injected but I import from node_modules it doesn't
import React from 'react';
import { toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
// The following works if I copy the file locally
// import './ReactToastify.css';
What am I doing wrong here?
I came across exactly the same problem and I think I found the solution. The trick here is to use rollup-plugin-postcss (or also rollup-plugin-styles) in combination with #rollup/plugin-node-resolve.
My rollup.config.js looks something like this:
import { nodeResolve } from '#rollup/plugin-node-resolve'
import postcss from 'rollup-plugin-postcss'
// import styles from 'rollup-plugin-styles'
export default {
...
plugins: [
postcss(),
// styles(),
nodeResolve({
extensions: ['.css']
})
]
};
As far as I can tell, for my simple case, it doesn't matter if you use postcss or styles plugins. Both work the same.
Currently building a React project with ViteJs, which uses TailwindCSS & PostCSS.
I would like the tailwind classnames to be obfuscated in the production build. Like object-cover to a2. Also, I am not aiming for minification.
I have tried looking for solutions but no luck.
Here is the postcss config:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
with the following code I managed to replace the classnames only in the css file, i can't find a way to replace it in the javascript as well, hope to find some solution soon.
vite.config.js
import {defineConfig} from 'vite'
import react from '#vitejs/plugin-react'
import {createHtmlPlugin} from "vite-plugin-html";
import postcssRename from "postcss-rename";
import tailwindcss from "tailwindcss";
export default async ({mode}) => {
return defineConfig({
plugins: [
react(),
createHtmlPlugin({
minify: true,
}),
],
css: {
postcss: {
plugins: [
tailwindcss(('./tailwind.config.cjs')),
postcssRename({
strategy: (input)=>{
return random(6)
},
outputMapCallback: function (map) {
console.log(JSON.stringify(map));
}
})
]
}
},
server: {
host: '0.0.0.0',
port: 9000
}
});
};
function random(length) {
var result = '';
var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
var charactersLength = characters.length;
for ( var i = 0; i < length; i++ ) {
result += characters.charAt(Math.floor(Math.random() * charactersLength));
}
return result;
}