Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
styled-import
Advanced tools
Readme
Extreme lightweight CSS parser for stealing rules from stylesheets (without adding the stylesheet to your bundle), to compose into Styled Components or anywhere else you might be doing CSS in JS.
Working with global or 3rd party CSS creates constant challenges when implementing other CSS solutions. styled-import is meant to ease some of the pain by letting you steal styles from those stylesheets without needing to link or bundle or otherwise include the stylesheets themselves.
Note that this library currently operates as a Babel macro, replacing all references to styled-import calls at compile-time with the actual style declarations from the referenced stylesheets.
$ npm install -D styled-import
Styled Import currently runs only as a Babel macro, so be sure you have configured Babel to use babel-plugin-macros.
Here is one example of how to do that:
.babelrc
{
"plugins": ["macros"]
}
NOTE: Macros are included in create-react-app 2 by default.
./stylesheets/global.css
.button {
color: blue;
}
./component.js
const styledImport = require('styled-import/macro')
const btnStyle = styledImport('./stylesheets/global.css', '.button')
console.log(btnStyle) // 'color: blue;'
const styled = require('styled-components')
const styledImport = require('styled-import/macro')
const btnStyle = styledImport('./stylesheets/global.css', '.button')
const Button = styled.button`
padding: 10px;
${btnStyle}
`
String composition works like inheritance/cascade:
const btnBlue = styledImport('./stylesheets/global.css', '.button-blue')
const Button = styled.button`
color: green;
padding: 10px;
${btnBlue}
`
// color: green is overridden by color: blue in btnBlue
const btnStyle = styledImport.react('./stylesheets/global.css', '.button')
// btnStyle is now an object {'color': 'blue'} with camelCased properties, instead of a CSS string
const btnStyle = styledImport('@org/stylesheets/global.css', '.button')
const [btnStyle, headerStyle] = styledImport('@org/styles/global.css', ['.button', '.header'])
const {button, header} = styledImport('@org/styles/global.css', {button: '.button', header: '.header'})
const cardBtnStyle = styledImport('./stylesheets/global.css', '.card .button')
const cardBtnStyle = styledImport('./stylesheets/global.css', /\.button/gi)
// returns an array of declarations from selectors that matched the regex (omit
g flag to return just the first match)
Make sure you're on the development branch and then:
$ npm test
NOTE: Tests will only run in a git cloned repo. They are disabled in the published npm module.
FAQs
Extreme lightweight CSS parser for stealing rules from stylesheets (without adding the stylesheet to your bundle), to compose into Styled Components or anywhere else you might be doing CSS in JS.
The npm package styled-import receives a total of 20 weekly downloads. As such, styled-import popularity was classified as not popular.
We found that styled-import demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.