Hello I am using Gulp for compiling and Tailwind as framework.
I would like to use Purgecss, it is working but it ignores my whitelist, some help?
Here the code example:
function css() {
const tailwindcss = require('tailwindcss');
return gulp.src('./src/assets/css/main.css')
.pipe(postcss([
require('precss'),
tailwindcss('./tailwind.config.js'),
require('autoprefixer')
]))
.pipe(purgecss({
content: ['./public/*.html'],
whitelist: ['px-4'],
whitelistPatterns: [/^bg-/, /^text-/],
}))
.pipe(gulp.dest('./public/assets/css/'))
.pipe(browserSync.stream());
}
Setting names have been renamed, use new names (safelist) and approach
purgecss safelist
const purgecss = new Purgecss({
content: [], // content
css: [], // css
safelist: {
standard: [/red$/],
deep: [/blue$/],
greedy: [/yellow$/]
}
})
Glad if it helped you ;)
Related
Github discussion also opened here.
Demo of what I'm trying to accomplish.
How do you make any custom variants you create stack-able with the responsive variants?
I want my new variant to be able to be changed responsively, but the sm/md/lg don't seem to stack with any new variant that I create.
I know you can apply the responsive variants to any new utilities that you create with addUtility, but how do I make sure my custom variants can be changed responsively?
With this line you removed every single variants (even responsive) except for custom-checked. So change
variants: { scale: ['custom-checked'] }
to
variants: {
extend: {
scale: ['custom-checked']
},
},
It should do the trick. Full config will be
module.exports = {
variants: {
extend: {
scale: ['custom-checked']
},
},
plugins: [
plugin(({ addVariant, e }) => {
addVariant('custom-checked', ({ modifySelectors, separator }) => {
modifySelectors(({ className }) => {
return `.${e(`custom-checked${separator}${className}`)}:checked`
})
})
}),
],
}
I am looking to extend the margin style and add the variant ['even'] to it.
I can add the variant like so:
module.exports = {
variants: {
margin: ['even'],
},
theme: {
...
}
}
It is my understanding that the above will override the margin styles default variants.
The documentation here shows the ability to extend a variant as to not remove all the defaults when adding the new variant (discussed more here).
I have tried this and not been successful:
module.exports = {
variants: {
extend: {
margin: ['even'],
},
},
theme: {
...
}
}
I must be doing something wrong or have a typo?
The reason I was unable to do this was because of my tailwindcss version being below 2.0. As #Jon suggested. Thanks! 2.0 release notes.
I'm trying to speed up the unit tests for a fairly large non-cli Angular application and had a thought: what if I skipped the style sheets? The slowest step in running the tests (by a wide margin) is Webpack compiling the thousands of scss style sheets contained in the app.
I've changed the webpack settings to load empty modules for these files:
{ test: /\.css$/, use: 'null-loader' },
{ test: /\.scss$/, use: 'null-loader' },
But of course the Angular testbed's metadata-resolver now complains about the modules being empty..
Error: Expected 'styles' to be an array of strings.
at assertArrayOfStrings (webpack:///node_modules/#angular/compiler/esm5/compiler.js:2522 <- config/spec-bundle.js:109446:19)
at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (webpack:///node_modules/#angular/compiler/esm5/compiler.js:14965 <- config/spec-bundle.js:121889:13)
I think what I need to do here is to either load every style sheet as an empty string, or set the Testbed up in such a way that it ignores references to .scss files in the component metadata.
Is there a way to accomplish one of these solutions, or is there perhaps a smarter way of going about this?
I solved it!
By creating a custom loader that loads all .scss-files as empty strings I can drastically reduce the time it takes to compile my unit tests.
ignore-sass-loader.js:
const sass = require("node-sass");
const async = require("neo-async"); const threadPoolSize = process.env.UV_THREADPOOL_SIZE || 4;
const asyncSassJobQueue = async.queue(sass.render, threadPoolSize - 1);
module.exports = function ignoreSassLoader(content) {
const callback = this.async();
asyncSassJobQueue.push({}, () => {
callback(null, ' '.toString(), null);
});
};
This is then resolved by adding an alias to the webpack configuration:
module.exports = function () {
return {
resolveLoader: {
alias: {
'ignore-sass-loader': resolve(__dirname, '../config/loaders/ignore-sass-loader')
}
},
And then finally I use my loader together with the raw-loader:
{
test: /\.scss$/,
use: ['raw-loader', 'ignore-sass-loader'],
},
We're building a website for a customer and the customer demands both an english and an arabic version of the website.
We're using infernojs#7 with webpack#4 and we're bundling css using webpack as well.
We're applying https://github.com/nicolashemonic/rtl-css-transform-webpack-plugin so that we get two versions of our output css file : RTL version and LTR version, our filenames are hashed for caching obviously.
Here is the Problem : how to choose at runtime between the rtl css file and ltr css file when we don't know their name(because of the hash) ?
I'm thinking of using react-helmet in root component to do something like
<link rel="stylesheet" href={this.state.lang==='ar' ? 'bunldename.rtl.css' : 'bundlename.css'}/>
<!-- we'll actually get lang from route but that's not the point-->
My only problem is getting the bundlename, I thought of using DefinePlugin but I couldn't get bundlename even in webpack.config.js.
Here is my webpack config:
const HtmlWebpackPlugin = require('html-webpack-plugin'),
RtlCssPlugin = require('rtl-css-transform-webpack-plugin'),
ExtractCssChunks = require('extract-css-chunks-webpack-plugin'),
HtmlWebpackExcludeAssetsPlugin = require('html-webpack-exclude-assets-plugin'),
path = require('path');
const commonPlugins = [
new ExtractCssChunks({
'filename': 'css/[name].[contenthash].css'
}),
new RtlCssPlugin({
filename: 'css/[name].[hash].rtl.css'
}),
new HtmlWebpackPlugin({
'title': 'mytitle',
'template': 'index.html',
excludeAssets: /\.css/u
}),
new HtmlWebpackExcludeAssetsPlugin()
];
const productionPlugins = [
...
];
module.exports = (_env,argv) => ({
'entry': './src/index.jsx',
'output': {
'path': path.resolve('../public'),
'filename': 'js/main.[contenthash].js'
},
'plugins': argv.mode === 'development' ? commonPlugins : [...commonPlugins,...productionPlugins],
'module': {
'rules': [
{
'test': /\.(js|jsx)$/u,
'use':
{
'loader': 'babel-loader',
'options': {
'presets': ['#babel/preset-env'],
'plugins': [['babel-plugin-inferno', { 'imports': true }]]
}
}
},
{
'test': /\.css$/u,
'use': [ExtractCssChunks.loader, 'css-loader']
}
]
},
'devServer': {
'host': '0.0.0.0',
'historyApiFallback': true,
'contentBase': './public',
'publicPath': 'http://localhost:8080/'
},
'resolve': {
'alias': {
'inferno': (argv.mode === 'development')
? 'inferno/dist/index.dev.esm.js'
: 'inferno/dist/index.esm.js',
'react': 'inferno-compat',
'react-dom': 'inferno-compat'
}
}
});
Jestjs gives me this error when I am testing a react component:
import {Session} from 'meteor/session' ". The error is "Cannot find module 'meteor/session' "
myTestFile
import PlanSetup from "../../../ui/pages/planSetup/planSetup";
let PlanSetupWrapper;
const PlansetupProps={
name: "string",
budget: "string",
lang: { english: "en",
French : "fr"
}
};
describe('<PlanSetup />', () => {
PlanSetupWrapper = mount(<PlanSetup {...PlansetupProps}/>);
it('All child components renders correctly', () => {
expect(PlanSetupWrapper).toMatchSnapshot();
});
});
**jest.config.js**
module.exports = {
moduleNameMapper: {
"^meteor/(.*)": "<rootDir>/imports/tests/mocks/meteor.js"
},
transform: {
"^.+\\.(js|jsx)?$": "babel-jest",
".+\\.(css|styl|less|sass|scss)$": "/home/megha/Megha/TVStack/dan-tvstack-ui/node_modules/jest-css-modules-transform",
},
moduleFileExtensions: [
'js',
'jsx'
],
modulePaths: [
"<rootDir>/node_modules/"
],
globals: {
"window": true
},
unmockedModulePathPatterns: [
'/^imports\\/.*\\.jsx?$/'
],
setupFiles: [
"<rootDir>/setupTests.js"
]
};
**<rootDir>/imports/tests/mocks/meteor.js**
exports._session = {
__: function(value) { return value }
};
Welcome to Stack Overflow #MeghaRawat. There are a couple of things to consider here.
1) Keeping your components pure
2) Mocking up Meteor services
What this means is that any React components should be as pure as possible, and not reference Meteor - the containers should do that, and pass props to the components.
Jest doesn't know about Meteor, so any Meteor features will need to be stubbed, to prevent the the kind of problems you are encountering.
I may be able to find some code to help you if you need it.