CSS direct descendant not working properly on production build - css

I suspect this is an issue with webpack, but I cannot seem to get this to work. My only CSS file (main.css) contains the following code:
.numpad > input {
text-align: center;
border: 2px solid blue;
margin: auto;
}
However when I publish the application, the CSS file shows the following:
.numpad {
text-align: center;
border: 2px solid blue;
margin: auto;
}
.numpad > input {
text-align: center;
border: 2px solid blue;
margin: auto;
}
I have searched the entire solution for any sort of duplicate that could be causing the first. It doesn't exist.
My webpack config is as follows:
module.exports = (env) => {
const isDevBuild = !(env && env.prod);
return [{
stats: { modules: false },
entry: { 'main': './ClientApp/boot.tsx' },
resolve: { extensions: ['.js', '.jsx', '.ts', '.tsx'] },
output: {
path: path.join(__dirname, bundleOutputDir),
filename: '[name].js',
publicPath: 'dist/'
},
devtool: 'inline-source-map',
module: {
rules: [
{ test: /\.tsx?$/, include: /ClientApp/, use: 'awesome-typescript-loader?silent=true' },
{ test: /\.css$/, use: isDevBuild ? ['style-loader', 'css-loader'] : ExtractTextPlugin.extract({ use: 'css-loader?minimize' }) },
{ test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' },
{ test: /\.js$/, include: /src/, exclude: /node_modules/, use: { loader: "babel-loader", options: { presets: ['env'] } } }
]
},
plugins: [
new CheckerPlugin(),
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./wwwroot/dist/vendor-manifest.json')
}),
new CleanWebpackPlugin(['dist'])
].concat(isDevBuild ? [
// Plugins that apply in development builds only
new webpack.SourceMapDevToolPlugin({
filename: '[file].map', // Remove this line if you prefer inline source maps
moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
})
] : [
// Plugins that apply in production builds only
new webpack.optimize.UglifyJsPlugin(),
new ExtractTextPlugin('main.css')
])
}];
};
Any ideas for why there is a duplicate being created?

Related

CSS not getting imported in component

I have the following Test component:
Test.css
.SomeClass {
background-color: blue;
width: 100px;
height: 100px;
}
Test.tsx
import React from 'react';
import './Test.css';
export const Test = () => {
return (
<div className={'SomeClass'}>
hello
</div>
);
};
Relevant section of webpack config:
{
test: /\.css$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
sourceMap: !isProduction,
modules: {
localIdentName: '[local]',
},
},
}],
},
The problem is that the styles are not applied. On inspection, the div looks like this:
<div class="SomeClass">hello</div>
but there is no "SomeClass" css.
I suspect it is to do with some webpack config. I tried this too: use: ['style-loader', 'css-loader'] instead of the above use array, but no luck.
Edit
This project uses react-jss.

Importing global css custom variables

I'm trying to use webpack with postcss to import a theme-variables.css file that contains my css custom variables.
//theme-variables.css
:root {
--babyBlue: blue;
}
Basically I want any css that imports theme-variable to be able to access these css custom properties and resolve to static values using postcss-css-variables.
//style.css
#import "./theme-variable.css";
div {
display: flex;
color: var(--babyBlue);
}
becomes
//main.css
div {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
color: blue;
}
However I keep getting webpack errors variable --babyBlue is undefined and used without a fallback
main.js ends up looking like this:
:root {
--babyBlue: blue;
}
div {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
color: undefined;
}
Here's my webpack (index.js requires styles.js):
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: { main: "./src/index.js" },
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name].js"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader
},
{
loader: "css-loader",
options: { importLoaders: 1 }
},
{
loader: "postcss-loader",
options: {
ident: "postcss",
plugins: loader => [
require("postcss-css-variables")(),
require("postcss-cssnext")(),
require("autoprefixer")(),
require("postcss-import")()
]
}
}
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: "[name].css",
chunkFilename: "[id].css"
})
]
};
Solution:
The postcss-import plugin has to come first HOWEVER the plugins for Postcss-loader does not go in reverse order like webpack loaders do.
This fixes it:
loader: "postcss-loader",
options: {
ident: "postcss",
plugins: loader => [
require("postcss-import")()
require("postcss-css-variables")(),
require("postcss-cssnext")(),
require("autoprefixer")(),
]
}

