npmpackage.info

Gathering detailed insights and metrics for @someonewithpc/scoped-css-loader

@someonewithpc/scoped-css-loader - 1.2.0 | npmpackage.info

@someonewithpc/scoped-css-loader

CSS encapsulation solution for React

1.2.0

464

JavaScript

7.52 kB

2.4

Installations

npm install @someonewithpc/scoped-css-loader

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

19.9.0

NPM Version

lerna/6.6.2/node@v19.9.0+x64 (linux)

Pull Requests

Open

4

Total

33

Closed

13

Merged

16

Issues

Open

22

Total

57

Closed

35

Releases

Unable to fetch releases

Languages

JavaScript

SCSS

JavaScript (94.47%)

SCSS (5.53%)

Developer

gaoxiaoliangz

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

464 Stars

112 Commits

39 Forks

3 Watchers

5 Branches

5 Contributors

Updated on Jun 08, 2025

Maintainers

View All 5 Contributors

Package Meta Information

Latest Version

1.2.0

Package Id

@someonewithpc/scoped-css-loader@1.2.0

Unpacked Size

7.52 kB

Size

3.01 kB

File Count

NPM Version

lerna/6.6.2/node@v19.9.0+x64 (linux)

Node Version

19.9.0

Published on

May 24, 2023

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

@vue/component-compiler-utils loader-utils qs schema-utils

React scoped CSS

CSS encapsulation solution for React

Why

In order to solve the problem of css encapsulation, there are two main approaches, css-modules and css-in-js. However, both of them have a very very big problem. The developer experience is not good, by which I mean you often have to write more code than you expect to achieve a simple style. With react-scoped-css, you can just write the normal css you know, while having the advantage of css encapsulation!

How does it work

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

1/* Title.scoped.css */
2.title {
3  background: #999;
4}
5
6p {
7  color: #ddd;
8}

Import the css file

1// Title.jsx
2import React from 'react'
3import './Title.scoped.css'
4
5const Title = (props) => {
6  return (
7    <h1 className="title">
8      <p>{props.children}</p>
9    </h1>
10  )
11}
12
13export 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 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

Then, install craco-plugin-scoped-css

yarn add craco-plugin-scoped-css

create a craco.config.js in your project root

1module.exports = {
2  plugins: [
3    {
4      plugin: require('craco-plugin-scoped-css'),
5    },
6  ],
7}

Manual setup

You have to add one babel plugin and one webpack loader.

the babel plugin

yarn add babel-plugin-react-scoped-css --dev

and in your babelrc add

1"plugins": ["babel-plugin-react-scoped-css"]

also note that you can define your own matching rule like this

1"plugins": [
2  [
3    "babel-plugin-react-scoped-css",
4    {
5      "include": ".local.(sa|sc|c)ss$"
6    }
7  ]
8]

If you have other plugins installed, just add it to the list, order doesn't matter.

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

the webpack loader

yarn add scoped-css-loader --dev

and in your webpack.config.js

1{
2  test: /\.(sc|c|sa)ss$/,
3  use: [
4    {
5      loader: 'style-loader',
6    },
7    {
8      loader: 'css-loader',
9      options: {
10        sourceMap: true,
11        importLoaders: 2,
12      },
13    },
14    // You have to put in after `css-loader` and before any `pre-precessing loader`
15    { loader: 'scoped-css-loader' },
16    {
17      loader: 'sass-loader',
18    },
19  ],
20},

That's it for the configuration.

Some common use cases with react scoped css

Check out simple-scoped-css-example

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

2

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

License

Determines if the project has defined a license.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

52 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-h5c3-5r3r-rr8q
Warn: Project is vulnerable to: GHSA-rmvr-2pp2-xj38
Warn: Project is vulnerable to: GHSA-xx4v-prfh-6cgc
Warn: Project is vulnerable to: GHSA-wf5p-g6vw-rhxx
Warn: Project is vulnerable to: GHSA-8hc4-vh64-cxmj
Warn: Project is vulnerable to: GHSA-jr5f-v2jv-69x6
Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
Warn: Project is vulnerable to: GHSA-4www-5p9h-95mh
Warn: Project is vulnerable to: GHSA-9gqv-wp59-fq42
Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m
Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3
Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
Warn: Project is vulnerable to: GHSA-76p7-773f-r4q5
Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v
Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986
Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v
Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h
Warn: Project is vulnerable to: GHSA-g78m-2chm-r7qv
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q

Score

2.4

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More