PostCSS Example about rfs

[MartijnCuppens]

There are node and gulp examples available in examples/postcss:
https://github.com/project-rfs/rfs/tree/master/examples/postcss

Does this help you?

[s0kil]

This is how I'm currently using PostCSS in a project:

const plugins = [
	require('postcss-import'),
	require('postcss-cssnext')
];
return postcss(plugins)
	.process(content, {
		from: 'src',
		map: { inline: false }
	})
	.then((result) => ({
		code: result.css.toString(),
		map: result.map.toString()
	}));

I can include rfs inside the postcss.process function?

Here is the full Webpack example:

const webpack = require('webpack');
const config = require('sapper/config/webpack.js');
const pkg = require('./package.json');

const postcss = require('postcss')
// const scss = require('@kazzkiq/svelte-preprocess-scss').scss;

const mode = process.env.NODE_ENV;
const dev = mode === 'development';


// https://gist.github.com/marianoviola/c9bbf5e80359df7d109bf73476475c2e#gistcomment-2646903
processPostCSS = (content, attributes) => {
	if (attributes.type !== 'postcss') {
		return;
	};

	// Plugins List: 
	// https://github.com/postcss/postcss/blob/master/docs/plugins.md
	const plugins = [
		require('postcss-import'),
		require('postcss-cssnext')
	];
	return postcss(plugins)
		.process(content, {
			from: 'src',
			map: { inline: false }
		})
		.then((result) => ({
			code: result.css.toString(),
			map: result.map.toString()
		}));
}


module.exports = {
	client: {
		entry: config.client.entry(),
		output: config.client.output(),
		resolve: {
			extensions: ['.js', '.json', '.html', '.svelte'],
			mainFields: ['svelte', 'module', 'browser', 'main']
		},
		module: {
			rules: [
				{
					test: /\.(html|svelte)$/,
					use: {
						loader: 'svelte-loader',
						options: {
							dev,
							hydratable: true,
							hotReload: true,
							preprocess: {
								style: ({ content, attributes }) => {
									processPostCSS(content, attributes);
								}
							},
						}
					}
				}
			]
		},
		mode,
		plugins: [
			dev && new webpack.HotModuleReplacementPlugin(),
			new webpack.DefinePlugin({
				'process.browser': true,
				'process.env.NODE_ENV': JSON.stringify(mode)
			}),
		].filter(Boolean),
		devtool: dev && 'inline-source-map'
	},

	server: {
		entry: config.server.entry(),
		output: config.server.output(),
		target: 'node',
		resolve: {
			extensions: ['.js', '.json', '.html', '.svelte'],
			mainFields: ['svelte', 'module', 'browser', 'main']
		},
		externals: Object.keys(pkg.dependencies),
		module: {
			rules: [
				{
					test: /\.(html|svelte)$/,
					use: {
						loader: 'svelte-loader',
						options: {
							css: false,
							generate: 'ssr',
							dev,
							preprocess: {
								style: ({ content, attributes }) => {
									processPostCSS(content, attributes);
								}
							}
						}
					}
				},
				{
					test: /\.css$/,
					use: [
						{ loader: "style-loader" },
						{ loader: "css-loader" }
					]
				}
			]
		},
		mode: process.env.NODE_ENV,
		performance: {
			hints: false // it doesn't matter if server.js is large
		}
	},

	serviceworker: {
		entry: config.serviceworker.entry(),
		output: config.serviceworker.output(),
		mode: process.env.NODE_ENV
	}
};

Here is what I tried:

const webpack = require('webpack');
const config = require('sapper/config/webpack.js');
const pkg = require('./package.json');

const postcss = require('postcss')
const rfs = require('rfs');
// const scss = require('@kazzkiq/svelte-preprocess-scss').scss;

const mode = process.env.NODE_ENV;
const dev = mode === 'development';


// https://gist.github.com/marianoviola/c9bbf5e80359df7d109bf73476475c2e#gistcomment-2646903
processPostCSS = (content, attributes) => {
	if (attributes.type !== 'postcss') {
		return;
	};

	// Plugins List: 
	// https://github.com/postcss/postcss/blob/master/docs/plugins.md
	const plugins = [
		require('postcss-import'),
		require('postcss-cssnext'),
		rfs({
			twoDimensional: false,
			minimumFontSize: 16,
			fontSizeUnit: 'rem',
			breakpoint: '75rem',
			breakpointUnit: 'px',
			factor: 5,
			unitPrecision: 6,
			remValue: 16,
			propList: ['responsive-font-size', 'rfs']
		})
	];
	return postcss(plugins)
		.process(content, {
			from: 'src',
			map: { inline: false }
		})
		.then((result) => ({
			code: result.css.toString(),
			map: result.map.toString()
		}));
}


module.exports = {
	client: {
		entry: config.client.entry(),
		output: config.client.output(),
		resolve: {
			extensions: ['.js', '.json', '.html', '.svelte'],
			mainFields: ['svelte', 'module', 'browser', 'main']
		},
		module: {
			rules: [
				{
					test: /\.(html|svelte)$/,
					use: {
						loader: 'svelte-loader',
						options: {
							dev,
							hydratable: true,
							hotReload: true,
							preprocess: {
								style: ({ content, attributes }) => {
									processPostCSS(content, attributes);
								}
							},
						}
					}
				}
			]
		},
		mode,
		plugins: [
			dev && new webpack.HotModuleReplacementPlugin(),
			new webpack.DefinePlugin({
				'process.browser': true,
				'process.env.NODE_ENV': JSON.stringify(mode)
			}),
		].filter(Boolean),
		devtool: dev && 'inline-source-map'
	},

	server: {
		entry: config.server.entry(),
		output: config.server.output(),
		target: 'node',
		resolve: {
			extensions: ['.js', '.json', '.html', '.svelte'],
			mainFields: ['svelte', 'module', 'browser', 'main']
		},
		externals: Object.keys(pkg.dependencies),
		module: {
			rules: [
				{
					test: /\.(html|svelte)$/,
					use: {
						loader: 'svelte-loader',
						options: {
							css: false,
							generate: 'ssr',
							dev,
							preprocess: {
								style: ({ content, attributes }) => {
									processPostCSS(content, attributes);
								}
							}
						}
					}
				},
				{
					test: /\.css$/,
					use: [
						{ loader: "style-loader" },
						{ loader: "css-loader" }
					]
				}
			]
		},
		mode: process.env.NODE_ENV,
		performance: {
			hints: false // it doesn't matter if server.js is large
		}
	},

	serviceworker: {
		entry: config.serviceworker.entry(),
		output: config.serviceworker.output(),
		mode: process.env.NODE_ENV
	}
};

Does not work as expected.

[MartijnCuppens]

It's a bit hard to debug your whole webpack setup and I must admit I'm not that experienced with webpack. The way you use RFS looks ok if I compare it the the simple node example: https://github.com/project-rfs/rfs/blob/master/examples/postcss/node/index.js, there is probably something wrong with the setup in general.

If you find out what's wrong or if you have any suggestion to improve the documentation, let me know

[MartijnCuppens]

This example I mentioned should be enough to help you out. Closing this.