With the fix for #196, now the stylesheet gets generated with extra "!important" lines:

.__sjcenb-data-fields {
    min-height:88px !important; !important;
}

Luckily, the extra lines get dropped since they're invalid, but it's not ideal.

Span errors in console, when multiple the same block name is used multiple times.

Hello, I have a problem using nano-css in combination with global pre-existing styles.

For example:

/* style.css */
.myapp button {
  font-size: inherit;
}

Then I create a button with jsx:

const Button = jsx('button', {
  fontSize: '24px'
});

Which generates a random class name for my button component. Problem is, due to css rules specificity the global rule is more specific than the one generated for the component and so the custom font-size is ignored.

Other css-in-js handled that problem with a custom namespace that could be added to every class, like this one for stylis.

It could be possible to implement something like that for nano-css? Maybe it could be enough to just allow to pass a custom stylis instance to the stylis addon, which could also be useful for other reasons.

Thank you.

I'm very excited by this project; it ticks a lot of the needs we have for a CSS-in-JS solution.

One thing would make it fit exactly: the ability to not have a runtime at all.

I know that goes against some of the CSS-in-JS "rules".

The way I would see it would be that I could use the sheet interface to add classes to my components. Then I could run an extract that would generate the CSS file. This would also replace the references to the classes with the actual class names.

It could be like this: It would replace the calls to nano with the results
Input:

const cssMap = {
    input: {
        border: '1px solid grey',
    },
    button: {
        border: '1px solid red',
        color: 'red',
    }
};
const styles = sheet(cssMap);

<input className={styles.input}>
<button className={styles.button}>Click me!</button>

And output:

const styles = {
	input: 'class-b-1px-solid-grey',
	button: 'class-b-1-px-solid-grey-c-red',
};

<input className={styles.input}>
<button className={styles.button}>Click me!</button>

This way, the actual calls to nano would be removed and then pruned. The size of my app wouldn't be any bigger, but it would have the advantages of CSS-in-JS except for dynamic classes/styles, which is a known limitation and one which I accept.

I'm trying to use nano-css with a new preact project using TypeScript and it's not finding/working with the type definitions in the package.

tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "jsx": "react",
    "jsxFactory": "h",
    "lib": ["es5", "es6", "dom"],
    "rootDirs": ["src"]
  }
}

src/nano.ts:

import { preset } from 'nano-css/preset/sheet';

const { rule, sheet } = preset();

export {
  rule,
  sheet,
};

The error I am getting is:

