Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

CSS fixes and dependency upgrades #7564

Merged
merged 11 commits into from Jan 17, 2022
Merged

CSS fixes and dependency upgrades #7564

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
c068201
Preserve quotes in url dependencies to avoid escaping issues
devongovett Jan 16, 2022
2d5a823
Use a default set of modern browser targets
devongovett Jan 17, 2022
7d620f2
Remove css-modules-loader-core
devongovett Jan 17, 2022
9f3f047
Bump postcss and htmlnano dependencies
devongovett Jan 17, 2022
2bc32a4
Bump vue and svgr deps
devongovett Jan 17, 2022
68b28f3
Dedup babel deps
devongovett Jan 17, 2022
a313f76
Bump more dependencies
devongovett Jan 17, 2022
d57336f
Bump @parcel/css
devongovett Jan 17, 2022
0831c82
Fix package manager with @parcel/css
devongovett Jan 17, 2022
2c00f54
Revert babel upgrade
devongovett Jan 17, 2022
ac7d85f
Update package.json
devongovett Jan 17, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Expand Up @@ -46,7 +46,7 @@
"gulp": "^4.0.2",
"gulp-babel": "^8.0.0",
"husky": "^6.0.0",
"lerna": "^3.3.2",
"lerna": "^3.22.1",
"lint-staged": "^10.2.11",
"mocha": "^8.3.0",
"mocha-junit-reporter": "^2.0.0",
Expand Down
2 changes: 1 addition & 1 deletion packages/core/core/package.json
View file
Open in desktop
Expand Up @@ -44,7 +44,7 @@
"dotenv": "^7.0.0",
"dotenv-expand": "^5.1.0",
"json-source-map": "^0.6.1",
"json5": "^1.0.1",
"json5": "^2.2.0",
"micromatch": "^4.0.2",
"msgpackr": "^1.5.1",
"nullthrows": "^1.1.1",
Expand Down
30 changes: 17 additions & 13 deletions packages/core/core/src/requests/TargetRequest.js
View file
Open in desktop
Expand Up @@ -74,6 +74,16 @@ const COMMON_TARGETS = {
},
};

const DEFAULT_ENGINES = {
node: 'current',
browsers: [
'last 1 Chrome version',
'last 1 Safari version',
'last 1 Firefox version',
'last 1 Edge version',
],
};

