Comments (4)
There are node and gulp examples available in examples/postcss
:
https://github.com/project-rfs/rfs/tree/master/examples/postcss
Does this help you?
from rfs.
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.
from rfs.
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
from rfs.
This example I mentioned should be enough to help you out. Closing this.
from rfs.
Related Issues (20)
- Error while running less - Potentially unhandled rejection [2] Could not parse call arguments or missing ')' on line 120 HOT 5
- Error with custom values HOT 1
- rfs() doens't work inside calc()
- PostCSS 8 compatibility HOT 2
- Strange values generated in Bootstrap 4.6 HOT 1
- Unclear doc concerning rfs-base-value or bug
- Use Sass Modules (dart-sass) HOT 18
- RFS + Less + css variables warning HOT 3
- Is RFS installed and enabled as part of Bootstrap 5? HOT 5
- Variation in size range seems too small HOT 1
- Migrate to postcss 8.x HOT 1
- rfs not working with $variable list ? HOT 1
- Minimum font size. HOT 2
- Feature Request - add overloads for shorthand mixins HOT 2
- rem and px have incompatible units in rfs-breakpoint HOT 2
- $rfs-base-value with rem breaks
- How to it this with tailwind ? HOT 4
- Sass ABS deprecation warning HOT 2
- using rfs() in SCSS with PostCSS syntax doesnt work HOT 1
- How to use it with react ? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from rfs.