cssinjs / jss Goto Github PK

I realise this is aiming very low compared to the truly awesome use case scenarios JSS caters for. However, there's the potential here for making an old nightmare in front-end hackery far more pleasant.

Namely, parsing and modifying a pre-existing stylesheet.

My actual scenario: I'm using Auth0-lock and they have wrapped some awesome functionality in a UI with an incredibly heavy-handed style implementation. They inject a style element into the head that's chock full of rules with multiple ids, wildcard selectors and !important properties. Modifying the appearance is a nightmare because you have to write even heavier rules just to compensate for each and every one of their own. As a result, you loose all the flexibility of your existing style strategy. If I could just reach in and delete the offending rules I could do away with some of their worst crimes while retaining the legitimate stuff. This sounds like a ludicrous situation (and it is!) but compensating for heavy-handed 3rd party widgets is a pretty common scenario in my experience.

The other use case for this is as a stepping stone in between an existing application's styles strategy and full-blown JSS-from-the-ground up. Say my current application uses SASS Bootstrap all over the place and I don't want to have to re-write the whole thing, just extend some style rules dynamically. This feature would allow people to get into JSS progressively without having to ditch the whole concept of pre-compiled or static CSS.

What do you think?

• rewrite selectors @-webkit-keyframes progress-bar-stripes {}
• rewrite values like in gradient

• add media query and keyframes examples
• add coffee script jss example
• angualar example
• famo.us example
• reactjs example
• Better description for usecases:
  • direct access to css values
  • dynamic layout
  • generated namespaces
  • example of dynamic stylesheet rule, 1 rule applies to multiple dom nodes
  • style elem vs. elem.style

http://stackoverflow.com/questions/21011126/dom-replace-entire-style-attribute-cssstyledeclaration-on-element

The README says

Remove style sheet from render tree to increase runtime performance

Could you go into some more detail on how it increases runtime performance?

Prop should be able to have a value that is a string or number. Currently, if the value is falsy then the prop does not receive a value.

The evaluation should permit the value 0.

• maybe rewrite extend because it will do what mixin does in sass
• maybe introduce mixin, which will do exactly what extend does right now

For example, so we can replace

var style = {
  '.button': {
    'background-color': 'blue'
  }
}

with

var style = {
  '.button': {
    backgroundColor: 'blue'
  }
}

As a result of #45

We need to support conditional rule groups like @media in named style sheet https://developer.mozilla.org/de/docs/Web/CSS/At-rule

One proposal would be to write it like this

{
    myName: {
        condition: '@media (min-width: 1024px)',
        color: 'blue'
    }
}

Another proposal

{
    button1: {
        color: 'red'
    },
    '@media screen and (min-width: 768px)': {
        button1: {
            color: 'green'
        },
        button2: {
            color: 'blue'
        }
    }
}

jss wasn't working for me, when I attempted to update it I noticed this:

npm WARN engine [email protected]: wanted: {"node":"0.8.0"} (current: {"node":"0.10.33","npm":"2.4.1"})

Are there plans to support node above v0.8 sometime soon? I'm using something else to achieve the same goal at the moment, but I would prefer to use jss, I like how it works.

Cheers

• for @media
• keyframes

@-webkit-keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}

@keyframes identifier {
  0% { top: 0; left: 0; }
  30% { top: 50px; }
  68%, 72% { left: 50px; }
  100% { top: 100px; left: 100%; }
}

• same for cli

Hey, the v0.10.1 tag doesn't exist here on github, just on npm. This matters for package managers getting sources from github instead of npm, like jspm.io for example.

Hi @kof, I'm getting ready to move from stylus to jss on my homepage at trusktr.io. :D I have a CSS gradient like this, in stylus:

        .fadeRight {
            background: fadeStartColor; /*Stylus variable*/
            background: -moz-linear-gradient(left, fadeStartColor 0%, fadeEndColor 100%);
            background: -webkit-gradient(left top, right top, color-stop(0%, fadeStartColor), color-stop(100%, fadeEndColor));
            background: -webkit-linear-gradient(left, fadeStartColor 0%, fadeEndColor 100%);
            background: -o-linear-gradient(left, fadeStartColor 0%, fadeEndColor 100%);
            background: -ms-linear-gradient(left, fadeStartColor 0%, fadeEndColor 100%);
            background: linear-gradient(to right, fadeStartColor 0%, fadeEndColor 100%);
            filter: unquote("progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff', GradientType=1 )");
        }

