I'm trying remove the css with uncss but it's removing all the styles no matter if they are listed on the ignore array.
The 2 files that I want to compare are just the index and the app.min.js which contains all the templates embedded in the javascript as strings, which are configured using $templateCache
take a look to the grunt task maybe there is something obvious that I'm missing:
uncss:{
production: {
options: {
ignore: ['.someclass', '.someclass', '.someclass','.etc_etc_class'],
stylesheets:['app.min.css']
},
files: {
'dist/app.min.css':['dist/index.html','dist/app.min.js']
}
}
}
any comment will be more than welcome!
The stylesheets option should have the full path of the css files relative to the root directory. So if the file is in dist/ add that to the stylesheets option.
For example:
uncss: {
dist: {
options: {
ignore : ['#added_at_runtime', /test\-[0-9]+/],
media : ['(min-width: 700px) handheld and (orientation: landscape)'],
raw : 'h1 { color: green }',
stylesheets : ['lib/bootstrap/dist/css/bootstrap.css', 'src/public/css/main.css'],
ignoreSheets : [/fonts.googleapis/],
urls : ['http://localhost:3000/mypage', '...'], // Deprecated
timeout : 1000,
htmlroot : 'public',
report : 'min'
},
files: {
'dist/css/tidy.css': ['app/index.html', 'app/about.html']
}
}
}
See: https://github.com/addyosmani/grunt-uncss
Related
I am using Scss with SvelteKit now, and I am prepending a Scss files to all <style> like this:
const config = {
compilerOptions: {
immutable: true
},
preprocess: preprocess({
scss: {
prependData: `
#use 'src/specific/vars.scss' as *;
`,
includePaths: ["../../node_modules", "../../libs"]
}
})
};
Unlike classes defined directly in <style>, unused classes from that prepended file will not be purged when build automatically. Is it possible to purge it like other classes?
I'm trying to format code blocks in markdown files for posts to a website with Gatsby.
I would like the code blocks to be displayed in one of VSCode's color themes (Dark +, for instance). I have npm installed gatsby-remark-vscode, and put the plugin in my gatsby-config.js file:
plugins: [
{
resolve: 'gatsby-transformer-remark',
options: {
plugins: [{
resolve: 'gatsby-remark-vscode',
options: {
colorTheme: 'Dark+ (default dark)',
injectStyles: true,
extensions: [{
identifier: 'sdras.night-owl',
version: '1.1.3'
}],
extensionDataDirectory:
path.resolve('extensions'),
logLevel: 'error'
}
}]
}
},
]
I have required 'path' at the top of my gatsby-config.js file:
const path = require('path');
I have imported the stylesheet in my gatsby-browser.js file:
import 'gatsby-remark-vscode/styles.css';
I have used back-ticks to format in my markdown file (the file that contains the blog post) like this:
```js
(CODE EXAMPLE)
```
When I npm run develop, I do not see the correct VSCode formatting for the code block, just a code block similar to what we see on StackOverflow code blocks. I would greatly appreciate any advice on how to render the correct theme in my code blocks.
Oops - looks like I was using a previous version of gatsby-remark-vscode. Updating the version and following the config instructions in the README solved this.
Does anyone know any tool which would help to highlight classes that are not used in css-modules?
Recently I have added typescript-plugin-css-modules to my project which helps me to detect if I use non existent class names in JSX, but now I also want to be able to detect unused classes in module.css as it unnecessary adds dead css code to the bundle.
If you only want to detect unused CSS module then there are a few ways to do it:
Using chrome's developer tools:
Use something like purifycss:
Installation:
npm i -D purify-css
Usage:
import purify from "purify-css"
const purify = require("purify-css")
let content = ""
let css = ""
let options = {
output: "filepath/output.css"
}
purify(content, css, options)
A function that takes content (HTML/JS/PHP/etc) and CSS, and returns only the used CSS.
PurifyCSS does not modify the original CSS files. You can write to a new file, like minification.
If your application is using a CSS framework, this is especially useful as many selectors are often unused.
Read more here
Use uncss
Installation:
npm install -g uncss
Usage within NodeJS:
var uncss = require('uncss');
var files = ['my', 'array', 'of', 'HTML', 'files', 'or', 'http://urls.com'],
options = {
banner : false,
csspath : '../public/css/',
htmlroot : 'public',
ignore : ['#added_at_runtime', /test\-[0-9]+/],
ignoreSheets : [/fonts.googleapis/],
inject : function(window) { window.document.querySelector('html').classList.add('no-csscalc', 'csscalc'); },
jsdom : {
userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 10_3 like Mac OS X)',
},
media : ['(min-width: 700px) handheld and (orientation: landscape)'],
raw : 'h1 { color: green }',
report : false,
strictSSL : true,
stylesheets : ['lib/bootstrap/dist/css/bootstrap.css', 'src/public/css/main.css'],
timeout : 1000,
uncssrc : '.uncssrc',
userAgent : 'Mozilla/5.0 (iPhone; CPU iPhone OS 10_3 like Mac OS X)',
};
uncss(files, options, function (error, output) {
console.log(output);
});
/* Look Ma, no options! */
uncss(files, function (error, output) {
console.log(output);
});
/* Specifying raw HTML */
var rawHtml = '...';
uncss(rawHtml, options, function (error, output) {
console.log(output);
});
UnCSS is a tool that removes unused CSS from your stylesheets. It works across multiple files and supports Javascript-injected CSS.
Read more here
N.B: There are other packages as well. But I've personally used uncss and purifycss which I mentioned here
I'm trying to split my React code (created with create-react-app) with the splitChunks plugin in the following way :
I have following components (JSX) structure :
services
serviceA
ComponentA1
ComponentA2
subFolder
ComponentA3
...
serviceB
ComponentB1
ComponentB2
...
serviceC
ComponentB1
ComponentB2
...
...
and I want to have following output (build) :
static/js
serviceA
serviceA.bundle.chunkhash.js
serviceB
serviceB.bundle.chunkhash.js
serviceC
serviceC.bundle.chunkhash.js
(other runtimes / mains are at the root of /static/js)
Another restriction is that components are loaded dynamically with
const Component = lazy(() => import(componentPath));
...
<Suspense fallback={..}>Component</suspense>
"componentPath" is determined on the fly (when a user clicks on an icon then it opens a given service).
The reason for this is that I want to include each bundle into a separate Docker image running the backend. Then each Docker image is reachable thanks to Application routing :
static/js/serviceA/ ==> js served by Docker container running service A
static/js/serviceB/ ==> js served by Docker container running service B
static/js/serviceC/ ==> js served by Docker container running service C
So far, I'v tried to:
set the output.chunkFilename to [name]/[name].[chunkhash].js
use the webpackChunkName with [name] and [request]:
[name] doesn't seem to work (got just litterally "[name]" as part of my directory name).
[request] flattens the name of the directories:
serviceA-ComponentA1
serviceA-ComponentA2
serviceA-subFolder-ComponentA3
serviceB-componentB1
serviceB-componentB2
...
Then I tried to use the splitChunks plugin with following :
splitChunks: {
chunks: 'all',
name: function(module) {
let serviceName = module.rawRequest ? module.rawRequest : 'default';
serviceName = serviceName.replace('../', '').replace('./', '');
serviceName = serviceName.split('/')[0];
return serviceName;
},
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
},
serviceA: {
test: /[\\/]serviceA[\\/]/,
priority: -10
},
serviceB: {
test: /[\\/]serviceB[\\/]/,
priority: -10
},
serviceC: {
test: /[\\/]serviceC[\\/]/,
priority: -10
},
}
},
This approach looks like working as all my services are in their own directories. But I still have some additional directories as numbers (bundle ID probably) that I would have expect to be rather included into the default.
So the question is : is my approach correct ?
I'm not sure if the following option would work for you. I had a similar problem, where I needed different folders to be outputed on different bundles.
In my case, I started with the glob solution, suggested here.
Then, knowing that I needed an array of inputs for each desired output, I came up with this:
const path = require('path');
const glob = require('glob');
const plugins = [...];
module.exports = {
entry: glob.sync('./src/**/*.js').reduce((acc, item) => {
const path = item.split('/');
path.pop();
const rootFolder = path[2] ? `${path[0]}/${path[2]}` : path[0];
if (acc[rootFolder]) {
acc[rootFolder].push(item);
} else {
acc[rootFolder] = [item];
}
return acc;
}, {}),
output: {
filename: '[name]/main.js',
path: path.resolve(__dirname, 'dist'),
},
module: { ... },
plugins,
};
This is a simplified version of my config and it could probably be improved, but it works fine for my needs. :)
More info on glob library: https://github.com/isaacs/node-glob
I set up the rule in webpack to load png images:
{
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: [
'file?hash=sha512&digest=hex&name=[hash].[ext]',
'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
]
}
That I found here: cannot load png files with webpack, unexpected character
Webpack seems to be working fine, giving no errors. So, I tried loading the png images paths that are located at app_folder/public/images/pca inside the render method:
importAll = (r) => {
return r.keys().map(r);
}
render() {
const pca_images = this.importAll(require.context('../public/images/pca',
false, /\.(png|jpe?g|svg)$/));
console.log('pca_images')
console.log(pca_images)
...
}
When I launch the app I do not see any errors but the pca_images is an empty array. The component itself is located at app_folder/views/. I tried loading the images also directly like that:
<img src={ require('../public/images/image1.png') } />
But whatever path I specify, it is just not working giving an error. I need to load all images from the folder app_folder/public/images/pca though, not just statically since I do not know the names of the images beforehand. Any suggestions would be greatly appreciated.
The solution that worked for me was to add the rule to the webpack.config.js:
{
test: /\.(jpe?g|gif|png|svg)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 10000
}
}
]
}
This rule I found here: ReactJS and images in public folder
Then I needed to run two commands in terminal:
npm install url-loader --save-dev
npm install file-loader --save-dev
And finally loading from the folder (see the question, render method) started working.