kodyl / stilr Goto Github PK

Currently in version 1.2.2, dist/util.js Number.isInteger is used as is.

It should be used with babel, so it output something like var _Number$isInteger = require('babel-runtime/core-js/number/is-integer')['default'];

Currently, it's failing on internet explorer because of that.

CSSPropertyOperations has moved from the react package to the react-dom package.

The project seems super-interesting, I can't wait to try! But one question came to my mind - what about debugging? Did you consider sourcemaps generation? Or conditional (process.env.NODE_ENV !== 'production) expanding class names to readable form (like _xy132as_redButton). Do you plan anything like that?

Input

Stylesheet.create({
  heading: {
    ':before': {  content: "" }
  }
});

Output

._3TCwqu:before{content:;}

Expected Output

._3TCwqu:before{content:"";}

I don't know if we can generalize this concept for empty strings that they're rendered as "" or if content should have a special behaviour?

Stilr supports pseudo elements by nesting them:

StyleSheet.create({
  x: {
    color: 'red',
    ':hover': {
      color: 'green'
    }
  }
})

However, it doesn't work if you don't nest the pseudo selectors:

StyleSheet.create({
  x: {
    color: 'red',
  },
  'x:hover': {
    color: 'green'
  }
})

This, creates two keys, with none of them with a :hover pseudo selector.

Is this on purpose? If not, perhaps it should be documented. (I'll do a pull request, just need your answer first)

I just added PR #26 and on Node 4.x TravicCI is complaining:

The package [email protected] does not satisfy its siblings' peerDependencies requirements!

https://travis-ci.org/kodyl/stilr/builds/120002576

This seems like the strictly the wrong way to inject styles.

1. Now to apply styles you must set a class attribute
2. Your class attributes must not consider they don't conflict with your "style class" attributes

I'd prefer the react-style method, where they shim in a new property (styles) and you pass them in. Or alternatively, why not just have an interface where I can pass them directly into style={}? Or is that already possible?

There is a similar project, called JSS (https://github.com/jsstyles/jss)
It has this great feature for dealing with the limitation of JS objects with unique keys:
https://github.com/jsstyles/jss#multiple-declarations-with-identical-property-names

I can't think of many situations where this would be useful when already using autoprefixr, but I think it would be a good feature to have to be feature complete.

Perhaps using JSS would make this simpler, but word of warning, JSS doesn't support features such as nested pseudo selectors and media queries etc.

jss
j2c
smart-css

Thanks for this, might i suggest a webpack plugin, so that not only i don't need to:

 if (process.env !== 'production') {
       const prefixedCSS = postcss(autoprefixer()).process( StyleSheet.render() ).css;
       stylesheet.textContent = prefixedCSS;
   } 

but also to ether on development or production, to leverage the webpack build process

Just opening to track this, may make a PR for it soon.

Hi, loving Stilr so far. Can your recommend an approach to vendor prefix values in development / hot-load mode? Autoprefixer works great on the server side but it seems to have compatibility issues being imported into Webpack.

In general it works, however some values are incorrectly post-fixed with "px".

const style = Stilr.create({
    header: {
        'z-index': 9999
    }
});

This style will be converted to:

.header{z-index:9999px}

your attempt is pretty similar with https://github.com/j2css/j2c

maybe you can bind forces?

Not sure if this is a Stilr bug or a transpiler bug, but as of 1.2.0 I cannot require Stilr via:

var StyleSheet = require("Stilr");

Instead I have to work-around the default export:

var StyleSheet = require("Stilr").default;

Your suggestion for making Stilr work in a hot-loaded environment is to include some code in the root component of the entire app that re-renders the content of <style>.

This idea works well, except when: the root component doesn't re-render but a child of its does. Such a case happens, for example, when react-router is used.

How do you work around this issue? An obvious workaround is to include the code updating <style> in every style-changing component. But this is tedious.

Am I missing something?

A better workaround is to make Stilr an EventEmitter. If this idea makes sense to you, I can submit a PR.

I'd like all my tags to have a prefix in front of them:

#app .xyz {}

Would be nice to have an option on render to prefix.

Actually even better would be just being able to control the tag completely, something like:

stilr(styles, (name, hash) => {
  return '#app ' + name + '.' + hash 
})

sometimes when using both a media query and a pseudo-selector, it may be important to change the styles with the pseudo selector within a media query.

For this, it is important to support styles that are nested more that one level deep.

It would be awesome to add eslint to the travis build.

Hello.

I am using webpack & stilr. I need to use autoprefixer for my stylesheets.
The problem is that URLs for my assets are not known at build time - they are only known at run time. I am using __webpack_public_path__ parameter to handle this situation.

That is what makes it impossible to render stilr stylesheets at build time - URLs to assets are incomplete (e.g. in backgroundImage css attributes), and stilr generates different classnames than at run time.

I am okay with having styles rendered at run time.

But now I am trying to apply autoprefixer. Using it increases the size of my bundle by almost 2 MB which is unacceptable.

Is there any way around this? Or maybe am I doing something wrong?