how would we do that in JSS considering that JavaScript object literals and JSON don't allow duplicate property names? Maybe using arrays? For example:

        '.fadeRight': {
            background: [
                fadeStartColor, /*JavaScript variable*/
                '-moz-linear-gradient(left, '+fadeStartColor+' 0%, '+fadeEndColor+' 100%)',
                '-webkit-gradient(left top, right top, color-stop(0%, '+fadeStartColor+'), color-stop(100%, '+fadeEndColor+'))',
                '-webkit-linear-gradient(left, '+fadeStartColor+' 0%, '+fadeEndColor+' 100%)',
                '-o-linear-gradient(left, '+fadeStartColor+' 0%, '+fadeEndColor+' 100%)',
                '-ms-linear-gradient(left, '+fadeStartColor+' 0%, '+fadeEndColor+' 100%)',
                'linear-gradient(to right, '+fadeStartColor+' 0%, '+fadeEndColor+' 100%'
            ],
            filter: 'unquote("progid:DXImageTransform.Microsoft.gradient( startColorstr=\'#000000\', endColorstr=\'#ffffff\', GradientType=1 )")'
        }

Add vendor prefixes to css properties.

Make a list of 3-5 Basic Universal Problems you are trying to solve with this approach.

Is it make css adressable with javascript without hussle?
Or get rid of css/sass/anything overhead?
And something like made modular web components easier?

JSS says it's small. kb numbers would be great to know

• jsperf.com is not reliable, we need a local setup for running benchmarks (we can use the underlying bench lib https://benchmarkjs.com/)
• we need to be able to change stuff and verify not having performance degradation
• we need to prove that detaching styles speeds up the nodes insertion and selectors for big apps. Thanks to @nmn for pointing this out.

Applying the generated class name with applyTo might even be better because it then allows for the opportunity to override things with inline styles without losing the previous styles. Maybe applyTo can have an extra parameter to specify if the style is applied by class name, or inline.

rule.applyTo(el) // adds the rule.className, without overriding stuff.
rule.applyTo(el, true) // style applied inline to element, overrides stuff.

This also led me to think of the idea in #36.

If cssText happens to be faster, then we can swap what true refers to, so that rule.applyTo(el) without the second parameter defaults to whichever is ultimately faster, but I think className will win. Doing some more research on the async rendering stuff...

The name in bower.json is set to "jss", but it's being published to bower as "jsstyles."

I'm a bit new to this and maybe the question is kind of pointless, but i read in another place, that using jss in components makes it hard to use server side rendering. My first thought is, that the styling created by jss can be added in a <style> tag. Wouldnt that enable to create a server response that works?

To make it possible to change values at runtime and let them rerender to stylesheet.

compare runtime overhead for some popular css lib like bootstrap

var rule = jss.createRule({
    padding: '20px',
    background: 'blue'
});

var someElement = document.getElementById('someEl');
rule.applyTo(someElemement); // to avoid using jQuery.

var nodeList = document.querySelectorAll('.buttons');
rule.applyTo(nodeList); // to avoid using jQuery.

Q: Would this be more performant than creating a stylesheet, putting a style tag in the page to make the browser parse it, then adding the jss-generated class onto an element?

First off, thanks for jss. I was just looking at react-styles and concerned that the style values were hardwired into the component (and to add a function to fetch the value based on the key would just trip up webpack). What I seek is a softwired approach where the style key-values are still optionally defined outside the component. This exact approach is what looks to be possible with jss, where sharing values and direct injection make this doable.

For me defining values in a separate "vars.js" file outside the components that use them is still the best. That way alternate vars.js files can be activated and multiple styles can be changed at once. The word I coined for what you called vars.js is decor files. I was defining them in pure json but I'll live with the js :)

Get this into react.js as soon as possible, your onto a good thing here. Its been a evolution from absurd.js to react-styles to jss, great progress!

Eg.

{
    '.container': {
        padding: '20px',
        // Should result in .container.clear, .container .button {}
        '&.clear, & .button': {
            clear: 'both',
            background: 'red'
        }
    }
}

I'm not sure whether this is actually a bug, or a documentation issue, but it appears that nesting rules via & only works correctly when the rules are passed to the createStylesheet method.

If rules are added later via stylesheet.addRules, the rules nested rules are added correctly to the rule's stylesheet object, but rule.toString() will not include them.

Example case: http://jsbin.com/munitobigo/1/edit

I noticed my media queries were not working after converting to jss and after a bit of digging, I noticed it was generating code like this:

@media (max-width: 600px) {
  .facet_sidebar: {
    display: none;
  }
}

The extra colon after .facet_sidebar is the issue. Looking at the code, there is an exception for @Keyframe to not include a colon but not @media. I don't think I'm familiar enough with CSS to know why this is in place so I'm filing a ticket rather than pull request.

See this published Bower package.

I wanted to use your jss with Rails Assets but can't add it.

Allow to write external preprocessors to modify property names or values. F.e. for adding vendor prefixes.

Which will add namespaces to class names in order to understand which one you see in inspector if it is generated

px would be the default. For example, so that we can replace

var style = {
  '.button': {
    width: '20px'
  }
}

with

var style = {
  '.button': {
    width: 20
  }
}

but if a different unit than the default px is wanted, then perhaps something like

jss.defaultUnit = 'em';
// or
jss.createStyleSheet(style, {defaultUnit: 'em'})

1 test is failing

In reference to #35, perhaps a way to remove those classes, specifying whether it affects the classname or inline styles:

rule.removeFrom(el) // removes the rule.className
rule.removeFrom(el, true) // removes from inline styles

1. Why cascade is bad?
2. Why specificity makes everything hard?
3. What is context and how to get rid of it (BEM as an example)

After playing with el.style, it seems like el.style.background += " whatever" will add the new whatever to the existing background property if the browser recognizes whatever, and if whatever doesn't override an already existing whatever. For example, if you do el.style.background += " url(one.png)" then el.style.background += " url(two.png)", the second one gets ignored. But if you do el.style.background += " url(one.png)" then el.style.background += " fixed", the fixed will get added since it doesn't override the url() because the url() corresponds to the background-image property, and the fixed applies to the background-position property.

Would it make sense to capture this functionality in jss? f.e.

jss.merge(rule1, rule2);

where rule1 might contain background: "url(...)" and rule2 might contain background: "fixed"?

{
    display: 'block',
    ':hover': {
        background: 'red'
    }
}

Or just make it via nested plugin

{
    display: 'block',
    '&:hover': {
        background: 'red'
    }
}

I'm interested is extending native CSS to define custom :selectors. For example ":click". Even if this meant compilation of jss yielded both a CSS and js file to send to a browser, I feel it would be worth it.

Is jss meant to be transpiled into pure CSS, or do you foresee it resulting in a hybrid of CSS and JS? Perhaps I can give an example of extending CSS:

JSS:

{
    '.container': {
        background: [
            'red'
        ]
    }
    '.foo:click' {
        background: [
            'blue'
        ]
    }
}

... which corresponds to CSS and JS:

.container { background: red; }
.foo.-click { background: blue;}

$('.foo').on('click', function() {
  $(this).toggleClass('-click'),
});

What I've wanted for a long time is a js/css hybrid language which could make it effortless to deal with all DOM events. So, I'm not sure if jss is meant to simply be turned into 100% css, or if it can be extended to do things that pure css can not do, such as a :click psuedo selector.

Async font loading using this technic

http://www.filamentgroup.com/lab/font-loading.html

https://github.com/filamentgroup/font-loading/blob/master/data-uris-cookie.html

In the slides you demonstrate how the cascade has issues when you compose classes in a tree, and then demonstrate the same code but with JSS.

I can't find any example of this in the examples directory. Could we get one added?

var style = jss.createStyle({
  'color' : 'black';
});

var el = // get reference to some element
style.pairWith(el);

// style will be detached when element is detached

Detach the style when the styled element is detached.

I believe the detach event can be emulated with MutationObserver.