madeleineostoja/rucksack

A little bag of CSS superpowers, built on PostCSS

rucksack's Issues

Remove modular scale

Doesn't actually add anything to the CSS language, which is what Rucksack is all about. More just a mixin, and one that people can use independantly of Rucksack (and with their own preprocessor too). Also introduces :root vars, which users not familar with CSS4 syntax may find confusing.

Move rucksack to its own org?

Is it odd having the Rucksack repos (Rucksack + build tools) as part of the simplaio org on Github, when it's not related to Simpla?

Could move it to RucksackCSS/rucksack (/rucksack is taken).

Problem when declaring text in content property if same as alias

ex:

@alias {
op: opacity;
}

.tooltip {
content: 'Select one option'
}

rendering : 'Select one opacitytion'

Add node-pixrem to fallbacks

Packages the postcss processor (ie: not a straight plugin), so might take a little bit of messing about to integrate. Though this robwierzbowski/node-pixrem#35 might suggest it'll move to a trimmed down plugin soon.

Docs (gh-pages)

Use Hugo

Root font size not respected with rem units in responsive type

html {
    font-size: 62.5%;
}

h1 {
    font-size: responsive 2rem 3.5rem;
}

when the first media query kicks in the h1 becomes 48.3674px computed, 3.5rems is only equal to 35px

ont-size: calc(2rem + 1.5 * ((100vw - 26.25rem) / 53.75));

Any idea why this is happening?

Auto pesudo content fallback

Would love to see an extension which adds missing

content: '';

To :before/:after pseudo elements. It is always needed and unless preset, should add it.

Yet to find a post-css (or otherwise) plugin that does this.

gh-pages site should not break with HTTPS

...this page includes other resources which are not secure. These resources can be viewed by others while in transit, and can be modified by an attacker to change the behavior of the page...

Fallbacks fail with Stylus + Gulp

Hi guys, I love the Rucksack, it's a fantastic plugin and I write a post in last year about it.

Congratulations to the creators.

But, I never can make the fallbacks: true works.

Today, I use Grunt + Stylus and my task is:

var rucksack = require('rucksack-css');

function postcss() {
  return require('poststylus')([rucksack({
    fallbacks: true,
    autoprefixer: true
  })]);
}
stylus: {
      options: { 
        use: [ 
          postcss 
        ],
        compress: false,
        'include css': true,
        paths: [
          'node_modules/grunt-contrib-stylus/node_modules',
          'node_modules/jeet/stylus', 
          'node_modules/rupture'
        ]
      }, 
      dev: { 
      }
    }, 

The autoprefixer is working perfectly, but the fallbacks does't works, when I use this option, the CSS isn't generated in Stylus.

Somebody have this problem?

Remove autoprefixer?

Toying with the idea of stripping out autoprefixing from Rucksack. I think nowadays Autoprefixer is mainstream enough that people already know about it as a solution to vendor prefixing, so a framework like this doesn't really need to include it out of the box.

If separated it also makes Rucksack more flexible, as Autoprefixer has to run after any other PostCSS plugin that uses prefixed features. Rucksack shouldn't have that restriction. At the very least we could set it to disabled by default.

If anyone has any strong thoughts on this please chime in.

Responsive typography + line height?

Would it be a good idea?
Something like:

html {
    font-size: responsive 12px/1.4 21px/1.8;
}

or

html {
    line-height: responsive 1.4 1.8;
}

Unitless line height is fine, but if you want to set a specific line height for a specific font range, you have to do it without Rucksack, the result being unnecessary multiple media queries.
I guess it wouldn't work just by adding the line height along font size, since that would result in line heights like 1.4654643?

Gulp wrapper

Build gulp-rucksack wrapper

Support PostCSS v6

Is there any plan to upgrade the dependencies? Thanks!

Font-size responsive no longer working as of ~Chrome 47.0.2526.73

Been trying to work out a solution to this problem, but adding font-size responsive gives an "Invalid property value" error in the latest version of Chrome.

Rebuild and re-include color keyword replacement?

Issues are on hold as author wants to deprecate the plugin. Might be easier to just build a new, trimmed down colour keyword replacement plugin that does only what we want for rucksack.

vh position bug

position: fixed 10vh auto auto 50%;

vh will disappear

But vw is ok.

add postcss-aspect-ratio

Seems perfect for Rucksack.. something everyone has to have in their responsive toolkit.
https://github.com/arccoza/postcss-aspect-ratio

