import StyleBridge from 'style-bridge';
const bridge = new StyleBridge('my-stylesheet-selector', {
desktop: [null],
tablet: ['screen and (max-width: 991px)'],
...
});
To use StyleBrige, you will primarily use the StyleBridge
constructor. Pass the constructor a selector expression
and an object consisting of the media-queries that you want to have parsed.
Nothing hapens until the parse
method will be called. This let's the you decide when to (re-)parse the document or when.
new StyleBridge(..., { ... }).parse();
bridge.select('.my-element', 'desktop').set('background-color', 'red');
bridge.select('.my-element', 'desktop').remove('background-color');
brige.select('.my-element').remove();
bridge.toObject();
// {
// mediaqueries: {
// desktop: '',
// tablet: 'screen and (max-width: 991px)'
// },
// rules: {
// desktop: {
// body: {
// 'background-color': 'red',
// 'margin-top': '0px'
// },
// },
// tablet: { ... }
// }
// }
Have a bug? Please create an issue here on GitHub that conforms with our contributing guidelines. You can also browse the Help Wanted tag in our issue tracker to find things to do.
If you discover a security vulnerability within this package, please send an e-mail directly to the Centagon Developers at developers@centagon.com. All security vulnerabilities will be promptly addressed.
This package is available under the MIT license.
Copyright (c) 2018 Centagon, B.V.