Giter Club home page Giter Club logo

Comments (8)

MoOx avatar MoOx commented on June 1, 2024

It's actually working in cssnext playground (which use this module).

screen shot 2017-03-09 at 10 11 00

from postcss-calc.

Semigradsky avatar Semigradsky commented on June 1, 2024

safari can't handle calc within calc

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.

lukasoppermann avatar lukasoppermann commented on June 1, 2024

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.

MoOx avatar MoOx commented on June 1, 2024

Please provide node/npm/postcss/cssnext version and more code.

from postcss-calc.

lukasoppermann avatar lukasoppermann commented on June 1, 2024

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.

lukasoppermann avatar lukasoppermann commented on June 1, 2024

Okay, move it above css next fixed it, I think.

from postcss-calc.

MoOx avatar MoOx commented on June 1, 2024

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.

lukasoppermann avatar lukasoppermann commented on June 1, 2024

@MoOx thanks, I did not know this.

from postcss-calc.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.