Skip to content

Commit

Permalink
CSS fixes and dependency upgrades (#7564)
Browse files Browse the repository at this point in the history
  • Loading branch information
@devongovett
devongovett committed Jan 17, 2022
1 parent 4745cd3 commit 0cf11f7
Show file tree
Hide file tree
Showing 38 changed files with 1,190 additions and 1,528 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
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
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
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
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
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
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
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
@@ -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
@@ -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
Empty file.
15 changes: 0 additions & 15 deletions packages/core/integration-tests/test/integration/vue-functional/functional.vue
View file

This file was deleted.

6 changes: 3 additions & 3 deletions packages/core/integration-tests/test/javascript.js
View file
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
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
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
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
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

0 comments on commit 0cf11f7

Please sign in to comment.