https://github.com/wesm87/styled-scopify

A factory function for styled-components that scopes all of your CSS rules to a root selector
https://github.com/wesm87/styled-scopify

postcss-scopify styled-components

Last synced: 4 days ago
JSON representation

A factory function for styled-components that scopes all of your CSS rules to a root selector

• Host: GitHub
• URL: https://github.com/wesm87/styled-scopify
• Owner: wesm87
• License: mit
• Created: 2018-03-19T00:45:56.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T01:57:36.000Z (almost 2 years ago)
• Last Synced: 2024-10-13T21:46:51.595Z (about 1 month ago)
• Topics: postcss-scopify, styled-components
• Language: TypeScript
• Size: 292 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# styled-scopify

A wrapper function for styled-components that scopes all of your CSS rules to a root

selector. This is useful if you use something like the `postcss-scopify` plugin. The

wrapper function is curried and accepts two arguments - a CSS selector string to use as

the scope and the original `styled` function - and returns the wrapped `styled` function.

## Install

```sh

# Yarn

yarn add styled-scopify

# npm

npm install --save styled-scopify

```

## Type Definitions

```

styledScopify :: String selector -> styled -> styled

```

## Examples

```js

// src/styled.js

import styled from 'styled-components';

import styledScopify from 'styled-scopify';

export default styledScopify('#root', styled);

// src/components/Foo.js

import styled from '../styled';

const Foo = styled.span`

  font-size: 14px;

  color: #333;

`;

// Without this wrapper function you'd have to do this for every component:

const Bar = styled.div`

  #root & {

    ...

  }

`;

```