Comments (18)
I actually suggest a different approach β removing :local
from css-loader
altogether. I've started a discussion (webpack-contrib/css-loader#308) over there but I don't expect it to be resolved fast enough for the needs of this project, so I think this linting rule is a good solution in the interim.
Interestingly, the whole concept of importing something from a CSS file is what I was hoping to achieve by proposing ICSS as a standard format β a minimal extension of CSS that allowed passing symbols around. This is what css-loader actually supports, everything related to :local
is actually just a series of PostCSS transforms compiling to ICSS. And so the concept of import styles from "./styles.css"
was always intended to be more widely-applicable β not specific to Webpack, CSS Modules, or anything. It just turned out to only be really used by CSS Modules.
So I'd love to think that any future bundler of CSS would permit some form of exporting from CSS to JS and so this kind of syntax will become more standard, but I admit that's well and truly beyond the scope of this issue :)
For what it's worth, if this project did decide to "support" CSS Modules, I think the best way would be if all files ending in *.module.css
were loaded with CSS Modules like Gatsby does β I think that's the closest thing we could get to having both no configuration and totally explicit behaviour. But I get that it's not on the roadmap for the moment.
from create-react-app.
In Gatsby we added CSS Modules support only for css files with names *.module.css
per @andreypopp's suggestion which seems safe enough. I don't have good enough pulse on where CSS Modules are in adoption life cycle but this might be a good compromise as CSS Modules are one of the most useful things to come along in the CSS world in a long time.
from create-react-app.
At a later point, we sure can. For now let's keep it as simple as possible.
from create-react-app.
CSJS is a good alternative to CSS Modules although I like the fact that you are not trying to enforce any CSS [in JS] methodology π
from create-react-app.
We can reconsider this in a few months. But it's good to warn until/unless we commit to supporting them.
from create-react-app.
Both Aphrodite and Radium are fine, since they don't use any webpack-specific features, which is what we want to avoid.
If we ever switch away from webpack and people are using CSS modules they won't have any chance to update because it won't work!
from create-react-app.
I got this π
from create-react-app.
@casesandberg I would use astexplorer to check the ast of the 2 forms
from create-react-app.
@gaearon Should this be in a eslint-plugin-create-react-app
module or just as a rule in config/rules
?
from create-react-app.
I'm not sure how to structure rules in eslint so whatever is simpler ;-)
from create-react-app.
I'm not really sure either-- if there is a possibility we will have more of these in the future we should probably bundle them all together in one plugin.
from create-react-app.
@gaearon is the plan to write linters against Aphrodite and Radium too? Or is CSS-in-JS okay to use?
from create-react-app.
@mxstbr just wanted to doublecheck
from create-react-app.
Meh, probably not worth it.
from create-react-app.
Hi, I don't know if anyone care about this anymore, but today I saw one of my teammate use CSS Modules in CRA without :local
by this way:
import styles from '!style!css?modules!./background.css';
is this something "no configuration and explicit behaviour" (an alternative to the .module.css
approach)?
from create-react-app.
Yes, CSS Modules now exposes locally by default and globally by explicit declaration (:global
)
from create-react-app.
today I saw one of my teammate use CSS Modules in CRA without :local by this way
Please tell them it is entirely unsupported and we reserve the right to break this in any release.
We donβt officially support Webpack loader syntax in import statements. If you can't find something in CRA docs then it's not supported.
from create-react-app.
@gaearon There is an eslint-plugin-import rule forbidding Webpack syntax in the path (it basically warns if there is a !
in the path).
I have noticed you disabled the whole plugin because of its compatibility with eslint-loader, but you could probably still use rules like these, that do not attempt to load/read other files. (I'm happy to make you a list of rules that should be fine and useful if you want)
from create-react-app.
Related Issues (20)
- Snyk Package Analysis - Sandbox Bypass Copy link to issue Vulnerability HOT 1
- Snyk Package Analysis - Regular Expression Denial of Service (ReDoS) Vulnerability HOT 1
- Snyk Package Analysis - Regular Expression Denial of Service (ReDoS) Vulnerability HOT 1
- Snyk Package Analysis - Improper Input Validation Vulnerability HOT 1
- Snyk Package Analysis - Prototype Pollution Vulnerability HOT 1
- Snyk Package Analysis - Missing Release of Resource after Effective Lifetime Vulnerability HOT 2
- Docs: code splitting links to old/incorrect React page
- Create issue Facebook app HOT 3
- Uncaught ReferenceError: process is not defined at emitReadable (_stream_readable.js:529:1) at onEofChunk (_stream_readable.js:506:1) at readableAddChunk (_stream_readable.js:255:1) at Readable.push (_stream_readable.js:241:1) at index.js:423:1 emitReadable @ _stream_readable.js:529 onEofChunk @ _stream_readable.js:506 readableAddChunk @ _stream_readable.js:255 Readable.push @ _stream_readable.js:241 (anonymous) @ index.js:423 Show 5 more frames Show less
- Run `npm install` in `D:\git\r\`. HOT 1
- Hi gaearon
- Hebosho911
- Could the community save this dead project? HOT 4
- pateknuk
- use parameter decorator HOT 5
- My React app not installing HOT 3
- create-react-app problem
- Can't start creat react app HOT 1
- Facing an error to install firebase HOT 1
- It is intentionally verbose. Otherwise there is a risk of accidentally exposing a private key on the machine that happens to have the same name.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from create-react-app.