babel-plugin-react-scoped-css - npm Package Compare versions

Comparing version 0.3.3 to 0.4.0

package.json

		{
		"name": "babel-plugin-react-scoped-css",
		"version": "0.3.3",
		"version": "0.4.0",
		"main": "index.js",
		@@ -19,3 +19,3 @@ "license": "MIT",
		],
		"gitHead": "dea49f1948e2aab761ed03953167c9b5d88bb0f3"
		"gitHead": "b1086294433c323a556662f2049df2ef80268141"
		}

115

README.md

		@@ -9,4 +9,65 @@ # React scoped CSS

		## How does it work

		Write your css in a file ends with `.scoped.css` (`scss` & `sass` are also supported)

		```css
		/* Title.scoped.css */
		.title {
		background: #999;
		}

		p {
		color: #ddd;
		}
		```

		Import the css file

		```js
		// Title.jsx
		import React from 'react'
		import './Title.scoped.css'

		const Title = props => {
		return (
		<h1 className="title">
		<p>{props.children}</p>
		</h1>
		)
		}

		export default Title
		```

		Then, in the html, component with scoped css file imported has a unique `data-v-<hash>` attribute on the html element tag, and the css selector also has a corresponding hash like `selector[data-v-<hash>]`. So all the styles in `Title.scoped.css` are scoped to `Title.jsx`.

		## How to use

		### Use in an existing create-react-app project (which hasn't been ejected yet)

		Since create-react-app doesn't allow you to change webpack and babel config. So in this scenario, you have to use [craco](https://github.com/sharegate/craco) to override webpack config. Luckily you don't have to do it manually, I created a craco plugin that can do it for you.

		Setup craco following [this guide](https://github.com/sharegate/craco/blob/master/packages/craco/README.md#installation)

		Then, install craco-plugin-scoped-css

		```
		yarn add craco-plugin-scoped-css
		```

		create a `craco.config.js` in your project root

		```js
		module.exports = {
		plugins: [
		{
		plugin: require('craco-plugin-scoped-css'),
		},
		],
		}
		```

		### Manual setup

		You have to add one babel plugin and one webpack loader.
		@@ -41,3 +102,3 @@

		Note: this plugin accepts `include`(RegExp, which defaults to `/\.scoped\.(s)?css$/`) to config which css file to be identified as scoped.
		Note: this plugin accepts `include`(RegExp, which defaults to `/\.scoped\.(sa\|sc\|c)ss$/`) to config which css file to be identified as scoped.

		@@ -77,56 +138,4 @@ the webpack loader

		## Example

		```css
		/* Title.scoped.css */
		.title {
		background: #999;
		}

		p {
		color: #ddd;
		}
		```

		```js
		// Title.jsx
		import React from 'react'
		import './Title.scoped.css'

		const Title = props => {
		return (
		<h1 className="title">
		<p>{props.children}</p>
		</h1>
		)
		}

		export default Title
		```

		Then, in the html, component with scoped css file imported has a unique `data-v-<hash>` attribute on the html element tag, and the css selector also has a corresponding hash like `selector[data-v-<hash>]`.

		## Some common use cases with react scoped css

		Check out [simple-scoped-css-example](https://github.com/gaoxiaoliangz/react-scoped-css/tree/master/examples/simple)

		## Use scoped css in create react app

		Due to the fact that create react app doesn't allow user to modify the config of webpack or babel, I created my own fork of a configurable version of it. You can find it [here](https://github.com/gaoxiaoliangz/create-react-app/tree/master/packages/react-scripts).

		### Use in a new create-react-app project

		```
		create-react-app app_name --scripts-version=@gxl/react-scripts
		```

		and you are good to go, react scoped css is supported by default

		### Use in an existing create-react-app project (which hasn't been ejected yet)

		```
		npm install @gxl/react-scripts --save-dev
		npm remove react-scripts
		```

		and next time you start your project you're bootstrapping from @gxl/react-scripts

babel-plugin-react-scoped-css - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics