kodyl / stilr Goto Github PK
View Code? Open in Web Editor NEWEncapsulated styling for your javascript components with all the power of javascript and CSS combined.
License: MIT License
Encapsulated styling for your javascript components with all the power of javascript and CSS combined.
License: MIT License
CSSPropertyOperations
has moved from the react
package to the react-dom
package.
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.
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;
It would be awesome to add eslint to the travis build.
I just added PR #26 and on Node 4.x TravicCI is complaining:
The package [email protected] does not satisfy its siblings' peerDependencies requirements!
This seems like the strictly the wrong way to inject styles.
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?
Just opening to track this, may make a PR for it soon.
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.
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.
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?
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?
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?
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.
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
})
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
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?
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)
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.