Comments (4)
from https://github.com/TeamSupercell/typings-for-css-modules-loader/blob/master/src/index.js#L59
// let's only check `exports.locals` for keys to avoid getting keys from the sourcemap when it's enabled
// if we cannot find locals, then the module only contains global styles
is this a correct assumption?
from typings-for-css-modules-loader.
That's interesting. For me, using:
// ..
{
compileType: "module",
namedExport: true
}
// ..
Generated an error that I must set exportLocalsConvention: "camelCaseOnly"
- and the compile process wouldn't finish.
Anyways, I'm currently seeking a fix for issues with camelCase exports that aren't stripping special characters from css class names (i.e. '+'). Otherwise, my configuration is working with all the latest deps (just pasting my whole webpack.config.babel.js
):
module.exports =
{
entry: { // We specify the entry so we can use a custom entry point
// Otherwise index.js is expected (anywhere in folder stucture)
app: "./src/app.tsx"
},
output: {
//filename: "bundle.js",
path: path.resolve(__dirname, 'dist'),
}, // Enable sourcemaps for debugging webpack's output:
devtool: "source-map",
resolve: { // Add '.ts' and '.tsx' as resolvable extensions.
extensions: ['.ts', '.tsx', '.js', '.jsx', ".css", ".scss", '.json']
},
module: {
rules: [ // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader':
{
test: /.tsx?$/,
use: [
{
loader: "awesome-typescript-loader"
}
]
}, // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader':
{
enforce: "pre",
test: /.js$/,
use: [
{
loader: "source-map-loader"
}
]
}, // ES6/7 JavaScript will be handled by babel-loader
{
test: /.js$/,
//exclude: /node_modules/,
use: [
{
loader: "babel-loader"
}
]
},
{ // HTML Template
test: /.html$/,
use: [{ loader: "html-loader", options: { minimize: false } }]
},
{ // Image Optimization
test: /.(gif|png|jpe?g|svg)$/i,
use: [
{
loader: "url-loader",
options: {
exclude: /.(svg)$/i,
name: "./images/[name]_[hash:7].[ext]",
limit: 10000
}
},
{
loader: 'img-loader'
}
]
},
{ // SCSS Compilation
test: /\.(scss|css)$/,
//include: [
// path.resolve(__dirname, "src/scss")
//],
use: [
{
loader: "style-loader"
},
{
// We'll use a drop-in replacement for css-loader which supports importing
// SCSS within a typescript file
//loader: "css-loader"
//loader: "typings-for-css-modules-loader", <-- no longer maintained as of 2017??
loader: "@teamsupercell/typings-for-css-modules-loader",
options: {
// Options are now passed directly to "css-loader"
}
},
{
loader: "css-loader",
options: { // options signature for style-loader, css-loader, and sass-loader have changed:
modules: {
compileType: "module", // Instead of modules: true
namedExport: true, // Requires exportLocalsConvention: "camelCaseOnly" instead of "camelCase"
exportLocalsConvention: "camelCaseOnly",
//mode: "local",
//auto: true,
//exportGlobals: true,
//exportOnlyLocals: false
}
}
},
{
loader: "sass-loader",
options: {
sassOptions: { // includePaths is now embedded under sassOptions
includePaths: ["node_modules"]
}
}
}
]
}
]
},
plugins: [
new HtmlWebPackPlugin(
{
favicon: "src/assets/favicon.ico",
template: "src/index.html",
filename: "./index.html"
}
),
new MiniCssExtractPlugin(
{
filename: "[name].css",
chunkFilename: "[id].css"
}
)
],
// When importing a module whose path matches one of the following, just assume a corresponding global
// variable exists and use that instead. This is important as it allows us to avoid bundling all of our
// dependencies, which subsequently allows browsers to cache those libraries between builds:
//externals:
//{
// "react": "React",
// "react-dom": "ReactDOM"
//}
};
from typings-for-css-modules-loader.
Here is my current webpack config for CSS:
{
test: /\.(css|scss)$/,
include: cssPaths,
use: [
{
loader: 'style-loader',
options: {
esModule: true,
modules: {
namedExport: true
}
}
},
'@teamsupercell/typings-for-css-modules-loader',
// 'css-modules-typescript-loader',
{
loader: 'css-loader',
options: {
url: false,
esModule: true,
import: false,
modules: {
compileType: 'module',
mode: 'local',
exportGlobals: true,
localIdentName: '[local]',
// localIdentContext
// localIdentHashPrefix: undefined,
// localIdentRegExp: undefined,
// getLocalIdent: undefined,
namedExport: true,
exportLocalsConvention: 'camelCaseOnly',
exportOnlyLocals: false
},
sourceMap: true,
importLoaders: 1
}
},
{ loader: 'postcss-loader' }
]
}
versions:
"postcss": "^8.2.1",
"webpack": "^5.10.1",
(FWIW) I forked the project and adding some code to work with my setup.
bahtou@398a1e5#diff-3274f1a37032fb0ae4e2823def0007c634e869ae0dfc304ff6a12c36513c3a52R26
from typings-for-css-modules-loader.
I could work around the issue by explicitly setting exportLocalsConvention
to camelCase
. This will create members in both their original notation as well as in a camel-cased version. I could not find any other way and I can live with the "redundant" members in original notation for now.
Here's the part of my configuration:
{
test: /\.css$/,
exclude: /node_modules/,
use: [
'style-loader',
'@teamsupercell/typings-for-css-modules-loader',
{
loader: 'css-loader',
options: {
modules: {
exportLocalsConvention: 'camelCase',
localIdentName: '[local]--[hash:base64:5]',
mode: 'local',
},
},
},
],
},
from typings-for-css-modules-loader.
Related Issues (20)
- Type files not being generated with named/default import HOT 5
- Request to add eslint support for formatter option
- Cannot find module... type declarations.ts HOT 1
- support camelCase HOT 1
- Goto to definition in VScode to the scss file
- Expectation for generated typings file HOT 1
- Special chars in CSS Class Names not Stripped from Exports (Causes Error) HOT 3
- [Question] Use with nextjs?
- Support css-loader v5 HOT 4
- Using a dynamic index HOT 1
- Error when importing inside :global HOT 3
- Request to add support for filtering files ends with ".module(s).(css|less|sass)" HOT 1
- ampersand dash syntax does not produce camel case name HOT 1
- Does not work with css-loader 6 + esmodules + namedExport: true HOT 4
- Request to have an option to specify the output directory HOT 1
- Shouldn't create / write to files under node_modules
- Critical vulnerability issue in dependency `loader-utils` version 1.2.3 HOT 6
- Files *.scss.d.ts are not regenerated / updated
- Can I have only camelCased classnames in the generated types?
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 typings-for-css-modules-loader.