Happy to attempt a PR if you want it.

Extension to quantity queries. Last 4 of 7 items.

I was creating a layout where I have 7 items in a grid.

I wanted 2 rows to the grid.
I wanted the first 3 items to be ⅓ width and the last 4 items to be ¼ width.

Building upon Rucksack's syntax. This is possible by hand coding a compound selector such as.
For the last 4 items of exactly 7 items:
.tiles-tile:nth-last-child(7):first-child~.tiles-tile:nth-child(n+4)

I think it would be a great addition to be able to call these in rucksack.
Things like,
Select First 3 of n items.
Select Last 4 of n items.
Select Items 3 to 5 of n items.
Select First 2 of at least n items.

I don't know what the best syntax would be:
Some ideas:
.class:exactly(7):item-selection(4,last)
.class:exactly(7,4,last)
.class:exactly(7,4,last)
.class:between(4, 6):nth-range(2,4)

Thoughts?

Move to PostCSS 5.0

Bunch of api changes, mainly with each* -> walk*

Create transform scale() -> zoom fallback

transform: scale(); can be easily emulated on <IE9 with zoom.

Jumping issue in the documentation

Hovering one of the easing-demos (try the last) at http://simplaio.github.io/rucksack/docs/#easings will currently scroll back to the headline. (Or if no hash is set to the start of the page.) At least in Chrome. :)

Thank you for your investigation!

Request: vertical rhythm

Hi. Started using Rucksack and love it!

Looking for vertical rhythm helpers, are you planning to add this?
Or may be you could recommend plugins that works great with Rucksack, since I am using Responsive typography feature, that can interfere with some plugins?

Who uses Rucksack?

I'd like to add a section to Rucksack's website (or maybe GH wiki) listing some of the companies, frameworks, and other projects using Rucksack so people can get a better idea of what kind of use-cases it is suited to.

If you use Rucksack and wouldn't mind being listed here leave a comment!

Alias and font responsive not working together

Hello!!

I have this set up:

var gulp            = require('gulp'),
    rename          = require('gulp-rename'),
    sourcemaps      = require('gulp-sourcemaps'),,
    rucksack        = require('gulp-rucksack');

gulp.task(TASKS.dev.style, function () {

  return gulp.src(FILES.css.source)
    .pipe( sourcemaps.init() )
    .pipe( rucksack({autoprefixer: true}) )
    .pipe( sourcemaps.write('.') )
    .pipe( gulp.dest(FILES.css.dest) );
});

And I´ve had issues with using alias together with font-size: responsive:

/* --- this --- */

@alias {
  fs: font-size;
  br: border-radius;
}

.bar{
  fs: responsive;
  fs: 13px;
}

.foo {
  font-size: responsive;
}

/*--- compiles to this ---*/

.bar{
  font-size: responsive;
  font-size: 13px;
}

.foo {
  font-size: calc(12px + 9 * ( (100vw - 420px) / 860));
}

@media screen and (min-width: 1280px){
  .foo{
    font-size: 21px;
  }
}

@media screen and (max-width: 420px){
  .foo{
    font-size: 12px;
  }
}
/*# sourceMappingURL=test.css.map */

So it looks like font responsive is being processed before alias so it does not recongize fs as font-size.

Use postcss-reporter to output plugin warnings/errors

https://github.com/postcss/postcss-reporter

Responsive font-size breaks in Chrome Canary

I was noticing this on Chrome, went test it and it seems this also happens with Rucksack documentation website also:
https://www.dropbox.com/s/0tfo0knr74bzsjm/Screenshot%202015-10-04%2013.48.40.png?dl=0

Show output code on home page

Great idea from this thread - on the index of the docs site we have a feature grid for Rucksack with little example code snippets - would be neat to have them 'flip' (or more probably 'slide') on hover to reveal the CSS a given feature transpiles to.

CLI tool

