Comments (11)
@kumarharsh Let's move here.
Could you please show how do use @value in your css?
from postcss-modules-values-replace.
I'm using @value like this:
/* src/css/shared/colors.css */
@value mainBg: #456371;
/* src/modules/page/page.css */
@value mainBg from "css/shared/colors"; /* using webpack's resolve.moduleDirectory */
.page {
background-color: mainBg;
color: color(mainBg lightness(+30%));
}
from postcss-modules-values-replace.
-
Do you check it in webpack-dev-server?
@value mainBg from "css/shared/colors"; /* using webpack's resolve.moduleDirectory */
It knows nothing about resolve.moduleDirectory at the moment.
from postcss-modules-values-replace.
It miraculously started working just now. I cannot explain it myself, but it's somehow reading the resolve.moduleDirectory correctly!
Also, I'm working with webpack's dev server (watch mode).
from postcss-modules-values-replace.
Well, it probably could work this way if you provide webpack's filesystem to plugin.
from postcss-modules-values-replace.
Should you have any questions, feel free to reopen issue.
from postcss-modules-values-replace.
@princed I got it working: https://github.com/kumarharsh/postcss-value-replace-test
I was mistaken beforehand when I had claimed that it was reading webpack's resolve.moduleDirectory properly, atleast in my reduced use-case. It doesn't - you were right. Also, passing require('postcss-modules-values-replace')({fs: webpack._compiler.inputFileSystem})
doesn't do much.
My theory as to why this was happening is:
- postcss-modules-values-replace was not running, because the config was somehow wrong. Apparently if I write this config:
module.exports = {
plugins: (webpack) => {
return [
require('postcss-modules-values-replace')({fs: webpack._compiler.inputFileSystem}),
require('postcss-color-function'),
];
},
}
in the postcss.config.js
file, it doesn't run. It can't find webpack. but when I shifted it to webpack.config.js
it did run:
{
...
postcss: (webpack) => {
return [
require('postcss-modules-values-replace')({fs: webpack._compiler.inputFileSystem}),
require('postcss-color-function'),
];
},
}
- So, instead of postcss-modules-values-replace, the postcss-modules-values was running which was included by default in css-loader. This plugin was the one replacing the @value values in my code. And the
color()
function was definitely not working - I was wrong in judging that it was miraculously working 😄.
I'd like to see #1 land, so that working with this in webpack's system becomes more productive. Thank you for your time.
from postcss-modules-values-replace.
Also, this plugin is in ES6, and doing a require('...')
throws an error. It'd be nice if there was a pre-compiled version too.
from postcss-modules-values-replace.
Great!
- In
postcss.config.js
you have to use yet another form:
module.exports = (ctx) => ({
plugins: [
require('postcss-modules-values-replace')({fs: ctx.webpack._compiler.inputFileSystem}),
require('postcss-color-function'),
]
});
BTW, to make color()
work inside @value we need it support media queries, as I mention in README. So it would be nice to have it there in case you're interested.
from postcss-modules-values-replace.
@princed Oh, thanks for that. As for the second part of your comment,
do you mean this?
@value mainBg: color(red lightness(+10%));
As of this moment, I don't need to use color()
inside @value
like this. But if it comes, it'll be great.
from postcss-modules-values-replace.
@value mainBg: color(red lightness(+10%));
Yes, exactly this.
from postcss-modules-values-replace.
Related Issues (20)
- Cannot import value from node_modules HOT 3
- An in-range update of eslint-config-airbnb-base is breaking the build 🚨 HOT 3
- An in-range update of enhanced-resolve is breaking the build 🚨 HOT 2
- An in-range update of postcss is breaking the build 🚨 HOT 3
- An in-range update of babel-polyfill is breaking the build 🚨 HOT 1
- An in-range update of babel-core is breaking the build 🚨 HOT 1
- An in-range update of babel-register is breaking the build 🚨 HOT 1
- An in-range update of babel-cli is breaking the build 🚨 HOT 1
- Do not replace url() function content
- Values aren't replaced in expressions without spaces HOT 1
- It stopped working inside media queries HOT 2
- Incorrect node version requirement HOT 4
- How to remove values completely? HOT 3
- Ignore unused values to boost performance HOT 1
- Export regexes as the rules to reuse by other tools HOT 4
- Upgrade to PostCSS 8 HOT 1
- It breaks on “space toggle hack” HOT 2
- Why does this module depend on node >= 6.5? HOT 2
- An in-range update of eslint-plugin-import is breaking the build 🚨 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 postcss-modules-values-replace.