Package Exports
- @ianhuet/jss-assign-specificity-increase
- @ianhuet/jss-assign-specificity-increase/index.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@ianhuet/jss-assign-specificity-increase) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
jss-assign-specificity-increase
Increases specificity of selectors with configurable prefix. Port of postcss-increase-specificity.
By default this plugin uses :not(#\20), :not(.\20) and :not(\20) instead of generating unlikely appearing ids…
Rationale: \20 is a css escape for U+0020 Space, and neither classname, nor id, nor tagname can contain a space
install
npm install --save jss-assign-specificity-increase
yarn jss-assign-specificity-increase
Usage
import jss from 'jss'
import preset from 'jss-preset-default'
import assignSpecificityIncrease from 'jss-assign-specificity-increase';
jss
.setup(preset())
.use(assignSpecificityIncrease({ prefix: 'html body ', repeat: 1 }))
const styles = {
button: {
fontSize: 12,
'&:hover': {
background: 'blue'
}
},
ctaButton: {
extend: 'button',
'&:hover': {
background: color('blue').darken(0.3).hexString()
}
},
'@media (min-width: 1024px)': {
button: {
width: 200
}
}
}
const {classes} = jss.createStyleSheet(styles).attach()
document.body.innerHTML = `
<button class="${classes.button}">Button</button>
<button class="${classes.ctaButton}">CTA Button</button>
`Result
<head>
<style type="text/css">
html body .button-123456 {
font-size: 12px;
}
html body .button-123456:hover {
background: blue;
}
html body .ctaButton-789012 {
font-size: 12px;
}
html body .ctaButton-789012:hover {
background: red;
}
@media (min-width: 1024px) {
html body .button-123456 {
min-width: 200px;
}
}
</style>
</head>
<body>
<button class="button-123456">Button</button>
<button class="ctaButton-789012">CTA Button</button>
</body>API
increaseSpecificity(options)
Options:
prefix
Type: String
Default: :not(#\20)
What string/selectors to add before all styles.
repeat
Type: Number
Default: 3
How many times should plugin repeat prefix.
Disable plugin for a Sheet
jss.createStyleSheet(styles, {assignSpecificityIncrease: false})License
MIT © Vladimir Starkov