7016[QF available]: Could not find a declaration file for module 'nano-css/preset/sheet'. 
'/Users/tombell/Code/[redacted]/node_modules/nano-css/preset/sheet.js' implicitly has an 'any' type. 
Try `npm install @types/nano-css` if it exists or add a new declaration (.d.ts) file containing `declare module 'nano-css/preset/sheet';

I can disable the error by turning off noImplicitAny, but I would rather not disable that for my actual project.

Hi, first of all thank you for so good library.

I'm using nano-css in my project based on Vue.js and every time during install dependencies I get warnings, that react and react-dom are not installed.

Everything works fine, except of that moment.

Can You fix that? Thanks

According to this issue, they're not going to support it: robinweser/inline-style-prefixer#104

They're leaving it up to the CSS-in-JS authors.

Glamor's support: threepointone/glamor#14

JSS's effort: cssinjs/jss#233

See this example:
https://runkit.com/embed/klxlsl0wzrnm

Enabling the virtual add-on causes rules that use media queries to return an empty string.

When I use "content" styles, the styles have to be surrounded by an extra pair of quotes or it'll get messed up.

An example original CSS:

.divider {
  &:after {
    content: '|';
  }
}

Code:

nano.rule({
  divider: {
    '&:after': {
      content: '|',
    },
  },
});

Resulting CSS:

.__1elt25k-divider:after {
    content:|;
}

Notice that the quotes have been stripped from the content character. If I use a doubly-quoted string content: '"|"', it works just fine.

I'm not sure that this is a bug or more of a "I have to look out for content rules since they're special" thing.

I can't figure out exactly why, but v3.0.0 broke my plugin: https://bitbucket.org/TheBosZ/rollup-plugin-nano-css/

With 2.2.0, all tests pass, but with 3.0.0, calling nano.sheet returns an empty object instead of the expected string of class names.

Add normalize.css reset:

• https://github.com/necolas/normalize.css/blob/master/normalize.css

Create gql addon:

• https://github.com/braposo/graphql-css

Create an extract addon as described here: MicheleBertoli/css-in-js#86 (comment)

As a first step, don't create a Webpack plugin but just the extract addon itself, which makes sure all static CSS is added to nano.raw.

Let's say that I want to take advantage of the extract add on. How do I prevent style insertion when the rules are provided by including the generated stylesheet?

According to react convention, components starting with use- prefix are hooks.
That's a bit confusing that this component is called like hook but indeed it is not.

Would be nice to just

props => {
let classes = useStyles({
root: {...},
secondary: {...}
})

return <div className={classes.root}></div>
}

Unless I’m misunderstanding the (very scant) docs, when the virtual addon is enabled, hydrate does not seem to do what it's supposed to, i.e. it does not reuse the rules injected by the server into the DOM.

Here’s a simple test case to reproduce:

import { create } from "nano-css";
import { addon as addonRule } from "nano-css/addon/rule";
import { addon as addonVirtual } from 'nano-css/addon/virtual';
import { addon as addonHydrate } from "nano-css/addon/hydrate";

const style = document.createElement("style");
style.innerText = "._a {color: red;}._b {color: blue;}";
document.head.appendChild(style);

const nano = create({ sh: style });
addonRule(nano);
addonVirtual(nano);
addonHydrate(nano);

console.log(nano.rule({ color: "blue" }));
console.log(nano.rule({ color: "red" }));

(Run it in CodeSandbox)

I would expect color: blue to return the existing _a class and color: red to return the existing _b class. Instead they return new class names, which clash with the server-rendered ones. This breaks all the styles!

As an aside, the docs mention injecting nano.raw into the server rendered HTML. However, there is no mention of the fact that you're supposed to clear the accumulated rules after every page render, or how to do that. The only way I’ve found so far that works reliably is to create a new nano instance for every request.

This:

nano.sheet({
  'picker': {
    'z-index': '99999 !important',
 }
});

Gets turned into this:

.__1m4gp78-picker {
  z-index:99999 !important !important;
}

Which is not valid.

Add virtual addon, that would inject CSS styles using "Virtual CSS". It would basically overwrite put() addon.

https://ryantsao.com/blog/virtual-css-with-styletron

Stylis dependency is fixed in package.json to 3.5.0 when there is several patch versions with bug fixes.

Consider to allow update version by semver? (~3.5.0 or ^3.5.0)

nano-css may be good after look through all of the documents. It's overwhelming for new comers. How to grab the recommended practice quickly?

Add these CSS resets:

• https://github.com/sindresorhus/modern-normalize/blob/master/modern-normalize.css
• https://github.com/necolas/normalize.css

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

Invalid npm token.

The npm token configured in the NPM_TOKEN environment variable must be a valid token allowing to publish to the registry https://registry.npmjs.org/.

If you are using Two-Factor Authentication, make configure the auth-only level is supported. semantic-release cannot publish with the default auth-and-writes level.

Please make sure to set the NPM_TOKEN environment variable in your CI with the exact value of the npm token.

Good luck with your project ✨

Your semantic-release bot 📦🚀

Currently nano.rule and nano.put use individual calls to appendChild to add rules to a <style> tag while in development. As the stylesheet grows, some appendChild calls can take up to 30ms (see screenshot), which for large updates can add up to several seconds (3.6s in my example below).

This could be made a lot faster by batching updates together and setting the <style> tag content using innerText.

Simple batching using requestAnimationFrame is not super efficient – due to the overhead of lots of requestAnimationFrame/cancelAnimationFrame calls – but it cuts the time down by ~30x, which is acceptable. Would making the updates to the stylesheet asynchronous have any major downsides?

Alternatively, an explicit batching/transaction API could be introduced, but that seems overkill for something that’s only an issue in development.

Any other ideas?

Virtual will murder keyframes.

The following:

@keyframes sk-foldCubeAngle {
	0%, 10% {
		transform: perspective(140px) rotateX(-180deg);
		opacity: 0;
	}
	25%, 75% {
		transform: perspective(140px) rotateX(0deg);
		opacity: 1;
	}
	90%, 100% {
		transform: perspective(140px) rotateY(180deg);
		opacity: 0;
	}
}

Gets murdered into something like this:

@keyframes sk-foldCubeAngle{._ne:before 0%,._ne:before  10%{transform:perspective(140px) rotateX(-180deg)}}@keyframes sk-foldCubeAngle{._nf:before 0%,._nf:before  10%{opacity:0}}@keyframes sk-foldCubeAngle{._ng:before 25%,._ng:before  75%{transform:perspective(140px) rotateX(0deg)}}@keyframes sk-foldCubeAngle{._nh:before 25%,._nh:before  75%{opacity:1}}@keyframes sk-foldCubeAngle{._ni:before 90%,._ni:before  100%{transform:perspective(140px) rotateY(180deg)}}@keyframes sk-foldCubeAngle{._nj:before 90%,._nj:before  100%{opacity:0}}._nk:before{transform-origin:100% 100%}._nl{transform:scale(1.1) rotateZ(90deg)}._nm:before{animation-delay:0.3s}._nn{transform:scale(1.1) rotateZ(180deg)}._no:before{animation-delay:0.6s}._np{transform:scale(1.1) rotateZ(270deg)}._nq:before{animation-delay:0.9s}

When it should really just be:

@keyframes sk-foldCubeAngle{0%, 10%{transform:perspective(140px) rotateX(-180deg);opacity:0;}25%, 75%{transform:perspective(140px) rotateX(0deg);opacity:1;}90%, 100%{transform:perspective(140px) rotateY(180deg);opacity:0;}}

Because it's just looking for a semicolon, it's inserting an "!important" in the middle of this url:

{
  'background-image': 'url("data:image/svg+xml;utf8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\' width=\'48\' height=\'36\' viewBox=\'0 0 48 36\' fill=\'rgb(28,28,28)\'%3E%3Crect x=\'16\' y=\'12\' width=\'16\' height=\'2\' /%3E%3Crect x=\'16\' y=\'17\' width=\'16\' height=\'2\' /%3E%3Crect x=\'16\' y=\'22\' width=\'16\' height=\'2\' /%3E%3C/svg>")',
}

Result:

background-image:url("data:image/svg+xml !important;utf8,%3-csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='48' height='36' viewBox='0 0 48 36' fill='rgb(28,28,28)'%3E%3Crect x='16' y='12' width='16' height='2' /%3E%3Crect x='16' y='17' width='16' height='2' /%3E%3Crect x='16' y='22' width='16' height='2' /%3E%3C/svg>") !important;

Note that the part xml;utf8, got converted to xml !important;utf8

Would you be able to add an addon to support horizontal and vertical for margin and padding?
It would be used like:

{
  marginHorizontal = '20px'
}

Which would be equivalent to:

{
  marginLeft = '20px',
  marginRight = '20px'
}

And vertical would be used for both top and bottom values.
Could even add them to atoms with v and h.
I'm just used to using those in React Native and I would love to see support for it in here!

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

Invalid npm token.

The npm token configured in the NPM_TOKEN environment variable must be a valid token allowing to publish to the registry https://registry.npmjs.org/.

If you are using Two-Factor Authentication, make configure the auth-only level is supported. semantic-release cannot publish with the default auth-and-writes level.

Please make sure to set the NPM_TOKEN environment variable in your CI with the exact value of the npm token.

Good luck with your project ✨

Your semantic-release bot 📦🚀

Crate validator addon:

• https://www.npmjs.com/package/css-validator

I'm in the process of converting our project over to using NanoCSS (which we're loving, by the way) and I came across an interesting situation.

We have an element that needs padding between it and any copies of itself.

The sass uses this:

.new-data-field {
	border: 1px solid $white;
	border-radius: 2px;
	padding: 5px;

	+ .new-data-field {
		margin-top: 5px;
	}
}

Translated into JSON, I have this:

'new-data-field': {
	border: `1px solid ${Colors.$white}`,
	'border-radius': '2px',
	padding: '5px',

	'+ &': {
		'margin-top': '5px',
	},
},

That generates incorrect classes:

.__1mqbk4w-new-data-field {
    border:1px solid #fff !important;
    border-radius:2px !important;
    padding:5px !important;
}

+ .__1mqbk4w-new-data-field {
    margin-top:5px !important;
}

If I try to manually set the relationship using '& + &' like this:

'new-data-field': {
	border: `1px solid ${Colors.$white}`,
	'border-radius': '2px',
	padding: '5px',

	'& + &': {
		'margin-top': '5px',
	},
},

I get the following, also-incorrect, CSS:

.__1lol306-new-data-field {
    border:1px solid #fff !important;
    border-radius:2px !important;
    padding:5px !important;
}

.__1lol306-new-data-field + & {
    margin-top:5px !important;
}

Is there something I'm missing here? How can I support this situation?

I know I could make another class for just the elements beyond the first, but I was wondering if there was a way to do it using the "+" selector.

Thanks!

Create helpers for easily creating media queries. Example:

• https://github.com/Dan503/mq-scss

I’ve been using the virtual add-on mainly because it has the side effect of not inserting new rules on every render and infinitely growing the stylesheet. Since I noticed that virtual has issues with server rendering, I tried disabling it, and I was surprised to see that by default, Nano does not keep a cache rules previously injected in the stylesheet.

If you inline rule definitions in your React render methods, new rules get added on every render, even if they are identical.

Here's a screenshots from logging before insertRule. I've got 600 rules right after load, and identical rules are injected all the time:

With a quick custom solution I wrote that does caching, the number of rules on the same page plateaus somewhere around 80:

I think Emotion and most other CSS libraries optimize this part. It seems like a relatively simple optimization. Any reason not to do it?

When using vcssom addon, the unitless addon has no effect.

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

Invalid npm token.

The npm token configured in the NPM_TOKEN environment variable must be a valid token allowing to publish to the registry https://registry.npmjs.org/.

If you are using Two-Factor Authentication, make configure the auth-only level is supported. semantic-release cannot publish with the default auth-and-writes level.

Please make sure to set the NPM_TOKEN environment variable in your CI with the exact value of the npm token.

Good luck with your project ✨

Your semantic-release bot 📦🚀

package.json has a script for demo, but their is no webpack.config.js present, that is used by the script.

If it is intentionally done, I can raise a PR updating demos for the library.

If I run the extract add on using the JSX demo, node throws an error:

C:\projects\nano-css-extract-demo\demo>node extract.js
C:\projects\nano-css-extract-demo\demo\src\nano.js:1
(function (exports, require, module, __filename, __dirname) { import { createEle
ment } from "react";
                                                              ^^^^^^

SyntaxError: Unexpected token import
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:616:28)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (C:\projects\nano-css-extract-demo\demo\extract.js:1:7
6)

Can you provide an updated example that uses the JSX demo?

Using the prefix addon with "user-select" generates invalid CSS.

It's because the kebab method doesn't properly handle the result from inline-style-prefixer.

Here's the result from running prefixer: https://runkit.com/embed/68hf1a20xhsd

{
	"WebkitUserSelect" : "none",
	"MozUserSelect" : "none",
	"msUserSelect" : "none",
	"userSelect" : "none"
}

Note that the ms version has a lower-case m. That makes the kebab return 'ms-user-select' instead of the proper '-ms-user-select'.

Is there any plugin for Webpack to extract static CSS?

The current solution to extract CSS using Node script is very inconvenient because it cannot be added to Webpack build.

It shouldn't as it prevents animations from running.

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

The push permission to the Git repository is required.

semantic-release cannot push the version tag to the branch master on remote Git repository with URL https://github.com/streamich/nano-css.git.

Please refer to the authentication configuration documentation to configure the Git credentials on your CI environment and make sure the repositoryUrl is configured with a valid Git URL.

Good luck with your project ✨

Your semantic-release bot 📦🚀

Hi @streamich,

Awesome and thorough work on this! :) I believe css-in-js is the future and am always glad to see new and ambitious projects.
I also like how everything is optional, pluggable and that nothing is opinionated and that it is framework/runtime agnostic.

I realize it's a new project and probably still lacks some features, and I bet you've got a list of these too :). One thing which I personally, can't live without in css-in-js (and JS transpilers) is source maps.
In the world of css-in-js, I've only used styled-components and emotion so far. The latter supports source maps, while the former doesn't. To me, it is such a detrimental feature that I may switch from styled to emotion in a large project I lead.

Hope you add source maps to nano-css at some point. I'll be keeping an eye on your project, since it seems promising.

http://cssinjs.org/jss-expand?v=v5.1.0

I run the following code

nano.global({
    '@font-face': {
        fontFamily: 'Panton Regular',
        src: 'url("/fonts/Panton-Regular.woff2") format("woff2")',
        fontWeight: 'normal',
        fontStyle: 'normal'
    }
});

and it results to this CSS which is invalid

@font-face{
 {
    font-family:Panton Regular;
    src:url("/fonts/Panton-Regular.woff2") format("woff2");
    font-weight:normal;
    font-style:normal;
}
}

Valid CSS looks like this:

@font-face
 {
    font-family:Panton Regular;
    src:url("/fonts/Panton-Regular.woff2") format("woff2");
    font-weight:normal;
    font-style:normal;
}

• Improve README
• Add quick getting started usage example, using a preset

This is related to #203, but slightly different.

We stopped using the "important" addon because we finally excised all SASS files, but this is causing issues.

We have a style definition of this:

{
  'background-image': 'url("data:image/svg+xml;utf8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\' width=\'48\' height=\'36\' viewBox=\'0 0 48 36\' fill=\'rgb(28,28,28)\'%3E%3Crect x=\'16\' y=\'12\' width=\'16\' height=\'2\' /%3E%3Crect x=\'16\' y=\'17\' width=\'16\' height=\'2\' /%3E%3Crect x=\'16\' y=\'22\' width=\'16\' height=\'2\' /%3E%3C/svg>")',
}

It generates the following style:

background-image:url("data:image/svg+xml;utf8,%3-csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='48' height='36' viewBox='0 0 48 36' fill='rgb(28,28,28)'%3E%3Crect x='16' y='12' width='16' height='2' /%3E%3Crect x='16' y='17' width='16' height='2' /%3E%3Crect x='16' y='22' width='16' height='2' /%3E%3C/svg>");

Notice how the characters "utf8,%3Csvg" got converted to "utf8,%3-csvg". That breaks the XML and causes the rule to be dropped by the browser.

The correct rule is:

background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='48' height='36' viewBox='0 0 48 36' fill='rgb(28,28,28)'%3E%3Crect x='16' y='12' width='16' height='2' /%3E%3Crect x='16' y='17' width='16' height='2' /%3E%3Crect x='16' y='22' width='16' height='2' /%3E%3C/svg>");

Note: I'm assuming that kebab is to blame here, but I don't really know. It's quite possible that kebab shouldn't be run on url() values.

Create an addon which works with CSS vars and observables, maybe something what JSS does:

http://cssinjs.org/observables

Firstly, great work on this library! It's the smallest and most performant CSSinJS solution that I have found so far!

Is there any way to remove the leading space from the generated class name other than always having to manually trim them?

I feel like it would be easier for those using in React concatenating to just add a space. Whenever I try to use it with classList.add on a normal element, it blows up because of the leading space.

In process of converting our project from sass, I ran across a problem with how I was implementing Keyframes for an animation.

I was just using sheet() for all my rules, but noticed that the keyframes addon didn't work.

I switched to using rule() and it worked fine.

I thought sheet() was just a fancy wrapper around rule. If it is, it should handle keyframes the same as rule(). If not, maybe note that in the documentation?

create snake addon that would allow to create CSS-like objects using using method chaining.

Or maybe call it chain addon.

• https://github.com/porsager/bss

If I use @css when render is called, it is not passed props anymore and you have to access them via this.props.

Also, react is called explicitly here https://github.com/streamich/nano-css/blob/master/addon/util/transformComponentStatic.js#L18

For compatibility this should be configurable.

Create objstr function, like here: http://css-blocks.com/