export type TargetRequest = {|
id: string,
+type: 'target_request',
Expand Down Expand Up @@ -317,7 +327,9 @@ export class TargetResolver {
publicUrl: this.options.defaultTargetOptions.publicUrl ?? '/',
env: createEnvironment({
context: 'browser',
engines: {},
engines: {
browsers: DEFAULT_ENGINES.browsers,
},
shouldOptimize: this.options.defaultTargetOptions.shouldOptimize,
outputFormat: this.options.defaultTargetOptions.outputFormat,
shouldScopeHoist:
Expand Down Expand Up @@ -473,23 +485,15 @@ export class TargetResolver {

let defaultEngines = this.options.defaultTargetOptions.engines;
let context = browsers ?? !node ? 'browser' : 'node';
if (
context === 'browser' &&
pkgEngines.browsers == null &&
defaultEngines?.browsers != null
) {
if (context === 'browser' && pkgEngines.browsers == null) {
pkgEngines = {
...pkgEngines,
browsers: defaultEngines.browsers,
browsers: defaultEngines?.browsers ?? DEFAULT_ENGINES.browsers,
};
} else if (
context === 'node' &&
pkgEngines.node == null &&
defaultEngines?.node != null
) {
} else if (context === 'node' && pkgEngines.node == null) {
pkgEngines = {
...pkgEngines,
node: defaultEngines.node,
node: defaultEngines?.node ?? DEFAULT_ENGINES.node,
};
}

Expand Down
44 changes: 36 additions & 8 deletions packages/core/core/test/TargetRequest.test.js
View file
Open in desktop
Expand Up @@ -675,9 +675,16 @@ describe('TargetResolver', () => {
distEntry: 'index.js',
publicUrl: '/',
env: {
id: 'bebcf0293c911f03',
id: '6aafdb9eaa4a3812',
context: 'node',
engines: {},
engines: {
browsers: [
'last 1 Chrome version',
'last 1 Safari version',
'last 1 Firefox version',
'last 1 Edge version',
],
},
includeNodeModules: false,
isLibrary: true,
outputFormat: 'commonjs',
Expand Down Expand Up @@ -1046,9 +1053,16 @@ describe('TargetResolver', () => {
distEntry: 'index.mjs',
publicUrl: '/',
env: {
id: 'fa77701547623794',
id: '439701173a9199ea',
context: 'browser',
engines: {},
engines: {
browsers: [
'last 1 Chrome version',
'last 1 Safari version',
'last 1 Firefox version',
'last 1 Edge version',
],
},
includeNodeModules: true,
outputFormat: 'esmodule',
isLibrary: false,
Expand Down Expand Up @@ -1084,9 +1098,16 @@ describe('TargetResolver', () => {
distEntry: 'index.js',
publicUrl: '/',
env: {
id: 'fa77701547623794',
id: '439701173a9199ea',
context: 'browser',
engines: {},
engines: {
browsers: [
'last 1 Chrome version',
'last 1 Safari version',
'last 1 Firefox version',
'last 1 Edge version',
],
},
includeNodeModules: true,
outputFormat: 'esmodule',
isLibrary: false,
Expand Down Expand Up @@ -1208,9 +1229,16 @@ describe('TargetResolver', () => {
distDir: '.parcel-cache/dist',
publicUrl: '/',
env: {
id: '4a236f9275d0a351',
id: 'd6ea1d42532a7575',
context: 'browser',
engines: {},
engines: {
browsers: [
'last 1 Chrome version',
'last 1 Safari version',
'last 1 Firefox version',
'last 1 Edge version',
],
},
includeNodeModules: true,
outputFormat: 'global',
isLibrary: false,
Expand Down
12 changes: 6 additions & 6 deletions packages/core/integration-tests/package.json
View file
Open in desktop
Expand Up @@ -32,21 +32,21 @@
"exif-reader": "^1.0.3",
"get-port": "^5.0.0",
"graphql": "^15.0.0",
"http-proxy-middleware": "^1.0.0",
"http-proxy-middleware": "^2.0.1",
"js-yaml": "^4.0.0",
"jsdom": "^15.2.1",
"json5": "^1.0.1",
"jsdom": "^19.0.0",
"json5": "^2.2.0",
"kotlin": "^1.3.11",
"lodash": "^4.17.15",
"marked": "^0.6.1",
"ncp": "^2.0.0",
"nib": "^1.1.2",
"node-elm-compiler": "^5.0.5",
"parcel": "^2.2.0",
"postcss": "^8.3.0",
"postcss-custom-properties": "^11.0.0",
"postcss": "^8.4.5",
"postcss-custom-properties": "^12.1.2",
"postcss-import": "^14.0.2",
"posthtml-include": "^1.7.1",
"posthtml-include": "^1.7.2",
"posthtml-obfuscate": "^0.1.5",
"preact": "^10.5.9",
"react": "^17.0.2",
Expand Down
38 changes: 29 additions & 9 deletions packages/core/integration-tests/test/css.js
View file
Open in desktop
Expand Up @@ -163,17 +163,20 @@ describe('css', () => {
path.join(distDir, 'index.css'),
'utf8',
);
assert(/url\(test\.[0-9a-f]+\.woff2\)/.test(css));
assert(css.includes('url(http://google.com)'));
assert(/url\("test\.[0-9a-f]+\.woff2"\)/.test(css));
assert(css.includes('url("http://google.com")'));
assert(css.includes('.index'));
assert(css.includes('url(data:image/gif;base64,quotes)'));
assert(css.includes('url("data:image/gif;base64,quotes")'));
assert(css.includes('.quotes'));
assert(css.includes('url(data:image/gif;base64,no-quote)'));
assert(css.includes('url("data:image/gif;base64,no-quote")'));
assert(css.includes('.no-quote'));

assert(
await outputFS.exists(
path.join(distDir, css.match(/url\((test\.[0-9a-f]+\.woff2)\)/)[1]),
path.join(
distDir,
css.match(/url\("(test\.[0-9a-f]+\.woff2)"\)/)[1],
),
),
);
});
Expand Down Expand Up @@ -217,9 +220,9 @@ describe('css', () => {
);
assert(css.includes('url(http://google.com)'), 'url() found');
assert(css.includes('.index'), '.index found');
assert(css.includes('url(data:image/gif;base64,quotes)'));
assert(/url\("?data:image\/gif;base64,quotes"?\)/.test(css));
assert(css.includes('.quotes'));
assert(css.includes('url(data:image/gif;base64,no-quote)'));
assert(/url\("?data:image\/gif;base64,no-quote"?\)/.test(css));
assert(css.includes('.no-quote'));

assert(
Expand Down Expand Up @@ -362,7 +365,7 @@ describe('css', () => {
assert.equal(
css.trim(),
`.svg-img {
background-image: url(data:image/svg+xml,%3Csvg%20width%3D%22120%22%20height%3D%22120%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cfilter%20id%3D%22blur-_.%21~%2a%22%3E%0A%20%20%20%20%3CfeGaussianBlur%20stdDeviation%3D%225%22%3E%3C%2FfeGaussianBlur%3E%0A%20%20%3C%2Ffilter%3E%0A%20%20%3Ccircle%20cx%3D%2260%22%20cy%3D%2260%22%20r%3D%2250%22%20fill%3D%22green%22%20filter%3D%22url%28%27%23blur-_.%21~%2a%27%29%22%3E%3C%2Fcircle%3E%0A%3C%2Fsvg%3E%0A);
background-image: url("data:image/svg+xml,%3Csvg%20width%3D%22120%22%20height%3D%22120%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cfilter%20id%3D%22blur-_.%21~%2a%22%3E%0A%20%20%20%20%3CfeGaussianBlur%20stdDeviation%3D%225%22%3E%3C%2FfeGaussianBlur%3E%0A%20%20%3C%2Ffilter%3E%0A%20%20%3Ccircle%20cx%3D%2260%22%20cy%3D%2260%22%20r%3D%2250%22%20fill%3D%22green%22%20filter%3D%22url%28%27%23blur-_.%21~%2a%27%29%22%3E%3C%2Fcircle%3E%0A%3C%2Fsvg%3E%0A");
}`,
);
});
Expand All @@ -375,7 +378,7 @@ describe('css', () => {
);
assert(
css.startsWith(`.webp-img {
background-image: url(data:image/webp;base64,UklGR`),
background-image: url("data:image/webp;base64,UklGR`),
);
});

Expand Down Expand Up @@ -466,4 +469,21 @@ describe('css', () => {
});
});
}

it('should support css nesting with @parcel/css', async function () {
let b = await originalBundle(
path.join(__dirname, '/integration/css-nesting/a.css'),
{
defaultConfig:
path.dirname(require.resolve('@parcel/test-utils')) +
'/.parcelrc-css',
defaultTargetOptions: {
engines: {},
},
},
);

let res = await outputFS.readFile(b.getBundles()[0].filePath, 'utf8');
assert(res.includes('.foo.bar'));
});
});
4 changes: 2 additions & 2 deletions packages/core/integration-tests/test/html.js
View file
Open in desktop
Expand Up @@ -615,7 +615,7 @@ describe('html', function () {
);

// mergeStyles
assert(html.includes('<style>h1{color:red}</style>'));
assert(html.includes('<style>h1{color:red}div{font-size:20px}</style>'));

assert(!html.includes('sourceMappingURL'));

Expand Down Expand Up @@ -943,7 +943,7 @@ describe('html', function () {
let contents = await outputFS.readFile(b.getBundles()[0].filePath, 'utf8');
assert(
contents.includes(
'<svg><symbol id="all"><rect width="100" height="100"/></symbol></svg><svg xmlns:xlink="http://www.w3.org/1999/xlink"><use xlink:href="#all" href="#all"/></svg>',
'<svg><symbol id="all"><rect width="100" height="100"/></symbol></svg><svg><use xlink:href="#all" href="#all"/></svg>',
),
);
});
Expand Down
7 changes: 7 additions & 0 deletions packages/core/integration-tests/test/integration/css-nesting/a.css
View file
Open in desktop
@@ -0,0 +1,7 @@
.foo {
color: red;

&.bar {
color: blue;
}
}
7 changes: 7 additions & 0 deletions packages/core/integration-tests/test/integration/css-nesting/package.json
View file
Open in desktop
@@ -0,0 +1,7 @@
{
"@parcel/transformer-css": {
"drafts": {
"nesting": true
}
}
}
Empty file added packages/core/integration-tests/test/integration/css-nesting/yarn.lock
View file
Open in desktop
Empty file.
15 changes: 0 additions & 15 deletions packages/core/integration-tests/test/integration/vue-functional/functional.vue
View file
Open in desktop

This file was deleted.

6 changes: 3 additions & 3 deletions packages/core/integration-tests/test/javascript.js
View file
Open in desktop
Expand Up @@ -4108,7 +4108,7 @@ describe('javascript', function () {
}

.svg-img {
background-image: url(data:image/svg+xml,%3Csvg%3E%0A%0A%3C%2Fsvg%3E%0A);
background-image: url("data:image/svg+xml,%3Csvg%3E%0A%0A%3C%2Fsvg%3E%0A");
}`,
),
);
Expand Down Expand Up @@ -4150,7 +4150,7 @@ describe('javascript', function () {
}

.svg-img {
background-image: url(data:image/svg+xml,%3Csvg%3E%0A%0A%3C%2Fsvg%3E%0A);
background-image: url("data:image/svg+xml,%3Csvg%3E%0A%0A%3C%2Fsvg%3E%0A");
}`,
),
);
Expand Down Expand Up @@ -4238,7 +4238,7 @@ describe('javascript', function () {
}

.svg-img {
background-image: url(data:image/svg+xml,%3Csvg%3E%0A%0A%3C%2Fsvg%3E%0A);
background-image: url("data:image/svg+xml,%3Csvg%3E%0A%0A%3C%2Fsvg%3E%0A");
}`,
),
);
Expand Down
2 changes: 1 addition & 1 deletion packages/core/integration-tests/test/postcss.js
View file
Open in desktop
Expand Up @@ -66,7 +66,7 @@ describe('postcss', () => {

let css = await outputFS.readFile(path.join(distDir, 'index.css'), 'utf8');

assert(css.includes('url(data:image/gif;base64,quotes)'));
assert(css.includes('url("data:image/gif;base64,quotes")'));
});

it('should automatically install postcss plugins if needed', async () => {
Expand Down
6 changes: 3 additions & 3 deletions packages/core/integration-tests/test/sass.js
View file
Open in desktop
Expand Up @@ -132,13 +132,13 @@ describe('sass', function () {
assert.equal(output(), 2);

let css = await outputFS.readFile(path.join(distDir, 'index.css'), 'utf8');
assert(/url\(test\.[0-9a-f]+\.woff2\)/.test(css));
assert(css.includes('url(http://google.com)'));
assert(/url\("test\.[0-9a-f]+\.woff2"\)/.test(css));
assert(css.includes('url("http://google.com")'));
assert(css.includes('.index'));

assert(
await outputFS.exists(
path.join(distDir, css.match(/url\((test\.[0-9a-f]+\.woff2)\)/)[1]),
path.join(distDir, css.match(/url\("(test\.[0-9a-f]+\.woff2)"\)/)[1]),
),
);
});
Expand Down
2 changes: 1 addition & 1 deletion packages/core/integration-tests/test/svg-react.js
View file
Open in desktop
Expand Up @@ -16,7 +16,7 @@ describe('svg-react', function () {

let file = await outputFS.readFile(b.getBundles()[0].filePath, 'utf-8');
assert(!file.includes('inkscape'));
assert(file.includes('function SvgIcon'));
assert(file.includes('const SvgIcon ='));
assert(file.includes('_react.createElement("svg"'));
});
});
4 changes: 2 additions & 2 deletions packages/core/integration-tests/test/svg.js
View file
Open in desktop
Expand Up @@ -189,9 +189,9 @@ describe('svg', function () {
assert(svg.includes(':root {\n fill: red;\n}'));
assert(
svg.includes(
`"fill: url(${path.basename(
`"fill: url(&quot;${path.basename(
b.getBundles().find(b => b.name.startsWith('gradient')).filePath,
)}#myGradient)"`,
)}#myGradient&quot;)`,
),
);
assert(svg.includes('<script>'));
Expand Down