Build CLI wrapper for rucksack that just pipes to postcss(rucksack(opts).

Font shorthand property with calc() statements don't work in Firefox

Hi folks,

Was asked to post this here after I contacted you on twitter.

The problem I ran into was with my gulp build using Rucksack with either the gulp-shorthand plugin: https://www.npmjs.com/package/gulp-shorthand and it's Post CSS alternative Longhand-Merge: https://www.npmjs.com/package/postcss-merge-longhand

Both of these plugins do the same thing, they look for any longhand CSS that can be merged together into a shorthand CSS statement, thus reducing the file size.

And... lets throw Firefox into the equation also, as it is only this browser with which the problem appears.

In Firefox if I use responsive rucksack text for the font size, either of these plugins will export the CSS in a way that doesn't work. The font doesn't appear with the correct font, as the style is disabled - Firefox reports in the dev tools that the css statement has an invalid property. However, both Safari and Chrome will render the headings as expected.

I noticed the issue when applying it to heading declarations in my SCSS. Disabling shorthand or longhand merge, resolves the issue.

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: $heading-font-family;
  font-size: responsive 12px 48px; //$base-font-size;
  line-height: $heading-line-height;
  margin: 0 0 $small-spacing;
}

Which ends up like as CSS like this:

h1,
h2,
h3,
h4,
h5,
h6 {
  font: calc(12px + 36 * ((100vw - 420px) / 860))/1.2 "Heading", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
  margin: 0 0 0.75em;
}

@media screen and (min-width: 1280px) {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: 48px;
  }
}

@media screen and (max-width: 420px) {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: 12px;
  }
}

If I disable shorthand then the css looks like this:

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Heading", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
  font-size: calc(12px + 36 * ((100vw - 420px) / 860));
  line-height: 1.2;
  margin: 0 0 0.75em;
}

@media screen and (min-width: 1280px) {
  h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 48px;
  }
}

@media screen and (max-width: 420px) {
  h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 12px;
  }
}

And works.

I'm curious as to what the issue is here, Firefox, Rucksack, Shorthand code?

Here is my build pipe in gulp for reference, longhandMerge is disabled in this instance, but if I switch the plugins, the result is the same:

gulp.task('scss-compiler', function() {
  return gulp.src(input)
    .pipe(sass(sassOptions).on('error', sass.logError))
    .pipe(postcss([
      lost(),
      rucksack()
      // longhandMerge()
    ]))
    .pipe(shorthand())
    .pipe(autoprefixer(autoprefixerOptions))
    .pipe(gulp.dest(output))
    .pipe(rename({suffix: '.min'}))
    .pipe(csso())
    .pipe(gulp.dest(output))
    .pipe(livereload({ start: false }))
    ;
});

Move website to own domain

Minor task - rucksack should ideally live on it's own domain rather than a GitHub simplaio subdomain. Should also be pushed to Netlify rather than GH pages for CDN, auto building, ability to strip website code out of rucksack repo, and other goodness.

Autoprefixer with options?

Is it possible to pass options for the autoprefixer, instead of just boolean?
I'd like to config myself, which browsers to support.

Thanks

I get undefined [undefined] - how I can debug it

Hi, thanx for the awesome too 👍 l.

I'm receiving this error, but everything is compiling

app/_styles/styles.sss
undefined [undefined]
undefined [undefined]
undefined [undefined]
undefined [undefined]
undefined [undefined]
undefined [undefined]
undefined [undefined]
undefined [undefined]
undefined [undefined]
undefined [undefined]
undefined [undefined]
undefined [undefined]
undefined [undefined]
undefined [undefined]
undefined [undefined]
undefined [undefined]
undefined [undefined]
undefined [undefined]
undefined [undefined]
undefined [undefined]

I'm using it on another project, and have no problems.

Here is my config, I've switched plugin one by one and on Rucksack error appears again:

postcss: function (webpack) {
    return [
      postCssImport({addDependencyTo: webpack}),
      postCssMixins({
        mixins: styleMixins,
      }),
      postCssNext({
        features: {
          customProperties: {
            variables: styleVars,
          },
          customMedia: {
            extensions: styleMediaQueries,
          },
          customSelectors: {
            extensions: styleSelectors,
          },
          rem: false,
          calc: {
            preserve: true,
          },
        },
      }),
      postCssAssets({
        basePath: 'src/',
        loadPaths: ['assets/'],
        cachebuster: true,
      }),
      rucksack({
        responsiveType: false,
        shorthandPosition: true,
        quantityQueries: false,
        alias: false,
        inputPseudo: true,
        clearFix: false,
        fontPath: false,
        hexRGBA: true,
        easings: true,
        autoprefixer: false,
        fallbacks: false,
      }),
      lostGrid(),
      // postCssLH(),
      // postCssZindex(),
      // postCssFlexbugsFixes(),
      // postCssInitial(),
      // postCssReporter(),
      //production


      // cssnano(),
    ];

style.sss

@import "parts/_font.sss"
@import "parts/_typography.sss"
@import "parts/_links.sss"
@import "parts/_images.sss"
@import "parts/_grid.sss"
@import "parts/_grid--old.sss"
@import "parts/_layout.sss"
@import "parts/_feature.sss"
@import "parts/_buttons.sss"
@import "parts/_select.sss"
@import "parts/_animations.sss"
@import "parts/_placeHolder.sss"

@import "parts/_react-transitions.sss"


@import "npm-modules/_react-redux-modal.sss"
@import "npm-modules/_react-date-time.sss"
@import "npm-modules/_plyr.sss"


@import "views/blog.sss"
@import "views/brandProfile.sss"
@import "views/infoPages.sss"


@import "inuit/_visibility.sss"



//.layout__header,
//.layout__body,
//.layout__footer
//  @mixin vr-rhythm

@font-face

Hi!

Why

@font-face {
  font-family: 'My Font';
  font-path: '/path/to/font/file';
}

compiled to

@font-face {
  font-family: 'My Font';
  src: url("../../../../../../path/to/font/file.eot");
  src: url("../../../../../../path/to/font/file.eot?#iefix") format('embedded-opentype'),
       url("../../../../../../path/to/font/file.woff") format('woff'),
       url("../../../../../../path/to/font/file.ttf") format('truetype'),
       url("../../../../../../path/to/font/file.svg") format('svg');
}

how i can remove ../../../../../../?
THX!

postcss-position-alt

postcss-position-alt plugin has better features over postcss-position.

Allow passing config objects to modules

Should be able to pass a boolean OR a config object to Rucksack modules. Every config object should have an enabled property that takes place of the Boolean. All other options are passed to the module.

Taken from #29.

Impossible to use rems if set responsive on html?

Hi. I got the Root font-size is invalid error if using responsive option om html. Tried both, px and em

html
  // font-size: responsive 0.875em 1.125em
  // font-range: 20em 60em
  font-size: responsive 14px 18px
  font-range: 320px 960px

If I want to use then rems anywhere, I got error. I guess, rems cant applied when calc() is present? As an option I see to set px in html and then use responsive in body. But if I do that, then responsive is not working.

Add postcss-assets?

Because it does some serious magic. Image dimensions, inlining files, etc. will work out of the box. Will need to make a wrapper for defining load paths from css (@rule) if want Rucksack users to not mess around in js (or just pass assetPath: option through to postcss-asets?)

Position shorthand doesn't work more

Today this shorthand stoped working:

$space = .5rem

&:after  
        background-color $brand-primary 
        content ''
        display none
        position absolute $space-xs

It's generated:

Until yesterday everything worked fine. I already tryed reinstall the node_modules.

😿

What happens?

Rucksack Variables

Just a quick question here about variables. I see @alias being used as a short hand for property names, but can it be used to set property values too? E.G.

@alias {
    brand-blue: #00F;
}

p {
    color: brand-blue;
}

I can always use another tool but just curious if the above is possible and/or considered an okay practice?

Document reporter as addon in website

With #45 merged postcss-reporter is now an optional addon, and should be documented as such in the gh-pages docs for rucksack.

autoprefixer test not passing

Per our chat:

CI is passing so must be something to do with version bump on autoprefixer

Invalid input file path error, when using Rucksack on Windows platform

Hi,
I've used this gulpfile for a number of projects without any issue:

'use strict';

var gulp = require('gulp');
var postcss = require('gulp-postcss');
//var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');
var sourcemaps = require('gulp-sourcemaps');
var rename = require('gulp-rename');
var stylelint = require('stylelint');
var reporter = require('postcss-reporter');
var rucksack = require('rucksack');


gulp.task('styles', function () {
  return gulp.src('/src/*.css')
    .pipe(postcss([ rucksack({ fallbacks: true, autoprefixer: true }) ]))
    .pipe(gulp.dest('dest/'));
});

gulp.task("lint-styles", ['styles'], function() {
    return gulp.src("dest/*.css")
    .pipe(postcss([ stylelint({ 
        "rules": {
          "color-no-invalid-hex": 2,
          "declaration-colon-space-before": [2, "never"],
          "indentation": [2, 2],
          "number-leading-zero": [2, "always"]
        }
      }),
      reporter({
        clearMessages: true,
      })
    ]))
});

gulp.task('rename', ['lint-styles'], function () {
  return gulp.src('dest/*.css')
    .pipe(postcss([ cssnano() ]))
    .pipe(rename('style.min.css'))
    .pipe(gulp.dest("dest/"));
});

gulp.task('sourcemap', ['rename'], function () {
  return gulp.src('dest/*.css')
    .pipe(sourcemaps.init())
    .pipe(sourcemaps.write('maps/'))
    .pipe(gulp.dest("dest/"));
});

gulp.task('default', ['styles', 'lint-styles', 'rename', 'sourcemap']);

var watcher = gulp.watch('src/*.scss', ['styles', 'lint-styles', 'rename', 'sourcemap']);
watcher.on('change', function(event) {
  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});

However, when I add in Rucksack (and comment out the existing autoprefixer plugin), I get this error - I should add that no compiled CSS files are produced:

C:\wamp\www\postcss>gulp
[14:43:17] Using gulpfile C:\wamp\www\postcss\gulpfile.js
[14:43:17] Starting 'styles'...
[14:43:17] 'styles' errored after 18 ms
[14:43:17] TypeError: The input file path should be a valid path.
    at bundle (C:\wamp\www\postcss\node_modules\rucksack\lib\index.js:57:15)
    at Gulp.<anonymous> (C:\wamp\www\postcss\gulpfile.js:16:21)
    at module.exports (C:\wamp\www\postcss\node_modules\gulp\node_modules\orchestrator\lib\runTask.j
s:34:7)
    at Gulp.Orchestrator._runTask (C:\wamp\www\postcss\node_modules\gulp\node_modules\orchestrator\i
ndex.js:273:3)
    at Gulp.Orchestrator._runStep (C:\wamp\www\postcss\node_modules\gulp\node_modules\orchestrator\i
ndex.js:214:10)
    at Gulp.Orchestrator.start (C:\wamp\www\postcss\node_modules\gulp\node_modules\orchestrator\inde
x.js:134:8)
    at C:\Users\alex\AppData\Roaming\npm\node_modules\gulp\bin\gulp.js:129:20
    at doNTCallback0 (node.js:407:9)
    at process._tickCallback (node.js:336:13)
    at Function.Module.runMain (module.js:477:11)

I've tried stripping this back to one task, but it makes no difference; as soon as I remove the reference to Rucksack() in the initial task, it works fine. Anyone any ideas as to why please? I have to work on a Windows environment - could this be causing the issue?

Add postcss-responsive-type

Remove postcss-alias?

postcss-alias (ie: @alias {} feature) has never really fit into Rucksack's mission of being very light sugar on top of native CSS, adding helpful missing features. It's quite heavy handed, and can make for some really hard to read (and maintain) code, just for the sake of a few saved keystrokes.

I would be keen to remove it for 1.0 - does anyone have any thoughts on this?

Grunt wrapper

build grunt-rucksack wrapper.

Write README

• Installation
• Usage
• Features

Full docs on functionality on docs site

Port website to own repo (and Netlify)

Rucksack's website is currently lumped into this repository as a git subtree to maintain the clean GH pages subdomain. It should be put in its own repo for easier maintainability and pushed to Netlify instead.

Also good chance to move from Hugo to Node static site builder, so Netlify can build it for us.

Autoprefixer options

Is it possible to add autoprefixer options to Rucksack?

Add toggle options to all features

No reason we shouldn't provide more fine-grain control over exactly what is included in a given Rucksack build, rather than just providing control over 'addons'. This is also becoming a standard amongst PostCSS frameworks (cssnano, cssnext, etc).

Syntax would be very simple:

rucksack({
  feature: boolean
});

Would have to either rethink how options are passed to CLI tool, or only allow control over addons there. Because a flag for each feature will get unwieldy.

Responsive font issues in IE browser (include edge)

Hey there

When applying responsive property into style, it seems to be works in all modern browser, however in IE nor Edge, I found that the calc() method did not do the trick, while re-sizing the screen and reach a certain breakpoint inside font-range (1280px - 420px ), font-size will drop below the the min-font-size (12px as default, it will keep on reduce until it reach the lower bound of the range) ,and once it reach the lower bound of the size it will stick with 12px as expected.

I think it might be some issues with IE and Edge browser rendering vw value?(checked in caniuse.com it seems to be ok to use vw or calc() method in modern IE browser)

Thanks