jareware / css-ns Goto Github PK
View Code? Open in Web Editor NEWDead-simple CSS namespaces
Home Page: https://www.npmjs.com/package/css-ns
Dead-simple CSS namespaces
Home Page: https://www.npmjs.com/package/css-ns
yarn add css-ns
should successfully install css-ns
with latest versions of node
error [email protected]: The engine "node" is incompatible with this module. Expected version ">=9.3.0 <10". Got "10.7.0"
error Found incompatible module
npm init -y
)yarn add css-ns
while using any version of node < 9.3 or >= 10It looks like this commit fixed the issue but downloads from npm still show "node": ">=9.3.0 <10",
in package.json
. Maybe the latest just didn't get pushed to npm?
"engines": {
"node": ">=9.3.0 <10",
"npm": ">=5.5.1 <6"
},
Great idea for a library! I uses it with big pleasure.
I think it could be improved. On my project we lack for a ignore prefix, which would be replaced by library. Let me illustrate what I mean:
Let we have a React Component:
import R from 'react'
import { createCssNs } from 'css-ns'
const { React } = createCssNs({
'Example',
React: R,
glue: '-',
globalPrefix: '~'
})
class Example extends React.Component {
render () {
return (
<div className='this'>
<div className='title'></div>
<div className='~global-class-name'
</div>)
}
}
And this would transforms to:
<div className='Example'>
<div className='Example-title'></div>
<div className='global-class-name'
</div>
It would be very helpful. Now I don't see any workaround except create a prefix for all non-components classes
Hello, great module, thanks for saving me a lot of time !
Nested React.Fragment
s receive className as a prop. Fragments at first level are ok but not when they are nested in other elements or in a map() function for exemple. It is not a big issue because it does not cause any error in production build but in development environment the console is filled of warnings.
Warning: Invalid prop `className` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.
in Fragment (created by Example)
in Connect(App)
in Provider
const { React } = require('./path/to/css-ns')('Exemple');
class Example extends React.Component {
render () {
const items = [
'item-1',
'item-2',
'item-3'
];
return (
<div className='outer'>
{items.map(item => (
// This is the Fragment that receive the className prop
<React.Fragment key={item}>
{item !== 'item-1' && <div className='separator'></div>}
<div className='item'>{item}</div>
</React.Fragment>
))}
</div>
)
}
}
Check if the element in createElement is a Symbol or more precisely if
_.toString() !== 'Symbol(react.fragment)'
return Object.create(opt.React, { // inherit everything from standard React
createElement: { // ...except hijack createElement()
value: function(_, props) {
if (props && _.toString() !== 'Symbol(react.fragment)') props.className = ns(props.className);
return opt.React.createElement.apply(opt.React, arguments);
}
}
});
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.