Comments (8)
It's actually working in cssnext playground (which use this module).
from postcss-calc.
safari can't handle
calc
withincalc
Looks like Safari does everything right https://www.w3.org/TR/css3-values/#calc-syntax
calc
within calc
is old syntax: https://www.w3.org/TR/2013/CR-css3-values-20130730/#calc-syntax
from postcss-calc.
This is good news. Can you maybe give me a hint how I can figure out why it is not working for me?
@Semigradsky yes, it is correct by specs, but still very unhelpful. 😉 This way you can not use a calculated value from a variable within another calculation.
from postcss-calc.
Please provide node/npm/postcss/cssnext version and more code.
from postcss-calc.
Hey @MoOx, thanks:
- node v7.7.2
- npm 4.1.2
- gulp-postcss 6.3.0
- postcss-calc 5.3.1
- cssnext 2.9.0
I am using gulp:
gulp.task('build-css', function () {
return gulp.src([
// npm resources
'node_modules/minireset.css/minireset.css',
'node_modules/open-color/open-color.css',
'node_modules/flex-layout-attribute/css/flex-layout-attribute.css',
'node_modules/modular-scale-css/modular-scale.css',
// includes
'resources/css/includes/*.css',
// main files
'resources/css/*.css',
'resources/css/pages/*.css'
])
// .pipe(sourcemaps.init())
.pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')}))
.pipe(concat('app.css'))
.pipe(size({
'title': 'app.css before:',
'pretty': true
}))
.pipe(postcss([
require('postcss-import')(),
require('postcss-will-change'),
require('postcss-discard-comments'),
require('cssnano')({
// autoprefixer: false,
discardComments: {
removeAll: true
}
// zindex: false
}),
require('postcss-cssnext')({
browsers: ['last 2 versions']
}),
require('postcss-color-function'),
// require('postcss-calc-function').default(),
require('postcss-calc')(),
require('postcss-reporter')({
plugins: [
'postcss-color-function'
]
})
]))
.pipe(size({
'title': 'app.css after:',
'pretty': true
}))
.pipe(size({
'title': 'app.css gzip:',
'pretty': true,
'gzip': true
}))
// .pipe(sourcemaps.write('/'))
.pipe(gulp.dest('public/build/css'))
})
The css comes from modular-scale.css
in the for of variables like those:
--ms0 : var(--ms-base, 1em);
--ms1 : calc(var(--ms-ratio, var(--golden)) * var(--ms0));
--ms2 : calc(var(--ms-ratio, var(--golden)) * var(--ms1));
I hope this helps?
from postcss-calc.
Okay, move it above css next fixed it, I think.
from postcss-calc.
FYI, postcss-calc is included in cssnext. Same for postcss-color-function. Also you should probably use cssnano at the end of your stack...
from postcss-calc.
@MoOx thanks, I did not know this.
from postcss-calc.
Related Issues (20)
- Direct CSS input HOT 2
- 3-level deep var()s inside a calc() throw an error HOT 3
- Compile wrong with CSS custom properties
- wrong/insufficient reduction HOT 2
- Support min, max, clamp HOT 2
- Simple var multiplication breaks HOT 5
- Space between multiplication and division operators is clamped with custom properties HOT 3
- Move postcss to peerDependencies HOT 2
- error compiling valid calc expression
- FATAL Nuxt build error HOT 1
- Floating number with unknown unit can't be parsed HOT 3
- Fails with SCSS variables HOT 2
- "ParserError: Syntax Error" with negative multiplication and vars HOT 4
- Please do not calculate the percentage in calc()
- ChainAlert: npm version 8.1.0 has new or changed maintainer HOT 2
- [Bug]: repository not shown on npmjs.com
- [Bug]: `calc` disappears if extra pair of parentheses around the argument
- [Bug]: Remove duplicate repository field in package.json
- [Feature Request]: Support for `min()` and `max()` HOT 1
- [Bug]: Lexical error on line ... : Unrecognized text.
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-calc.