Getting: Unexpected token { expected ; while parsing pure CSS file

The application builds successfully. But when I load it in the browser, it produces the error 'Unexpected token, expected ;' with a marker at the first { character in the css file. I believed I followed the docs but this error will not go away. Any idea what could be causing this error?
webpack.config.js
module.exports = {
...
module: {
rules: [{
test: /\.jsx?$/,
use: 'eslint-loader',
exclude: /node_modules/,
include: Dir.src
}, {
test: /\.jsx?$/,
use: 'babel-loader',
exclude: /node_modules/
}, {
test: /\.json$/,
use: 'json-loader'
}, {
test: /\.woff2(\?[a-z0-9]+)?$/,
use: [{
loader: 'url-loader',
query: {
limit: 10000,
mimetype: 'application/font-woff2'
}
}]
}, {
test: /\.(eot|gif|jpe?g|mp+|png|svg|tff|wav|woff*)$/,
use: [{
loader: 'file-loader',
query: {
limit: 10000
}
}]
}, {
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: 'file-loader'
}, {
test: /favicon\.ico$/,
use: [{
loader: 'url-loader',
query: {
limit: 1,
name: '[name].[ext]',
}
}]
}, {
test: /\.css$/,
use: ['style-loader', 'css-loader']
}, {
test: /\.s[a,c]ss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
]
},
...
}
index.jsx
import React from 'react';
import './index.css';
...
index.css
div { text-overflow: ellipsis; }
button {
border-radius: 0 !important;
cursor: pointer;
padding: 0.6vh 1.2vw;
}
button, .btn, .form-control { border-width: 0.1vh 0.05vw; }
button, .btn, .btn > *, [class^='btn-'], [class^='btn'] > * { font-size: 1.8vmin; }
.btn-group-sm > .btn, .btn-sm {
font-size: 77%;
line-height: 1.5;
}
Produces:
+ 1446 hidden modules
webpack: bundle is now VALID.
{ SyntaxError: C:/simproduct/component/index.css: Unexpected token, expected ; (1:4)
> 1 | div { text-overflow: ellipsis; }
| ^
2 | button {
3 | border-radius: 0 !important;
4 | cursor: pointer;
at Parser.pp$5.raise (C:\simproduct\node_modules\babylon\lib\index.js:4454:13)
at Parser.pp.unexpected (C:\simproduct\node_modules\babylon\lib\index.js:1761:8)
at Parser.pp.semicolon (C:\simproduct\node_modules\babylon\lib\index.js:1742:38)
at Parser.pp$1.parseExpressionStatement (C:\simproduct\node_modules\babylon\lib\index.js:2236:8)
Try the following configuration for test: /.css$/. Make sure that you have postcss-loader in your configuration.
test: /\.css$/,
use: ['style-loader', {loader: 'css-loader', options: { importLoaders: 1 }},
'postcss-loader'
]
}
You will need to have postcss.config.js file; the same location you have your package.json. Add the following; or change is accordingly
module.exports = {
plugins: {
'postcss-import': {},
'postcss-cssnext': {
browsers: ['last 2 versions', '>5%']
}
}
};
Edit
Try to add the following query to your jsx loaders as follows:
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [{
loader: 'babel-loader',
query: {
presets: ['react', 'es2015','stage-1']
}
}

Nested scss rule not rendering in react project

I may be missing something blatantly obvious, but for some reason when I try to nest sass rules, nothing renders. However, every other aspect seems fine.
In this case, hover isn't working.
jsx:
const SidebarSection = (props) =>
<div className={styles.sidebarPane}>
<ul className={styles.navList}>
<li className={styles.navElement}>{props.element}</li>
</ul>
</div>;
scss example rule:
.navElement {
cursor: pointer;
margin: .5rem 0 0 0;
&:hover {
color:yellow;
}
}
Webpack css/sccs loaders:
test: /\.(css|scss)$/,
use: [{
loader: 'style-loader',
}, {
loader: 'css-loader',
options: {
modules: true,
},
}, {
loader: 'postcss-loader',
}

Webpack compiling CSS into strange classnames

I am currently using webpack while developing React app with a NodeJS backend.
I am having trouble with styling the app because it seems webpack trying to do something with my css where it ends up changing the classnames.
For instance in my base.css file I have this:
body {
background: #ECEFF1;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 15px;
line-height: 1.7;
margin: 0 auto;
padding: 30px;
max-width: 980px;
}
.progress {
background-color: #FFECB3;
}
.progress .indeterminate {
background-color: #FFC107;
}
Which when I load the page and look in the head is converted to a <style> div with these classnames:
<style type="text/css">
body {
background: #ECEFF1;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 15px;
line-height: 1.7;
margin: 0 auto;
padding: 30px;
max-width: 980px;
}
.base---progress---1RR8Z {
background-color: #FFECB3;
}
.base---progress---1RR8Z .base---indeterminate---23sZH {
background-color: #FFC107;
}
So progress styles aren't being picked up on the page because they are changed into this format. How can I avoid this or have React change the class names appropriately?
If I removed this from my webpack config:
{
test: /\.css$/,
loader: 'style!css?modules&localIdentName=[name]---[local]---[hash:base64:5]'
}
Line it says that it can't find the css file but the path it errors out on is valid.
Webpack config for good measure:
'use strict';
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
devtool: 'eval-source-map',
entry: [
'webpack-hot-middleware/client?reload=true',
path.join(__dirname, 'public/app/main.js')
],
output: {
path: path.join(__dirname, '/dist/'),
filename: '[name].js',
publicPath: '/'
},
plugins: [
new HtmlWebpackPlugin({
template: 'public/app/index.html',
inject: 'body',
filename: 'index.html'
}),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development')
})
],
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
"presets": ["react", "es2015", "stage-0", "react-hmre"]
}
}, {
test: /\.json?$/,
loader: 'json'
}, {
test: /\.css$/,
loader: 'style!css?modules&localIdentName=[name]---[local]---[hash:base64:5]'
}]
}
};
Your config currently uses css-modules. To disable it
change 'style!css?modules&localIdentName=[name]---[local]---[hash:base64:5]' to 'style!css' in the loader for css files.

Resources